npm - @anker-in/headless-ui - Versions diffs - 1.1.4 → 1.1.6 - Mend

@anker-in/headless-ui 1.1.4 → 1.1.6

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 (344) hide show

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dialog.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { Cross2Icon } from '@radix-ui/react-icons'\n\nimport { cn } from '../helpers/index.js'\n\nconst Dialog = DialogPrimitive.Root\nDialog.displayName = 'Dialog'\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\ntype OverlayProps = DialogPrimitive.DialogOverlayProps & React.HTMLAttributes<HTMLDivElement>\n\nconst DialogOverlay = React.forwardRef<HTMLDivElement, OverlayProps>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-[1000] bg-black/80',\n      className\n    )}\n    {...props}\n  />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n    overlayClassName?: string\n  }\n>(({ className, children, overlayClassName, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay className={overlayClassName} />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] tablet:rounded-lg fixed left-1/2 top-1/2 z-[1001] grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200',\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.Close className=\"dialog-close-button ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none\">\n        <Cross2Icon className=\"size-4 dialog-close-icon\" />\n        <span className=\"sr-only\">Close</span>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Content>\n  </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn('tablet:text-left flex flex-col space-y-1.5 text-center', className)} {...props} />\n)\nDialogHeader.displayName = 'DialogHeader'\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn('tablet:flex-row tablet:justify-end tablet:space-x-2 flex flex-col-reverse', className)}\n    {...props}\n  />\n)\nDialogFooter.displayName = 'DialogFooter'\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn('text-lg font-semibold leading-none tracking-tight', className)}\n    {...props}\n  />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n}\n"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { Cross2Icon } from '@radix-ui/react-icons'\n\nimport { cn } from '../helpers/index.js'\n\nconst Dialog = DialogPrimitive.Root\nDialog.displayName = 'Dialog'\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\ntype OverlayProps = DialogPrimitive.DialogOverlayProps & React.HTMLAttributes<HTMLDivElement>\n\nconst DialogOverlay = React.forwardRef<HTMLDivElement, OverlayProps>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-[1000] bg-black/80',\n      className\n    )}\n    {...props}\n  />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n    overlayClassName?: string\n  }\n>(({ className, children, overlayClassName, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay className={overlayClassName} />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] tablet:rounded-lg fixed left-1/2 top-1/2 z-[1001] grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200',\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.Close className=\"dialog-close-button ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none\">\n        <Cross2Icon className=\"dialog-close-icon size-4\" />\n        <span className=\"sr-only\">Close</span>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Content>\n  </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn('tablet:text-left flex flex-col space-y-1.5 text-center', className)} {...props} />\n)\nDialogHeader.displayName = 'DialogHeader'\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn('tablet:flex-row tablet:justify-end tablet:space-x-2 flex flex-col-reverse', className)}\n    {...props}\n  />\n)\nDialogFooter.displayName = 'DialogFooter'\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn('text-lg font-semibold leading-none tracking-tight', className)}\n    {...props}\n  />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n}\n"],
   "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,YAAAE,EAAA,gBAAAC,EAAA,kBAAAC,EAAA,sBAAAC,EAAA,iBAAAC,EAAA,iBAAAC,EAAA,kBAAAC,EAAA,iBAAAC,EAAA,gBAAAC,EAAA,kBAAAC,IAAA,eAAAC,EAAAZ,GAoBE,IAAAa,EAAA,6BAlBFC,EAAuB,oBACvBC,EAAiC,qCACjCC,EAA2B,iCAE3BC,EAAmB,+BAEnB,MAAMf,EAASa,EAAgB,KAC/Bb,EAAO,YAAc,SAErB,MAAMS,EAAgBI,EAAgB,QAEhCN,EAAeM,EAAgB,OAE/BZ,EAAcY,EAAgB,MAI9BP,EAAgBM,EAAM,WAAyC,CAAC,CAAE,UAAAI,EAAW,GAAGC,CAAM,EAAGC,OAC7F,OAACL,EAAgB,QAAhB,CACC,IAAKK,EACL,aAAW,MACT,8JACAF,CACF,EACC,GAAGC,EACN,CACD,EACDX,EAAc,YAAcO,EAAgB,QAAQ,YAEpD,MAAMX,EAAgBU,EAAM,WAK1B,CAAC,CAAE,UAAAI,EAAW,SAAAG,EAAU,iBAAAC,EAAkB,GAAGH,CAAM,EAAGC,OACtD,QAACX,EAAA,CACC,oBAACD,EAAA,CAAc,UAAWc,EAAkB,KAC5C,QAACP,EAAgB,QAAhB,CACC,IAAKK,EACL,aAAW,MACT,8fACAF,CACF,EACC,GAAGC,EAEH,UAAAE,KACD,QAACN,EAAgB,MAAhB,CAAsB,UAAU,gPAC/B,oBAAC,cAAW,UAAU,2BAA2B,KACjD,OAAC,QAAK,UAAU,UAAU,iBAAK,GACjC,GACF,GACF,CACD,EACDX,EAAc,YAAcW,EAAgB,QAAQ,YAEpD,MAAMR,EAAe,CAAC,CAAE,UAAAW,EAAW,GAAGC,CAAM,OAC1C,OAAC,OAAI,aAAW,MAAG,yDAA0DD,CAAS,EAAI,GAAGC,EAAO,EAEtGZ,EAAa,YAAc,eAE3B,MAAMD,EAAe,CAAC,CAAE,UAAAY,EAAW,GAAGC,CAAM,OAC1C,OAAC,OACC,aAAW,MAAG,4EAA6ED,CAAS,EACnG,GAAGC,EACN,EAEFb,EAAa,YAAc,eAE3B,MAAMI,EAAcI,EAAM,WAGxB,CAAC,CAAE,UAAAI,EAAW,GAAGC,CAAM,EAAGC,OAC1B,OAACL,EAAgB,MAAhB,CACC,IAAKK,EACL,aAAW,MAAG,oDAAqDF,CAAS,EAC3E,GAAGC,EACN,CACD,EACDT,EAAY,YAAcK,EAAgB,MAAM,YAEhD,MAAMV,EAAoBS,EAAM,WAG9B,CAAC,CAAE,UAAAI,EAAW,GAAGC,CAAM,EAAGC,OAC1B,OAACL,EAAgB,YAAhB,CAA4B,IAAKK,EAAK,aAAW,MAAG,gCAAiCF,CAAS,EAAI,GAAGC,EAAO,CAC9G,EACDd,EAAkB,YAAcU,EAAgB,YAAY",
   "names": ["dialog_exports", "__export", "Dialog", "DialogClose", "DialogContent", "DialogDescription", "DialogFooter", "DialogHeader", "DialogOverlay", "DialogPortal", "DialogTitle", "DialogTrigger", "__toCommonJS", "import_jsx_runtime", "React", "DialogPrimitive", "import_react_icons", "import_helpers", "className", "props", "ref", "children", "overlayClassName"]
 }

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

