@stfrigerio/sito-template 0.1.37 → 0.1.44

package/storybook-static/assets/ImageSlideshow.stories-BOxjGf7e.js

@@ -0,0 +1,385 @@
+import{r,j as e}from"./iframe-2N7rjfXm.js";import{A as ra}from"./index-IKMS7NhW.js";import{m as j}from"./proxy-qiKixXs8.js";import{c as I}from"./createLucideIcon-wa-8tr0c.js";import{C as sa}from"./chevron-right-4NIYYZ8p.js";import"./preload-helper-C1FmrZbK.js";import"./MotionConfigContext-4uS6JRtS.js";/**
+ * @license lucide-react v0.539.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ia=[["path",{d:"m15 18-6-6 6-6",key:"1wnfg3"}]],la=I("chevron-left",ia);/**
+ * @license lucide-react v0.539.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ca=[["path",{d:"M12 15V3",key:"m9g1x1"}],["path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4",key:"ih7n3h"}],["path",{d:"m7 10 5 5 5-5",key:"brsn70"}]],da=I("download",ca);/**
+ * @license lucide-react v0.539.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ua=[["path",{d:"M8 3H5a2 2 0 0 0-2 2v3",key:"1dcmit"}],["path",{d:"M21 8V5a2 2 0 0 0-2-2h-3",key:"1e4gt3"}],["path",{d:"M3 16v3a2 2 0 0 0 2 2h3",key:"wsl5sc"}],["path",{d:"M16 21h3a2 2 0 0 0 2-2v-3",key:"18trek"}]],ma=I("maximize",ua);/**
+ * @license lucide-react v0.539.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ga=[["rect",{x:"14",y:"3",width:"5",height:"18",rx:"1",key:"kaeet6"}],["rect",{x:"5",y:"3",width:"5",height:"18",rx:"1",key:"1wsw3u"}]],pa=I("pause",ga);/**
+ * @license lucide-react v0.539.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const ha=[["path",{d:"M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z",key:"10ikf1"}]],fa=I("play",ha);/**
+ * @license lucide-react v0.539.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */const va=[["circle",{cx:"18",cy:"5",r:"3",key:"gq8acd"}],["circle",{cx:"6",cy:"12",r:"3",key:"w7nqdw"}],["circle",{cx:"18",cy:"19",r:"3",key:"1xt0gg"}],["line",{x1:"8.59",x2:"15.42",y1:"13.51",y2:"17.49",key:"47mynk"}],["line",{x1:"15.41",x2:"8.59",y1:"6.51",y2:"10.49",key:"1n3mei"}]],ya=I("share-2",va),wa="_slideshow_1a6nu_1",ba="_fullscreen_1a6nu_12",xa="_empty_1a6nu_23",Ia="_emptyState_1a6nu_30",Sa="_mainContainer_1a6nu_36",Ta="_slide_1a6nu_1",_a="_image_1a6nu_58",Ca="_imageLoader_1a6nu_67",ka="_spinner_1a6nu_77",ja="_control_1a6nu_91",Da="_controlPrev_1a6nu_130",Pa="_controlNext_1a6nu_134",Ra="_controlPlay_1a6nu_138",Aa="_topControls_1a6nu_168",$a="_controlAction_1a6nu_178",Na="_caption_1a6nu_202",Fa="_captionTitle_1a6nu_213",Ea="_captionText_1a6nu_220",La="_imageMetadata_1a6nu_227",za="_metadataItem_1a6nu_236",qa="_indicators_1a6nu_246",Va="_hasThumbnails_1a6nu_256",Ma="_indicator_1a6nu_246",Oa="_indicatorActive_1a6nu_274",Ba="_thumbnails_1a6nu_279",Ga="_thumbnail_1a6nu_279",Ua="_thumbnailActive_1a6nu_323",Ha="_thumbnailImage_1a6nu_328",t={slideshow:wa,fullscreen:ba,empty:xa,emptyState:Ia,mainContainer:Sa,slide:Ta,image:_a,imageLoader:Ca,spinner:ka,control:ja,controlPrev:Da,controlNext:Pa,controlPlay:Ra,topControls:Aa,controlAction:$a,caption:Na,captionTitle:Fa,captionText:Ea,imageMetadata:La,metadataItem:za,indicators:qa,hasThumbnails:Va,indicator:Ma,indicatorActive:Oa,thumbnails:Ba,thumbnail:Ga,thumbnailActive:Ua,thumbnailImage:Ha},h=({images:l,autoPlay:v=!1,autoPlayInterval:c=3e3,showThumbnails:y=!0,showControls:S=!0,showIndicators:g=!0,showCaptions:m=!0,loop:u=!0,fadeTransition:C=!1,enableFullscreen:q=!0,enableDownload:ze=!1,enableShare:qe=!1,enableDragReorder:H=!1,lazyLoading:w=!0,preloadAdjacent:W=!0,className:X="",onImageChange:V,onDownload:J,onShare:K,onImageReorder:Q,initialIndex:Ve=0})=>{const[i,Me]=r.useState(Ve),[T,Oe]=r.useState(v),[Y,Be]=r.useState(null),[Z,ee]=r.useState(null),[M,O]=r.useState(!1),[Ge,Ue]=r.useState(new Set),[o,ae]=r.useState(l),[He,ne]=r.useState(!1),[_,te]=r.useState(null),oe=r.useRef(null),We=r.useRef(null),B=r.useRef(null),re=50,p=r.useCallback(a=>{const n=Math.max(0,Math.min(a,o.length-1));Me(n),V&&V(n,o[n])},[o,V]),b=r.useCallback(()=>{i<o.length-1?p(i+1):u&&p(0)},[i,o.length,u,p]),k=r.useCallback(()=>{i>0?p(i-1):u&&p(o.length-1)},[i,o.length,u,p]),G=r.useCallback(()=>{Oe(a=>!a)},[]),se=()=>{var a;document.fullscreenElement?(document.exitFullscreen(),O(!1)):((a=oe.current)==null||a.requestFullscreen(),O(!0))},Xe=a=>{Ue(n=>new Set([...n,a]))},Je=()=>{const a=o[i];if(J)J(a);else if(a.downloadUrl||a.src){const n=document.createElement("a");n.href=a.downloadUrl||a.src,n.download=a.title||a.alt||"image",document.body.appendChild(n),n.click(),document.body.removeChild(n)}},Ke=async()=>{const a=o[i];if(K)K(a);else if(navigator.share)try{await navigator.share({title:a.title||a.alt,text:a.caption,url:a.src})}catch(n){console.log("Error sharing:",n)}else navigator.clipboard.writeText(a.src)},Qe=(a,n)=>{H&&(ne(!0),te(n),a.dataTransfer.effectAllowed="move")},Ye=a=>{a.preventDefault(),a.dataTransfer.dropEffect="move"},Ze=(a,n)=>{if(a.preventDefault(),_===null||_===n)return;const d=[...o],x=d[_];d.splice(_,1),d.splice(n,0,x),ae(d),ne(!1),te(null),Q&&Q(d)},ea=a=>{const n=new Image;n.src=a},aa=a=>{ee(null),Be(a.targetTouches[0].clientX)},na=a=>{ee(a.targetTouches[0].clientX)},ta=()=>{if(!Y||!Z)return;const a=Y-Z,n=a>re,d=a<-re;n?b():d&&k()};if(r.useEffect(()=>{if(!T||o.length<=1)return;const a=setInterval(()=>{b()},c);return()=>clearInterval(a)},[T,c,b,o.length]),r.useEffect(()=>{ae(l)},[l]),r.useEffect(()=>{W&&[i-1,i+1,u&&i===0?o.length-1:-1,u&&i===o.length-1?0:-1].filter(n=>n>=0&&n<o.length).forEach(n=>{o[n]&&ea(o[n].src)})},[i,o,l,u,W]),r.useEffect(()=>{const a=()=>{O(!!document.fullscreenElement)};return document.addEventListener("fullscreenchange",a),()=>document.removeEventListener("fullscreenchange",a)},[]),r.useEffect(()=>(w&&(B.current=new IntersectionObserver(a=>{a.forEach(n=>{var d;if(n.isIntersecting){const x=n.target,ie=x.dataset.src;ie&&(x.src=ie,x.removeAttribute("data-src"),(d=B.current)==null||d.unobserve(x))}})},{threshold:.1})),()=>{var a;(a=B.current)==null||a.disconnect()}),[w]),r.useEffect(()=>{const a=n=>{switch(n.key){case"ArrowLeft":k();break;case"ArrowRight":b();break;case" ":n.preventDefault(),G();break;case"f":case"F":q&&se();break}};return document.addEventListener("keydown",a),()=>document.removeEventListener("keydown",a)},[k,b,q,G]),!o||o.length===0)return e.jsx("div",{className:`${t.slideshow} ${t.empty} ${X}`,children:e.jsx("div",{className:t.emptyState,children:e.jsx("span",{children:"No images to display"})})});const oa={enter:a=>({x:a>0?1e3:-1e3,opacity:C?0:1}),center:{zIndex:1,x:0,opacity:1},exit:a=>({zIndex:0,x:a<0?1e3:-1e3,opacity:C?0:1})},s=o[i],U=Ge.has(s.id);return e.jsxs("div",{ref:oe,className:`${t.slideshow} ${M?t.fullscreen:""} ${y&&o.length>1?t.hasThumbnails:""} ${X}`,children:[e.jsxs("div",{className:t.mainContainer,onTouchStart:aa,onTouchMove:na,onTouchEnd:ta,children:[e.jsx(ra,{mode:"wait",custom:1,children:e.jsxs(j.div,{custom:1,variants:oa,initial:"enter",animate:"center",exit:"exit",transition:{x:{type:"spring",stiffness:300,damping:30},opacity:{duration:.3}},className:t.slide,children:[e.jsx("img",{ref:We,src:w&&!U?void 0:s.src,"data-src":w?s.src:void 0,srcSet:s.srcSet,sizes:s.sizes,alt:s.alt,className:t.image,draggable:!1,onLoad:()=>Xe(s.id),style:{opacity:w&&!U?0:1,transition:"opacity 0.3s ease"}}),w&&!U&&e.jsx("div",{className:t.imageLoader,children:e.jsx("div",{className:t.spinner})})]},i)}),S&&o.length>1&&e.jsxs(e.Fragment,{children:[e.jsx("button",{className:`${t.control} ${t.controlPrev}`,onClick:k,disabled:!u&&i===0,"aria-label":"Previous image",children:e.jsx(la,{})}),e.jsx("button",{className:`${t.control} ${t.controlNext}`,onClick:b,disabled:!u&&i===o.length-1,"aria-label":"Next image",children:e.jsx(sa,{})})]}),e.jsxs("div",{className:t.topControls,children:[q&&e.jsx("button",{className:`${t.control} ${t.controlAction}`,onClick:se,"aria-label":M?"Exit fullscreen":"Enter fullscreen",title:M?"Exit fullscreen (F)":"Enter fullscreen (F)",children:e.jsx("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:"100%",height:"100%"},children:e.jsx(ma,{})})}),ze&&e.jsx("button",{className:`${t.control} ${t.controlAction}`,onClick:Je,"aria-label":"Download image",title:"Download image",children:e.jsx("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:"100%",height:"100%"},children:e.jsx(da,{})})}),qe&&e.jsx("button",{className:`${t.control} ${t.controlAction}`,onClick:Ke,"aria-label":"Share image",title:"Share image",children:e.jsx("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:"100%",height:"100%"},children:e.jsx(ya,{})})})]}),v&&o.length>1&&e.jsx("button",{className:`${t.control} ${t.controlPlay}`,onClick:G,"aria-label":T?"Pause slideshow":"Play slideshow",title:T?"Pause slideshow (Space)":"Play slideshow (Space)",children:T?e.jsx(pa,{}):e.jsx(fa,{})}),m&&(s.caption||s.title)&&e.jsxs(j.div,{className:t.caption,initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{delay:.3},children:[s.title&&e.jsx("h3",{className:t.captionTitle,children:s.title}),s.caption&&e.jsx("p",{className:t.captionText,children:s.caption}),s.metadata&&e.jsxs("div",{className:t.imageMetadata,children:[s.metadata.photographer&&e.jsxs("span",{className:t.metadataItem,children:["📷 ",s.metadata.photographer]}),s.metadata.location&&e.jsxs("span",{className:t.metadataItem,children:["📍 ",s.metadata.location]}),s.metadata.camera&&e.jsxs("span",{className:t.metadataItem,children:["📹 ",s.metadata.camera]})]})]})]}),g&&o.length>1&&e.jsx("div",{className:t.indicators,children:o.map((a,n)=>e.jsx(j.button,{className:`${t.indicator} ${n===i?t.indicatorActive:""}`,onClick:()=>p(n),whileHover:{scale:1.2},whileTap:{scale:.8},"aria-label":`Go to slide ${n+1}`},n))}),y&&o.length>1&&e.jsx("div",{className:`${t.thumbnails} ${He?t.thumbnailsDragging:""}`,children:o.map((a,n)=>e.jsx(j.button,{className:`${t.thumbnail} ${n===i?t.thumbnailActive:""} ${_===n?t.thumbnailDragged:""}`,onClick:()=>p(n),whileHover:{scale:1.05},whileTap:{scale:.95},"aria-label":`Go to ${a.alt}`,draggable:H,onDragStart:d=>Qe(d,n),onDragOver:Ye,onDrop:d=>Ze(d,n),title:a.title||a.alt,children:e.jsx("img",{src:a.src,alt:a.alt,className:t.thumbnailImage,draggable:!1})},a.id))})]})};h.__docgenInfo={description:"",methods:[],displayName:"ImageSlideshow",props:{images:{required:!0,tsType:{name:"Array",elements:[{name:"SlideshowImage"}],raw:"SlideshowImage[]"},description:""},autoPlay:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},autoPlayInterval:{required:!1,tsType:{name:"number"},description:"",defaultValue:{value:"3000",computed:!1}},showThumbnails:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}},showControls:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}},showIndicators:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}},showCaptions:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}},loop:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}},fadeTransition:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},enableFullscreen:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}},enableDownload:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},enableShare:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},enableDragReorder:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},lazyLoading:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}},preloadAdjacent:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}},className:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"''",computed:!1}},onImageChange:{required:!1,tsType:{name:"signature",type:"function",raw:"(index: number, image: SlideshowImage) => void",signature:{arguments:[{type:{name:"number"},name:"index"},{type:{name:"SlideshowImage"},name:"image"}],return:{name:"void"}}},description:""},onDownload:{required:!1,tsType:{name:"signature",type:"function",raw:"(image: SlideshowImage) => void",signature:{arguments:[{type:{name:"SlideshowImage"},name:"image"}],return:{name:"void"}}},description:""},onShare:{required:!1,tsType:{name:"signature",type:"function",raw:"(image: SlideshowImage) => void",signature:{arguments:[{type:{name:"SlideshowImage"},name:"image"}],return:{name:"void"}}},description:""},onImageReorder:{required:!1,tsType:{name:"signature",type:"function",raw:"(newOrder: SlideshowImage[]) => void",signature:{arguments:[{type:{name:"Array",elements:[{name:"SlideshowImage"}],raw:"SlideshowImage[]"},name:"newOrder"}],return:{name:"void"}}},description:""},initialIndex:{required:!1,tsType:{name:"number"},description:"",defaultValue:{value:"0",computed:!1}}}};const an={title:"Organisms/ImageSlideshow",component:h,parameters:{layout:"padded",docs:{description:{component:"An advanced, feature-rich image slideshow component with fullscreen mode, lazy loading, drag-to-reorder, download/share functionality, and enhanced accessibility. Perfect for professional galleries, product showcases, portfolios, and any sophisticated image presentation needs."}}},tags:["autodocs"],argTypes:{images:{control:"object",description:"Array of images to display in the slideshow"},autoPlay:{control:"boolean",description:"Enable automatic slideshow progression"},autoPlayInterval:{control:{type:"number",min:1e3,max:1e4,step:500},description:"Interval between slides in milliseconds"},showThumbnails:{control:"boolean",description:"Show thumbnail navigation"},showControls:{control:"boolean",description:"Show next/previous arrow controls"},showIndicators:{control:"boolean",description:"Show dot indicators"},showCaptions:{control:"boolean",description:"Show image captions and titles"},loop:{control:"boolean",description:"Enable looping from last to first slide"},fadeTransition:{control:"boolean",description:"Use fade transition instead of slide"},enableFullscreen:{control:"boolean",description:"Enable fullscreen mode with F key support"},enableDownload:{control:"boolean",description:"Enable image download functionality"},enableShare:{control:"boolean",description:"Enable image sharing functionality"},enableDragReorder:{control:"boolean",description:"Enable drag-to-reorder thumbnails"},lazyLoading:{control:"boolean",description:"Enable lazy loading for better performance"},preloadAdjacent:{control:"boolean",description:"Preload adjacent images for smoother navigation"},initialIndex:{control:{type:"number",min:0},description:"Initial slide index"},onImageChange:{action:"image-changed"},onDownload:{action:"image-downloaded"},onShare:{action:"image-shared"},onImageReorder:{action:"images-reordered"}}},f=[{id:"1",src:"https://picsum.photos/800/600?random=1",alt:"Beautiful landscape with mountains",title:"Mountain Vista",caption:"A breathtaking view of snow-capped mountains during golden hour, showcasing the natural beauty of the alpine landscape.",srcSet:"https://picsum.photos/400/300?random=1 400w, https://picsum.photos/800/600?random=1 800w, https://picsum.photos/1200/900?random=1 1200w",sizes:"(max-width: 768px) 400px, (max-width: 1200px) 800px, 1200px",downloadUrl:"https://picsum.photos/1920/1440?random=1",metadata:{width:800,height:600,photographer:"John Smith",location:"Swiss Alps",camera:"Canon EOS R5"}},{id:"2",src:"https://picsum.photos/800/600?random=2",alt:"Ocean waves at sunset",title:"Ocean Sunset",caption:"Gentle waves rolling onto the shore as the sun sets, painting the sky in brilliant shades of orange and pink.",metadata:{photographer:"Sarah Johnson",location:"Malibu Beach",camera:"Sony A7R IV"}},{id:"3",src:"https://picsum.photos/800/600?random=3",alt:"Forest path in autumn",title:"Autumn Trail",caption:"A winding path through a deciduous forest displaying the vibrant colors of fall foliage.",metadata:{photographer:"Mike Chen",location:"Vermont Woods",camera:"Nikon D850"}},{id:"4",src:"https://picsum.photos/800/600?random=4",alt:"City skyline at night",title:"Urban Lights",caption:"The city comes alive at night with thousands of lights creating a dazzling urban landscape.",metadata:{photographer:"Alex Rivera",location:"Manhattan",camera:"Fujifilm X-T4"}},{id:"5",src:"https://picsum.photos/800/600?random=5",alt:"Desert sand dunes",title:"Desert Dunes",caption:"Rolling sand dunes stretch endlessly under a clear blue sky in this pristine desert landscape.",metadata:{photographer:"Emma Wilson",location:"Sahara Desert",camera:"Canon EOS R6"}}],Wa=[{id:"product-1",src:"https://picsum.photos/800/600?random=10",alt:"Product front view",title:"Front View"},{id:"product-2",src:"https://picsum.photos/800/600?random=11",alt:"Product side view",title:"Side Profile"},{id:"product-3",src:"https://picsum.photos/800/600?random=12",alt:"Product back view",title:"Back View"},{id:"product-4",src:"https://picsum.photos/800/600?random=13",alt:"Product detail view",title:"Detail Shot"}],D={args:{images:f,autoPlay:!1,showThumbnails:!0,showControls:!0,showIndicators:!0,showCaptions:!0,loop:!0,fadeTransition:!1,enableFullscreen:!0,enableDownload:!1,enableShare:!1,enableDragReorder:!1,lazyLoading:!0,preloadAdjacent:!0,initialIndex:0}},P={args:{images:f,autoPlay:!1,showThumbnails:!0,showControls:!0,showIndicators:!0,showCaptions:!0,loop:!0,enableFullscreen:!0,enableDownload:!0,enableShare:!0,enableDragReorder:!0,lazyLoading:!0,preloadAdjacent:!0},parameters:{docs:{description:{story:"Full-featured slideshow with all advanced capabilities enabled: fullscreen (F key), download, share, and drag-to-reorder thumbnails."}}}},R={args:{images:f,autoPlay:!0,autoPlayInterval:3e3,showThumbnails:!0,showControls:!0,showIndicators:!0,showCaptions:!0,loop:!0,enableFullscreen:!0},parameters:{docs:{description:{story:"Slideshow with auto-play enabled. Images advance automatically every 3 seconds. Click the play/pause button to control playback."}}}},A={args:{images:f,showThumbnails:!1,showControls:!0,showIndicators:!0,showCaptions:!1,loop:!0},parameters:{docs:{description:{story:"A minimal slideshow with only arrow controls and dot indicators. Perfect for clean, distraction-free image viewing."}}}},$={args:{images:f,fadeTransition:!0,showThumbnails:!0,showControls:!0,showIndicators:!0,showCaptions:!0,loop:!0,enableFullscreen:!0},parameters:{docs:{description:{story:"Uses fade transition instead of slide transition for a smoother, more elegant effect."}}}},N={args:{images:Wa,showThumbnails:!0,showControls:!0,showIndicators:!1,showCaptions:!0,loop:!1,fadeTransition:!0},parameters:{docs:{description:{story:"Product showcase configuration with thumbnails for easy navigation and no looping. Ideal for e-commerce product galleries."}}}},F={args:{images:[]},render:()=>{const[l,v]=r.useState(null),[c,y]=r.useState([]),S=(g,m)=>{const u=new Date().toLocaleTimeString();v(m),y(C=>[`[${u}] 📸 Changed to: ${m.title||m.alt}`,...C.slice(0,4)])};return e.jsxs("div",{children:[e.jsxs("div",{style:{padding:"var(--spacing-md)",background:"var(--color-primary-light)",borderRadius:"var(--radius-md)",marginBottom:"var(--spacing-lg)"},children:[e.jsx("h4",{style:{margin:"0 0 var(--spacing-xs) 0",color:"var(--color-primary)"},children:"🎯 Interactive Demo"}),e.jsx("p",{style:{margin:0,fontSize:"var(--font-size-sm)",color:"var(--color-text-secondary)"},children:"• Use arrow keys to navigate • Click thumbnails or indicators • Touch/swipe on mobile"})]}),e.jsx(h,{images:f,autoPlay:!0,autoPlayInterval:4e3,showThumbnails:!0,showControls:!0,showIndicators:!0,showCaptions:!0,loop:!0,enableFullscreen:!0,onImageChange:S}),l&&e.jsxs("div",{style:{marginTop:"var(--spacing-lg)",padding:"var(--spacing-md)",background:"var(--color-background-secondary)",borderRadius:"var(--radius-md)"},children:[e.jsx("h5",{style:{margin:"0 0 var(--spacing-sm) 0",color:"var(--color-text)"},children:"📷 Current Image:"}),e.jsxs("div",{style:{padding:"var(--spacing-sm)",background:"var(--color-background)",borderRadius:"var(--radius-xs)",fontSize:"var(--font-size-sm)"},children:[e.jsx("strong",{children:l.title})," - ",l.alt]})]}),c.length>0&&e.jsxs("div",{style:{marginTop:"var(--spacing-md)",padding:"var(--spacing-md)",background:"var(--color-background-secondary)",borderRadius:"var(--radius-md)"},children:[e.jsx("h5",{style:{margin:"0 0 var(--spacing-sm) 0",color:"var(--color-text)"},children:"Recent Navigation:"}),c.map((g,m)=>e.jsx("div",{style:{padding:"var(--spacing-xs)",margin:"2px 0",background:"var(--color-background)",borderRadius:"var(--radius-xs)",fontSize:"var(--font-size-xs)",fontFamily:"monospace"},children:g},m))]})]})},parameters:{docs:{description:{story:"Interactive demo showing the onChange callback and current image state. Navigation actions are logged in real-time."}}}},E={args:{images:[]},render:()=>{const l=Array.from({length:8},(v,c)=>({id:`gallery-${c+1}`,src:`https://picsum.photos/800/600?random=${20+c}`,alt:`Gallery image ${c+1}`,title:`Photo ${c+1}`,caption:`This is a sample caption for gallery image ${c+1}. Each image can have its own unique caption.`}));return e.jsxs("div",{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-md)",color:"var(--color-text)"},children:"🖼️ Full-Featured Gallery"}),e.jsx(h,{images:l,autoPlay:!1,showThumbnails:!0,showControls:!0,showIndicators:!0,showCaptions:!0,loop:!0,fadeTransition:!1})]})},parameters:{docs:{description:{story:"A full-featured responsive gallery with multiple images, thumbnails, and captions. Test the responsive behavior by resizing your browser."}}}},L={args:{images:[]},render:()=>{const[l,v]=r.useState([...f]),[c,y]=r.useState([]),S=g=>{const m=new Date().toLocaleTimeString();v(g),y(u=>[`[${m}] 🔄 Images reordered`,...u.slice(0,3)])};return e.jsxs("div",{children:[e.jsxs("div",{style:{padding:"var(--spacing-md)",background:"var(--color-primary-light)",borderRadius:"var(--radius-md)",marginBottom:"var(--spacing-lg)"},children:[e.jsx("h4",{style:{margin:"0 0 var(--spacing-xs) 0",color:"var(--color-primary)"},children:"🎯 Drag & Drop Demo"}),e.jsx("p",{style:{margin:0,fontSize:"var(--font-size-sm)",color:"var(--color-text-secondary)"},children:"• Drag thumbnails to reorder images • Try fullscreen mode • Download and share functionality enabled"})]}),e.jsx(h,{images:l,showThumbnails:!0,showControls:!0,showIndicators:!0,showCaptions:!0,enableFullscreen:!0,enableDragReorder:!0,lazyLoading:!0,preloadAdjacent:!0,onImageReorder:S}),c.length>0&&e.jsxs("div",{style:{marginTop:"var(--spacing-lg)",padding:"var(--spacing-md)",background:"var(--color-background-secondary)",borderRadius:"var(--radius-md)"},children:[e.jsx("h5",{style:{margin:"0 0 var(--spacing-sm) 0",color:"var(--color-text)"},children:"Recent Actions:"}),c.map((g,m)=>e.jsx("div",{style:{padding:"var(--spacing-xs)",margin:"2px 0",background:"var(--color-background)",borderRadius:"var(--radius-xs)",fontSize:"var(--font-size-xs)",fontFamily:"monospace"},children:g},m))]})]})},parameters:{docs:{description:{story:"Advanced demo showcasing drag-to-reorder thumbnails, download/share functionality, and fullscreen mode."}}}},z={args:{images:[]},render:()=>{const l=[{id:"single",src:"https://picsum.photos/800/600?random=30",alt:"Single image",title:"Solo Exhibition",caption:"When there's only one image, navigation controls are automatically hidden."}];return e.jsxs("div",{style:{display:"grid",gap:"var(--spacing-xl)"},children:[e.jsxs("div",{children:[e.jsx("h4",{style:{margin:"0 0 var(--spacing-md) 0",color:"var(--color-text)"},children:"🖼️ Single Image"}),e.jsx(h,{images:l,showThumbnails:!0,showControls:!0,showIndicators:!0,showCaptions:!0})]}),e.jsxs("div",{children:[e.jsx("h4",{style:{margin:"0 0 var(--spacing-md) 0",color:"var(--color-text)"},children:"📭 Empty State"}),e.jsx(h,{images:[]})]}),e.jsxs("div",{children:[e.jsx("h4",{style:{margin:"0 0 var(--spacing-md) 0",color:"var(--color-text)"},children:"🎛️ No Thumbnails, Fade Only"}),e.jsx(h,{images:f.slice(0,3),showThumbnails:!1,showControls:!1,showIndicators:!0,showCaptions:!1,fadeTransition:!0,autoPlay:!0,autoPlayInterval:2e3})]})]})},parameters:{docs:{description:{story:"Different component states including single image, empty state, and various configuration combinations."}}}};var le,ce,de;D.parameters={...D.parameters,docs:{...(le=D.parameters)==null?void 0:le.docs,source:{originalSource:`{
+  args: {
+    images: sampleImages,
+    autoPlay: false,
+    showThumbnails: true,
+    showControls: true,
+    showIndicators: true,
+    showCaptions: true,
+    loop: true,
+    fadeTransition: false,
+    enableFullscreen: true,
+    enableDownload: false,
+    enableShare: false,
+    enableDragReorder: false,
+    lazyLoading: true,
+    preloadAdjacent: true,
+    initialIndex: 0
+  }
+}`,...(de=(ce=D.parameters)==null?void 0:ce.docs)==null?void 0:de.source}}};var ue,me,ge;P.parameters={...P.parameters,docs:{...(ue=P.parameters)==null?void 0:ue.docs,source:{originalSource:`{
+  args: {
+    images: sampleImages,
+    autoPlay: false,
+    showThumbnails: true,
+    showControls: true,
+    showIndicators: true,
+    showCaptions: true,
+    loop: true,
+    enableFullscreen: true,
+    enableDownload: true,
+    enableShare: true,
+    enableDragReorder: true,
+    lazyLoading: true,
+    preloadAdjacent: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Full-featured slideshow with all advanced capabilities enabled: fullscreen (F key), download, share, and drag-to-reorder thumbnails.'
+      }
+    }
+  }
+}`,...(ge=(me=P.parameters)==null?void 0:me.docs)==null?void 0:ge.source}}};var pe,he,fe;R.parameters={...R.parameters,docs:{...(pe=R.parameters)==null?void 0:pe.docs,source:{originalSource:`{
+  args: {
+    images: sampleImages,
+    autoPlay: true,
+    autoPlayInterval: 3000,
+    showThumbnails: true,
+    showControls: true,
+    showIndicators: true,
+    showCaptions: true,
+    loop: true,
+    enableFullscreen: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Slideshow with auto-play enabled. Images advance automatically every 3 seconds. Click the play/pause button to control playback.'
+      }
+    }
+  }
+}`,...(fe=(he=R.parameters)==null?void 0:he.docs)==null?void 0:fe.source}}};var ve,ye,we;A.parameters={...A.parameters,docs:{...(ve=A.parameters)==null?void 0:ve.docs,source:{originalSource:`{
+  args: {
+    images: sampleImages,
+    showThumbnails: false,
+    showControls: true,
+    showIndicators: true,
+    showCaptions: false,
+    loop: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A minimal slideshow with only arrow controls and dot indicators. Perfect for clean, distraction-free image viewing.'
+      }
+    }
+  }
+}`,...(we=(ye=A.parameters)==null?void 0:ye.docs)==null?void 0:we.source}}};var be,xe,Ie;$.parameters={...$.parameters,docs:{...(be=$.parameters)==null?void 0:be.docs,source:{originalSource:`{
+  args: {
+    images: sampleImages,
+    fadeTransition: true,
+    showThumbnails: true,
+    showControls: true,
+    showIndicators: true,
+    showCaptions: true,
+    loop: true,
+    enableFullscreen: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Uses fade transition instead of slide transition for a smoother, more elegant effect.'
+      }
+    }
+  }
+}`,...(Ie=(xe=$.parameters)==null?void 0:xe.docs)==null?void 0:Ie.source}}};var Se,Te,_e;N.parameters={...N.parameters,docs:{...(Se=N.parameters)==null?void 0:Se.docs,source:{originalSource:`{
+  args: {
+    images: productImages,
+    showThumbnails: true,
+    showControls: true,
+    showIndicators: false,
+    showCaptions: true,
+    loop: false,
+    fadeTransition: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Product showcase configuration with thumbnails for easy navigation and no looping. Ideal for e-commerce product galleries.'
+      }
+    }
+  }
+}`,...(_e=(Te=N.parameters)==null?void 0:Te.docs)==null?void 0:_e.source}}};var Ce,ke,je;F.parameters={...F.parameters,docs:{...(Ce=F.parameters)==null?void 0:Ce.docs,source:{originalSource:`{
+  args: {
+    images: []
+  },
+  render: () => {
+    const [currentImage, setCurrentImage] = useState<SlideshowImage | null>(null);
+    const [actionLog, setActionLog] = useState<string[]>([]);
+    const handleImageChange = (_index: number, image: SlideshowImage) => {
+      const timestamp = new Date().toLocaleTimeString();
+      setCurrentImage(image);
+      setActionLog(prev => [\`[\${timestamp}] 📸 Changed to: \${image.title || image.alt}\`, ...prev.slice(0, 4)]);
+    };
+    return <div>
+                <div style={{
+        padding: 'var(--spacing-md)',
+        background: 'var(--color-primary-light)',
+        borderRadius: 'var(--radius-md)',
+        marginBottom: 'var(--spacing-lg)'
+      }}>
+                    <h4 style={{
+          margin: '0 0 var(--spacing-xs) 0',
+          color: 'var(--color-primary)'
+        }}>
+                        🎯 Interactive Demo
+                    </h4>
+                    <p style={{
+          margin: 0,
+          fontSize: 'var(--font-size-sm)',
+          color: 'var(--color-text-secondary)'
+        }}>
+                        • Use arrow keys to navigate • Click thumbnails or indicators • Touch/swipe on mobile
+                    </p>
+                </div>
+
+                <ImageSlideshow images={sampleImages} autoPlay={true} autoPlayInterval={4000} showThumbnails={true} showControls={true} showIndicators={true} showCaptions={true} loop={true} enableFullscreen={true} onImageChange={handleImageChange} />
+
+                {currentImage && <div style={{
+        marginTop: 'var(--spacing-lg)',
+        padding: 'var(--spacing-md)',
+        background: 'var(--color-background-secondary)',
+        borderRadius: 'var(--radius-md)'
+      }}>
+                        <h5 style={{
+          margin: '0 0 var(--spacing-sm) 0',
+          color: 'var(--color-text)'
+        }}>
+                            📷 Current Image:
+                        </h5>
+                        <div style={{
+          padding: 'var(--spacing-sm)',
+          background: 'var(--color-background)',
+          borderRadius: 'var(--radius-xs)',
+          fontSize: 'var(--font-size-sm)'
+        }}>
+                            <strong>{currentImage.title}</strong> - {currentImage.alt}
+                        </div>
+                    </div>}
+
+                {actionLog.length > 0 && <div style={{
+        marginTop: 'var(--spacing-md)',
+        padding: 'var(--spacing-md)',
+        background: 'var(--color-background-secondary)',
+        borderRadius: 'var(--radius-md)'
+      }}>
+                        <h5 style={{
+          margin: '0 0 var(--spacing-sm) 0',
+          color: 'var(--color-text)'
+        }}>
+                            Recent Navigation:
+                        </h5>
+                        {actionLog.map((log, index) => <div key={index} style={{
+          padding: 'var(--spacing-xs)',
+          margin: '2px 0',
+          background: 'var(--color-background)',
+          borderRadius: 'var(--radius-xs)',
+          fontSize: 'var(--font-size-xs)',
+          fontFamily: 'monospace'
+        }}>
+                                {log}
+                            </div>)}
+                    </div>}
+            </div>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Interactive demo showing the onChange callback and current image state. Navigation actions are logged in real-time.'
+      }
+    }
+  }
+}`,...(je=(ke=F.parameters)==null?void 0:ke.docs)==null?void 0:je.source}}};var De,Pe,Re;E.parameters={...E.parameters,docs:{...(De=E.parameters)==null?void 0:De.docs,source:{originalSource:`{
+  args: {
+    images: []
+  },
+  render: () => {
+    const galleryImages: SlideshowImage[] = Array.from({
+      length: 8
+    }, (_, i) => ({
+      id: \`gallery-\${i + 1}\`,
+      src: \`https://picsum.photos/800/600?random=\${20 + i}\`,
+      alt: \`Gallery image \${i + 1}\`,
+      title: \`Photo \${i + 1}\`,
+      caption: \`This is a sample caption for gallery image \${i + 1}. Each image can have its own unique caption.\`
+    }));
+    return <div>
+                <h3 style={{
+        marginBottom: 'var(--spacing-md)',
+        color: 'var(--color-text)'
+      }}>
+                    🖼️ Full-Featured Gallery
+                </h3>
+                <ImageSlideshow images={galleryImages} autoPlay={false} showThumbnails={true} showControls={true} showIndicators={true} showCaptions={true} loop={true} fadeTransition={false} />
+            </div>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A full-featured responsive gallery with multiple images, thumbnails, and captions. Test the responsive behavior by resizing your browser.'
+      }
+    }
+  }
+}`,...(Re=(Pe=E.parameters)==null?void 0:Pe.docs)==null?void 0:Re.source}}};var Ae,$e,Ne;L.parameters={...L.parameters,docs:{...(Ae=L.parameters)==null?void 0:Ae.docs,source:{originalSource:`{
+  args: {
+    images: []
+  },
+  render: () => {
+    const [reorderableImages, setReorderableImages] = useState([...sampleImages]);
+    const [reorderLog, setReorderLog] = useState<string[]>([]);
+    const handleImageReorder = (newOrder: SlideshowImage[]) => {
+      const timestamp = new Date().toLocaleTimeString();
+      setReorderableImages(newOrder);
+      setReorderLog(prev => [\`[\${timestamp}] 🔄 Images reordered\`, ...prev.slice(0, 3)]);
+    };
+    return <div>
+                <div style={{
+        padding: 'var(--spacing-md)',
+        background: 'var(--color-primary-light)',
+        borderRadius: 'var(--radius-md)',
+        marginBottom: 'var(--spacing-lg)'
+      }}>
+                    <h4 style={{
+          margin: '0 0 var(--spacing-xs) 0',
+          color: 'var(--color-primary)'
+        }}>
+                        🎯 Drag & Drop Demo
+                    </h4>
+                    <p style={{
+          margin: 0,
+          fontSize: 'var(--font-size-sm)',
+          color: 'var(--color-text-secondary)'
+        }}>
+                        • Drag thumbnails to reorder images • Try fullscreen mode • Download and share functionality enabled
+                    </p>
+                </div>
+
+                <ImageSlideshow images={reorderableImages} showThumbnails={true} showControls={true} showIndicators={true} showCaptions={true} enableFullscreen={true} enableDragReorder={true} lazyLoading={true} preloadAdjacent={true} onImageReorder={handleImageReorder} />
+
+                {reorderLog.length > 0 && <div style={{
+        marginTop: 'var(--spacing-lg)',
+        padding: 'var(--spacing-md)',
+        background: 'var(--color-background-secondary)',
+        borderRadius: 'var(--radius-md)'
+      }}>
+                        <h5 style={{
+          margin: '0 0 var(--spacing-sm) 0',
+          color: 'var(--color-text)'
+        }}>
+                            Recent Actions:
+                        </h5>
+                        {reorderLog.map((log, index) => <div key={index} style={{
+          padding: 'var(--spacing-xs)',
+          margin: '2px 0',
+          background: 'var(--color-background)',
+          borderRadius: 'var(--radius-xs)',
+          fontSize: 'var(--font-size-xs)',
+          fontFamily: 'monospace'
+        }}>
+                                {log}
+                            </div>)}
+                    </div>}
+            </div>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Advanced demo showcasing drag-to-reorder thumbnails, download/share functionality, and fullscreen mode.'
+      }
+    }
+  }
+}`,...(Ne=($e=L.parameters)==null?void 0:$e.docs)==null?void 0:Ne.source}}};var Fe,Ee,Le;z.parameters={...z.parameters,docs:{...(Fe=z.parameters)==null?void 0:Fe.docs,source:{originalSource:`{
+  args: {
+    images: []
+  },
+  render: () => {
+    const singleImage: SlideshowImage[] = [{
+      id: 'single',
+      src: 'https://picsum.photos/800/600?random=30',
+      alt: 'Single image',
+      title: 'Solo Exhibition',
+      caption: 'When there\\'s only one image, navigation controls are automatically hidden.'
+    }];
+    return <div style={{
+      display: 'grid',
+      gap: 'var(--spacing-xl)'
+    }}>
+                <div>
+                    <h4 style={{
+          margin: '0 0 var(--spacing-md) 0',
+          color: 'var(--color-text)'
+        }}>
+                        🖼️ Single Image
+                    </h4>
+                    <ImageSlideshow images={singleImage} showThumbnails={true} showControls={true} showIndicators={true} showCaptions={true} />
+                </div>
+
+                <div>
+                    <h4 style={{
+          margin: '0 0 var(--spacing-md) 0',
+          color: 'var(--color-text)'
+        }}>
+                        📭 Empty State
+                    </h4>
+                    <ImageSlideshow images={[]} />
+                </div>
+
+                <div>
+                    <h4 style={{
+          margin: '0 0 var(--spacing-md) 0',
+          color: 'var(--color-text)'
+        }}>
+                        🎛️ No Thumbnails, Fade Only
+                    </h4>
+                    <ImageSlideshow images={sampleImages.slice(0, 3)} showThumbnails={false} showControls={false} showIndicators={true} showCaptions={false} fadeTransition={true} autoPlay={true} autoPlayInterval={2000} />
+                </div>
+            </div>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Different component states including single image, empty state, and various configuration combinations.'
+      }
+    }
+  }
+}`,...(Le=(Ee=z.parameters)==null?void 0:Ee.docs)==null?void 0:Le.source}}};const nn=["Default","FullFeatured","AutoPlay","MinimalControls","FadeTransition","ProductShowcase","InteractiveDemo","ResponsiveGallery","DragToReorder","ComponentStates"];export{R as AutoPlay,z as ComponentStates,D as Default,L as DragToReorder,$ as FadeTransition,P as FullFeatured,F as InteractiveDemo,A as MinimalControls,N as ProductShowcase,E as ResponsiveGallery,nn as __namedExportsOrder,an as default};

package/storybook-static/assets/Iridescence-DkXB1G15.css

@@ -0,0 +1 @@
+._iridescence-container_rru4w_1{position:relative;width:100%;min-height:100vh}._iridescence-container_rru4w_1 canvas{display:block;width:100%;height:100%;position:absolute;top:0;left:0}

package/storybook-static/assets/Iridescence.stories-CTQo8feH.js

@@ -0,0 +1,47 @@
+import{r as m,j as T}from"./iframe-2N7rjfXm.js";import{R as q,P as F,M as I}from"./Mesh-CwXV3WjE.js";import{T as L}from"./Triangle-64ffRKNB.js";import{C as v}from"./Color-YRkaOI4u.js";import"./preload-helper-C1FmrZbK.js";const z={"iridescence-container":"_iridescence-container_rru4w_1"},B=`
+attribute vec2 uv;
+attribute vec2 position;
+
+varying vec2 vUv;
+
+void main() {
+  vUv = uv;
+  gl_Position = vec4(position, 0, 1);
+}
+`,P=`
+precision highp float;
+
+uniform float uTime;
+uniform vec3 uColor;
+uniform vec3 uResolution;
+uniform vec2 uMouse;
+uniform float uAmplitude;
+uniform float uSpeed;
+
+varying vec2 vUv;
+
+void main() {
+  float mr = min(uResolution.x, uResolution.y);
+  vec2 uv = (vUv.xy * 2.0 - 1.0) * uResolution.xy / mr;
+
+  uv += (uMouse - vec2(0.5)) * uAmplitude;
+
+  float d = -uTime * 0.5 * uSpeed;
+  float a = 0.0;
+  for (float i = 0.0; i < 8.0; ++i) {
+    a += cos(i - d - a * uv.x);
+    d += sin(uv.y * i + a);
+  }
+  d += uTime * 0.5 * uSpeed;
+  vec3 col = vec3(cos(uv * vec2(d, a)) * 0.6 + 0.4, cos(a + d) * 0.5 + 0.5);
+  col = cos(col * cos(vec3(d, a, 2.5)) * 0.5 + 0.5) * uColor;
+  gl_FragColor = vec4(col, 1.0);
+}
+`;function E({color:f=[1,1,1],speed:p=1,amplitude:g=.1,mouseReact:s=!0,...M}){const u=m.useRef(null),i=m.useRef({x:.5,y:.5});return m.useEffect(()=>{if(!u.current)return;const t=u.current,c=new q,e=c.gl;e.clearColor(1,1,1,1);let n;function l(){c.setSize(t.offsetWidth*1,t.offsetHeight*1),n&&(n.uniforms.uResolution.value=new v(e.canvas.width,e.canvas.height,e.canvas.width/e.canvas.height))}window.addEventListener("resize",l,!1),l();const S=new L(e);n=new F(e,{vertex:B,fragment:P,uniforms:{uTime:{value:0},uColor:{value:new v(...f)},uResolution:{value:new v(e.canvas.width,e.canvas.height,e.canvas.width/e.canvas.height)},uMouse:{value:new Float32Array([i.current.x,i.current.y])},uAmplitude:{value:g},uSpeed:{value:p}}});const A=new I(e,{geometry:S,program:n});let d;function h(o){d=requestAnimationFrame(h),n.uniforms.uTime.value=o*.001,c.render({scene:A})}d=requestAnimationFrame(h),t.appendChild(e.canvas);function w(o){const r=t.getBoundingClientRect(),x=(o.clientX-r.left)/r.width,y=1-(o.clientY-r.top)/r.height;i.current={x,y},n.uniforms.uMouse.value[0]=x,n.uniforms.uMouse.value[1]=y}return s&&t.addEventListener("mousemove",w),()=>{var o;cancelAnimationFrame(d),window.removeEventListener("resize",l),s&&t.removeEventListener("mousemove",w),t.removeChild(e.canvas),(o=e.getExtension("WEBGL_lose_context"))==null||o.loseContext()}},[f,p,g,s]),T.jsx("div",{ref:u,className:`${z["iridescence-container"]}`,...M})}E.__docgenInfo={description:"",methods:[],displayName:"Iridescence",props:{color:{defaultValue:{value:"[1, 1, 1]",computed:!1},required:!1},speed:{defaultValue:{value:"1.0",computed:!1},required:!1},amplitude:{defaultValue:{value:"0.1",computed:!1},required:!1},mouseReact:{defaultValue:{value:"true",computed:!1},required:!1}}};const N={title:"ReactBits/Backgrounds/Iridescence",component:E,parameters:{layout:"fullscreen"},tags:["autodocs"]},a={args:{color:[1,1,1],speed:1,amplitude:.1,mouseReact:!0}};var R,C,_;a.parameters={...a.parameters,docs:{...(R=a.parameters)==null?void 0:R.docs,source:{originalSource:`{
+  args: {
+    color: [1, 1, 1],
+    speed: 1.0,
+    amplitude: 0.1,
+    mouseReact: true
+  }
+}`,...(_=(C=a.parameters)==null?void 0:C.docs)==null?void 0:_.source}}};const W=["Default"];export{a as Default,W as __namedExportsOrder,N as default};

package/storybook-static/assets/LaserFlow-YpDTX0s9.css

@@ -0,0 +1 @@
+._laser-flow-container_f5ui5_1{width:100%;min-height:100vh;position:relative;pointer-events:none}._laser-flow-container_f5ui5_1 canvas{display:block;width:100%;height:100%;position:absolute;top:0;left:0}