@@ -1,4 +1,4 @@
-"use strict";var e=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var m=(a,t)=>{for(var i in t)e(a,i,{get:t[i],enumerable:!0})},c=(a,t,i,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of l(t))!d.call(a,n)&&n!==i&&e(a,n,{get:()=>t[n],enumerable:!(s=p(t,n))||s.enumerable});return a};var y=a=>c(e({},"__esModule",{value:!0}),a);var h={};m(h,{default:()=>f});module.exports=y(h);var o=require("react/jsx-runtime"),r=require("../helpers/utils");const g=a=>{const{className:t}=a;return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("style",{children:`span.root {
+"use strict";var e=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var m=(a,t)=>{for(var i in t)e(a,i,{get:t[i],enumerable:!0})},c=(a,t,i,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of l(t))!d.call(a,n)&&n!==i&&e(a,n,{get:()=>t[n],enumerable:!(s=p(t,n))||s.enumerable});return a};var y=a=>c(e({},"__esModule",{value:!0}),a);var h={};m(h,{default:()=>f});module.exports=y(h);var o=require("react/jsx-runtime"),r=require("../helpers/utils.js");const g=a=>{const{className:t}=a;return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("style",{children:`span.root {
   min-height: 19px;
   align-items: center;
   text-align: center;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/loadingDots.tsx"],
-  "sourcesContent": ["import { cn } from '../helpers/utils'\nimport type { FC } from 'react'\n\ninterface LoadingProps {\n  className?: string\n}\n\nconst LoadingDots: FC<LoadingProps> = props => {\n  const { className } = props\n  return (\n    <>\n      <style>{`span.root {\n  min-height: 19px;\n  align-items: center;\n  text-align: center;\n  line-height: 7;\n  display: inline-flex !important;\n}\n\nspan.root .dot {\n  height: 8px;\n  width: 8px;\n  border-radius: 100%;\n  background-color: currentColor;\n  animation-name: blink;\n  animation-duration: 1.6s;\n  animation-iteration-count: infinite;\n  animation-fill-mode: both;\n  margin: 0 2px;\n}\n\n.root .dot:nth-of-type(2) {\n  animation-delay: 0.2s;\n}\n\n.root .dot::nth-of-type(3) {\n  animation-delay: 0.4s;\n}\n\n@keyframes blink {\n  0% {\n    opacity: 0.2;\n  }\n  20% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0.2;\n  }\n}\n\n    `}</style>\n      <span className={cn('root', className)}>\n        <span className=\"dot\" key={`dot_1`} />\n        <span className=\"dot\" key={`dot_2`} />\n        <span className=\"dot\" key={`dot_3`} />\n      </span>\n    </>\n  )\n}\n\nexport default LoadingDots\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAUI,IAAAI,EAAA,6BAVJC,EAAmB,4BAOnB,MAAMC,EAAgCC,GAAS,CAC7C,KAAM,CAAE,UAAAC,CAAU,EAAID,EACtB,SACE,oBACE,oBAAC,SAAO;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,MAwCR,KACA,QAAC,QAAK,aAAW,MAAG,OAAQC,CAAS,EACnC,oBAAC,QAAK,UAAU,OAAW,OAAS,KACpC,OAAC,QAAK,UAAU,OAAW,OAAS,KACpC,OAAC,QAAK,UAAU,OAAW,OAAS,GACtC,GACF,CAEJ,EAEA,IAAON,EAAQI",
+  "sourcesContent": ["import { cn } from '../helpers/utils.js'\nimport type { FC } from 'react'\n\ninterface LoadingProps {\n  className?: string\n}\n\nconst LoadingDots: FC<LoadingProps> = props => {\n  const { className } = props\n  return (\n    <>\n      <style>{`span.root {\n  min-height: 19px;\n  align-items: center;\n  text-align: center;\n  line-height: 7;\n  display: inline-flex !important;\n}\n\nspan.root .dot {\n  height: 8px;\n  width: 8px;\n  border-radius: 100%;\n  background-color: currentColor;\n  animation-name: blink;\n  animation-duration: 1.6s;\n  animation-iteration-count: infinite;\n  animation-fill-mode: both;\n  margin: 0 2px;\n}\n\n.root .dot:nth-of-type(2) {\n  animation-delay: 0.2s;\n}\n\n.root .dot::nth-of-type(3) {\n  animation-delay: 0.4s;\n}\n\n@keyframes blink {\n  0% {\n    opacity: 0.2;\n  }\n  20% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0.2;\n  }\n}\n\n    `}</style>\n      <span className={cn('root', className)}>\n        <span className=\"dot\" key={`dot_1`} />\n        <span className=\"dot\" key={`dot_2`} />\n        <span className=\"dot\" key={`dot_3`} />\n      </span>\n    </>\n  )\n}\n\nexport default LoadingDots\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAUI,IAAAI,EAAA,6BAVJC,EAAmB,+BAOnB,MAAMC,EAAgCC,GAAS,CAC7C,KAAM,CAAE,UAAAC,CAAU,EAAID,EACtB,SACE,oBACE,oBAAC,SAAO;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,MAwCR,KACA,QAAC,QAAK,aAAW,MAAG,OAAQC,CAAS,EACnC,oBAAC,QAAK,UAAU,OAAW,OAAS,KACpC,OAAC,QAAK,UAAU,OAAW,OAAS,KACpC,OAAC,QAAK,UAAU,OAAW,OAAS,GACtC,GACF,CAEJ,EAEA,IAAON,EAAQI",
   "names": ["loadingDots_exports", "__export", "loadingDots_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "LoadingDots", "props", "className"]
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/picture.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useCallback, useMemo } from 'react'\n\nconst APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']\n\nconst MAX_SIZE = 3960\nconst FIXED_MAX_SIZE = 3980\n\nexport interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  /** picture \u5185\u90E8img \u6807\u7B7E\u7684\u7C7B\u540D */\n  imgClassName?: string\n  /** \u56FE\u7247url , \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0C\u683C\u5F0F \"url1 1920\uFF0C url2 1080, url3 767\" */\n  source?: string\n  /** \u56FE\u7247\u8D28\u91CF */\n  quality?: number\n  /** \u54CD\u5E94\u5F0F\u56FE\u7247\uFF0C\u5BF9\u5E94picture \u4E0Bsource \u7684max-width */\n  deviceSizes?: number[]\n  alt?: string\n}\nconst images = {\n  domains: ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com'],\n  deviceSizes: [375, 390, 768, 1024, 1280, 1440, 1540, 1920],\n}\n\nconst isMatchDomain = (srcDomain: string) => {\n  return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)\n}\nconst idMatchFileExtensions = (fileName: string = '') => /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)\n\n/**\n * \u4ECE URL \u4E2D\u89E3\u6790 alt \u53C2\u6570\n * @param url \u56FE\u7247 URL\n * @returns \u89E3\u6790\u51FA\u7684 alt \u503C\uFF0C\u5982\u679C\u6CA1\u6709\u5219\u8FD4\u56DE\u7A7A\u5B57\u7B26\u4E32\n */\nconst parseAltFromUrl = (url: string): string => {\n  try {\n    return new URL(url).searchParams.get('alt') || ''\n  } catch {\n    return ''\n  }\n}\n\n/**\n * \u79FB\u9664 URL \u4E2D\u7684 alt \u53C2\u6570\n * @param url \u56FE\u7247 URL\n * @returns \u79FB\u9664 alt \u53C2\u6570\u540E\u7684 URL\n */\nconst removeAltFromUrl = (url: string): string => {\n  try {\n    const urlObj = new URL(url)\n    urlObj.searchParams.delete('alt')\n    return urlObj.toString()\n  } catch {\n    return url\n  }\n}\n\nconst Picture = React.forwardRef<HTMLPictureElement, PictureProps>(\n  (\n    {\n      imgClassName = '',\n      source = '',\n      quality = 2,\n      deviceSizes = [375, 390, 767, 1023, 1024, 1279, 1440, 1439, 1539, 1919, 1920],\n      className,\n      loading = 'lazy',\n      alt = '',\n      ...rest\n    }: PictureProps,\n    ref\n  ) => {\n    const isShopifycdn = (src: string | string[]) => {\n      const domains = images?.domains || []\n      return domains.some(domain => src.includes(domain))\n    }\n\n    const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {\n      const size = width\n      const cleanSrc = removeAltFromUrl(src)\n      try {\n        const parsedUrl = new URL(cleanSrc)\n        if (!isMatchDomain(parsedUrl.hostname)) {\n          return cleanSrc\n        }\n        const fileName = parsedUrl.pathname.split('/').pop() || ''\n        if (idMatchFileExtensions(fileName)) {\n          return cleanSrc\n            ?.split('/')\n            ?.map(item => {\n              if (\n                isShopifycdn(cleanSrc) &&\n                /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)(\\?.*)?/.test(item) &&\n                /_[0-9]{2,4}x/.test(cleanSrc) === false\n              ) {\n                const name = item.split('.')\n                return name\n                  .map((v, i) => {\n                    if (i === name.length - 2) {\n                      return `${v}_${size < 3960 ? size : 3980}x`\n                    }\n                    return v\n                  })\n                  .join('.')\n              }\n              return item\n            })\n            .join('/')\n        }\n      } catch (error) {\n        return cleanSrc\n      }\n    }, [])\n\n    const sourceSrcSet = useCallback(\n      ({ srcArr, width }: { srcArr: string[][]; width: number }) => {\n        const computedWidth = width * quality\n        const defaultSrc = imgSrcSetsize({ src: srcArr[0][0], width: computedWidth })\n        \n        const matchingSrc = srcArr\n          .filter(([, breakpoint]) => breakpoint && parseInt(breakpoint, 10) >= width)\n          .map(([src]) => imgSrcSetsize({ src, width: computedWidth }))\n          .pop()\n        \n        return <source key={width} srcSet={matchingSrc || defaultSrc} media={`(max-width: ${width}px)`} />\n      },\n      [imgSrcSetsize, quality]\n    )\n\n    const sourceList = useMemo(() => {\n      if (typeof source !== 'string' || !source) return []\n      \n      const srcArr = source\n        .replace(/[\\r\\n]/g, '')\n        .replace(/\\s\\s+/g, ' ')\n        .split(',')\n        .map(item => item.split(' ').filter(Boolean))\n\n      // \u4ECE URL \u4E2D\u89E3\u6790 alt \u53C2\u6570\uFF0C\u4F18\u5148\u4F7F\u7528\u7B2C\u4E00\u4E2A\u6709 alt \u53C2\u6570\u7684 URL\n      const parsedAlt = alt || srcArr\n        .map(item => item[0])\n        .filter(Boolean)\n        .map(parseAltFromUrl)\n        .find(Boolean) || ''\n\n      const sources = deviceSizes.map(width => sourceSrcSet({ srcArr, width }))\n      const defaultImg = imgSrcSetsize({ src: srcArr[0][0], width: 1920 * quality })\n\n      return [\n        ...sources,\n        <img key=\"default\" src={defaultImg} className={`w-full ${imgClassName}`} loading={loading} alt={parsedAlt} {...rest} />\n      ]\n    }, [deviceSizes, imgClassName, imgSrcSetsize, quality, source, sourceSrcSet, alt])\n\n    return (\n      <picture ref={ref} className={`block overflow-hidden ${className}`}>\n        {sourceList}\n        {rest.children}\n      </picture>\n    )\n  }\n)\nexport default Picture\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useCallback, useMemo } from 'react'\n\nconst APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']\n\nconst MAX_SIZE = 3960\nconst FIXED_MAX_SIZE = 3980\n\nexport interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  /** picture \u5185\u90E8img \u6807\u7B7E\u7684\u7C7B\u540D */\n  imgClassName?: string\n  /** \u56FE\u7247url , \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0C\u683C\u5F0F \"url1 1920\uFF0C url2 1080, url3 767\" */\n  source?: string\n  /** \u56FE\u7247\u8D28\u91CF */\n  quality?: number\n  /** \u54CD\u5E94\u5F0F\u56FE\u7247\uFF0C\u5BF9\u5E94picture \u4E0Bsource \u7684max-width */\n  deviceSizes?: number[]\n  alt?: string\n}\nconst images = {\n  domains: ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com'],\n  deviceSizes: [375, 390, 768, 1024, 1280, 1440, 1540, 1920],\n}\n\nconst isMatchDomain = (srcDomain: string) => {\n  return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)\n}\nconst idMatchFileExtensions = (fileName: string = '') => /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)\n\n/**\n * \u4ECE URL \u4E2D\u89E3\u6790 alt \u53C2\u6570\n * @param url \u56FE\u7247 URL\n * @returns \u89E3\u6790\u51FA\u7684 alt \u503C\uFF0C\u5982\u679C\u6CA1\u6709\u5219\u8FD4\u56DE\u7A7A\u5B57\u7B26\u4E32\n */\nconst parseAltFromUrl = (url: string): string => {\n  try {\n    return new URL(url).searchParams.get('alt') || ''\n  } catch {\n    return ''\n  }\n}\n\n/**\n * \u79FB\u9664 URL \u4E2D\u7684 alt \u53C2\u6570\n * @param url \u56FE\u7247 URL\n * @returns \u79FB\u9664 alt \u53C2\u6570\u540E\u7684 URL\n */\nconst removeAltFromUrl = (url: string): string => {\n  try {\n    const urlObj = new URL(url)\n    urlObj.searchParams.delete('alt')\n    return urlObj.toString()\n  } catch {\n    return url\n  }\n}\n\nconst Picture = React.forwardRef<HTMLPictureElement, PictureProps>(\n  (\n    {\n      imgClassName = '',\n      source = '',\n      quality = 2,\n      deviceSizes = [375, 390, 767, 1023, 1024, 1279, 1440, 1439, 1539, 1919, 1920],\n      className,\n      loading = 'lazy',\n      alt = '',\n      ...rest\n    }: PictureProps,\n    ref\n  ) => {\n    const isShopifycdn = (src: string | string[]) => {\n      const domains = images?.domains || []\n      return domains.some(domain => src.includes(domain))\n    }\n\n    const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {\n      const size = width\n      const cleanSrc = removeAltFromUrl(src)\n      try {\n        const parsedUrl = new URL(cleanSrc)\n        if (!isMatchDomain(parsedUrl.hostname)) {\n          return cleanSrc\n        }\n        const fileName = parsedUrl.pathname.split('/').pop() || ''\n        if (idMatchFileExtensions(fileName)) {\n          return cleanSrc\n            ?.split('/')\n            ?.map(item => {\n              if (\n                isShopifycdn(cleanSrc) &&\n                /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)(\\?.*)?/.test(item) &&\n                /_[0-9]{2,4}x/.test(cleanSrc) === false\n              ) {\n                const name = item.split('.')\n                return name\n                  .map((v, i) => {\n                    if (i === name.length - 2) {\n                      return `${v}_${size < 3960 ? size : 3980}x`\n                    }\n                    return v\n                  })\n                  .join('.')\n              }\n              return item\n            })\n            .join('/')\n        }\n      } catch (error) {\n        return cleanSrc\n      }\n    }, [])\n\n    const sourceSrcSet = useCallback(\n      ({ srcArr, width }: { srcArr: string[][]; width: number }) => {\n        const computedWidth = width * quality\n        const defaultSrc = imgSrcSetsize({ src: srcArr[0][0], width: computedWidth })\n\n        const matchingSrc = srcArr\n          .filter(([, breakpoint]) => breakpoint && parseInt(breakpoint, 10) >= width)\n          .map(([src]) => imgSrcSetsize({ src, width: computedWidth }))\n          .pop()\n\n        return <source key={width} srcSet={matchingSrc || defaultSrc} media={`(max-width: ${width}px)`} />\n      },\n      [imgSrcSetsize, quality]\n    )\n\n    const sourceList = useMemo(() => {\n      if (typeof source !== 'string' || !source) return []\n\n      const srcArr = source\n        .replace(/[\\r\\n]/g, '')\n        .replace(/\\s\\s+/g, ' ')\n        .split(',')\n        .map(item => item.split(' ').filter(Boolean))\n\n      // \u4ECE URL \u4E2D\u89E3\u6790 alt \u53C2\u6570\uFF0C\u4F18\u5148\u4F7F\u7528\u7B2C\u4E00\u4E2A\u6709 alt \u53C2\u6570\u7684 URL\n      const parsedAlt =\n        alt ||\n        srcArr\n          .map(item => item[0])\n          .filter(Boolean)\n          .map(parseAltFromUrl)\n          .find(Boolean) ||\n        ''\n\n      const sources = deviceSizes.map(width => sourceSrcSet({ srcArr, width }))\n      const defaultImg = imgSrcSetsize({ src: srcArr[0][0], width: 1920 * quality })\n\n      return [\n        ...sources,\n        <img\n          key=\"default\"\n          src={defaultImg}\n          className={`w-full ${imgClassName}`}\n          loading={loading}\n          alt={parsedAlt}\n          {...rest}\n        />,\n      ]\n    }, [deviceSizes, imgClassName, imgSrcSetsize, quality, source, sourceSrcSet, alt, loading])\n\n    return (\n      <picture ref={ref} className={`block overflow-hidden ${className}`}>\n        {sourceList}\n        {rest.children}\n      </picture>\n    )\n  }\n)\nexport default Picture\n"],
+  "mappings": "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",
   "names": ["picture_exports", "__export", "picture_default", "__toCommonJS", "import_jsx_runtime", "import_react", "APPEND_FILE_SUFFIX_MATCH_DOMAIN", "MAX_SIZE", "FIXED_MAX_SIZE", "images", "isMatchDomain", "srcDomain", "domain", "idMatchFileExtensions", "fileName", "parseAltFromUrl", "url", "removeAltFromUrl", "urlObj", "Picture", "React", "imgClassName", "source", "quality", "deviceSizes", "className", "loading", "alt", "rest", "ref", "isShopifycdn", "src", "imgSrcSetsize", "width", "size", "cleanSrc", "parsedUrl", "item", "name", "v", "i", "sourceSrcSet", "srcArr", "computedWidth", "defaultSrc", "matchingSrc", "breakpoint", "sourceList", "parsedAlt", "sources", "defaultImg"]
 }

package/dist/cjs/cpn-components/CpnNavigation/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var E=Object.create;var v=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var H=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var k=(e,t)=>{for(var r in t)v(e,r,{get:t[r],enumerable:!0})},g=(e,t,r,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of I(t))!R.call(e,a)&&a!==r&&v(e,a,{get:()=>t[a],enumerable:!(c=N(t,a))||c.enumerable});return e};var L=(e,t,r)=>(r=e!=null?E(H(e)):{},g(t||!e||!e.__esModule?v(r,"default",{value:e,enumerable:!0}):r,e)),S=e=>g(v({},"__esModule",{value:!0}),e);var $={};k($,{default:()=>M});module.exports=S($);var p=require("react/jsx-runtime"),i=require("react"),f=require("../../helpers/utils.js"),x=L(require("lodash.debounce"));const T=e=>{const{lists:t,styles:r,cns:c,offset:a=0,clickHandler:u}=e,[C,d]=(0,i.useState)(0),h=(0,i.useRef)(null),w=o=>{o.scrollIntoView({behavior:"smooth",inline:"center"})},y=(o,l,n)=>{d(l);const s=n.target;w(s),o.anchor&&document.querySelector(`#${o.anchor}`)?.scrollIntoView({behavior:"smooth"}),n.preventDefault(),u&&u(o,l,n)};return(0,i.useEffect)(()=>{const o=(0,x.default)(()=>{const n=[];t?.forEach(m=>{const b=document.querySelector(`#${m.anchor}`);b&&n.push(b.getBoundingClientRect().top)});const s=n.findIndex(m=>m>l+a);d(s===-1?n.length-1:s===0?0:s-1)},100),l=h.current?.getBoundingClientRect().height||0;return window.addEventListener("scroll",o),()=>{window.removeEventListener("scroll",o)}},[t,a]),(0,p.jsx)("div",{id:"nav",className:(0,f.cn)("cpn-nav-container sticky top-0 z-10 w-full bg-[var(--bgColor)]",c?.container),style:{"--bgColor":r?.bgColor||"#C6F1FF","--color":r?.color||"#333","--activeColor":r?.activeColor||"#000"},children:(0,p.jsx)("div",{className:(0,f.cn)("cpn-nav-box relative flex items-center justify-start gap-[18px] overflow-scroll px-6 text-center [&::-webkit-scrollbar]:hidden","tablet:gap-[80px] tablet:justify-center",c?.box),ref:h,children:t?.map((o,l)=>(0,p.jsx)("a",{href:`#${o.anchor}`,className:(0,f.cn)("cpn-nav-item relative cursor-pointer whitespace-nowrap py-[14px] text-[16px] font-medium leading-[1.2] text-[var(--color)] transition-all duration-200",c?.item,{[`border-[var(--activeColor)] text-[var(--activeColor)] after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:bg-[var(--activeColor)] after:transition-all after:duration-200 after:content-[""] ${c?.activeItem}`]:C===l}),onClick:n=>y(o,l,n),children:o.label},o.label))})})};var M=T;
+"use strict";var m=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var N=Object.prototype.hasOwnProperty;var I=(o,e)=>{for(var n in e)m(o,n,{get:e[n],enumerable:!0})},H=(o,e,n,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of E(e))!N.call(o,a)&&a!==n&&m(o,a,{get:()=>e[a],enumerable:!(c=y(e,a))||c.enumerable});return o};var R=o=>H(m({},"__esModule",{value:!0}),o);var S={};I(S,{default:()=>L});module.exports=R(S);var f=require("react/jsx-runtime"),i=require("react"),v=require("../../helpers/utils.js"),g=require("lodash");const k=o=>{const{lists:e,styles:n,cns:c,offset:a=0,clickHandler:u}=o,[x,d]=(0,i.useState)(0),h=(0,i.useRef)(null),C=t=>{t.scrollIntoView({behavior:"smooth",inline:"center"})},w=(t,l,r)=>{d(l);const s=r.target;C(s),t.anchor&&document.querySelector(`#${t.anchor}`)?.scrollIntoView({behavior:"smooth"}),r.preventDefault(),u&&u(t,l,r)};return(0,i.useEffect)(()=>{const t=(0,g.debounce)(()=>{const r=[];e?.forEach(p=>{const b=document.querySelector(`#${p.anchor}`);b&&r.push(b.getBoundingClientRect().top)});const s=r.findIndex(p=>p>l+a);d(s===-1?r.length-1:s===0?0:s-1)},100),l=h.current?.getBoundingClientRect().height||0;return window.addEventListener("scroll",t),()=>{window.removeEventListener("scroll",t)}},[e,a]),(0,f.jsx)("div",{id:"nav",className:(0,v.cn)("cpn-nav-container sticky top-0 z-10 w-full bg-[var(--bgColor)]",c?.container),style:{"--bgColor":n?.bgColor||"#C6F1FF","--color":n?.color||"#333","--activeColor":n?.activeColor||"#000"},children:(0,f.jsx)("div",{className:(0,v.cn)("cpn-nav-box relative flex items-center justify-start gap-[18px] overflow-scroll px-6 text-center [&::-webkit-scrollbar]:hidden","tablet:gap-[80px] tablet:justify-center",c?.box),ref:h,children:e?.map((t,l)=>(0,f.jsx)("a",{href:`#${t.anchor}`,className:(0,v.cn)("cpn-nav-item relative cursor-pointer whitespace-nowrap py-[14px] text-[16px] font-medium leading-[1.2] text-[var(--color)] transition-all duration-200",c?.item,{[`border-[var(--activeColor)] text-[var(--activeColor)] after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:bg-[var(--activeColor)] after:transition-all after:duration-200 after:content-[""] ${c?.activeItem}`]:x===l}),onClick:r=>w(t,l,r),children:t.label},t.label))})})};var L=k;
 //# sourceMappingURL=index.js.map

package/dist/cjs/cpn-components/CpnNavigation/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/cpn-components/CpnNavigation/index.tsx"],
-  "sourcesContent": ["import React, { useEffect, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport type { Nav, NavigationProps } from './types.js'\nimport debounce from 'lodash.debounce'\n\nconst CpnNavigation = (props: NavigationProps) => {\n  const { lists, styles, cns, offset = 0, clickHandler } = props\n  const [activeIndex, setActiveIndex] = useState(0)\n  const navBox = useRef<HTMLDivElement>(null)\n\n  const scrollIntoView = (ele: HTMLElement) => {\n    ele.scrollIntoView({ behavior: 'smooth', inline: 'center' })\n  }\n\n  const handleNavItemClick = (nav: Nav, index: number, e: React.SyntheticEvent<EventTarget>) => {\n    setActiveIndex(index)\n    const ele = e.target as HTMLAnchorElement\n    scrollIntoView(ele)\n    if (nav.anchor) {\n      document.querySelector(`#${nav.anchor}`)?.scrollIntoView({ behavior: 'smooth' })\n    }\n    e.preventDefault()\n    clickHandler && clickHandler(nav, index, e as React.MouseEvent<HTMLAnchorElement>)\n  }\n\n  useEffect(() => {\n    const scrollHandler = debounce(() => {\n      const sectionTops: number[] = []\n      lists?.forEach(nav => {\n        const section = document.querySelector(`#${nav.anchor}`)\n        if (section) {\n          sectionTops.push(section.getBoundingClientRect().top)\n        }\n      })\n      const index = sectionTops.findIndex(sectionTop => sectionTop > navHeight + offset)\n      setActiveIndex(index === -1 ? sectionTops.length - 1 : index === 0 ? 0 : index - 1)\n    }, 100)\n    const navHeight = navBox.current?.getBoundingClientRect().height || 0\n    window.addEventListener('scroll', scrollHandler)\n    return () => {\n      window.removeEventListener('scroll', scrollHandler)\n    }\n  }, [lists, offset])\n\n  return (\n    <div\n      id=\"nav\"\n      className={cn('cpn-nav-container sticky top-0 z-10 w-full bg-[var(--bgColor)]', cns?.container)}\n      style={\n        {\n          '--bgColor': styles?.bgColor || '#C6F1FF',\n          '--color': styles?.color || '#333',\n          '--activeColor': styles?.activeColor || '#000',\n        } as React.CSSProperties\n      }\n    >\n      <div\n        className={cn(\n          'cpn-nav-box relative flex items-center justify-start gap-[18px] overflow-scroll px-6 text-center [&::-webkit-scrollbar]:hidden',\n          'tablet:gap-[80px] tablet:justify-center',\n          cns?.box\n        )}\n        ref={navBox}\n      >\n        {lists?.map((nav, index) => {\n          return (\n            <a\n              key={nav.label}\n              href={`#${nav.anchor}`}\n              className={cn(\n                'cpn-nav-item relative cursor-pointer whitespace-nowrap py-[14px] text-[16px] font-medium leading-[1.2] text-[var(--color)] transition-all duration-200',\n                cns?.item,\n                {\n                  [`border-[var(--activeColor)] text-[var(--activeColor)] after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:bg-[var(--activeColor)] after:transition-all after:duration-200 after:content-[\"\"] ${cns?.activeItem}`]:\n                    activeIndex === index,\n                }\n              )}\n              onClick={e => handleNavItemClick(nav, index, e)}\n            >\n              {nav.label}\n            </a>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nexport default CpnNavigation\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAkEY,IAAAI,EAAA,6BAlEZC,EAAmD,iBACnDC,EAAmB,kCAEnBC,EAAqB,8BAErB,MAAMC,EAAiBC,GAA2B,CAChD,KAAM,CAAE,MAAAC,EAAO,OAAAC,EAAQ,IAAAC,EAAK,OAAAC,EAAS,EAAG,aAAAC,CAAa,EAAIL,EACnD,CAACM,EAAaC,CAAc,KAAI,YAAS,CAAC,EAC1CC,KAAS,UAAuB,IAAI,EAEpCC,EAAkBC,GAAqB,CAC3CA,EAAI,eAAe,CAAE,SAAU,SAAU,OAAQ,QAAS,CAAC,CAC7D,EAEMC,EAAqB,CAACC,EAAUC,EAAeC,IAAyC,CAC5FP,EAAeM,CAAK,EACpB,MAAMH,EAAMI,EAAE,OACdL,EAAeC,CAAG,EACdE,EAAI,QACN,SAAS,cAAc,IAAIA,EAAI,MAAM,EAAE,GAAG,eAAe,CAAE,SAAU,QAAS,CAAC,EAEjFE,EAAE,eAAe,EACjBT,GAAgBA,EAAaO,EAAKC,EAAOC,CAAwC,CACnF,EAEA,sBAAU,IAAM,CACd,MAAMC,KAAgB,EAAAC,SAAS,IAAM,CACnC,MAAMC,EAAwB,CAAC,EAC/BhB,GAAO,QAAQW,GAAO,CACpB,MAAMM,EAAU,SAAS,cAAc,IAAIN,EAAI,MAAM,EAAE,EACnDM,GACFD,EAAY,KAAKC,EAAQ,sBAAsB,EAAE,GAAG,CAExD,CAAC,EACD,MAAML,EAAQI,EAAY,UAAUE,GAAcA,EAAaC,EAAYhB,CAAM,EACjFG,EAAeM,IAAU,GAAKI,EAAY,OAAS,EAAIJ,IAAU,EAAI,EAAIA,EAAQ,CAAC,CACpF,EAAG,GAAG,EACAO,EAAYZ,EAAO,SAAS,sBAAsB,EAAE,QAAU,EACpE,cAAO,iBAAiB,SAAUO,CAAa,EACxC,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAa,CACpD,CACF,EAAG,CAACd,EAAOG,CAAM,CAAC,KAGhB,OAAC,OACC,GAAG,MACH,aAAW,MAAG,iEAAkED,GAAK,SAAS,EAC9F,MACE,CACE,YAAaD,GAAQ,SAAW,UAChC,UAAWA,GAAQ,OAAS,OAC5B,gBAAiBA,GAAQ,aAAe,MAC1C,EAGF,mBAAC,OACC,aAAW,MACT,iIACA,0CACAC,GAAK,GACP,EACA,IAAKK,EAEJ,SAAAP,GAAO,IAAI,CAACW,EAAKC,OAEd,OAAC,KAEC,KAAM,IAAID,EAAI,MAAM,GACpB,aAAW,MACT,yJACAT,GAAK,KACL,CACE,CAAC,wNAAwNA,GAAK,UAAU,EAAE,EACxOG,IAAgBO,CACpB,CACF,EACA,QAASC,GAAKH,EAAmBC,EAAKC,EAAOC,CAAC,EAE7C,SAAAF,EAAI,OAZAA,EAAI,KAaX,CAEH,EACH,EACF,CAEJ,EAEA,IAAOnB,EAAQM",
-  "names": ["CpnNavigation_exports", "__export", "CpnNavigation_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_lodash", "CpnNavigation", "props", "lists", "styles", "cns", "offset", "clickHandler", "activeIndex", "setActiveIndex", "navBox", "scrollIntoView", "ele", "handleNavItemClick", "nav", "index", "e", "scrollHandler", "debounce", "sectionTops", "section", "sectionTop", "navHeight"]
+  "sourcesContent": ["import React, { useEffect, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport type { Nav, NavigationProps } from './types.js'\nimport { debounce } from 'lodash'\n\nconst CpnNavigation = (props: NavigationProps) => {\n  const { lists, styles, cns, offset = 0, clickHandler } = props\n  const [activeIndex, setActiveIndex] = useState(0)\n  const navBox = useRef<HTMLDivElement>(null)\n\n  const scrollIntoView = (ele: HTMLElement) => {\n    ele.scrollIntoView({ behavior: 'smooth', inline: 'center' })\n  }\n\n  const handleNavItemClick = (nav: Nav, index: number, e: React.SyntheticEvent<EventTarget>) => {\n    setActiveIndex(index)\n    const ele = e.target as HTMLAnchorElement\n    scrollIntoView(ele)\n    if (nav.anchor) {\n      document.querySelector(`#${nav.anchor}`)?.scrollIntoView({ behavior: 'smooth' })\n    }\n    e.preventDefault()\n    clickHandler && clickHandler(nav, index, e as React.MouseEvent<HTMLAnchorElement>)\n  }\n\n  useEffect(() => {\n    const scrollHandler = debounce(() => {\n      const sectionTops: number[] = []\n      lists?.forEach(nav => {\n        const section = document.querySelector(`#${nav.anchor}`)\n        if (section) {\n          sectionTops.push(section.getBoundingClientRect().top)\n        }\n      })\n      const index = sectionTops.findIndex(sectionTop => sectionTop > navHeight + offset)\n      setActiveIndex(index === -1 ? sectionTops.length - 1 : index === 0 ? 0 : index - 1)\n    }, 100)\n    const navHeight = navBox.current?.getBoundingClientRect().height || 0\n    window.addEventListener('scroll', scrollHandler)\n    return () => {\n      window.removeEventListener('scroll', scrollHandler)\n    }\n  }, [lists, offset])\n\n  return (\n    <div\n      id=\"nav\"\n      className={cn('cpn-nav-container sticky top-0 z-10 w-full bg-[var(--bgColor)]', cns?.container)}\n      style={\n        {\n          '--bgColor': styles?.bgColor || '#C6F1FF',\n          '--color': styles?.color || '#333',\n          '--activeColor': styles?.activeColor || '#000',\n        } as React.CSSProperties\n      }\n    >\n      <div\n        className={cn(\n          'cpn-nav-box relative flex items-center justify-start gap-[18px] overflow-scroll px-6 text-center [&::-webkit-scrollbar]:hidden',\n          'tablet:gap-[80px] tablet:justify-center',\n          cns?.box\n        )}\n        ref={navBox}\n      >\n        {lists?.map((nav, index) => {\n          return (\n            <a\n              key={nav.label}\n              href={`#${nav.anchor}`}\n              className={cn(\n                'cpn-nav-item relative cursor-pointer whitespace-nowrap py-[14px] text-[16px] font-medium leading-[1.2] text-[var(--color)] transition-all duration-200',\n                cns?.item,\n                {\n                  [`border-[var(--activeColor)] text-[var(--activeColor)] after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:bg-[var(--activeColor)] after:transition-all after:duration-200 after:content-[\"\"] ${cns?.activeItem}`]:\n                    activeIndex === index,\n                }\n              )}\n              onClick={e => handleNavItemClick(nav, index, e)}\n            >\n              {nav.label}\n            </a>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nexport default CpnNavigation\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAkEY,IAAAI,EAAA,6BAlEZC,EAAmD,iBACnDC,EAAmB,kCAEnBC,EAAyB,kBAEzB,MAAMC,EAAiBC,GAA2B,CAChD,KAAM,CAAE,MAAAC,EAAO,OAAAC,EAAQ,IAAAC,EAAK,OAAAC,EAAS,EAAG,aAAAC,CAAa,EAAIL,EACnD,CAACM,EAAaC,CAAc,KAAI,YAAS,CAAC,EAC1CC,KAAS,UAAuB,IAAI,EAEpCC,EAAkBC,GAAqB,CAC3CA,EAAI,eAAe,CAAE,SAAU,SAAU,OAAQ,QAAS,CAAC,CAC7D,EAEMC,EAAqB,CAACC,EAAUC,EAAeC,IAAyC,CAC5FP,EAAeM,CAAK,EACpB,MAAMH,EAAMI,EAAE,OACdL,EAAeC,CAAG,EACdE,EAAI,QACN,SAAS,cAAc,IAAIA,EAAI,MAAM,EAAE,GAAG,eAAe,CAAE,SAAU,QAAS,CAAC,EAEjFE,EAAE,eAAe,EACjBT,GAAgBA,EAAaO,EAAKC,EAAOC,CAAwC,CACnF,EAEA,sBAAU,IAAM,CACd,MAAMC,KAAgB,YAAS,IAAM,CACnC,MAAMC,EAAwB,CAAC,EAC/Bf,GAAO,QAAQW,GAAO,CACpB,MAAMK,EAAU,SAAS,cAAc,IAAIL,EAAI,MAAM,EAAE,EACnDK,GACFD,EAAY,KAAKC,EAAQ,sBAAsB,EAAE,GAAG,CAExD,CAAC,EACD,MAAMJ,EAAQG,EAAY,UAAUE,GAAcA,EAAaC,EAAYf,CAAM,EACjFG,EAAeM,IAAU,GAAKG,EAAY,OAAS,EAAIH,IAAU,EAAI,EAAIA,EAAQ,CAAC,CACpF,EAAG,GAAG,EACAM,EAAYX,EAAO,SAAS,sBAAsB,EAAE,QAAU,EACpE,cAAO,iBAAiB,SAAUO,CAAa,EACxC,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAa,CACpD,CACF,EAAG,CAACd,EAAOG,CAAM,CAAC,KAGhB,OAAC,OACC,GAAG,MACH,aAAW,MAAG,iEAAkED,GAAK,SAAS,EAC9F,MACE,CACE,YAAaD,GAAQ,SAAW,UAChC,UAAWA,GAAQ,OAAS,OAC5B,gBAAiBA,GAAQ,aAAe,MAC1C,EAGF,mBAAC,OACC,aAAW,MACT,iIACA,0CACAC,GAAK,GACP,EACA,IAAKK,EAEJ,SAAAP,GAAO,IAAI,CAACW,EAAKC,OAEd,OAAC,KAEC,KAAM,IAAID,EAAI,MAAM,GACpB,aAAW,MACT,yJACAT,GAAK,KACL,CACE,CAAC,wNAAwNA,GAAK,UAAU,EAAE,EACxOG,IAAgBO,CACpB,CACF,EACA,QAASC,GAAKH,EAAmBC,EAAKC,EAAOC,CAAC,EAE7C,SAAAF,EAAI,OAZAA,EAAI,KAaX,CAEH,EACH,EACF,CAEJ,EAEA,IAAOnB,EAAQM",
+  "names": ["CpnNavigation_exports", "__export", "CpnNavigation_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_lodash", "CpnNavigation", "props", "lists", "styles", "cns", "offset", "clickHandler", "activeIndex", "setActiveIndex", "navBox", "scrollIntoView", "ele", "handleNavItemClick", "nav", "index", "e", "scrollHandler", "sectionTops", "section", "sectionTop", "navHeight"]
 }

package/dist/cjs/cpn-components/CpnNavigation/types.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import React from 'react';
 type Cns = {
     container?: string;
     box?: string;

package/dist/cjs/cpn-components/CpnNavigation/types.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var r=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var g=(n,e,s,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of o(e))!c.call(n,t)&&t!==s&&r(n,t,{get:()=>e[t],enumerable:!(i=a(e,t))||i.enumerable});return n};var v=n=>g(r({},"__esModule",{value:!0}),n);var l={};module.exports=v(l);
+"use strict";var i=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var g=(e,t,s,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of o(t))!c.call(e,n)&&n!==s&&i(e,n,{get:()=>t[n],enumerable:!(r=a(t,n))||r.enumerable});return e};var v=e=>g(i({},"__esModule",{value:!0}),e);var l={};module.exports=v(l);var p=require("react");
 //# sourceMappingURL=types.js.map

package/dist/cjs/cpn-components/CpnNavigation/types.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/cpn-components/CpnNavigation/types.ts"],
-  "sourcesContent": ["type Cns = {\n  container?: string\n  box?: string\n  item?: string\n  activeItem?: string\n}\n\nexport interface Nav {\n  label: string\n  anchor: string\n}\n\nexport type NavigationProps = {\n  lists: Nav[]\n  styles?: {\n    [key: string]: string\n  }\n  cns?: Cns\n  offset?: number\n  clickHandler?: (nav: Nav, index: number, e: React.MouseEvent<HTMLAnchorElement>) => void\n}\n"],
-  "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
-  "names": ["types_exports", "__toCommonJS"]
+  "sourcesContent": ["import React from 'react'\n\ntype Cns = {\n  container?: string\n  box?: string\n  item?: string\n  activeItem?: string\n}\n\nexport interface Nav {\n  label: string\n  anchor: string\n}\n\nexport type NavigationProps = {\n  lists: Nav[]\n  styles?: {\n    [key: string]: string\n  }\n  cns?: Cns\n  offset?: number\n  clickHandler?: (nav: Nav, index: number, e: React.MouseEvent<HTMLAnchorElement>) => void\n}\n"],
+  "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD,GAAA,IAAAE,EAAkB",
+  "names": ["types_exports", "__toCommonJS", "import_react"]
 }

package/dist/cjs/cpn-components/CpnProductCard/types.d.ts CHANGED Viewed

@@ -98,7 +98,7 @@ interface Content {
     url?: string;
     buttons?: {
         text: string;
-        variant?: "primary" | "secondary";
+        variant?: 'primary' | 'secondary';
         onClick?: () => void;
     }[];
 }

package/dist/cjs/cpn-components/CpnProductCard/types.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/cpn-components/CpnProductCard/types.ts"],
-  "sourcesContent": ["export type ProductImage = {\n  url: string\n  altText?: string\n  width?: number\n  height?: number\n}\n\nexport type ProductPrice = {\n  value: number\n  currencyCode?: 'USD' | 'EUR' | 'ARS' | string\n  retailPrice?: number\n  salePrice?: number\n  listPrice?: number\n  extendedSalePrice?: number\n  extendedListPrice?: number\n}\n\nexport type ProductOption = {\n  __typename?: 'MultipleChoiceOption'\n  id: string\n  displayName: string\n  name?: string\n  values: ProductOptionValues[]\n}\n\nexport type ProductOptionValues = {\n  label: string\n  hexColors?: string[]\n}\n\nexport type SellingPlans = {\n  id: string\n  name: string\n  options: {\n    name: string\n    value: string\n  }[]\n}\n\nexport type SellingPlanGroups = {\n  name: string\n  sellingPlans: SellingPlans[]\n}\n\nexport type SellingPlanAllocations = {\n  priceAdjustments: []\n  sellingPlan: SellingPlans\n}[]\n\nexport type ProductVariant = {\n  barcode?: string\n  id: string | number\n  options: ProductOption[]\n  availableForSale?: boolean\n  quantityAvailable: number\n  metafields?: Record<string, any>\n  sellingPlanAllocations?: SellingPlanAllocations\n  price: number\n  weight?: number\n  name?: string\n  image?: ProductImage\n  requiresShipping?: boolean\n  [key: string]: any\n}\n\nexport type Product = {\n  availableForSale?: boolean\n  id: string\n  name: string\n  description: string\n  descriptionHtml?: string\n  productType?: string\n  onlineStoreUrl?: string | null\n  publishedAt?: string\n  title?: string\n  slug?: string\n  handle?: string\n  path?: string\n  images: ProductImage[]\n  variants: ProductVariant[]\n  price: ProductPrice\n  listPrice?: number\n  options: ProductOption[]\n  seo?: any\n  tags?: string[]\n  metafields?: { [key: string]: any }\n  vendor: string\n  totalInventory: number\n  requiresSellingPlan: boolean\n  sellingPlanGroups: SellingPlanGroups[]\n}\n\ntype Cns = {\n  container?: string\n  box?: string\n  item?: string\n  activeItem?: string\n}\n\ninterface TagType {\n  type: 'tag'\n  text: string\n}\n\ninterface ImageType {\n  type: 'image'\n  image: string\n  imageMob?: string\n  imageLink?: string\n}\n\ninterface TitleType {\n  type: 'title'\n  text: string\n}\n\ninterface SubtitleType {\n  type: 'subtitle'\n  text: string\n}\n\ninterface PriceType {\n  type: 'price'\n  price: string\n  comparePrice?: string\n  soldOut?: boolean\n}\n\ntype ContentType = 'tag' | 'image' | 'title' | 'subtitle' | 'price' | 'buttons' | 'code'\n\ninterface Content {\n  type: ContentType\n  text?: string\n  image?: string\n  imageMob?: string\n  url?: string\n  buttons?: {\n    text: string\n    variant?: \"primary\" | \"secondary\"\n    onClick?: () => void\n  }[]\n}\n\nexport type ProductCardProps = {\n  content?: Content[]\n  cns?: Cns\n}\n"],
+  "sourcesContent": ["export type ProductImage = {\n  url: string\n  altText?: string\n  width?: number\n  height?: number\n}\n\nexport type ProductPrice = {\n  value: number\n  currencyCode?: 'USD' | 'EUR' | 'ARS' | string\n  retailPrice?: number\n  salePrice?: number\n  listPrice?: number\n  extendedSalePrice?: number\n  extendedListPrice?: number\n}\n\nexport type ProductOption = {\n  __typename?: 'MultipleChoiceOption'\n  id: string\n  displayName: string\n  name?: string\n  values: ProductOptionValues[]\n}\n\nexport type ProductOptionValues = {\n  label: string\n  hexColors?: string[]\n}\n\nexport type SellingPlans = {\n  id: string\n  name: string\n  options: {\n    name: string\n    value: string\n  }[]\n}\n\nexport type SellingPlanGroups = {\n  name: string\n  sellingPlans: SellingPlans[]\n}\n\nexport type SellingPlanAllocations = {\n  priceAdjustments: []\n  sellingPlan: SellingPlans\n}[]\n\nexport type ProductVariant = {\n  barcode?: string\n  id: string | number\n  options: ProductOption[]\n  availableForSale?: boolean\n  quantityAvailable: number\n  metafields?: Record<string, any>\n  sellingPlanAllocations?: SellingPlanAllocations\n  price: number\n  weight?: number\n  name?: string\n  image?: ProductImage\n  requiresShipping?: boolean\n  [key: string]: any\n}\n\nexport type Product = {\n  availableForSale?: boolean\n  id: string\n  name: string\n  description: string\n  descriptionHtml?: string\n  productType?: string\n  onlineStoreUrl?: string | null\n  publishedAt?: string\n  title?: string\n  slug?: string\n  handle?: string\n  path?: string\n  images: ProductImage[]\n  variants: ProductVariant[]\n  price: ProductPrice\n  listPrice?: number\n  options: ProductOption[]\n  seo?: any\n  tags?: string[]\n  metafields?: { [key: string]: any }\n  vendor: string\n  totalInventory: number\n  requiresSellingPlan: boolean\n  sellingPlanGroups: SellingPlanGroups[]\n}\n\ntype Cns = {\n  container?: string\n  box?: string\n  item?: string\n  activeItem?: string\n}\n\ninterface TagType {\n  type: 'tag'\n  text: string\n}\n\ninterface ImageType {\n  type: 'image'\n  image: string\n  imageMob?: string\n  imageLink?: string\n}\n\ninterface TitleType {\n  type: 'title'\n  text: string\n}\n\ninterface SubtitleType {\n  type: 'subtitle'\n  text: string\n}\n\ninterface PriceType {\n  type: 'price'\n  price: string\n  comparePrice?: string\n  soldOut?: boolean\n}\n\ntype ContentType = 'tag' | 'image' | 'title' | 'subtitle' | 'price' | 'buttons' | 'code'\n\ninterface Content {\n  type: ContentType\n  text?: string\n  image?: string\n  imageMob?: string\n  url?: string\n  buttons?: {\n    text: string\n    variant?: 'primary' | 'secondary'\n    onClick?: () => void\n  }[]\n}\n\nexport type ProductCardProps = {\n  content?: Content[]\n  cns?: Cns\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

package/dist/cjs/helpers/utils.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/utils.ts"],
-  "sourcesContent": ["import { clsx, type ClassValue } from 'clsx'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\nconst twMerge = extendTailwindMerge({\n  extend: {\n    theme: {\n      borderRadius: ['btn'],\n    },\n    classGroups: {\n      'font-size': [\n        'text-heading-1',\n        'text-heading-2',\n        'text-heading-3',\n        'text-heading-4',\n        'text-heading-5',\n        'text-text-3',\n        'text-text-2',\n        'text-text-1',\n      ],\n      'text-color': [\n        'text-info-primary',\n        'text-info-secondary',\n        'text-info-tertiary',\n        'text-info-quaternary',\n        'text-info-white',\n      ],\n      leading: ['leading-tight', 'leading-normal', 'leading-loose'],\n    },\n  },\n})\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n\nexport function noop(): any {}\n\nexport function atobID(id: string) {\n  if (id && typeof id === 'string' && id.includes('/')) {\n    return id.split('/').pop()?.split('?')?.shift()\n  } else {\n    return id\n  }\n}\nexport const spaceToHyphen = (str: string) => str?.replace(/\\s+/g, '-')\n\nexport const highlightSearchWord = (text: string, searchText: string) => {\n  try {\n    const wordIndex = text?.search(new RegExp(searchText, 'i'))\n    if (searchText && wordIndex !== -1) {\n      const word = text.slice(wordIndex, wordIndex + searchText.length)\n      return text.replace(word, `<span class='text-brand-0 font-bold'>${word}</span>`)\n    } else {\n      return text\n    }\n  } catch (e) {\n    console.log('e', e)\n    return text\n  }\n}"],
+  "sourcesContent": ["import { clsx, type ClassValue } from 'clsx'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\nconst twMerge = extendTailwindMerge({\n  extend: {\n    theme: {\n      borderRadius: ['btn'],\n    },\n    classGroups: {\n      'font-size': [\n        'text-heading-1',\n        'text-heading-2',\n        'text-heading-3',\n        'text-heading-4',\n        'text-heading-5',\n        'text-text-3',\n        'text-text-2',\n        'text-text-1',\n      ],\n      'text-color': [\n        'text-info-primary',\n        'text-info-secondary',\n        'text-info-tertiary',\n        'text-info-quaternary',\n        'text-info-white',\n      ],\n      leading: ['leading-tight', 'leading-normal', 'leading-loose'],\n    },\n  },\n})\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n\nexport function noop(): any {}\n\nexport function atobID(id: string) {\n  if (id && typeof id === 'string' && id.includes('/')) {\n    return id.split('/').pop()?.split('?')?.shift()\n  } else {\n    return id\n  }\n}\nexport const spaceToHyphen = (str: string) => str?.replace(/\\s+/g, '-')\n\nexport const highlightSearchWord = (text: string, searchText: string) => {\n  try {\n    const wordIndex = text?.search(new RegExp(searchText, 'i'))\n    if (searchText && wordIndex !== -1) {\n      const word = text.slice(wordIndex, wordIndex + searchText.length)\n      return text.replace(word, `<span class='text-brand-0 font-bold'>${word}</span>`)\n    } else {\n      return text\n    }\n  } catch (e) {\n    console.log('e', e)\n    return text\n  }\n}\n"],
   "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,YAAAE,EAAA,OAAAC,EAAA,wBAAAC,EAAA,SAAAC,EAAA,kBAAAC,IAAA,eAAAC,EAAAP,GAAA,IAAAQ,EAAsC,gBACtCC,EAAoC,0BAEpC,MAAMC,KAAU,uBAAoB,CAClC,OAAQ,CACN,MAAO,CACL,aAAc,CAAC,KAAK,CACtB,EACA,YAAa,CACX,YAAa,CACX,iBACA,iBACA,iBACA,iBACA,iBACA,cACA,cACA,aACF,EACA,aAAc,CACZ,oBACA,sBACA,qBACA,uBACA,iBACF,EACA,QAAS,CAAC,gBAAiB,iBAAkB,eAAe,CAC9D,CACF,CACF,CAAC,EAEM,SAASP,KAAMQ,EAAsB,CAC1C,OAAOD,KAAQ,QAAKC,CAAM,CAAC,CAC7B,CAEO,SAASN,GAAY,CAAC,CAEtB,SAASH,EAAOU,EAAY,CACjC,OAAIA,GAAM,OAAOA,GAAO,UAAYA,EAAG,SAAS,GAAG,EAC1CA,EAAG,MAAM,GAAG,EAAE,IAAI,GAAG,MAAM,GAAG,GAAG,MAAM,EAEvCA,CAEX,CACO,MAAMN,EAAiBO,GAAgBA,GAAK,QAAQ,OAAQ,GAAG,EAEzDT,EAAsB,CAACU,EAAcC,IAAuB,CACvE,GAAI,CACF,MAAMC,EAAYF,GAAM,OAAO,IAAI,OAAOC,EAAY,GAAG,CAAC,EAC1D,GAAIA,GAAcC,IAAc,GAAI,CAClC,MAAMC,EAAOH,EAAK,MAAME,EAAWA,EAAYD,EAAW,MAAM,EAChE,OAAOD,EAAK,QAAQG,EAAM,wCAAwCA,CAAI,SAAS,CACjF,KACE,QAAOH,CAEX,OAASI,EAAG,CACV,eAAQ,IAAI,IAAKA,CAAC,EACXJ,CACT,CACF",
   "names": ["utils_exports", "__export", "atobID", "cn", "highlightSearchWord", "noop", "spaceToHyphen", "__toCommonJS", "import_clsx", "import_tailwind_merge", "twMerge", "inputs", "id", "str", "text", "searchText", "wordIndex", "word", "e"]
 }

package/dist/cjs/hooks/useExposure.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useExposure.ts"],
-  "sourcesContent": ["import { type RefObject } from 'react'\nimport { gaTrack } from '../shared/track.js'\nimport { useIntersectionObserverDelay } from './useIntersectionObserver.js'\nimport  { useAiuiContext } from '../biz-components/AiuiProvider/index.js'\n\ninterface ExposureOptions {\n  componentType: string\n  componentName: string\n  componentTitle?: string\n  componentDescription?: string\n  navigation?: string\n  pageGroup?: string\n  position?: number\n}\nexport const useExposure = (\n  ref: RefObject<HTMLDivElement>,\n  { componentType, componentName, componentTitle, componentDescription, navigation = '', position = 1 }: ExposureOptions\n) => {\n  const { trackingData } = useAiuiContext()\n  useIntersectionObserverDelay(ref, {\n    once: true,\n    threshold: 0.5,\n    delay: 2000,\n    callback: () => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'component_impression',\n        event_parameters: {\n          page_group: trackingData.pageGroup || 'Home Page',\n          component_type: componentType,\n          component_name: componentName,\n          position: position,\n          creative_id: '',\n          component_title: componentTitle,\n          component_description: componentDescription,\n          navigation: navigation, // \u5982\u679C\u6A21\u5757\u6709\u7C7B\u4F3C\u5BFC\u822A\uFF0C\u7535\u68AF\uFF0C\u951A\u70B9\uFF0C\u4F20\u6587\u6848\n        },\n      })\n    },\n  })\n}\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,iBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAA+B,iBAC/BC,EAAwB,8BACxBC,EAA6C,wCAC7CC,EAAgC,mDAWzB,MAAML,EAAc,CACzBM,EACA,CAAE,cAAAC,EAAe,cAAAC,EAAe,eAAAC,EAAgB,qBAAAC,EAAsB,WAAAC,EAAa,GAAI,SAAAC,EAAW,CAAE,IACjG,CACH,KAAM,CAAE,aAAAC,CAAa,KAAI,kBAAe,KACxC,gCAA6BP,EAAK,CAChC,KAAM,GACN,UAAW,GACX,MAAO,IACP,SAAU,IAAM,IACd,WAAQ,CACN,MAAO,WACP,WAAY,uBACZ,iBAAkB,CAChB,WAAYO,EAAa,WAAa,YACtC,eAAgBN,EAChB,eAAgBC,EAChB,SAAUI,EACV,YAAa,GACb,gBAAiBH,EACjB,sBAAuBC,EACvB,WAAYC,CACd,CACF,CAAC,CACH,CACF,CAAC,CACH",
+  "sourcesContent": ["import { type RefObject } from 'react'\nimport { gaTrack } from '../shared/track.js'\nimport { useIntersectionObserverDelay } from './useIntersectionObserver.js'\nimport { useAiuiContext } from '../biz-components/AiuiProvider/index.js'\n\ninterface ExposureOptions {\n  componentType: string\n  componentName: string\n  componentTitle?: string\n  componentDescription?: string\n  navigation?: string\n  pageGroup?: string\n  position?: number\n}\nexport const useExposure = (\n  ref: RefObject<HTMLDivElement>,\n  { componentType, componentName, componentTitle, componentDescription, navigation = '', position = 1 }: ExposureOptions\n) => {\n  const { trackingData } = useAiuiContext()\n  useIntersectionObserverDelay(ref, {\n    once: true,\n    threshold: 0.5,\n    delay: 2000,\n    callback: () => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'component_impression',\n        event_parameters: {\n          page_group: trackingData.pageGroup || 'Home Page',\n          component_type: componentType,\n          component_name: componentName,\n          position: position,\n          creative_id: '',\n          component_title: componentTitle,\n          component_description: componentDescription,\n          navigation: navigation, // \u5982\u679C\u6A21\u5757\u6709\u7C7B\u4F3C\u5BFC\u822A\uFF0C\u7535\u68AF\uFF0C\u951A\u70B9\uFF0C\u4F20\u6587\u6848\n        },\n      })\n    },\n  })\n}\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,iBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAA+B,iBAC/BC,EAAwB,8BACxBC,EAA6C,wCAC7CC,EAA+B,mDAWxB,MAAML,EAAc,CACzBM,EACA,CAAE,cAAAC,EAAe,cAAAC,EAAe,eAAAC,EAAgB,qBAAAC,EAAsB,WAAAC,EAAa,GAAI,SAAAC,EAAW,CAAE,IACjG,CACH,KAAM,CAAE,aAAAC,CAAa,KAAI,kBAAe,KACxC,gCAA6BP,EAAK,CAChC,KAAM,GACN,UAAW,GACX,MAAO,IACP,SAAU,IAAM,IACd,WAAQ,CACN,MAAO,WACP,WAAY,uBACZ,iBAAkB,CAChB,WAAYO,EAAa,WAAa,YACtC,eAAgBN,EAChB,eAAgBC,EAChB,SAAUI,EACV,YAAa,GACb,gBAAiBH,EACjB,sBAAuBC,EACvB,WAAYC,CACd,CACF,CAAC,CACH,CACF,CAAC,CACH",
   "names": ["useExposure_exports", "__export", "useExposure", "__toCommonJS", "import_react", "import_track", "import_useIntersectionObserver", "import_AiuiProvider", "ref", "componentType", "componentName", "componentTitle", "componentDescription", "navigation", "position", "trackingData"]
 }

package/dist/cjs/hooks/useExposureDetection.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var E=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var K=Object.prototype.hasOwnProperty;var O=(e,r)=>{for(var o in r)E(e,o,{get:r[o],enumerable:!0})},w=(e,r,o,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let u of T(r))!K.call(e,u)&&u!==o&&E(e,u,{get:()=>r[u],enumerable:!(l=y(r,u))||l.enumerable});return e};var v=e=>w(E({},"__esModule",{value:!0}),e);var R={};O(R,{clearAllExposureRecords:()=>j,clearExposureRecord:()=>M,hasExposed:()=>A,useExposureDetection:()=>D});module.exports=v(R);var c=require("react");const i=new Set,D=(e,r={})=>{const{exposureKey:o,threshold:l=.5,duration:u=2e3,once:p=!0,onExposure:x,rootMargin:h="0px"}=r,t=(0,c.useRef)(null),d=(0,c.useRef)(null),m=(0,c.useCallback)(()=>{if(o)return o;if(e.current&&!d.current){const a=e.current.getAttribute("data-exposure-id");if(a)return d.current=a,a;const s=[];let n=e.current;for(;n&&n!==document.body;){const f=Array.from(n.parentElement?.children||[]).indexOf(n);s.unshift(`${n.tagName.toLowerCase()}[${f}]`),n=n.parentElement}return d.current=s.join(" > "),d.current}return d.current||""},[o,e]),g=(0,c.useCallback)(()=>{t.current&&(clearTimeout(t.current),t.current=null)},[]);return(0,c.useEffect)(()=>{const a=e.current;if(!a||!x)return;const s=m();if(!s){console.warn("useExposureDetection: \u65E0\u6CD5\u751F\u6210\u552F\u4E00\u7684 exposureKey\uFF0C\u8BF7\u63D0\u4F9B exposureKey \u53C2\u6570");return}if(p&&i.has(s))return;const n=new IntersectionObserver(f=>{f.forEach(b=>{b.intersectionRatio>=l?(!p||!i.has(s))&&!t.current&&(t.current=setTimeout(()=>{p&&i.has(s)||(p&&i.add(s),x())},u)):t.current&&(clearTimeout(t.current),t.current=null)})},{threshold:l,rootMargin:h});return n.observe(a),()=>{n.disconnect(),t.current&&(clearTimeout(t.current),t.current=null)}},[e,x,l,u,p,h,m]),{clearTimer:g}},M=e=>{i.delete(e)},j=()=>{i.clear()},A=e=>i.has(e);
+"use strict";var E=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var T=Object.prototype.hasOwnProperty;var K=(e,r)=>{for(var o in r)E(e,o,{get:r[o],enumerable:!0})},O=(e,r,o,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let u of w(r))!T.call(e,u)&&u!==o&&E(e,u,{get:()=>r[u],enumerable:!(l=y(r,u))||l.enumerable});return e};var v=e=>O(E({},"__esModule",{value:!0}),e);var R={};K(R,{clearAllExposureRecords:()=>j,clearExposureRecord:()=>M,hasExposed:()=>A,useExposureDetection:()=>D});module.exports=v(R);var c=require("react");const i=new Set,D=(e,r={})=>{const{exposureKey:o,threshold:l=.5,duration:u=2e3,once:p=!0,onExposure:x,rootMargin:h="0px"}=r,t=(0,c.useRef)(null),d=(0,c.useRef)(null),m=(0,c.useCallback)(()=>{if(o)return o;if(e.current&&!d.current){const a=e.current.getAttribute("data-exposure-id");if(a)return d.current=a,a;const s=[];let n=e.current;for(;n&&n!==document.body;){const f=Array.from(n.parentElement?.children||[]).indexOf(n);s.unshift(`${n.tagName.toLowerCase()}[${f}]`),n=n.parentElement}return d.current=s.join(" > "),d.current}return d.current||""},[o,e]),g=(0,c.useCallback)(()=>{t.current&&(clearTimeout(t.current),t.current=null)},[]);return(0,c.useEffect)(()=>{const a=e.current;if(!a||!x)return;const s=m();if(!s){console.warn("useExposureDetection: \u65E0\u6CD5\u751F\u6210\u552F\u4E00\u7684 exposureKey\uFF0C\u8BF7\u63D0\u4F9B exposureKey \u53C2\u6570");return}if(p&&i.has(s))return;const n=new IntersectionObserver(f=>{f.forEach(b=>{b.intersectionRatio>=l?(!p||!i.has(s))&&!t.current&&(t.current=window.setTimeout(()=>{p&&i.has(s)||(p&&i.add(s),x())},u)):t.current&&(clearTimeout(t.current),t.current=null)})},{threshold:l,rootMargin:h});return n.observe(a),()=>{n.disconnect(),t.current&&(clearTimeout(t.current),t.current=null)}},[e,x,l,u,p,h,m]),{clearTimer:g}},M=e=>{i.delete(e)},j=()=>{i.clear()},A=e=>i.has(e);
 //# sourceMappingURL=useExposureDetection.js.map

package/dist/cjs/hooks/useExposureDetection.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useExposureDetection.ts"],
-  "sourcesContent": ["import { type RefObject, useRef, useEffect, useCallback } from 'react'\n\n// \u5168\u5C40\u66DD\u5149\u8BB0\u5F55\uFF0C\u786E\u4FDD\u6BCF\u4E2A\u5143\u7D20\u5728\u6574\u4E2A\u9875\u9762\u751F\u547D\u5468\u671F\u4E2D\u53EA\u66DD\u5149\u4E00\u6B21\nconst exposedElementsSet = new Set<string>()\n\nexport interface UseExposureDetectionOptions {\n  /**\n   * \u552F\u4E00\u6807\u8BC6\uFF0C\u7528\u4E8E\u5224\u65AD\u662F\u5426\u5DF2\u66DD\u5149\n   * \u5982\u679C\u4E0D\u63D0\u4F9B\uFF0C\u5C06\u4F7F\u7528\u5143\u7D20\u7684\u552F\u4E00\u6807\u8BC6\uFF08\u5982\u679C\u53EF\u80FD\uFF09\n   */\n  exposureKey?: string\n  /**\n   * \u53EF\u89C1\u6027\u9608\u503C\uFF0C0-1 \u4E4B\u95F4\uFF0C\u9ED8\u8BA4 0.5\uFF0850%\uFF09\n   */\n  threshold?: number\n  /**\n   * \u505C\u7559\u65F6\u95F4\uFF08\u6BEB\u79D2\uFF09\uFF0C\u9ED8\u8BA4 2000ms\n   */\n  duration?: number\n  /**\n   * \u662F\u5426\u53EA\u89E6\u53D1\u4E00\u6B21\uFF0C\u9ED8\u8BA4 true\n   */\n  once?: boolean\n  /**\n   * \u66DD\u5149\u56DE\u8C03\u51FD\u6570\n   */\n  onExposure?: () => void\n  /**\n   * IntersectionObserver \u7684 rootMargin\n   */\n  rootMargin?: string\n}\n\n/**\n * \u66DD\u5149\u68C0\u6D4B Hook\n * \u4F7F\u7528 IntersectionObserver \u68C0\u6D4B\u5143\u7D20\u662F\u5426\u81F3\u5C11 50% \u53EF\u89C1\u4E14\u505C\u7559\u65F6\u95F4\u8D85\u8FC7\u6307\u5B9A\u65F6\u95F4\n * \u786E\u4FDD\u5728\u6574\u4E2A\u9875\u9762\u751F\u547D\u5468\u671F\u4E2D\u53EA\u66DD\u5149\u4E00\u6B21\n *\n * @param elementRef - \u8981\u68C0\u6D4B\u7684\u5143\u7D20\u7684 ref\n * @param options - \u914D\u7F6E\u9009\u9879\n * @returns \u8FD4\u56DE\u6E05\u9664\u8BA1\u65F6\u5668\u7684\u65B9\u6CD5\uFF08\u7528\u4E8E\u5207\u6362\u65F6\u6E05\u7406\uFF09\n *\n * @example\n * ```tsx\n * const MyComponent = () => {\n *   const ref = useRef<HTMLDivElement>(null)\n *   const { clearTimer } = useExposureDetection(ref, {\n *     exposureKey: 'my-component-1',\n *     threshold: 0.5,\n *     duration: 2000,\n *     onExposure: () => {\n *       console.log('\u5143\u7D20\u5DF2\u66DD\u5149')\n *     }\n *   })\n *\n *   return <div ref={ref}>\u5185\u5BB9</div>\n * }\n * ```\n */\nexport const useExposureDetection = (\n  elementRef: RefObject<HTMLElement>,\n  options: UseExposureDetectionOptions = {}\n) => {\n  const {\n    exposureKey,\n    threshold = 0.5,\n    duration = 2000,\n    once = true,\n    onExposure,\n    rootMargin = '0px',\n  } = options\n\n  const exposureTimerRef = useRef<NodeJS.Timeout | null>(null)\n  const generatedKeyRef = useRef<string | null>(null)\n\n  // \u751F\u6210\u552F\u4E00\u7684\u66DD\u5149 key\n  const getExposureKey = useCallback(() => {\n    if (exposureKey) {\n      return exposureKey\n    }\n    // \u5982\u679C\u6CA1\u6709\u63D0\u4F9B key\uFF0C\u5C1D\u8BD5\u4F7F\u7528\u5143\u7D20\u7684\u552F\u4E00\u6807\u8BC6\n    if (elementRef.current && !generatedKeyRef.current) {\n      // \u4F7F\u7528\u5143\u7D20\u7684 data-exposure-id \u5C5E\u6027\uFF0C\u6216\u8005\u751F\u6210\u4E00\u4E2A\u57FA\u4E8E\u4F4D\u7F6E\u7684 key\n      const dataId = elementRef.current.getAttribute('data-exposure-id')\n      if (dataId) {\n        generatedKeyRef.current = dataId\n        return dataId\n      }\n      // \u5982\u679C\u6CA1\u6709 data-exposure-id\uFF0C\u4F7F\u7528\u5143\u7D20\u5728 DOM \u4E2D\u7684\u4F4D\u7F6E\u751F\u6210 key\n      const path: string[] = []\n      let el: Element | null = elementRef.current\n      while (el && el !== document.body) {\n        const index = Array.from(el.parentElement?.children || []).indexOf(el)\n        path.unshift(`${el.tagName.toLowerCase()}[${index}]`)\n        el = el.parentElement\n      }\n      generatedKeyRef.current = path.join(' > ')\n      return generatedKeyRef.current\n    }\n    return generatedKeyRef.current || ''\n  }, [exposureKey, elementRef])\n\n  // \u6E05\u9664\u8BA1\u65F6\u5668\u7684\u65B9\u6CD5\uFF08\u4E0D\u91CD\u7F6E\u66DD\u5149\u72B6\u6001\uFF09\n  const clearTimer = useCallback(() => {\n    if (exposureTimerRef.current) {\n      clearTimeout(exposureTimerRef.current)\n      exposureTimerRef.current = null\n    }\n  }, [])\n\n  useEffect(() => {\n    const element = elementRef.current\n    if (!element || !onExposure) return\n\n    const key = getExposureKey()\n    if (!key) {\n      console.warn('useExposureDetection: \u65E0\u6CD5\u751F\u6210\u552F\u4E00\u7684 exposureKey\uFF0C\u8BF7\u63D0\u4F9B exposureKey \u53C2\u6570')\n      return\n    }\n\n    // \u5982\u679C\u5DF2\u7ECF\u66DD\u5149\u8FC7\u4E14\u8BBE\u7F6E\u4E86 once\uFF0C\u76F4\u63A5\u8FD4\u56DE\uFF0C\u4E0D\u518D\u76D1\u542C\n    if (once && exposedElementsSet.has(key)) {\n      return\n    }\n\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          // \u5982\u679C\u53EF\u89C1\u6027\u8FBE\u5230\u9608\u503C\uFF08\u9ED8\u8BA4 50%\uFF09\n          if (entry.intersectionRatio >= threshold) {\n            // \u5982\u679C\u8FD8\u6CA1\u6709\u89E6\u53D1\u8FC7\u66DD\u5149\u4E14\u6CA1\u6709\u6B63\u5728\u8BA1\u65F6\u7684\u8BA1\u65F6\u5668\uFF0C\u5F00\u59CB\u8BA1\u65F6\n            if ((!once || !exposedElementsSet.has(key)) && !exposureTimerRef.current) {\n              exposureTimerRef.current = setTimeout(() => {\n                // \u518D\u6B21\u68C0\u67E5\u662F\u5426\u5DF2\u66DD\u5149\uFF08\u9632\u6B62\u5728\u8BA1\u65F6\u671F\u95F4\u88AB\u5176\u4ED6\u64CD\u4F5C\u89E6\u53D1\uFF09\n                if (once && exposedElementsSet.has(key)) return\n\n                // \u6807\u8BB0\u4E3A\u5DF2\u66DD\u5149\n                if (once) {\n                  exposedElementsSet.add(key)\n                }\n                // \u89E6\u53D1\u66DD\u5149\u4E8B\u4EF6\n                onExposure()\n              }, duration)\n            }\n          } else {\n            // \u5982\u679C\u53EF\u89C1\u6027\u4F4E\u4E8E\u9608\u503C\uFF0C\u6E05\u9664\u8BA1\u65F6\u5668\uFF08\u4F46\u4E0D\u79FB\u9664\u66DD\u5149\u6807\u8BB0\uFF09\n            if (exposureTimerRef.current) {\n              clearTimeout(exposureTimerRef.current)\n              exposureTimerRef.current = null\n            }\n          }\n        })\n      },\n      {\n        threshold: threshold,\n        rootMargin: rootMargin,\n      }\n    )\n\n    observer.observe(element)\n\n    return () => {\n      observer.disconnect()\n      if (exposureTimerRef.current) {\n        clearTimeout(exposureTimerRef.current)\n        exposureTimerRef.current = null\n      }\n    }\n  }, [elementRef, onExposure, threshold, duration, once, rootMargin, getExposureKey])\n\n  return { clearTimer }\n}\n\n/**\n * \u6E05\u9664\u6307\u5B9A key \u7684\u66DD\u5149\u8BB0\u5F55\uFF08\u7528\u4E8E\u6D4B\u8BD5\u6216\u7279\u6B8A\u573A\u666F\uFF09\n */\nexport const clearExposureRecord = (key: string) => {\n  exposedElementsSet.delete(key)\n}\n\n/**\n * \u6E05\u9664\u6240\u6709\u66DD\u5149\u8BB0\u5F55\uFF08\u7528\u4E8E\u6D4B\u8BD5\u6216\u7279\u6B8A\u573A\u666F\uFF09\n */\nexport const clearAllExposureRecords = () => {\n  exposedElementsSet.clear()\n}\n\n/**\n * \u68C0\u67E5\u6307\u5B9A key \u662F\u5426\u5DF2\u66DD\u5149\n */\nexport const hasExposed = (key: string): boolean => {\n  return exposedElementsSet.has(key)\n}\n\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,6BAAAE,EAAA,wBAAAC,EAAA,eAAAC,EAAA,yBAAAC,IAAA,eAAAC,EAAAN,GAAA,IAAAO,EAA+D,iBAG/D,MAAMC,EAAqB,IAAI,IAwDlBH,EAAuB,CAClCI,EACAC,EAAuC,CAAC,IACrC,CACH,KAAM,CACJ,YAAAC,EACA,UAAAC,EAAY,GACZ,SAAAC,EAAW,IACX,KAAAC,EAAO,GACP,WAAAC,EACA,WAAAC,EAAa,KACf,EAAIN,EAEEO,KAAmB,UAA8B,IAAI,EACrDC,KAAkB,UAAsB,IAAI,EAG5CC,KAAiB,eAAY,IAAM,CACvC,GAAIR,EACF,OAAOA,EAGT,GAAIF,EAAW,SAAW,CAACS,EAAgB,QAAS,CAElD,MAAME,EAASX,EAAW,QAAQ,aAAa,kBAAkB,EACjE,GAAIW,EACF,OAAAF,EAAgB,QAAUE,EACnBA,EAGT,MAAMC,EAAiB,CAAC,EACxB,IAAIC,EAAqBb,EAAW,QACpC,KAAOa,GAAMA,IAAO,SAAS,MAAM,CACjC,MAAMC,EAAQ,MAAM,KAAKD,EAAG,eAAe,UAAY,CAAC,CAAC,EAAE,QAAQA,CAAE,EACrED,EAAK,QAAQ,GAAGC,EAAG,QAAQ,YAAY,CAAC,IAAIC,CAAK,GAAG,EACpDD,EAAKA,EAAG,aACV,CACA,OAAAJ,EAAgB,QAAUG,EAAK,KAAK,KAAK,EAClCH,EAAgB,OACzB,CACA,OAAOA,EAAgB,SAAW,EACpC,EAAG,CAACP,EAAaF,CAAU,CAAC,EAGtBe,KAAa,eAAY,IAAM,CAC/BP,EAAiB,UACnB,aAAaA,EAAiB,OAAO,EACrCA,EAAiB,QAAU,KAE/B,EAAG,CAAC,CAAC,EAEL,sBAAU,IAAM,CACd,MAAMQ,EAAUhB,EAAW,QAC3B,GAAI,CAACgB,GAAW,CAACV,EAAY,OAE7B,MAAMW,EAAMP,EAAe,EAC3B,GAAI,CAACO,EAAK,CACR,QAAQ,KAAK,+HAA8D,EAC3E,MACF,CAGA,GAAIZ,GAAQN,EAAmB,IAAIkB,CAAG,EACpC,OAGF,MAAMC,EAAW,IAAI,qBACnBC,GAAW,CACTA,EAAQ,QAAQC,GAAS,CAEnBA,EAAM,mBAAqBjB,GAExB,CAACE,GAAQ,CAACN,EAAmB,IAAIkB,CAAG,IAAM,CAACT,EAAiB,UAC/DA,EAAiB,QAAU,WAAW,IAAM,CAEtCH,GAAQN,EAAmB,IAAIkB,CAAG,IAGlCZ,GACFN,EAAmB,IAAIkB,CAAG,EAG5BX,EAAW,EACb,EAAGF,CAAQ,GAITI,EAAiB,UACnB,aAAaA,EAAiB,OAAO,EACrCA,EAAiB,QAAU,KAGjC,CAAC,CACH,EACA,CACE,UAAWL,EACX,WAAYI,CACd,CACF,EAEA,OAAAW,EAAS,QAAQF,CAAO,EAEjB,IAAM,CACXE,EAAS,WAAW,EAChBV,EAAiB,UACnB,aAAaA,EAAiB,OAAO,EACrCA,EAAiB,QAAU,KAE/B,CACF,EAAG,CAACR,EAAYM,EAAYH,EAAWC,EAAUC,EAAME,EAAYG,CAAc,CAAC,EAE3E,CAAE,WAAAK,CAAW,CACtB,EAKarB,EAAuBuB,GAAgB,CAClDlB,EAAmB,OAAOkB,CAAG,CAC/B,EAKaxB,EAA0B,IAAM,CAC3CM,EAAmB,MAAM,CAC3B,EAKaJ,EAAcsB,GAClBlB,EAAmB,IAAIkB,CAAG",
+  "sourcesContent": ["import { type RefObject, useRef, useEffect, useCallback } from 'react'\n\n// \u5168\u5C40\u66DD\u5149\u8BB0\u5F55\uFF0C\u786E\u4FDD\u6BCF\u4E2A\u5143\u7D20\u5728\u6574\u4E2A\u9875\u9762\u751F\u547D\u5468\u671F\u4E2D\u53EA\u66DD\u5149\u4E00\u6B21\nconst exposedElementsSet = new Set<string>()\n\nexport interface UseExposureDetectionOptions {\n  /**\n   * \u552F\u4E00\u6807\u8BC6\uFF0C\u7528\u4E8E\u5224\u65AD\u662F\u5426\u5DF2\u66DD\u5149\n   * \u5982\u679C\u4E0D\u63D0\u4F9B\uFF0C\u5C06\u4F7F\u7528\u5143\u7D20\u7684\u552F\u4E00\u6807\u8BC6\uFF08\u5982\u679C\u53EF\u80FD\uFF09\n   */\n  exposureKey?: string\n  /**\n   * \u53EF\u89C1\u6027\u9608\u503C\uFF0C0-1 \u4E4B\u95F4\uFF0C\u9ED8\u8BA4 0.5\uFF0850%\uFF09\n   */\n  threshold?: number\n  /**\n   * \u505C\u7559\u65F6\u95F4\uFF08\u6BEB\u79D2\uFF09\uFF0C\u9ED8\u8BA4 2000ms\n   */\n  duration?: number\n  /**\n   * \u662F\u5426\u53EA\u89E6\u53D1\u4E00\u6B21\uFF0C\u9ED8\u8BA4 true\n   */\n  once?: boolean\n  /**\n   * \u66DD\u5149\u56DE\u8C03\u51FD\u6570\n   */\n  onExposure?: () => void\n  /**\n   * IntersectionObserver \u7684 rootMargin\n   */\n  rootMargin?: string\n}\n\n/**\n * \u66DD\u5149\u68C0\u6D4B Hook\n * \u4F7F\u7528 IntersectionObserver \u68C0\u6D4B\u5143\u7D20\u662F\u5426\u81F3\u5C11 50% \u53EF\u89C1\u4E14\u505C\u7559\u65F6\u95F4\u8D85\u8FC7\u6307\u5B9A\u65F6\u95F4\n * \u786E\u4FDD\u5728\u6574\u4E2A\u9875\u9762\u751F\u547D\u5468\u671F\u4E2D\u53EA\u66DD\u5149\u4E00\u6B21\n *\n * @param elementRef - \u8981\u68C0\u6D4B\u7684\u5143\u7D20\u7684 ref\n * @param options - \u914D\u7F6E\u9009\u9879\n * @returns \u8FD4\u56DE\u6E05\u9664\u8BA1\u65F6\u5668\u7684\u65B9\u6CD5\uFF08\u7528\u4E8E\u5207\u6362\u65F6\u6E05\u7406\uFF09\n *\n * @example\n * ```tsx\n * const MyComponent = () => {\n *   const ref = useRef<HTMLDivElement>(null)\n *   const { clearTimer } = useExposureDetection(ref, {\n *     exposureKey: 'my-component-1',\n *     threshold: 0.5,\n *     duration: 2000,\n *     onExposure: () => {\n *       console.log('\u5143\u7D20\u5DF2\u66DD\u5149')\n *     }\n *   })\n *\n *   return <div ref={ref}>\u5185\u5BB9</div>\n * }\n * ```\n */\nexport const useExposureDetection = (elementRef: RefObject<HTMLElement>, options: UseExposureDetectionOptions = {}) => {\n  const { exposureKey, threshold = 0.5, duration = 2000, once = true, onExposure, rootMargin = '0px' } = options\n\n  const exposureTimerRef = useRef<number | null>(null)\n  const generatedKeyRef = useRef<string | null>(null)\n\n  // \u751F\u6210\u552F\u4E00\u7684\u66DD\u5149 key\n  const getExposureKey = useCallback(() => {\n    if (exposureKey) {\n      return exposureKey\n    }\n    // \u5982\u679C\u6CA1\u6709\u63D0\u4F9B key\uFF0C\u5C1D\u8BD5\u4F7F\u7528\u5143\u7D20\u7684\u552F\u4E00\u6807\u8BC6\n    if (elementRef.current && !generatedKeyRef.current) {\n      // \u4F7F\u7528\u5143\u7D20\u7684 data-exposure-id \u5C5E\u6027\uFF0C\u6216\u8005\u751F\u6210\u4E00\u4E2A\u57FA\u4E8E\u4F4D\u7F6E\u7684 key\n      const dataId = elementRef.current.getAttribute('data-exposure-id')\n      if (dataId) {\n        generatedKeyRef.current = dataId\n        return dataId\n      }\n      // \u5982\u679C\u6CA1\u6709 data-exposure-id\uFF0C\u4F7F\u7528\u5143\u7D20\u5728 DOM \u4E2D\u7684\u4F4D\u7F6E\u751F\u6210 key\n      const path: string[] = []\n      let el: Element | null = elementRef.current\n      while (el && el !== document.body) {\n        const index = Array.from(el.parentElement?.children || []).indexOf(el)\n        path.unshift(`${el.tagName.toLowerCase()}[${index}]`)\n        el = el.parentElement\n      }\n      generatedKeyRef.current = path.join(' > ')\n      return generatedKeyRef.current\n    }\n    return generatedKeyRef.current || ''\n  }, [exposureKey, elementRef])\n\n  // \u6E05\u9664\u8BA1\u65F6\u5668\u7684\u65B9\u6CD5\uFF08\u4E0D\u91CD\u7F6E\u66DD\u5149\u72B6\u6001\uFF09\n  const clearTimer = useCallback(() => {\n    if (exposureTimerRef.current) {\n      clearTimeout(exposureTimerRef.current)\n      exposureTimerRef.current = null\n    }\n  }, [])\n\n  useEffect(() => {\n    const element = elementRef.current\n    if (!element || !onExposure) return\n\n    const key = getExposureKey()\n    if (!key) {\n      console.warn('useExposureDetection: \u65E0\u6CD5\u751F\u6210\u552F\u4E00\u7684 exposureKey\uFF0C\u8BF7\u63D0\u4F9B exposureKey \u53C2\u6570')\n      return\n    }\n\n    // \u5982\u679C\u5DF2\u7ECF\u66DD\u5149\u8FC7\u4E14\u8BBE\u7F6E\u4E86 once\uFF0C\u76F4\u63A5\u8FD4\u56DE\uFF0C\u4E0D\u518D\u76D1\u542C\n    if (once && exposedElementsSet.has(key)) {\n      return\n    }\n\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          // \u5982\u679C\u53EF\u89C1\u6027\u8FBE\u5230\u9608\u503C\uFF08\u9ED8\u8BA4 50%\uFF09\n          if (entry.intersectionRatio >= threshold) {\n            // \u5982\u679C\u8FD8\u6CA1\u6709\u89E6\u53D1\u8FC7\u66DD\u5149\u4E14\u6CA1\u6709\u6B63\u5728\u8BA1\u65F6\u7684\u8BA1\u65F6\u5668\uFF0C\u5F00\u59CB\u8BA1\u65F6\n            if ((!once || !exposedElementsSet.has(key)) && !exposureTimerRef.current) {\n              exposureTimerRef.current = window.setTimeout(() => {\n                // \u518D\u6B21\u68C0\u67E5\u662F\u5426\u5DF2\u66DD\u5149\uFF08\u9632\u6B62\u5728\u8BA1\u65F6\u671F\u95F4\u88AB\u5176\u4ED6\u64CD\u4F5C\u89E6\u53D1\uFF09\n                if (once && exposedElementsSet.has(key)) return\n\n                // \u6807\u8BB0\u4E3A\u5DF2\u66DD\u5149\n                if (once) {\n                  exposedElementsSet.add(key)\n                }\n                // \u89E6\u53D1\u66DD\u5149\u4E8B\u4EF6\n                onExposure()\n              }, duration)\n            }\n          } else {\n            // \u5982\u679C\u53EF\u89C1\u6027\u4F4E\u4E8E\u9608\u503C\uFF0C\u6E05\u9664\u8BA1\u65F6\u5668\uFF08\u4F46\u4E0D\u79FB\u9664\u66DD\u5149\u6807\u8BB0\uFF09\n            if (exposureTimerRef.current) {\n              clearTimeout(exposureTimerRef.current)\n              exposureTimerRef.current = null\n            }\n          }\n        })\n      },\n      {\n        threshold: threshold,\n        rootMargin: rootMargin,\n      }\n    )\n\n    observer.observe(element)\n\n    return () => {\n      observer.disconnect()\n      if (exposureTimerRef.current) {\n        clearTimeout(exposureTimerRef.current)\n        exposureTimerRef.current = null\n      }\n    }\n  }, [elementRef, onExposure, threshold, duration, once, rootMargin, getExposureKey])\n\n  return { clearTimer }\n}\n\n/**\n * \u6E05\u9664\u6307\u5B9A key \u7684\u66DD\u5149\u8BB0\u5F55\uFF08\u7528\u4E8E\u6D4B\u8BD5\u6216\u7279\u6B8A\u573A\u666F\uFF09\n */\nexport const clearExposureRecord = (key: string) => {\n  exposedElementsSet.delete(key)\n}\n\n/**\n * \u6E05\u9664\u6240\u6709\u66DD\u5149\u8BB0\u5F55\uFF08\u7528\u4E8E\u6D4B\u8BD5\u6216\u7279\u6B8A\u573A\u666F\uFF09\n */\nexport const clearAllExposureRecords = () => {\n  exposedElementsSet.clear()\n}\n\n/**\n * \u68C0\u67E5\u6307\u5B9A key \u662F\u5426\u5DF2\u66DD\u5149\n */\nexport const hasExposed = (key: string): boolean => {\n  return exposedElementsSet.has(key)\n}\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,6BAAAE,EAAA,wBAAAC,EAAA,eAAAC,EAAA,yBAAAC,IAAA,eAAAC,EAAAN,GAAA,IAAAO,EAA+D,iBAG/D,MAAMC,EAAqB,IAAI,IAwDlBH,EAAuB,CAACI,EAAoCC,EAAuC,CAAC,IAAM,CACrH,KAAM,CAAE,YAAAC,EAAa,UAAAC,EAAY,GAAK,SAAAC,EAAW,IAAM,KAAAC,EAAO,GAAM,WAAAC,EAAY,WAAAC,EAAa,KAAM,EAAIN,EAEjGO,KAAmB,UAAsB,IAAI,EAC7CC,KAAkB,UAAsB,IAAI,EAG5CC,KAAiB,eAAY,IAAM,CACvC,GAAIR,EACF,OAAOA,EAGT,GAAIF,EAAW,SAAW,CAACS,EAAgB,QAAS,CAElD,MAAME,EAASX,EAAW,QAAQ,aAAa,kBAAkB,EACjE,GAAIW,EACF,OAAAF,EAAgB,QAAUE,EACnBA,EAGT,MAAMC,EAAiB,CAAC,EACxB,IAAIC,EAAqBb,EAAW,QACpC,KAAOa,GAAMA,IAAO,SAAS,MAAM,CACjC,MAAMC,EAAQ,MAAM,KAAKD,EAAG,eAAe,UAAY,CAAC,CAAC,EAAE,QAAQA,CAAE,EACrED,EAAK,QAAQ,GAAGC,EAAG,QAAQ,YAAY,CAAC,IAAIC,CAAK,GAAG,EACpDD,EAAKA,EAAG,aACV,CACA,OAAAJ,EAAgB,QAAUG,EAAK,KAAK,KAAK,EAClCH,EAAgB,OACzB,CACA,OAAOA,EAAgB,SAAW,EACpC,EAAG,CAACP,EAAaF,CAAU,CAAC,EAGtBe,KAAa,eAAY,IAAM,CAC/BP,EAAiB,UACnB,aAAaA,EAAiB,OAAO,EACrCA,EAAiB,QAAU,KAE/B,EAAG,CAAC,CAAC,EAEL,sBAAU,IAAM,CACd,MAAMQ,EAAUhB,EAAW,QAC3B,GAAI,CAACgB,GAAW,CAACV,EAAY,OAE7B,MAAMW,EAAMP,EAAe,EAC3B,GAAI,CAACO,EAAK,CACR,QAAQ,KAAK,+HAA8D,EAC3E,MACF,CAGA,GAAIZ,GAAQN,EAAmB,IAAIkB,CAAG,EACpC,OAGF,MAAMC,EAAW,IAAI,qBACnBC,GAAW,CACTA,EAAQ,QAAQC,GAAS,CAEnBA,EAAM,mBAAqBjB,GAExB,CAACE,GAAQ,CAACN,EAAmB,IAAIkB,CAAG,IAAM,CAACT,EAAiB,UAC/DA,EAAiB,QAAU,OAAO,WAAW,IAAM,CAE7CH,GAAQN,EAAmB,IAAIkB,CAAG,IAGlCZ,GACFN,EAAmB,IAAIkB,CAAG,EAG5BX,EAAW,EACb,EAAGF,CAAQ,GAITI,EAAiB,UACnB,aAAaA,EAAiB,OAAO,EACrCA,EAAiB,QAAU,KAGjC,CAAC,CACH,EACA,CACE,UAAWL,EACX,WAAYI,CACd,CACF,EAEA,OAAAW,EAAS,QAAQF,CAAO,EAEjB,IAAM,CACXE,EAAS,WAAW,EAChBV,EAAiB,UACnB,aAAaA,EAAiB,OAAO,EACrCA,EAAiB,QAAU,KAE/B,CACF,EAAG,CAACR,EAAYM,EAAYH,EAAWC,EAAUC,EAAME,EAAYG,CAAc,CAAC,EAE3E,CAAE,WAAAK,CAAW,CACtB,EAKarB,EAAuBuB,GAAgB,CAClDlB,EAAmB,OAAOkB,CAAG,CAC/B,EAKaxB,EAA0B,IAAM,CAC3CM,EAAmB,MAAM,CAC3B,EAKaJ,EAAcsB,GAClBlB,EAAmB,IAAIkB,CAAG",
   "names": ["useExposureDetection_exports", "__export", "clearAllExposureRecords", "clearExposureRecord", "hasExposed", "useExposureDetection", "__toCommonJS", "import_react", "exposedElementsSet", "elementRef", "options", "exposureKey", "threshold", "duration", "once", "onExposure", "rootMargin", "exposureTimerRef", "generatedKeyRef", "getExposureKey", "dataId", "path", "el", "index", "clearTimer", "element", "key", "observer", "entries", "entry"]
 }

package/dist/cjs/hooks/useIntersectionObserver.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useIntersectionObserver.ts"],
-  "sourcesContent": ["import { type RefObject, useRef, useEffect } from 'react'\n\ntype DelayOptions = {\n  callback: () => void\n  once?: boolean\n  threshold?: number\n  delay?: number\n}\n\n// \u7F13\u5B58\u53EF\u89C1\u6027\u68C0\u67E5\u7ED3\u679C\uFF0C\u907F\u514D\u91CD\u590D\u8BA1\u7B97\nconst visibilityCache = new WeakMap<Element, { visible: boolean; timestamp: number }>()\nconst CACHE_DURATION = 500 // \u7F13\u5B58500ms\uFF0C\u5E73\u8861\u6027\u80FD\u548C\u51C6\u786E\u6027\n\n/**\n * \u68C0\u67E5\u5143\u7D20\u662F\u5426\u771F\u6B63\u53EF\u89C1\uFF08\u4F18\u5316\u7248\u672C\uFF0C\u5E26\u7F13\u5B58\uFF09\n * @param element \u8981\u68C0\u67E5\u7684\u5143\u7D20\n * @returns \u5143\u7D20\u662F\u5426\u53EF\u89C1\n */\nconst isElementVisible = (element: Element): boolean => {\n  const now = Date.now()\n  \n  // \u68C0\u67E5\u7F13\u5B58\n  const cached = visibilityCache.get(element)\n  if (cached && (now - cached.timestamp) < CACHE_DURATION) {\n    return cached.visible\n  }\n  \n  const el = element as HTMLElement\n  \n  // \u5FEB\u901F\u68C0\u67E5\uFF1A\u5143\u7D20\u662F\u5426\u5B58\u5728\n  if (!el) {\n    visibilityCache.set(element, { visible: false, timestamp: now })\n    return false\n  }\n  \n  // \u5FEB\u901F\u68C0\u67E5\uFF1A\u5143\u7D20\u662F\u5426\u5728DOM\u4E2D\n  if (!document.contains(el)) {\n    visibilityCache.set(element, { visible: false, timestamp: now })\n    return false\n  }\n  \n  // \u4F7F\u7528 getBoundingClientRect \u8FDB\u884C\u5FEB\u901F\u68C0\u67E5\uFF08\u6BD4 getComputedStyle \u66F4\u5FEB\uFF09\n  const rect = el.getBoundingClientRect()\n  \n  // \u5982\u679C\u5143\u7D20\u6CA1\u6709\u5C3A\u5BF8\uFF0C\u76F4\u63A5\u8FD4\u56DE false\uFF08\u8FD9\u6BD4\u68C0\u67E5 CSS \u6837\u5F0F\u66F4\u5FEB\uFF09\n  if (rect.width === 0 || rect.height === 0) {\n    visibilityCache.set(element, { visible: false, timestamp: now })\n    return false\n  }\n  \n  // \u53EA\u6709\u5728\u5FC5\u8981\u65F6\u624D\u68C0\u67E5 CSS \u6837\u5F0F\uFF08\u5EF6\u8FDF\u68C0\u67E5\uFF09\n  // \u5148\u68C0\u67E5\u6700\u5E38\u89C1\u7684\u9690\u85CF\u60C5\u51B5\n  const style = el.style\n  if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') {\n    visibilityCache.set(element, { visible: false, timestamp: now })\n    return false\n  }\n  \n  // \u5982\u679C\u5185\u8054\u6837\u5F0F\u6CA1\u6709\u9690\u85CF\uFF0C\u518D\u68C0\u67E5\u8BA1\u7B97\u6837\u5F0F\uFF08\u66F4\u6602\u8D35\u7684\u64CD\u4F5C\uFF09\n  // \u4F46\u53EA\u5728\u5143\u7D20\u786E\u5B9E\u6709\u5C3A\u5BF8\u4E14\u5728\u89C6\u53E3\u5185\u65F6\u624D\u68C0\u67E5\n  if (rect.width > 0 && rect.height > 0) {\n    const computedStyle = window.getComputedStyle(el)\n    if (computedStyle.display === 'none' || \n        computedStyle.visibility === 'hidden' || \n        computedStyle.opacity === '0') {\n      visibilityCache.set(element, { visible: false, timestamp: now })\n      return false\n    }\n  }\n  \n  const visible = true\n  visibilityCache.set(element, { visible, timestamp: now })\n  return visible\n}\n/**\n * \u53EA\u6709\u63D0\u7559\u8D85\u8FC7delay\u8BBE\u7F6E\u7684\u65F6\u95F4\u624D\u4F1A\u89E6\u53D1callback\n * @param targetRef\n * @param callback\n * @param once\n * @param threshold\n * @param delay\n */\nexport const useIntersectionObserverDelay = (\n  targetRef: RefObject<any> | undefined,\n  { callback, once, threshold = 0.8, delay = 0 }: DelayOptions\n) => {\n  const timeoutRef = useRef<number>(0)\n  const triggeredRef = useRef(false)\n\n  useEffect(() => {\n    if (!targetRef?.current) {\n      return\n    }\n\n    if (typeof IntersectionObserver === 'undefined') {\n      return\n    }\n\n    const current = targetRef.current\n    const options = {\n      root: null,\n      rootMargin: '0px',\n      threshold: threshold,\n    }\n    const observer = new IntersectionObserver(entries => {\n      entries.forEach(entry => {\n        if (entry.isIntersecting && isElementVisible(entry.target)) {\n          if (delay) {\n            window.clearTimeout(timeoutRef.current)\n            if (triggeredRef.current) return\n            timeoutRef.current = window.setTimeout(() => {\n              callback()\n              triggeredRef.current = true\n            }, delay)\n          } else {\n            callback()\n            triggeredRef.current = true\n          }\n\n          if (once && triggeredRef.current) {\n            observer.disconnect()\n          }\n        } else {\n          if (timeoutRef.current) {\n            window.clearTimeout(timeoutRef.current)\n          }\n        }\n      })\n    }, options)\n    if (current) {\n      observer.observe(current)\n    }\n    return () => {\n      observer.disconnect()\n      window.clearTimeout(timeoutRef.current)\n    }\n  }, [once, threshold, delay, targetRef?.current])\n}\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kCAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAkD,iBAUlD,MAAMC,EAAkB,IAAI,QACtBC,EAAiB,IAOjBC,EAAoBC,GAA8B,CACtD,MAAMC,EAAM,KAAK,IAAI,EAGfC,EAASL,EAAgB,IAAIG,CAAO,EAC1C,GAAIE,GAAWD,EAAMC,EAAO,UAAaJ,EACvC,OAAOI,EAAO,QAGhB,MAAMC,EAAKH,EAGX,GAAI,CAACG,EACH,OAAAN,EAAgB,IAAIG,EAAS,CAAE,QAAS,GAAO,UAAWC,CAAI,CAAC,EACxD,GAIT,GAAI,CAAC,SAAS,SAASE,CAAE,EACvB,OAAAN,EAAgB,IAAIG,EAAS,CAAE,QAAS,GAAO,UAAWC,CAAI,CAAC,EACxD,GAIT,MAAMG,EAAOD,EAAG,sBAAsB,EAGtC,GAAIC,EAAK,QAAU,GAAKA,EAAK,SAAW,EACtC,OAAAP,EAAgB,IAAIG,EAAS,CAAE,QAAS,GAAO,UAAWC,CAAI,CAAC,EACxD,GAKT,MAAMI,EAAQF,EAAG,MACjB,GAAIE,EAAM,UAAY,QAAUA,EAAM,aAAe,UAAYA,EAAM,UAAY,IACjF,OAAAR,EAAgB,IAAIG,EAAS,CAAE,QAAS,GAAO,UAAWC,CAAI,CAAC,EACxD,GAKT,GAAIG,EAAK,MAAQ,GAAKA,EAAK,OAAS,EAAG,CACrC,MAAME,EAAgB,OAAO,iBAAiBH,CAAE,EAChD,GAAIG,EAAc,UAAY,QAC1BA,EAAc,aAAe,UAC7BA,EAAc,UAAY,IAC5B,OAAAT,EAAgB,IAAIG,EAAS,CAAE,QAAS,GAAO,UAAWC,CAAI,CAAC,EACxD,EAEX,CAEA,MAAMM,EAAU,GAChB,OAAAV,EAAgB,IAAIG,EAAS,CAAE,QAAAO,EAAS,UAAWN,CAAI,CAAC,EACjDM,CACT,EASab,EAA+B,CAC1Cc,EACA,CAAE,SAAAC,EAAU,KAAAC,EAAM,UAAAC,EAAY,GAAK,MAAAC,EAAQ,CAAE,IAC1C,CACH,MAAMC,KAAa,UAAe,CAAC,EAC7BC,KAAe,UAAO,EAAK,KAEjC,aAAU,IAAM,CAKd,GAJI,CAACN,GAAW,SAIZ,OAAO,qBAAyB,IAClC,OAGF,MAAMO,EAAUP,EAAU,QACpBQ,EAAU,CACd,KAAM,KACN,WAAY,MACZ,UAAWL,CACb,EACMM,EAAW,IAAI,qBAAqBC,GAAW,CACnDA,EAAQ,QAAQC,GAAS,CACvB,GAAIA,EAAM,gBAAkBpB,EAAiBoB,EAAM,MAAM,EAAG,CAC1D,GAAIP,EAAO,CAET,GADA,OAAO,aAAaC,EAAW,OAAO,EAClCC,EAAa,QAAS,OAC1BD,EAAW,QAAU,OAAO,WAAW,IAAM,CAC3CJ,EAAS,EACTK,EAAa,QAAU,EACzB,EAAGF,CAAK,CACV,MACEH,EAAS,EACTK,EAAa,QAAU,GAGrBJ,GAAQI,EAAa,SACvBG,EAAS,WAAW,CAExB,MACMJ,EAAW,SACb,OAAO,aAAaA,EAAW,OAAO,CAG5C,CAAC,CACH,EAAGG,CAAO,EACV,OAAID,GACFE,EAAS,QAAQF,CAAO,EAEnB,IAAM,CACXE,EAAS,WAAW,EACpB,OAAO,aAAaJ,EAAW,OAAO,CACxC,CACF,EAAG,CAACH,EAAMC,EAAWC,EAAOJ,GAAW,OAAO,CAAC,CACjD",
+  "sourcesContent": ["import { type RefObject, useRef, useEffect } from 'react'\n\ntype DelayOptions = {\n  callback: () => void\n  once?: boolean\n  threshold?: number\n  delay?: number\n}\n\n// \u7F13\u5B58\u53EF\u89C1\u6027\u68C0\u67E5\u7ED3\u679C\uFF0C\u907F\u514D\u91CD\u590D\u8BA1\u7B97\nconst visibilityCache = new WeakMap<Element, { visible: boolean; timestamp: number }>()\nconst CACHE_DURATION = 500 // \u7F13\u5B58500ms\uFF0C\u5E73\u8861\u6027\u80FD\u548C\u51C6\u786E\u6027\n\n/**\n * \u68C0\u67E5\u5143\u7D20\u662F\u5426\u771F\u6B63\u53EF\u89C1\uFF08\u4F18\u5316\u7248\u672C\uFF0C\u5E26\u7F13\u5B58\uFF09\n * @param element \u8981\u68C0\u67E5\u7684\u5143\u7D20\n * @returns \u5143\u7D20\u662F\u5426\u53EF\u89C1\n */\nconst isElementVisible = (element: Element): boolean => {\n  const now = Date.now()\n\n  // \u68C0\u67E5\u7F13\u5B58\n  const cached = visibilityCache.get(element)\n  if (cached && now - cached.timestamp < CACHE_DURATION) {\n    return cached.visible\n  }\n\n  const el = element as HTMLElement\n\n  // \u5FEB\u901F\u68C0\u67E5\uFF1A\u5143\u7D20\u662F\u5426\u5B58\u5728\n  if (!el) {\n    visibilityCache.set(element, { visible: false, timestamp: now })\n    return false\n  }\n\n  // \u5FEB\u901F\u68C0\u67E5\uFF1A\u5143\u7D20\u662F\u5426\u5728DOM\u4E2D\n  if (!document.contains(el)) {\n    visibilityCache.set(element, { visible: false, timestamp: now })\n    return false\n  }\n\n  // \u4F7F\u7528 getBoundingClientRect \u8FDB\u884C\u5FEB\u901F\u68C0\u67E5\uFF08\u6BD4 getComputedStyle \u66F4\u5FEB\uFF09\n  const rect = el.getBoundingClientRect()\n\n  // \u5982\u679C\u5143\u7D20\u6CA1\u6709\u5C3A\u5BF8\uFF0C\u76F4\u63A5\u8FD4\u56DE false\uFF08\u8FD9\u6BD4\u68C0\u67E5 CSS \u6837\u5F0F\u66F4\u5FEB\uFF09\n  if (rect.width === 0 || rect.height === 0) {\n    visibilityCache.set(element, { visible: false, timestamp: now })\n    return false\n  }\n\n  // \u53EA\u6709\u5728\u5FC5\u8981\u65F6\u624D\u68C0\u67E5 CSS \u6837\u5F0F\uFF08\u5EF6\u8FDF\u68C0\u67E5\uFF09\n  // \u5148\u68C0\u67E5\u6700\u5E38\u89C1\u7684\u9690\u85CF\u60C5\u51B5\n  const style = el.style\n  if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') {\n    visibilityCache.set(element, { visible: false, timestamp: now })\n    return false\n  }\n\n  // \u5982\u679C\u5185\u8054\u6837\u5F0F\u6CA1\u6709\u9690\u85CF\uFF0C\u518D\u68C0\u67E5\u8BA1\u7B97\u6837\u5F0F\uFF08\u66F4\u6602\u8D35\u7684\u64CD\u4F5C\uFF09\n  // \u4F46\u53EA\u5728\u5143\u7D20\u786E\u5B9E\u6709\u5C3A\u5BF8\u4E14\u5728\u89C6\u53E3\u5185\u65F6\u624D\u68C0\u67E5\n  if (rect.width > 0 && rect.height > 0) {\n    const computedStyle = window.getComputedStyle(el)\n    if (computedStyle.display === 'none' || computedStyle.visibility === 'hidden' || computedStyle.opacity === '0') {\n      visibilityCache.set(element, { visible: false, timestamp: now })\n      return false\n    }\n  }\n\n  const visible = true\n  visibilityCache.set(element, { visible, timestamp: now })\n  return visible\n}\n/**\n * \u53EA\u6709\u63D0\u7559\u8D85\u8FC7delay\u8BBE\u7F6E\u7684\u65F6\u95F4\u624D\u4F1A\u89E6\u53D1callback\n * @param targetRef\n * @param callback\n * @param once\n * @param threshold\n * @param delay\n */\nexport const useIntersectionObserverDelay = (\n  targetRef: RefObject<any> | undefined,\n  { callback, once, threshold = 0.8, delay = 0 }: DelayOptions\n) => {\n  const timeoutRef = useRef<number>(0)\n  const triggeredRef = useRef(false)\n\n  useEffect(() => {\n    if (!targetRef?.current) {\n      return\n    }\n\n    if (typeof IntersectionObserver === 'undefined') {\n      return\n    }\n\n    const current = targetRef.current\n    const options = {\n      root: null,\n      rootMargin: '0px',\n      threshold: threshold,\n    }\n    const observer = new IntersectionObserver(entries => {\n      entries.forEach(entry => {\n        if (entry.isIntersecting && isElementVisible(entry.target)) {\n          if (delay) {\n            window.clearTimeout(timeoutRef.current)\n            if (triggeredRef.current) return\n            timeoutRef.current = window.setTimeout(() => {\n              callback()\n              triggeredRef.current = true\n            }, delay)\n          } else {\n            callback()\n            triggeredRef.current = true\n          }\n\n          if (once && triggeredRef.current) {\n            observer.disconnect()\n          }\n        } else {\n          if (timeoutRef.current) {\n            window.clearTimeout(timeoutRef.current)\n          }\n        }\n      })\n    }, options)\n    if (current) {\n      observer.observe(current)\n    }\n    return () => {\n      observer.disconnect()\n      window.clearTimeout(timeoutRef.current)\n    }\n  }, [once, threshold, delay, targetRef?.current])\n}\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kCAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAkD,iBAUlD,MAAMC,EAAkB,IAAI,QACtBC,EAAiB,IAOjBC,EAAoBC,GAA8B,CACtD,MAAMC,EAAM,KAAK,IAAI,EAGfC,EAASL,EAAgB,IAAIG,CAAO,EAC1C,GAAIE,GAAUD,EAAMC,EAAO,UAAYJ,EACrC,OAAOI,EAAO,QAGhB,MAAMC,EAAKH,EAGX,GAAI,CAACG,EACH,OAAAN,EAAgB,IAAIG,EAAS,CAAE,QAAS,GAAO,UAAWC,CAAI,CAAC,EACxD,GAIT,GAAI,CAAC,SAAS,SAASE,CAAE,EACvB,OAAAN,EAAgB,IAAIG,EAAS,CAAE,QAAS,GAAO,UAAWC,CAAI,CAAC,EACxD,GAIT,MAAMG,EAAOD,EAAG,sBAAsB,EAGtC,GAAIC,EAAK,QAAU,GAAKA,EAAK,SAAW,EACtC,OAAAP,EAAgB,IAAIG,EAAS,CAAE,QAAS,GAAO,UAAWC,CAAI,CAAC,EACxD,GAKT,MAAMI,EAAQF,EAAG,MACjB,GAAIE,EAAM,UAAY,QAAUA,EAAM,aAAe,UAAYA,EAAM,UAAY,IACjF,OAAAR,EAAgB,IAAIG,EAAS,CAAE,QAAS,GAAO,UAAWC,CAAI,CAAC,EACxD,GAKT,GAAIG,EAAK,MAAQ,GAAKA,EAAK,OAAS,EAAG,CACrC,MAAME,EAAgB,OAAO,iBAAiBH,CAAE,EAChD,GAAIG,EAAc,UAAY,QAAUA,EAAc,aAAe,UAAYA,EAAc,UAAY,IACzG,OAAAT,EAAgB,IAAIG,EAAS,CAAE,QAAS,GAAO,UAAWC,CAAI,CAAC,EACxD,EAEX,CAEA,MAAMM,EAAU,GAChB,OAAAV,EAAgB,IAAIG,EAAS,CAAE,QAAAO,EAAS,UAAWN,CAAI,CAAC,EACjDM,CACT,EASab,EAA+B,CAC1Cc,EACA,CAAE,SAAAC,EAAU,KAAAC,EAAM,UAAAC,EAAY,GAAK,MAAAC,EAAQ,CAAE,IAC1C,CACH,MAAMC,KAAa,UAAe,CAAC,EAC7BC,KAAe,UAAO,EAAK,KAEjC,aAAU,IAAM,CAKd,GAJI,CAACN,GAAW,SAIZ,OAAO,qBAAyB,IAClC,OAGF,MAAMO,EAAUP,EAAU,QACpBQ,EAAU,CACd,KAAM,KACN,WAAY,MACZ,UAAWL,CACb,EACMM,EAAW,IAAI,qBAAqBC,GAAW,CACnDA,EAAQ,QAAQC,GAAS,CACvB,GAAIA,EAAM,gBAAkBpB,EAAiBoB,EAAM,MAAM,EAAG,CAC1D,GAAIP,EAAO,CAET,GADA,OAAO,aAAaC,EAAW,OAAO,EAClCC,EAAa,QAAS,OAC1BD,EAAW,QAAU,OAAO,WAAW,IAAM,CAC3CJ,EAAS,EACTK,EAAa,QAAU,EACzB,EAAGF,CAAK,CACV,MACEH,EAAS,EACTK,EAAa,QAAU,GAGrBJ,GAAQI,EAAa,SACvBG,EAAS,WAAW,CAExB,MACMJ,EAAW,SACb,OAAO,aAAaA,EAAW,OAAO,CAG5C,CAAC,CACH,EAAGG,CAAO,EACV,OAAID,GACFE,EAAS,QAAQF,CAAO,EAEnB,IAAM,CACXE,EAAS,WAAW,EACpB,OAAO,aAAaJ,EAAW,OAAO,CACxC,CACF,EAAG,CAACH,EAAMC,EAAWC,EAAOJ,GAAW,OAAO,CAAC,CACjD",
   "names": ["useIntersectionObserver_exports", "__export", "useIntersectionObserverDelay", "__toCommonJS", "import_react", "visibilityCache", "CACHE_DURATION", "isElementVisible", "element", "now", "cached", "el", "rect", "style", "computedStyle", "visible", "targetRef", "callback", "once", "threshold", "delay", "timeoutRef", "triggeredRef", "current", "options", "observer", "entries", "entry"]
 }

package/dist/cjs/hooks/useRollout.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useRollout.ts"],
-  "sourcesContent": ["import { useEffect, useRef, useState, type MutableRefObject } from 'react'\n\nexport function useRollout<T extends HTMLElement = HTMLElement>(\n  options: any\n): [MutableRefObject<T | null>, boolean] {\n  const ref = useRef<T>(null)\n  const [inView, setInView] = useState(false)\n  useEffect(() => {\n    if (inView) return // \u5DF2\u8FDB\u5165\u8FC7\uFF0C\u5219\u4E0D\u518D\u89C2\u5BDF\n    const el = ref.current\n    if (!el || typeof IntersectionObserver === 'undefined') return\n    const observer = new IntersectionObserver(([entry]) => {\n      if (entry.isIntersecting) {\n        setInView(true)\n        observer.disconnect() // \u505C\u6B62\u89C2\u5BDF\n      }\n    }, options)\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [inView, options])\n  return [ref, inView]\n}\n\n\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAmE,iBAE5D,SAASF,EACdG,EACuC,CACvC,MAAMC,KAAM,UAAU,IAAI,EACpB,CAACC,EAAQC,CAAS,KAAI,YAAS,EAAK,EAC1C,sBAAU,IAAM,CACd,GAAID,EAAQ,OACZ,MAAME,EAAKH,EAAI,QACf,GAAI,CAACG,GAAM,OAAO,qBAAyB,IAAa,OACxD,MAAMC,EAAW,IAAI,qBAAqB,CAAC,CAACC,CAAK,IAAM,CACjDA,EAAM,iBACRH,EAAU,EAAI,EACdE,EAAS,WAAW,EAExB,EAAGL,CAAO,EACV,OAAAK,EAAS,QAAQD,CAAE,EACZ,IAAMC,EAAS,WAAW,CACnC,EAAG,CAACH,EAAQF,CAAO,CAAC,EACb,CAACC,EAAKC,CAAM,CACrB",
+  "sourcesContent": ["import { useEffect, useRef, useState, type MutableRefObject } from 'react'\n\nexport function useRollout<T extends HTMLElement = HTMLElement>(options: any): [MutableRefObject<T | null>, boolean] {\n  const ref = useRef<T>(null)\n  const [inView, setInView] = useState(false)\n  useEffect(() => {\n    if (inView) return // \u5DF2\u8FDB\u5165\u8FC7\uFF0C\u5219\u4E0D\u518D\u89C2\u5BDF\n    const el = ref.current\n    if (!el || typeof IntersectionObserver === 'undefined') return\n    const observer = new IntersectionObserver(([entry]) => {\n      if (entry.isIntersecting) {\n        setInView(true)\n        observer.disconnect() // \u505C\u6B62\u89C2\u5BDF\n      }\n    }, options)\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [inView, options])\n  return [ref, inView]\n}\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAmE,iBAE5D,SAASF,EAAgDG,EAAqD,CACnH,MAAMC,KAAM,UAAU,IAAI,EACpB,CAACC,EAAQC,CAAS,KAAI,YAAS,EAAK,EAC1C,sBAAU,IAAM,CACd,GAAID,EAAQ,OACZ,MAAME,EAAKH,EAAI,QACf,GAAI,CAACG,GAAM,OAAO,qBAAyB,IAAa,OACxD,MAAMC,EAAW,IAAI,qBAAqB,CAAC,CAACC,CAAK,IAAM,CACjDA,EAAM,iBACRH,EAAU,EAAI,EACdE,EAAS,WAAW,EAExB,EAAGL,CAAO,EACV,OAAAK,EAAS,QAAQD,CAAE,EACZ,IAAMC,EAAS,WAAW,CACnC,EAAG,CAACH,EAAQF,CAAO,CAAC,EACb,CAACC,EAAKC,CAAM,CACrB",
   "names": ["useRollout_exports", "__export", "useRollout", "__toCommonJS", "import_react", "options", "ref", "inView", "setInView", "el", "observer", "entry"]
 }

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import Board from '../components/board';
+import Board from '../components/board.js';
 declare const meta: Meta<typeof Board>;
 export default meta;
 type Story = StoryObj<typeof Board>;

package/dist/cjs/stories/board.stories.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var m=Object.create;var a=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var c=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var S=(o,t)=>{for(var r in t)a(o,r,{get:t[r],enumerable:!0})},d=(o,t,r,y)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of s(t))!B.call(o,e)&&e!==r&&a(o,e,{get:()=>t[e],enumerable:!(y=n(t,e))||y.enumerable});return o};var b=(o,t,r)=>(r=o!=null?m(c(o)):{},d(t||!o||!o.__esModule?a(r,"default",{value:o,enumerable:!0}):r,o)),l=o=>d(a({},"__esModule",{value:!0}),o);var O={};S(O,{Default:()=>M,default:()=>u});module.exports=l(O);var f=require("react/jsx-runtime"),p=b(require("../components/board"));const i={title:"Components/Board",component:p.default,tags:["autodocs"]};var u=i;const M={render:()=>(0,f.jsx)(p.default,{})};
+"use strict";var m=Object.create;var a=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var c=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var S=(o,t)=>{for(var r in t)a(o,r,{get:t[r],enumerable:!0})},d=(o,t,r,y)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of s(t))!B.call(o,e)&&e!==r&&a(o,e,{get:()=>t[e],enumerable:!(y=n(t,e))||y.enumerable});return o};var b=(o,t,r)=>(r=o!=null?m(c(o)):{},d(t||!o||!o.__esModule?a(r,"default",{value:o,enumerable:!0}):r,o)),l=o=>d(a({},"__esModule",{value:!0}),o);var O={};S(O,{Default:()=>M,default:()=>u});module.exports=l(O);var f=require("react/jsx-runtime"),p=b(require("../components/board.js"));const i={title:"Components/Board",component:p.default,tags:["autodocs"]};var u=i;const M={render:()=>(0,f.jsx)(p.default,{})};
 //# sourceMappingURL=board.stories.js.map

package/dist/cjs/stories/board.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/stories/board.stories.tsx"],
-  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport Board from '../components/board'\n\nconst meta: Meta<typeof Board> = {\n  title: 'Components/Board',\n  component: Board,\n  tags: ['autodocs'],\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof Board>\n\nexport const Default: Story = {\n  render: () => <Board />,\n}"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,GAcgB,IAAAK,EAAA,6BAbhBC,EAAkB,kCAElB,MAAMC,EAA2B,CAC/B,MAAO,mBACP,UAAW,EAAAC,QACX,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOL,EAAQI,EAIR,MAAML,EAAiB,CAC5B,OAAQ,OAAM,OAAC,EAAAM,QAAA,EAAM,CACvB",
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport Board from '../components/board.js'\n\nconst meta: Meta<typeof Board> = {\n  title: 'Components/Board',\n  component: Board,\n  tags: ['autodocs'],\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof Board>\n\nexport const Default: Story = {\n  render: () => <Board />,\n}\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,GAcgB,IAAAK,EAAA,6BAbhBC,EAAkB,qCAElB,MAAMC,EAA2B,CAC/B,MAAO,mBACP,UAAW,EAAAC,QACX,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOL,EAAQI,EAIR,MAAML,EAAiB,CAC5B,OAAQ,OAAM,OAAC,EAAAM,QAAA,EAAM,CACvB",
   "names": ["board_stories_exports", "__export", "Default", "board_stories_default", "__toCommonJS", "import_jsx_runtime", "import_board", "meta", "Board"]
 }