@stfrigerio/sito-template 0.1.57 → 0.1.59

package/dist/themes/dao.css

@@ -1,4 +1,19 @@
-/* Dao Theme — Monochrome White */
+/* Dao Theme — Monochrome White, brutalist shape */
+@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
+
+/* Shape + typography — shared across light & dark */
+:root[data-theme^="dao"],
+[data-theme^="dao"] {
+    --radius-sm: 0;
+    --radius-md: 0;
+    --radius-lg: 0;
+    --radius-xl: 0;
+    --radius-2xl: 0;
+    --radius-full: 0;
+
+    --font-family-primary: 'Space Grotesk', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
+    --font-family-mono: 'Share Tech Mono', 'JetBrains Mono', 'SF Mono', Consolas, monospace;
+}
 
 :root[data-theme="dao"],
 [data-theme="dao"] {

package/dist/themes/globals.css

@@ -9,17 +9,14 @@ html {
 }
 
 body {
-	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-		'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-		sans-serif;
+	font-family: var(--font-family-primary);
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 	line-height: 1.5;
 }
 
 code {
-	font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-		monospace;
+	font-family: var(--font-family-mono);
 }
 
 button {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stfrigerio/sito-template",
-  "version": "0.1.57",
+  "version": "0.1.59",
   "description": "A library of React components with animations for quick website development",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/storybook-static/assets/{ASCIIText.stories-LbmvFzzv.js → ASCIIText.stories-CsG3yKr5.js}

@@ -1,4 +1,4 @@
-import{r as v,j as w}from"./iframe-B8pH-Lvr.js";import{P as E,S as F,a$ as I,a5 as T,q as R,i as B,M as A,W as P}from"./three.module--_vTUKhS.js";import"./preload-helper-C1FmrZbK.js";const D=`
+import{r as g,j as w}from"./iframe-Cw8dCV4Z.js";import{P as E,S as F,a$ as I,a5 as T,q as R,i as B,M as A,W as P}from"./three.module--_vTUKhS.js";import"./preload-helper-C1FmrZbK.js";const D=`
 varying vec2 vUv;
 uniform float uTime;
 uniform float mouse;
@@ -36,7 +36,7 @@ void main() {
     gl_FragColor = vec4(r, g, b, a);
 }
 `;Math.map=function(d,e,t,i,s){return(d-e)/(t-e)*(s-i)+i};const M=typeof window<"u"?window.devicePixelRatio:1;class k{constructor(e,{fontSize:t,fontFamily:i,charset:s,invert:o}={}){this.renderer=e,this.domElement=document.createElement("div"),this.domElement.style.position="absolute",this.domElement.style.top="0",this.domElement.style.left="0",this.domElement.style.width="100%",this.domElement.style.height="100%",this.pre=document.createElement("pre"),this.domElement.appendChild(this.pre),this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.domElement.appendChild(this.canvas),this.deg=0,this.invert=o??!0,this.fontSize=t??12,this.fontFamily=i??"'Courier New', monospace",this.charset=s??" .'`^\",:;Il!i~+_-?][}{1)(|/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$",this.context.webkitImageSmoothingEnabled=!1,this.context.mozImageSmoothingEnabled=!1,this.context.msImageSmoothingEnabled=!1,this.context.imageSmoothingEnabled=!1,this.onMouseMove=this.onMouseMove.bind(this),document.addEventListener("mousemove",this.onMouseMove)}setSize(e,t){this.width=e,this.height=t,this.renderer.setSize(e,t),this.reset(),this.center={x:e/2,y:t/2},this.mouse={x:this.center.x,y:this.center.y}}reset(){this.context.font=`${this.fontSize}px ${this.fontFamily}`;const e=this.context.measureText("A").width;this.cols=Math.floor(this.width/(this.fontSize*(e/this.fontSize))),this.rows=Math.floor(this.height/this.fontSize),this.canvas.width=this.cols,this.canvas.height=this.rows,this.pre.style.fontFamily=this.fontFamily,this.pre.style.fontSize=`${this.fontSize}px`,this.pre.style.margin="0",this.pre.style.padding="0",this.pre.style.lineHeight="1em",this.pre.style.position="absolute",this.pre.style.left="0",this.pre.style.top="0",this.pre.style.zIndex="9",this.pre.style.backgroundAttachment="fixed",this.pre.style.mixBlendMode="difference"}render(e,t){this.renderer.render(e,t);const i=this.canvas.width,s=this.canvas.height;this.context.clearRect(0,0,i,s),this.context&&i&&s&&this.context.drawImage(this.renderer.domElement,0,0,i,s),this.asciify(this.context,i,s),this.hue()}onMouseMove(e){this.mouse={x:e.clientX*M,y:e.clientY*M}}get dx(){return this.mouse.x-this.center.x}get dy(){return this.mouse.y-this.center.y}hue(){const e=Math.atan2(this.dy,this.dx)*180/Math.PI;this.deg+=(e-this.deg)*.075,this.domElement.style.filter=`hue-rotate(${this.deg.toFixed(1)}deg)`}asciify(e,t,i){if(t&&i){const s=e.getImageData(0,0,t,i).data;let o="";for(let a=0;a<i;a++){for(let n=0;n<t;n++){const r=n*4+a*4*t,[h,u,x,y]=[s[r],s[r+1],s[r+2],s[r+3]];if(y===0){o+=" ";continue}let f=(.3*h+.6*u+.1*x)/255,l=Math.floor((1-f)*(this.charset.length-1));this.invert&&(l=this.charset.length-l-1),o+=this.charset[l]}o+=`
-`}this.pre.innerHTML=o}}dispose(){document.removeEventListener("mousemove",this.onMouseMove)}}class H{constructor(e,{fontSize:t=200,fontFamily:i="Arial",color:s="#fdf9f3"}={}){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.txt=e,this.fontSize=t,this.fontFamily=i,this.color=s,this.font=`600 ${this.fontSize}px ${this.fontFamily}`}resize(){this.context.font=this.font;const e=this.context.measureText(this.txt),t=Math.ceil(e.width)+20,i=Math.ceil(e.actualBoundingBoxAscent+e.actualBoundingBoxDescent)+20;this.canvas.width=t,this.canvas.height=i}render(){this.context.clearRect(0,0,this.canvas.width,this.canvas.height),this.context.fillStyle=this.color,this.context.font=this.font;const t=10+this.context.measureText(this.txt).actualBoundingBoxAscent;this.context.fillText(this.txt,10,t)}get width(){return this.canvas.width}get height(){return this.canvas.height}get texture(){return this.canvas}}class L{constructor({text:e,asciiFontSize:t,textFontSize:i,textColor:s,planeBaseHeight:o,enableWaves:a},n,r,h){this.textString=e,this.asciiFontSize=t,this.textFontSize=i,this.textColor=s,this.planeBaseHeight=o,this.container=n,this.width=r,this.height=h,this.enableWaves=a,this.camera=new E(45,this.width/this.height,1,1e3),this.camera.position.z=30,this.scene=new F,this.mouse={x:this.width/2,y:this.height/2},this.onMouseMove=this.onMouseMove.bind(this)}async init(){try{await document.fonts.load('600 200px "IBM Plex Mono"'),await document.fonts.load('500 12px "IBM Plex Mono"')}catch{}await document.fonts.ready,this.setMesh(),this.setRenderer()}setMesh(){this.textCanvas=new H(this.textString,{fontSize:this.textFontSize,fontFamily:"IBM Plex Mono",color:this.textColor}),this.textCanvas.resize(),this.textCanvas.render(),this.texture=new I(this.textCanvas.texture),this.texture.minFilter=T;const e=this.textCanvas.width/this.textCanvas.height,t=this.planeBaseHeight,i=t*e,s=t;this.geometry=new R(i,s,36,36),this.material=new B({vertexShader:D,fragmentShader:W,transparent:!0,uniforms:{uTime:{value:0},mouse:{value:1},uTexture:{value:this.texture},uEnableWaves:{value:this.enableWaves?1:0}}}),this.mesh=new A(this.geometry,this.material),this.scene.add(this.mesh)}setRenderer(){this.renderer=new P({antialias:!1,alpha:!0}),this.renderer.setPixelRatio(1),this.renderer.setClearColor(0,0),this.filter=new k(this.renderer,{fontFamily:"IBM Plex Mono",fontSize:this.asciiFontSize,invert:!0}),this.container.appendChild(this.filter.domElement),this.setSize(this.width,this.height),this.container.addEventListener("mousemove",this.onMouseMove),this.container.addEventListener("touchmove",this.onMouseMove)}setSize(e,t){this.width=e,this.height=t,this.camera.aspect=e/t,this.camera.updateProjectionMatrix(),this.filter.setSize(e,t),this.center={x:e/2,y:t/2}}load(){this.animate()}onMouseMove(e){const t=e.touches?e.touches[0]:e,i=this.container.getBoundingClientRect(),s=t.clientX-i.left,o=t.clientY-i.top;this.mouse={x:s,y:o}}animate(){const e=()=>{this.animationFrameId=requestAnimationFrame(e),this.render()};e()}render(){const e=new Date().getTime()*.001;this.textCanvas.render(),this.texture.needsUpdate=!0,this.mesh.material.uniforms.uTime.value=Math.sin(e),this.updateRotation(),this.filter.render(this.scene,this.camera)}updateRotation(){const e=Math.map(this.mouse.y,0,this.height,.5,-.5),t=Math.map(this.mouse.x,0,this.width,-.5,.5);this.mesh.rotation.x+=(e-this.mesh.rotation.x)*.05,this.mesh.rotation.y+=(t-this.mesh.rotation.y)*.05}clear(){this.scene.traverse(e=>{e.isMesh&&typeof e.material=="object"&&e.material!==null&&(Object.keys(e.material).forEach(t=>{const i=e.material[t];i!==null&&typeof i=="object"&&typeof i.dispose=="function"&&i.dispose()}),e.material.dispose(),e.geometry.dispose())}),this.scene.clear()}dispose(){cancelAnimationFrame(this.animationFrameId),this.filter&&(this.filter.dispose(),this.filter.domElement.parentNode&&this.container.removeChild(this.filter.domElement)),this.container.removeEventListener("mousemove",this.onMouseMove),this.container.removeEventListener("touchmove",this.onMouseMove),this.clear(),this.renderer&&(this.renderer.dispose(),this.renderer.forceContextLoss())}}function C({text:d="David!",asciiFontSize:e=8,textFontSize:t=200,textColor:i="#fdf9f3",planeBaseHeight:s=8,enableWaves:o=!0}){const a=v.useRef(null),n=v.useRef(null);return v.useEffect(()=>{if(!a.current)return;let r=!1,h=null,u=null;const x=async(f,l,c)=>{const m=new L({text:d,asciiFontSize:e,textFontSize:t,textColor:i,planeBaseHeight:s,enableWaves:o},f,l,c);return await m.init(),m};return(async()=>{const{width:f,height:l}=a.current.getBoundingClientRect();if(f===0||l===0){h=new IntersectionObserver(async([c])=>{if(!r&&c.isIntersecting&&c.boundingClientRect.width>0&&c.boundingClientRect.height>0){const{width:m,height:p}=c.boundingClientRect;h.disconnect(),h=null,r||(n.current=await x(a.current,m,p),!r&&n.current&&n.current.load())}},{threshold:.1}),h.observe(a.current);return}n.current=await x(a.current,f,l),!r&&n.current&&(n.current.load(),u=new ResizeObserver(c=>{if(!c[0]||!n.current)return;const{width:m,height:p}=c[0].contentRect;m>0&&p>0&&n.current.setSize(m,p)}),u.observe(a.current))})(),()=>{r=!0,h&&h.disconnect(),u&&u.disconnect(),n.current&&(n.current.dispose(),n.current=null)}},[d,e,t,i,s,o]),w.jsx("div",{ref:a,className:"ascii-text-container",style:{position:"relative",width:"100%",minHeight:"100vh"},children:w.jsx("style",{children:`
+`}this.pre.innerHTML=o}}dispose(){document.removeEventListener("mousemove",this.onMouseMove)}}class H{constructor(e,{fontSize:t=200,fontFamily:i="Arial",color:s="#fdf9f3"}={}){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.txt=e,this.fontSize=t,this.fontFamily=i,this.color=s,this.font=`600 ${this.fontSize}px ${this.fontFamily}`}resize(){this.context.font=this.font;const e=this.context.measureText(this.txt),t=Math.ceil(e.width)+20,i=Math.ceil(e.actualBoundingBoxAscent+e.actualBoundingBoxDescent)+20;this.canvas.width=t,this.canvas.height=i}render(){this.context.clearRect(0,0,this.canvas.width,this.canvas.height),this.context.fillStyle=this.color,this.context.font=this.font;const t=10+this.context.measureText(this.txt).actualBoundingBoxAscent;this.context.fillText(this.txt,10,t)}get width(){return this.canvas.width}get height(){return this.canvas.height}get texture(){return this.canvas}}class L{constructor({text:e,asciiFontSize:t,textFontSize:i,textColor:s,planeBaseHeight:o,enableWaves:a},n,r,h){this.textString=e,this.asciiFontSize=t,this.textFontSize=i,this.textColor=s,this.planeBaseHeight=o,this.container=n,this.width=r,this.height=h,this.enableWaves=a,this.camera=new E(45,this.width/this.height,1,1e3),this.camera.position.z=30,this.scene=new F,this.mouse={x:this.width/2,y:this.height/2},this.onMouseMove=this.onMouseMove.bind(this)}async init(){try{await document.fonts.load('600 200px "IBM Plex Mono"'),await document.fonts.load('500 12px "IBM Plex Mono"')}catch{}await document.fonts.ready,this.setMesh(),this.setRenderer()}setMesh(){this.textCanvas=new H(this.textString,{fontSize:this.textFontSize,fontFamily:"IBM Plex Mono",color:this.textColor}),this.textCanvas.resize(),this.textCanvas.render(),this.texture=new I(this.textCanvas.texture),this.texture.minFilter=T;const e=this.textCanvas.width/this.textCanvas.height,t=this.planeBaseHeight,i=t*e,s=t;this.geometry=new R(i,s,36,36),this.material=new B({vertexShader:D,fragmentShader:W,transparent:!0,uniforms:{uTime:{value:0},mouse:{value:1},uTexture:{value:this.texture},uEnableWaves:{value:this.enableWaves?1:0}}}),this.mesh=new A(this.geometry,this.material),this.scene.add(this.mesh)}setRenderer(){this.renderer=new P({antialias:!1,alpha:!0}),this.renderer.setPixelRatio(1),this.renderer.setClearColor(0,0),this.filter=new k(this.renderer,{fontFamily:"IBM Plex Mono",fontSize:this.asciiFontSize,invert:!0}),this.container.appendChild(this.filter.domElement),this.setSize(this.width,this.height),this.container.addEventListener("mousemove",this.onMouseMove),this.container.addEventListener("touchmove",this.onMouseMove)}setSize(e,t){this.width=e,this.height=t,this.camera.aspect=e/t,this.camera.updateProjectionMatrix(),this.filter.setSize(e,t),this.center={x:e/2,y:t/2}}load(){this.animate()}onMouseMove(e){const t=e.touches?e.touches[0]:e,i=this.container.getBoundingClientRect(),s=t.clientX-i.left,o=t.clientY-i.top;this.mouse={x:s,y:o}}animate(){const e=()=>{this.animationFrameId=requestAnimationFrame(e),this.render()};e()}render(){const e=new Date().getTime()*.001;this.textCanvas.render(),this.texture.needsUpdate=!0,this.mesh.material.uniforms.uTime.value=Math.sin(e),this.updateRotation(),this.filter.render(this.scene,this.camera)}updateRotation(){const e=Math.map(this.mouse.y,0,this.height,.5,-.5),t=Math.map(this.mouse.x,0,this.width,-.5,.5);this.mesh.rotation.x+=(e-this.mesh.rotation.x)*.05,this.mesh.rotation.y+=(t-this.mesh.rotation.y)*.05}clear(){this.scene.traverse(e=>{e.isMesh&&typeof e.material=="object"&&e.material!==null&&(Object.keys(e.material).forEach(t=>{const i=e.material[t];i!==null&&typeof i=="object"&&typeof i.dispose=="function"&&i.dispose()}),e.material.dispose(),e.geometry.dispose())}),this.scene.clear()}dispose(){cancelAnimationFrame(this.animationFrameId),this.filter&&(this.filter.dispose(),this.filter.domElement.parentNode&&this.container.removeChild(this.filter.domElement)),this.container.removeEventListener("mousemove",this.onMouseMove),this.container.removeEventListener("touchmove",this.onMouseMove),this.clear(),this.renderer&&(this.renderer.dispose(),this.renderer.forceContextLoss())}}function C({text:d="David!",asciiFontSize:e=8,textFontSize:t=200,textColor:i="#fdf9f3",planeBaseHeight:s=8,enableWaves:o=!0}){const a=g.useRef(null),n=g.useRef(null);return g.useEffect(()=>{if(!a.current)return;let r=!1,h=null,u=null;const x=async(f,l,c)=>{const m=new L({text:d,asciiFontSize:e,textFontSize:t,textColor:i,planeBaseHeight:s,enableWaves:o},f,l,c);return await m.init(),m};return(async()=>{const{width:f,height:l}=a.current.getBoundingClientRect();if(f===0||l===0){h=new IntersectionObserver(async([c])=>{if(!r&&c.isIntersecting&&c.boundingClientRect.width>0&&c.boundingClientRect.height>0){const{width:m,height:p}=c.boundingClientRect;h.disconnect(),h=null,r||(n.current=await x(a.current,m,p),!r&&n.current&&n.current.load())}},{threshold:.1}),h.observe(a.current);return}n.current=await x(a.current,f,l),!r&&n.current&&(n.current.load(),u=new ResizeObserver(c=>{if(!c[0]||!n.current)return;const{width:m,height:p}=c[0].contentRect;m>0&&p>0&&n.current.setSize(m,p)}),u.observe(a.current))})(),()=>{r=!0,h&&h.disconnect(),u&&u.disconnect(),n.current&&(n.current.dispose(),n.current=null)}},[d,e,t,i,s,o]),w.jsx("div",{ref:a,className:"ascii-text-container",style:{position:"relative",width:"100%",minHeight:"100vh"},children:w.jsx("style",{children:`
         @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&display=swap');
 
         .ascii-text-container canvas {
@@ -70,7 +70,7 @@ void main() {
           z-index: 9;
           mix-blend-mode: difference;
         }
-      `})})}C.__docgenInfo={description:"",methods:[],displayName:"ASCIIText",props:{text:{defaultValue:{value:"'David!'",computed:!1},required:!1},asciiFontSize:{defaultValue:{value:"8",computed:!1},required:!1},textFontSize:{defaultValue:{value:"200",computed:!1},required:!1},textColor:{defaultValue:{value:"'#fdf9f3'",computed:!1},required:!1},planeBaseHeight:{defaultValue:{value:"8",computed:!1},required:!1},enableWaves:{defaultValue:{value:"true",computed:!1},required:!1}}};const V={title:"ReactBits/TextAnimations/ASCIIText",component:C,parameters:{layout:"fullscreen"},tags:["autodocs"]},g={args:{text:"David!",asciiFontSize:8,textFontSize:200,textColor:"#fdf9f3",planeBaseHeight:8,enableWaves:!0}};var S,b,z;g.parameters={...g.parameters,docs:{...(S=g.parameters)==null?void 0:S.docs,source:{originalSource:`{
+      `})})}C.__docgenInfo={description:"",methods:[],displayName:"ASCIIText",props:{text:{defaultValue:{value:"'David!'",computed:!1},required:!1},asciiFontSize:{defaultValue:{value:"8",computed:!1},required:!1},textFontSize:{defaultValue:{value:"200",computed:!1},required:!1},textColor:{defaultValue:{value:"'#fdf9f3'",computed:!1},required:!1},planeBaseHeight:{defaultValue:{value:"8",computed:!1},required:!1},enableWaves:{defaultValue:{value:"true",computed:!1},required:!1}}};const V={title:"ReactBits/TextAnimations/ASCIIText",component:C,parameters:{layout:"fullscreen"}},v={args:{text:"David!",asciiFontSize:8,textFontSize:200,textColor:"#fdf9f3",planeBaseHeight:8,enableWaves:!0}};var S,b,z;v.parameters={...v.parameters,docs:{...(S=v.parameters)==null?void 0:S.docs,source:{originalSource:`{
   args: {
     text: 'David!',
     asciiFontSize: 8,
@@ -79,4 +79,4 @@ void main() {
     planeBaseHeight: 8,
     enableWaves: true
   }
-}`,...(z=(b=g.parameters)==null?void 0:b.docs)==null?void 0:z.source}}};const O=["Default"];export{g as Default,O as __namedExportsOrder,V as default};
+}`,...(z=(b=v.parameters)==null?void 0:b.docs)==null?void 0:z.source}}};const O=["Default"];export{v as Default,O as __namedExportsOrder,V as default};

package/storybook-static/assets/{AllAtoms.stories-CLunFOjI.js → AllAtoms.stories-D2Pzz8c7.js}

@@ -1,4 +1,4 @@
-import{j as e,r as a}from"./iframe-B8pH-Lvr.js";import{B as s}from"./Button-CQGdvhpN.js";import{C as t}from"./Card-DNp-cUnt.js";import"./index-PY_vM88c.js";import{C as v}from"./Checkbox-Dw8W2w74.js";import{D as R}from"./DateInput-CW4PsZAQ.js";import{S as Se}from"./SearchableDropdown-4HgWY0Ck.js";import{S as $}from"./SelectInput-DvSeeIw5.js";import{T as G}from"./TextArea-DKx3k6hV.js";import{T as d}from"./TextInput-CLyTHgK9.js";import{T as h}from"./Toggle-BntWdyUe.js";import{N as V}from"./NumberStepper--0cJcLNZ.js";import{T as g}from"./ToggleButton-BQqJdlB_.js";import"./Slider-3iog5_du.js";import"./LoadingSpinner-Br8TYFlF.js";import"./preload-helper-C1FmrZbK.js";import"./useSound-Bk2W5gkV.js";import"./proxy-BA3VZtN5.js";import"./MotionConfigContext-D5hZdVGx.js";import"./index-DBfrIdYd.js";import"./createLucideIcon-BNUG5osq.js";import"./chevron-down-OhqRl4eJ.js";import"./search-2YqBkJlG.js";import"./check-Cty-Z1Ib.js";const Je={title:"Atoms/All Atoms Showcase",parameters:{layout:"padded",docs:{description:{component:"A comprehensive showcase of all atomic components in the design system."}}}},ke=()=>{var Q,X;const[f,z]=a.useState(!1),[b,B]=a.useState(!0),[C,O]=a.useState(!1),[u,w]=a.useState("2024-01-01"),[n,D]=a.useState("2024-12-25"),[c,j]=a.useState(""),[i,A]=a.useState(""),[y,I]=a.useState("medium"),[S,p]=a.useState(""),[o,te]=a.useState("This is some pre-filled text that you can edit..."),[L,le]=a.useState(""),[se,H]=a.useState("Pre-filled value"),[re,F]=a.useState(""),[m,U]=a.useState(!1),[oe,ne]=a.useState(!0),[ie,ce]=a.useState(5),[de,ge]=a.useState(0),[ue,pe]=a.useState(7),[N,me]=a.useState(!1),[E,xe]=a.useState(!1),[W,ve]=a.useState(!1),[M,he]=a.useState(!1),[P,fe]=a.useState(!1),[Te,be]=a.useState(0),[Ve,Ce]=a.useState(""),_=[{value:"react",label:"React"},{value:"vue",label:"Vue"},{value:"angular",label:"Angular"},{value:"svelte",label:"Svelte"},{value:"solid",label:"Solid"},{value:"qwik",label:"Qwik"},{value:"ember",label:"Ember"},{value:"backbone",label:"Backbone"}],je=[{value:"small",label:"Small"},{value:"medium",label:"Medium"},{value:"large",label:"Large"},{value:"xlarge",label:"Extra Large"}],q=[{value:"frontend",label:"Frontend Development"},{value:"backend",label:"Backend Development"},{value:"fullstack",label:"Full Stack"},{value:"mobile",label:"Mobile Development"},{value:"devops",label:"DevOps"},{value:"design",label:"UI/UX Design"}],r=l=>{be(x=>x+1),Ce(l)},ye=l=>{l.length<3?F("Must be at least 3 characters"):l.length>20?F("Must be less than 20 characters"):F("")};return e.jsxs("div",{style:{maxWidth:"1200px",margin:"0 auto",padding:"var(--spacing-xl)",fontFamily:"var(--font-primary)"},children:[e.jsx("h1",{style:{marginBottom:"var(--spacing-xl)",color:"var(--color-text)",fontSize:"var(--font-size-4xl)"},children:"Atomic Components Showcase"}),e.jsxs("section",{style:{marginBottom:"var(--spacing-3xl)"},children:[e.jsx("h2",{style:{marginBottom:"var(--spacing-lg)",color:"var(--color-text)",fontSize:"var(--font-size-2xl)"},children:"Buttons"}),e.jsxs(t,{children:[e.jsx("p",{style:{marginBottom:"var(--spacing-md)",color:"var(--color-text-secondary)"},children:"Various button variants and sizes"}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(150px, 1fr))",gap:"var(--spacing-md)",marginBottom:"var(--spacing-lg)"},children:[e.jsx(s,{variant:"primary",onClick:()=>r("Primary"),children:"Primary"}),e.jsx(s,{variant:"secondary",onClick:()=>r("Secondary"),children:"Secondary"}),e.jsx(s,{variant:"outline",onClick:()=>r("Outline"),children:"Outline"}),e.jsx(s,{variant:"ghost",onClick:()=>r("Ghost"),children:"Ghost"}),e.jsx(s,{variant:"danger",onClick:()=>r("Danger"),children:"Danger"}),e.jsx(s,{disabled:!0,onClick:()=>r("Disabled"),children:"Disabled (No Click)"})]}),e.jsxs("div",{style:{display:"flex",gap:"var(--spacing-md)",flexWrap:"wrap",alignItems:"center"},children:[e.jsx(s,{size:"small",onClick:()=>r("Small"),children:"Small"}),e.jsx(s,{size:"medium",onClick:()=>r("Medium"),children:"Medium"}),e.jsx(s,{size:"large",onClick:()=>r("Large"),children:"Large"}),e.jsx(s,{fullWidth:!0,onClick:()=>r("Full Width"),children:"Full Width Button"})]})]})]}),e.jsxs("section",{style:{marginBottom:"var(--spacing-3xl)"},children:[e.jsx("h2",{style:{marginBottom:"var(--spacing-lg)",color:"var(--color-text)",fontSize:"var(--font-size-2xl)"},children:"Cards"}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(250px, 1fr))",gap:"var(--spacing-lg)"},children:[e.jsxs(t,{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-sm)"},children:"Default Card"}),e.jsx("p",{children:"A basic card component with padding and background."})]}),e.jsxs(t,{variant:"elevated",children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-sm)"},children:"Elevated Card"}),e.jsx("p",{children:"This card has a shadow effect for depth."})]}),e.jsxs(t,{variant:"outlined",children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-sm)"},children:"Outlined Card"}),e.jsx("p",{children:"This card has a border instead of a background."})]})]})]}),e.jsxs("section",{style:{marginBottom:"var(--spacing-3xl)"},children:[e.jsx("h2",{style:{marginBottom:"var(--spacing-lg)",color:"var(--color-text)",fontSize:"var(--font-size-2xl)"},children:"Form Inputs"}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(300px, 1fr))",gap:"var(--spacing-lg)"},children:[e.jsxs(t,{children:[e.jsx(d,{value:L,label:"Text Input with Validation",onChange:l=>{le(l),ye(l)},placeholder:"Type 3-20 characters...",error:re}),e.jsxs("p",{style:{marginTop:"var(--spacing-xs)",fontSize:"var(--font-size-xs)",color:"var(--color-text-tertiary)"},children:['Current value: "',L,'" (',L.length," chars)"]})]}),e.jsxs(t,{children:[e.jsx(d,{label:"Pre-filled Text Input",value:se,onChange:H,placeholder:"Enter text here..."}),e.jsx(s,{size:"small",variant:"outline",onClick:()=>H(""),style:{marginTop:"var(--spacing-xs)"},children:"Clear"})]}),e.jsxs(t,{children:[e.jsx(R,{label:"Start Date",value:u,onChange:w}),e.jsx("div",{style:{marginTop:"var(--spacing-md)"},children:e.jsx(R,{label:"End Date",value:n,onChange:D})}),e.jsxs("p",{style:{marginTop:"var(--spacing-xs)",fontSize:"var(--font-size-xs)",color:"var(--color-text-tertiary)"},children:["Selected range: ",u," to ",n]})]}),e.jsxs(t,{children:[e.jsx($,{label:"Size Selection",value:y,onChange:I,options:je}),e.jsx($,{label:"Category Selection",value:i,onChange:A,options:q,placeholder:"Choose category..."}),i&&e.jsxs("p",{style:{marginTop:"var(--spacing-xs)",padding:"var(--spacing-xs)",background:"var(--color-primary)",color:"var(--color-text-inverse)",borderRadius:"var(--radius-sm)",fontSize:"var(--font-size-xs)"},children:["Selected: ",(Q=q.find(l=>l.value===i))==null?void 0:Q.label]})]}),e.jsxs(t,{children:[e.jsx(Se,{label:"Searchable Framework Selector",options:_,value:c,onChange:j,placeholder:"Search or select framework..."}),c&&e.jsxs("div",{style:{marginTop:"var(--spacing-md)"},children:[e.jsxs("p",{style:{fontSize:"var(--font-size-sm)",marginBottom:"var(--spacing-xs)"},children:["You selected: ",e.jsx("strong",{children:(X=_.find(l=>l.value===c))==null?void 0:X.label})]}),e.jsx(s,{size:"small",variant:"outline",onClick:()=>j(""),children:"Clear Selection"})]})]}),e.jsx(t,{style:{gridColumn:"span 2"},children:e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"var(--spacing-md)"},children:[e.jsxs("div",{children:[e.jsx(G,{label:"Empty Text Area",value:S,onChange:p,placeholder:"Start typing here...",rows:4}),e.jsxs("p",{style:{marginTop:"var(--spacing-xs)",fontSize:"var(--font-size-xs)",color:"var(--color-text-tertiary)"},children:["Character count: ",S.length]})]}),e.jsxs("div",{children:[e.jsx(G,{label:"Pre-filled Text Area",value:o,onChange:te,rows:4}),e.jsxs("p",{style:{marginTop:"var(--spacing-xs)",fontSize:"var(--font-size-xs)",color:"var(--color-text-tertiary)"},children:["Word count: ",o.split(/\s+/).filter(l=>l).length," words"]})]})]})})]})]}),e.jsxs("section",{style:{marginBottom:"var(--spacing-3xl)"},children:[e.jsx("h2",{style:{marginBottom:"var(--spacing-lg)",color:"var(--color-text)",fontSize:"var(--font-size-2xl)"},children:"Number Steppers & Toggle Buttons"}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(300px, 1fr))",gap:"var(--spacing-lg)",marginBottom:"var(--spacing-lg)"},children:[e.jsxs(t,{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-md)",fontSize:"var(--font-size-lg)",color:"var(--color-text)"},children:"Number Steppers"}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"var(--spacing-lg)"},children:[e.jsx(V,{value:ie,onChange:ce,min:0,max:100,step:5,label:"Cigarettes",icon:"🚬"}),e.jsx(V,{value:de,onChange:ge,min:0,max:10,step:1,label:"Water Glasses",icon:"💧",variant:"filled",showPlusMinus:!0}),e.jsx(V,{value:ue,onChange:pe,min:0,max:12,step:.5,label:"Sleep Hours",icon:"😴",variant:"outlined"})]})]}),e.jsxs(t,{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-md)",fontSize:"var(--font-size-lg)",color:"var(--color-text)"},children:"Boolean Habit Toggles"}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(2, 1fr)",gap:"var(--spacing-md)"},children:[e.jsx(g,{active:N,onClick:()=>me(!N),icon:"🦷",label:"Teeth",variant:"outlined",activeColor:"success",showCheckmark:!0}),e.jsx(g,{active:E,onClick:()=>xe(!E),icon:"🚿",label:"Shower",variant:"outlined",activeColor:"success",showCheckmark:!0}),e.jsx(g,{active:W,onClick:()=>ve(!W),icon:"🧘",label:"Meditate",variant:"outlined",activeColor:"success",showCheckmark:!0}),e.jsx(g,{active:M,onClick:()=>he(!M),icon:"💊",label:"Vitamins",variant:"outlined",activeColor:"success",showCheckmark:!0}),e.jsx(g,{active:P,onClick:()=>fe(!P),icon:"💪",label:"Exercise",variant:"outlined",activeColor:"success",showCheckmark:!0})]}),e.jsx("div",{style:{marginTop:"var(--spacing-md)",padding:"var(--spacing-sm)",background:"var(--color-background-secondary)",borderRadius:"var(--radius-sm)"},children:e.jsxs("p",{style:{fontSize:"var(--font-size-xs)"},children:["Completed habits: ",[N&&"Teeth",E&&"Shower",W&&"Meditate",M&&"Vitamins",P&&"Exercise"].filter(Boolean).join(", ")||"None"]})})]})]})]}),e.jsxs("section",{style:{marginBottom:"var(--spacing-3xl)"},children:[e.jsx("h2",{style:{marginBottom:"var(--spacing-lg)",color:"var(--color-text)",fontSize:"var(--font-size-2xl)"},children:"Toggle Controls"}),e.jsx(t,{children:e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(300px, 1fr))",gap:"var(--spacing-lg)"},children:[e.jsxs("div",{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-md)",fontSize:"var(--font-size-lg)",color:"var(--color-text)"},children:"Checkboxes"}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"var(--spacing-md)"},children:[e.jsx(v,{checked:f,onChange:z,label:"Accept terms and conditions"}),e.jsx(v,{checked:b,onChange:B,label:"Subscribe to newsletter"}),e.jsx(v,{checked:C,onChange:O,label:"Enable notifications"})]}),e.jsx("div",{style:{marginTop:"var(--spacing-md)",padding:"var(--spacing-sm)",background:"var(--color-background-secondary)",borderRadius:"var(--radius-sm)"},children:e.jsxs("p",{style:{fontSize:"var(--font-size-xs)"},children:["Checked items: ",[f&&"Terms",b&&"Newsletter",C&&"Notifications"].filter(Boolean).join(", ")||"None"]})})]}),e.jsxs("div",{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-md)",fontSize:"var(--font-size-lg)",color:"var(--color-text)"},children:"Toggle Switches"}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"var(--spacing-md)"},children:[e.jsx(h,{isOn:m,onToggle:U,leftLabel:"Off",rightLabel:"On"}),e.jsx(h,{isOn:oe,onToggle:ne,leftLabel:"Off",rightLabel:"On"}),e.jsx(h,{isOn:!m,onToggle:l=>U(!l),leftLabel:"Off",rightLabel:"On"})]}),e.jsx("div",{style:{marginTop:"var(--spacing-md)",padding:"var(--spacing-sm)",background:m?"var(--color-grey-900)":"var(--color-background-secondary)",color:m?"var(--color-text-inverse)":"var(--color-text)",borderRadius:"var(--radius-sm)",transition:"all 0.3s ease"},children:e.jsxs("p",{style:{fontSize:"var(--font-size-xs)"},children:["Dark mode is ",m?"ON":"OFF"]})})]})]})})]}),e.jsxs("section",{style:{marginBottom:"var(--spacing-3xl)"},children:[e.jsx("h2",{style:{marginBottom:"var(--spacing-lg)",color:"var(--color-text)",fontSize:"var(--font-size-2xl)"},children:"Component States Demo"}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(250px, 1fr))",gap:"var(--spacing-lg)"},children:[e.jsxs(t,{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-sm)",color:"var(--color-text-secondary)",fontSize:"var(--font-size-sm)"},children:"Error State"}),e.jsx(d,{label:"Error State Input",value:"Invalid input",onChange:()=>{},error:"This field has an error"}),e.jsx("div",{style:{marginTop:"var(--spacing-sm)"},children:e.jsx(v,{checked:!1,onChange:()=>{},label:"Error checkbox (disabled)",disabled:!0})})]}),e.jsxs(t,{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-sm)",color:"var(--color-text-secondary)",fontSize:"var(--font-size-sm)"},children:"Disabled State"}),e.jsx(d,{label:"Disabled Input",value:"Disabled input",onChange:()=>{},disabled:!0}),e.jsx("div",{style:{marginTop:"var(--spacing-sm)"},children:e.jsx(s,{disabled:!0,children:"Disabled Button"})}),e.jsx("div",{style:{marginTop:"var(--spacing-sm)"},children:e.jsx(h,{isOn:!0,onToggle:()=>{},leftLabel:"Off",rightLabel:"On"})})]}),e.jsxs(t,{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-sm)",color:"var(--color-text-secondary)",fontSize:"var(--font-size-sm)"},children:"Loading State"}),e.jsx(s,{loading:!0,children:"Loading..."}),e.jsx("div",{style:{marginTop:"var(--spacing-sm)"},children:e.jsx(d,{label:"Loading Input",value:"Loading...",onChange:()=>{},disabled:!0,placeholder:"Processing..."})})]}),e.jsxs(t,{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-sm)",color:"var(--color-text-secondary)",fontSize:"var(--font-size-sm)"},children:"Success State"}),e.jsx("div",{style:{padding:"var(--spacing-sm)",background:"var(--color-success-bg)",color:"var(--color-success)",borderRadius:"var(--radius-sm)",marginBottom:"var(--spacing-sm)"},children:"✓ Successfully saved!"}),e.jsx(s,{variant:"primary",onClick:()=>alert("Saved!"),children:"Save Changes"})]})]})]}),e.jsxs("section",{children:[e.jsx("h2",{style:{marginBottom:"var(--spacing-lg)",color:"var(--color-text)",fontSize:"var(--font-size-2xl)"},children:"Live Theme Colors"}),e.jsxs(t,{children:[e.jsx("p",{style:{marginBottom:"var(--spacing-md)",color:"var(--color-text-secondary)"},children:"These colors update automatically when you switch themes"}),e.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(150px, 1fr))",gap:"var(--spacing-md)"},children:[{name:"Primary",var:"--color-primary"},{name:"Secondary",var:"--color-secondary"},{name:"Success",var:"--color-success"},{name:"Warning",var:"--color-warning"},{name:"Error",var:"--color-error"},{name:"Info",var:"--color-info"}].map(l=>e.jsxs("div",{style:{textAlign:"center"},children:[e.jsx("div",{style:{width:"100%",height:"80px",backgroundColor:`var(${l.var})`,borderRadius:"var(--radius-md)",marginBottom:"var(--spacing-xs)",border:"1px solid var(--color-border)",cursor:"pointer",transition:"transform 0.2s ease"},onClick:()=>alert(`This is the ${l.name} color!`),onMouseEnter:x=>x.currentTarget.style.transform="scale(1.05)",onMouseLeave:x=>x.currentTarget.style.transform="scale(1)"}),e.jsx("span",{style:{fontSize:"var(--font-size-sm)",color:"var(--color-text-secondary)"},children:l.name})]},l.name))})]})]})]})},k={render:()=>e.jsx(ke,{})},T={render:()=>{const[f,z]=a.useState(""),[b,B]=a.useState("2024-01-01"),[C,O]=a.useState(""),[u,w]=a.useState(!1),[n,D]=a.useState(!1),[c,j]=a.useState(0),[i,A]=a.useState(!1),[y,I]=a.useState(""),[S,p]=a.useState(0);return e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(250px, 1fr))",gap:"var(--spacing-xl)",padding:"var(--spacing-xl)"},children:[e.jsxs(t,{children:[e.jsx("h3",{children:"Interactive Buttons"}),e.jsxs("p",{style:{fontSize:"var(--font-size-sm)",color:"var(--color-text-secondary)",marginBottom:"12px"},children:["Clicks: ",S]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px",marginTop:"12px"},children:[e.jsx(s,{variant:"primary",size:"small",onClick:()=>p(o=>o+1),children:"Primary"}),e.jsx(s,{variant:"secondary",size:"small",onClick:()=>p(o=>o+1),children:"Secondary"}),e.jsx(s,{variant:"outline",size:"small",onClick:()=>p(o=>o+1),children:"Outline"})]})]}),e.jsxs(t,{children:[e.jsx("h3",{children:"Form Inputs"}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px",marginTop:"12px"},children:[e.jsx(d,{label:"Compact Text",value:f,onChange:z,placeholder:"Type something..."}),e.jsx(R,{label:"Compact Date",value:b,onChange:B}),e.jsx($,{label:"Compact Select",value:C,onChange:O,options:[{value:"1",label:"Option 1"},{value:"2",label:"Option 2"},{value:"3",label:"Option 3"}],placeholder:"Select an option"})]})]}),e.jsxs(t,{children:[e.jsx("h3",{children:"Toggle Controls"}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"12px",marginTop:"12px"},children:[e.jsx(v,{checked:u,onChange:w,label:`Checkbox (${u?"ON":"OFF"})`}),e.jsx(h,{isOn:n,onToggle:D,leftLabel:"Off",rightLabel:"On"}),e.jsx(V,{value:c,onChange:j,min:0,max:10,step:1,label:"Count",icon:"🔢",size:"small"}),e.jsx(g,{active:i,onClick:()=>A(!i),icon:"⭐",label:"Favorite",size:"small",showCheckmark:!0})]}),e.jsxs("div",{style:{marginTop:"12px",padding:"8px",background:n?"var(--color-primary)":"var(--color-background-secondary)",color:n?"var(--color-text-inverse)":"var(--color-text)",borderRadius:"var(--radius-sm)",fontSize:"var(--font-size-xs)",textAlign:"center",transition:"all 0.3s ease"},children:["Toggle: ",n?"ON":"OFF"," | Number: ",c," | Button: ",i?"Active":"Inactive"]})]}),e.jsxs(t,{children:[e.jsx("h3",{children:"Text Area"}),e.jsxs("div",{style:{marginTop:"12px"},children:[e.jsx(G,{label:"Compact Text Area",value:y,onChange:I,placeholder:"Write something...",rows:3}),e.jsxs("p",{style:{marginTop:"8px",fontSize:"var(--font-size-xs)",color:"var(--color-text-secondary)"},children:[y.length," characters"]})]})]})]})}};var Y,J,K;k.parameters={...k.parameters,docs:{...(Y=k.parameters)==null?void 0:Y.docs,source:{originalSource:`{
+import{j as e,r as a}from"./iframe-Cw8dCV4Z.js";import{B as s}from"./Button-DgpqJWgD.js";import{C as t}from"./Card-Bu54h8gN.js";import"./index-A7l1uA6_.js";import{C as v}from"./Checkbox-Duyafa-Y.js";import{D as R}from"./DateInput-DfGES3te.js";import{S as Se}from"./SearchableDropdown-BtIsuxmT.js";import{S as $}from"./SelectInput-C0kBLYgX.js";import{T as G}from"./TextArea-DN6IYITs.js";import{T as d}from"./TextInput-CLgIGUn3.js";import{T as h}from"./Toggle-CTTN-13k.js";import{N as V}from"./NumberStepper-DH9y3k8b.js";import{T as g}from"./ToggleButton-CXK855yx.js";import"./Slider-CI9mXQSu.js";import"./LoadingSpinner-DaUSIVPY.js";import"./preload-helper-C1FmrZbK.js";import"./useSound-D23BsIr4.js";import"./proxy-p8L3T_Zy.js";import"./MotionConfigContext-BCa1jVYq.js";import"./index-CzApopWo.js";import"./createLucideIcon-dvowvj4F.js";import"./chevron-down-Ciks5pXx.js";import"./search-7V6DOf2z.js";import"./check-DLeHG_Da.js";const Je={title:"Atoms/All Atoms Showcase",parameters:{layout:"padded",docs:{description:{component:"A comprehensive showcase of all atomic components in the design system."}}}},ke=()=>{var Q,X;const[f,z]=a.useState(!1),[b,B]=a.useState(!0),[C,O]=a.useState(!1),[u,w]=a.useState("2024-01-01"),[n,D]=a.useState("2024-12-25"),[c,j]=a.useState(""),[i,A]=a.useState(""),[y,I]=a.useState("medium"),[S,p]=a.useState(""),[o,te]=a.useState("This is some pre-filled text that you can edit..."),[L,le]=a.useState(""),[se,H]=a.useState("Pre-filled value"),[re,F]=a.useState(""),[m,U]=a.useState(!1),[oe,ne]=a.useState(!0),[ie,ce]=a.useState(5),[de,ge]=a.useState(0),[ue,pe]=a.useState(7),[N,me]=a.useState(!1),[E,xe]=a.useState(!1),[W,ve]=a.useState(!1),[M,he]=a.useState(!1),[P,fe]=a.useState(!1),[Te,be]=a.useState(0),[Ve,Ce]=a.useState(""),_=[{value:"react",label:"React"},{value:"vue",label:"Vue"},{value:"angular",label:"Angular"},{value:"svelte",label:"Svelte"},{value:"solid",label:"Solid"},{value:"qwik",label:"Qwik"},{value:"ember",label:"Ember"},{value:"backbone",label:"Backbone"}],je=[{value:"small",label:"Small"},{value:"medium",label:"Medium"},{value:"large",label:"Large"},{value:"xlarge",label:"Extra Large"}],q=[{value:"frontend",label:"Frontend Development"},{value:"backend",label:"Backend Development"},{value:"fullstack",label:"Full Stack"},{value:"mobile",label:"Mobile Development"},{value:"devops",label:"DevOps"},{value:"design",label:"UI/UX Design"}],r=l=>{be(x=>x+1),Ce(l)},ye=l=>{l.length<3?F("Must be at least 3 characters"):l.length>20?F("Must be less than 20 characters"):F("")};return e.jsxs("div",{style:{maxWidth:"1200px",margin:"0 auto",padding:"var(--spacing-xl)",fontFamily:"var(--font-primary)"},children:[e.jsx("h1",{style:{marginBottom:"var(--spacing-xl)",color:"var(--color-text)",fontSize:"var(--font-size-4xl)"},children:"Atomic Components Showcase"}),e.jsxs("section",{style:{marginBottom:"var(--spacing-3xl)"},children:[e.jsx("h2",{style:{marginBottom:"var(--spacing-lg)",color:"var(--color-text)",fontSize:"var(--font-size-2xl)"},children:"Buttons"}),e.jsxs(t,{children:[e.jsx("p",{style:{marginBottom:"var(--spacing-md)",color:"var(--color-text-secondary)"},children:"Various button variants and sizes"}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(150px, 1fr))",gap:"var(--spacing-md)",marginBottom:"var(--spacing-lg)"},children:[e.jsx(s,{variant:"primary",onClick:()=>r("Primary"),children:"Primary"}),e.jsx(s,{variant:"secondary",onClick:()=>r("Secondary"),children:"Secondary"}),e.jsx(s,{variant:"outline",onClick:()=>r("Outline"),children:"Outline"}),e.jsx(s,{variant:"ghost",onClick:()=>r("Ghost"),children:"Ghost"}),e.jsx(s,{variant:"danger",onClick:()=>r("Danger"),children:"Danger"}),e.jsx(s,{disabled:!0,onClick:()=>r("Disabled"),children:"Disabled (No Click)"})]}),e.jsxs("div",{style:{display:"flex",gap:"var(--spacing-md)",flexWrap:"wrap",alignItems:"center"},children:[e.jsx(s,{size:"small",onClick:()=>r("Small"),children:"Small"}),e.jsx(s,{size:"medium",onClick:()=>r("Medium"),children:"Medium"}),e.jsx(s,{size:"large",onClick:()=>r("Large"),children:"Large"}),e.jsx(s,{fullWidth:!0,onClick:()=>r("Full Width"),children:"Full Width Button"})]})]})]}),e.jsxs("section",{style:{marginBottom:"var(--spacing-3xl)"},children:[e.jsx("h2",{style:{marginBottom:"var(--spacing-lg)",color:"var(--color-text)",fontSize:"var(--font-size-2xl)"},children:"Cards"}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(250px, 1fr))",gap:"var(--spacing-lg)"},children:[e.jsxs(t,{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-sm)"},children:"Default Card"}),e.jsx("p",{children:"A basic card component with padding and background."})]}),e.jsxs(t,{variant:"elevated",children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-sm)"},children:"Elevated Card"}),e.jsx("p",{children:"This card has a shadow effect for depth."})]}),e.jsxs(t,{variant:"outlined",children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-sm)"},children:"Outlined Card"}),e.jsx("p",{children:"This card has a border instead of a background."})]})]})]}),e.jsxs("section",{style:{marginBottom:"var(--spacing-3xl)"},children:[e.jsx("h2",{style:{marginBottom:"var(--spacing-lg)",color:"var(--color-text)",fontSize:"var(--font-size-2xl)"},children:"Form Inputs"}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(300px, 1fr))",gap:"var(--spacing-lg)"},children:[e.jsxs(t,{children:[e.jsx(d,{value:L,label:"Text Input with Validation",onChange:l=>{le(l),ye(l)},placeholder:"Type 3-20 characters...",error:re}),e.jsxs("p",{style:{marginTop:"var(--spacing-xs)",fontSize:"var(--font-size-xs)",color:"var(--color-text-tertiary)"},children:['Current value: "',L,'" (',L.length," chars)"]})]}),e.jsxs(t,{children:[e.jsx(d,{label:"Pre-filled Text Input",value:se,onChange:H,placeholder:"Enter text here..."}),e.jsx(s,{size:"small",variant:"outline",onClick:()=>H(""),style:{marginTop:"var(--spacing-xs)"},children:"Clear"})]}),e.jsxs(t,{children:[e.jsx(R,{label:"Start Date",value:u,onChange:w}),e.jsx("div",{style:{marginTop:"var(--spacing-md)"},children:e.jsx(R,{label:"End Date",value:n,onChange:D})}),e.jsxs("p",{style:{marginTop:"var(--spacing-xs)",fontSize:"var(--font-size-xs)",color:"var(--color-text-tertiary)"},children:["Selected range: ",u," to ",n]})]}),e.jsxs(t,{children:[e.jsx($,{label:"Size Selection",value:y,onChange:I,options:je}),e.jsx($,{label:"Category Selection",value:i,onChange:A,options:q,placeholder:"Choose category..."}),i&&e.jsxs("p",{style:{marginTop:"var(--spacing-xs)",padding:"var(--spacing-xs)",background:"var(--color-primary)",color:"var(--color-text-inverse)",borderRadius:"var(--radius-sm)",fontSize:"var(--font-size-xs)"},children:["Selected: ",(Q=q.find(l=>l.value===i))==null?void 0:Q.label]})]}),e.jsxs(t,{children:[e.jsx(Se,{label:"Searchable Framework Selector",options:_,value:c,onChange:j,placeholder:"Search or select framework..."}),c&&e.jsxs("div",{style:{marginTop:"var(--spacing-md)"},children:[e.jsxs("p",{style:{fontSize:"var(--font-size-sm)",marginBottom:"var(--spacing-xs)"},children:["You selected: ",e.jsx("strong",{children:(X=_.find(l=>l.value===c))==null?void 0:X.label})]}),e.jsx(s,{size:"small",variant:"outline",onClick:()=>j(""),children:"Clear Selection"})]})]}),e.jsx(t,{style:{gridColumn:"span 2"},children:e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"var(--spacing-md)"},children:[e.jsxs("div",{children:[e.jsx(G,{label:"Empty Text Area",value:S,onChange:p,placeholder:"Start typing here...",rows:4}),e.jsxs("p",{style:{marginTop:"var(--spacing-xs)",fontSize:"var(--font-size-xs)",color:"var(--color-text-tertiary)"},children:["Character count: ",S.length]})]}),e.jsxs("div",{children:[e.jsx(G,{label:"Pre-filled Text Area",value:o,onChange:te,rows:4}),e.jsxs("p",{style:{marginTop:"var(--spacing-xs)",fontSize:"var(--font-size-xs)",color:"var(--color-text-tertiary)"},children:["Word count: ",o.split(/\s+/).filter(l=>l).length," words"]})]})]})})]})]}),e.jsxs("section",{style:{marginBottom:"var(--spacing-3xl)"},children:[e.jsx("h2",{style:{marginBottom:"var(--spacing-lg)",color:"var(--color-text)",fontSize:"var(--font-size-2xl)"},children:"Number Steppers & Toggle Buttons"}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(300px, 1fr))",gap:"var(--spacing-lg)",marginBottom:"var(--spacing-lg)"},children:[e.jsxs(t,{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-md)",fontSize:"var(--font-size-lg)",color:"var(--color-text)"},children:"Number Steppers"}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"var(--spacing-lg)"},children:[e.jsx(V,{value:ie,onChange:ce,min:0,max:100,step:5,label:"Cigarettes",icon:"🚬"}),e.jsx(V,{value:de,onChange:ge,min:0,max:10,step:1,label:"Water Glasses",icon:"💧",variant:"filled",showPlusMinus:!0}),e.jsx(V,{value:ue,onChange:pe,min:0,max:12,step:.5,label:"Sleep Hours",icon:"😴",variant:"outlined"})]})]}),e.jsxs(t,{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-md)",fontSize:"var(--font-size-lg)",color:"var(--color-text)"},children:"Boolean Habit Toggles"}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(2, 1fr)",gap:"var(--spacing-md)"},children:[e.jsx(g,{active:N,onClick:()=>me(!N),icon:"🦷",label:"Teeth",variant:"outlined",activeColor:"success",showCheckmark:!0}),e.jsx(g,{active:E,onClick:()=>xe(!E),icon:"🚿",label:"Shower",variant:"outlined",activeColor:"success",showCheckmark:!0}),e.jsx(g,{active:W,onClick:()=>ve(!W),icon:"🧘",label:"Meditate",variant:"outlined",activeColor:"success",showCheckmark:!0}),e.jsx(g,{active:M,onClick:()=>he(!M),icon:"💊",label:"Vitamins",variant:"outlined",activeColor:"success",showCheckmark:!0}),e.jsx(g,{active:P,onClick:()=>fe(!P),icon:"💪",label:"Exercise",variant:"outlined",activeColor:"success",showCheckmark:!0})]}),e.jsx("div",{style:{marginTop:"var(--spacing-md)",padding:"var(--spacing-sm)",background:"var(--color-background-secondary)",borderRadius:"var(--radius-sm)"},children:e.jsxs("p",{style:{fontSize:"var(--font-size-xs)"},children:["Completed habits: ",[N&&"Teeth",E&&"Shower",W&&"Meditate",M&&"Vitamins",P&&"Exercise"].filter(Boolean).join(", ")||"None"]})})]})]})]}),e.jsxs("section",{style:{marginBottom:"var(--spacing-3xl)"},children:[e.jsx("h2",{style:{marginBottom:"var(--spacing-lg)",color:"var(--color-text)",fontSize:"var(--font-size-2xl)"},children:"Toggle Controls"}),e.jsx(t,{children:e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(300px, 1fr))",gap:"var(--spacing-lg)"},children:[e.jsxs("div",{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-md)",fontSize:"var(--font-size-lg)",color:"var(--color-text)"},children:"Checkboxes"}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"var(--spacing-md)"},children:[e.jsx(v,{checked:f,onChange:z,label:"Accept terms and conditions"}),e.jsx(v,{checked:b,onChange:B,label:"Subscribe to newsletter"}),e.jsx(v,{checked:C,onChange:O,label:"Enable notifications"})]}),e.jsx("div",{style:{marginTop:"var(--spacing-md)",padding:"var(--spacing-sm)",background:"var(--color-background-secondary)",borderRadius:"var(--radius-sm)"},children:e.jsxs("p",{style:{fontSize:"var(--font-size-xs)"},children:["Checked items: ",[f&&"Terms",b&&"Newsletter",C&&"Notifications"].filter(Boolean).join(", ")||"None"]})})]}),e.jsxs("div",{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-md)",fontSize:"var(--font-size-lg)",color:"var(--color-text)"},children:"Toggle Switches"}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"var(--spacing-md)"},children:[e.jsx(h,{isOn:m,onToggle:U,leftLabel:"Off",rightLabel:"On"}),e.jsx(h,{isOn:oe,onToggle:ne,leftLabel:"Off",rightLabel:"On"}),e.jsx(h,{isOn:!m,onToggle:l=>U(!l),leftLabel:"Off",rightLabel:"On"})]}),e.jsx("div",{style:{marginTop:"var(--spacing-md)",padding:"var(--spacing-sm)",background:m?"var(--color-grey-900)":"var(--color-background-secondary)",color:m?"var(--color-text-inverse)":"var(--color-text)",borderRadius:"var(--radius-sm)",transition:"all 0.3s ease"},children:e.jsxs("p",{style:{fontSize:"var(--font-size-xs)"},children:["Dark mode is ",m?"ON":"OFF"]})})]})]})})]}),e.jsxs("section",{style:{marginBottom:"var(--spacing-3xl)"},children:[e.jsx("h2",{style:{marginBottom:"var(--spacing-lg)",color:"var(--color-text)",fontSize:"var(--font-size-2xl)"},children:"Component States Demo"}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(250px, 1fr))",gap:"var(--spacing-lg)"},children:[e.jsxs(t,{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-sm)",color:"var(--color-text-secondary)",fontSize:"var(--font-size-sm)"},children:"Error State"}),e.jsx(d,{label:"Error State Input",value:"Invalid input",onChange:()=>{},error:"This field has an error"}),e.jsx("div",{style:{marginTop:"var(--spacing-sm)"},children:e.jsx(v,{checked:!1,onChange:()=>{},label:"Error checkbox (disabled)",disabled:!0})})]}),e.jsxs(t,{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-sm)",color:"var(--color-text-secondary)",fontSize:"var(--font-size-sm)"},children:"Disabled State"}),e.jsx(d,{label:"Disabled Input",value:"Disabled input",onChange:()=>{},disabled:!0}),e.jsx("div",{style:{marginTop:"var(--spacing-sm)"},children:e.jsx(s,{disabled:!0,children:"Disabled Button"})}),e.jsx("div",{style:{marginTop:"var(--spacing-sm)"},children:e.jsx(h,{isOn:!0,onToggle:()=>{},leftLabel:"Off",rightLabel:"On"})})]}),e.jsxs(t,{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-sm)",color:"var(--color-text-secondary)",fontSize:"var(--font-size-sm)"},children:"Loading State"}),e.jsx(s,{loading:!0,children:"Loading..."}),e.jsx("div",{style:{marginTop:"var(--spacing-sm)"},children:e.jsx(d,{label:"Loading Input",value:"Loading...",onChange:()=>{},disabled:!0,placeholder:"Processing..."})})]}),e.jsxs(t,{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-sm)",color:"var(--color-text-secondary)",fontSize:"var(--font-size-sm)"},children:"Success State"}),e.jsx("div",{style:{padding:"var(--spacing-sm)",background:"var(--color-success-bg)",color:"var(--color-success)",borderRadius:"var(--radius-sm)",marginBottom:"var(--spacing-sm)"},children:"✓ Successfully saved!"}),e.jsx(s,{variant:"primary",onClick:()=>alert("Saved!"),children:"Save Changes"})]})]})]}),e.jsxs("section",{children:[e.jsx("h2",{style:{marginBottom:"var(--spacing-lg)",color:"var(--color-text)",fontSize:"var(--font-size-2xl)"},children:"Live Theme Colors"}),e.jsxs(t,{children:[e.jsx("p",{style:{marginBottom:"var(--spacing-md)",color:"var(--color-text-secondary)"},children:"These colors update automatically when you switch themes"}),e.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(150px, 1fr))",gap:"var(--spacing-md)"},children:[{name:"Primary",var:"--color-primary"},{name:"Secondary",var:"--color-secondary"},{name:"Success",var:"--color-success"},{name:"Warning",var:"--color-warning"},{name:"Error",var:"--color-error"},{name:"Info",var:"--color-info"}].map(l=>e.jsxs("div",{style:{textAlign:"center"},children:[e.jsx("div",{style:{width:"100%",height:"80px",backgroundColor:`var(${l.var})`,borderRadius:"var(--radius-md)",marginBottom:"var(--spacing-xs)",border:"1px solid var(--color-border)",cursor:"pointer",transition:"transform 0.2s ease"},onClick:()=>alert(`This is the ${l.name} color!`),onMouseEnter:x=>x.currentTarget.style.transform="scale(1.05)",onMouseLeave:x=>x.currentTarget.style.transform="scale(1)"}),e.jsx("span",{style:{fontSize:"var(--font-size-sm)",color:"var(--color-text-secondary)"},children:l.name})]},l.name))})]})]})]})},k={render:()=>e.jsx(ke,{})},T={render:()=>{const[f,z]=a.useState(""),[b,B]=a.useState("2024-01-01"),[C,O]=a.useState(""),[u,w]=a.useState(!1),[n,D]=a.useState(!1),[c,j]=a.useState(0),[i,A]=a.useState(!1),[y,I]=a.useState(""),[S,p]=a.useState(0);return e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(250px, 1fr))",gap:"var(--spacing-xl)",padding:"var(--spacing-xl)"},children:[e.jsxs(t,{children:[e.jsx("h3",{children:"Interactive Buttons"}),e.jsxs("p",{style:{fontSize:"var(--font-size-sm)",color:"var(--color-text-secondary)",marginBottom:"12px"},children:["Clicks: ",S]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px",marginTop:"12px"},children:[e.jsx(s,{variant:"primary",size:"small",onClick:()=>p(o=>o+1),children:"Primary"}),e.jsx(s,{variant:"secondary",size:"small",onClick:()=>p(o=>o+1),children:"Secondary"}),e.jsx(s,{variant:"outline",size:"small",onClick:()=>p(o=>o+1),children:"Outline"})]})]}),e.jsxs(t,{children:[e.jsx("h3",{children:"Form Inputs"}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px",marginTop:"12px"},children:[e.jsx(d,{label:"Compact Text",value:f,onChange:z,placeholder:"Type something..."}),e.jsx(R,{label:"Compact Date",value:b,onChange:B}),e.jsx($,{label:"Compact Select",value:C,onChange:O,options:[{value:"1",label:"Option 1"},{value:"2",label:"Option 2"},{value:"3",label:"Option 3"}],placeholder:"Select an option"})]})]}),e.jsxs(t,{children:[e.jsx("h3",{children:"Toggle Controls"}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"12px",marginTop:"12px"},children:[e.jsx(v,{checked:u,onChange:w,label:`Checkbox (${u?"ON":"OFF"})`}),e.jsx(h,{isOn:n,onToggle:D,leftLabel:"Off",rightLabel:"On"}),e.jsx(V,{value:c,onChange:j,min:0,max:10,step:1,label:"Count",icon:"🔢",size:"small"}),e.jsx(g,{active:i,onClick:()=>A(!i),icon:"⭐",label:"Favorite",size:"small",showCheckmark:!0})]}),e.jsxs("div",{style:{marginTop:"12px",padding:"8px",background:n?"var(--color-primary)":"var(--color-background-secondary)",color:n?"var(--color-text-inverse)":"var(--color-text)",borderRadius:"var(--radius-sm)",fontSize:"var(--font-size-xs)",textAlign:"center",transition:"all 0.3s ease"},children:["Toggle: ",n?"ON":"OFF"," | Number: ",c," | Button: ",i?"Active":"Inactive"]})]}),e.jsxs(t,{children:[e.jsx("h3",{children:"Text Area"}),e.jsxs("div",{style:{marginTop:"12px"},children:[e.jsx(G,{label:"Compact Text Area",value:y,onChange:I,placeholder:"Write something...",rows:3}),e.jsxs("p",{style:{marginTop:"8px",fontSize:"var(--font-size-xs)",color:"var(--color-text-secondary)"},children:[y.length," characters"]})]})]})]})}};var Y,J,K;k.parameters={...k.parameters,docs:{...(Y=k.parameters)==null?void 0:Y.docs,source:{originalSource:`{
   render: () => <ShowcaseWrapper />
 }`,...(K=(J=k.parameters)==null?void 0:J.docs)==null?void 0:K.source}}};var Z,ee,ae;T.parameters={...T.parameters,docs:{...(Z=T.parameters)==null?void 0:Z.docs,source:{originalSource:`{
   render: () => {

package/storybook-static/assets/{AnimatedContent.stories-B8hBaVkK.js → AnimatedContent.stories-BP9feFGz.js}

@@ -1,4 +1,4 @@
-import{r as E,j as I}from"./iframe-B8pH-Lvr.js";import{g as u}from"./index-C8pce-KX.js";import{S as b}from"./ScrollTrigger-D1XJUMov.js";import"./preload-helper-C1FmrZbK.js";u.registerPlugin(b);const j=({children:O,container:p,distance:e=100,direction:m="vertical",reverse:s=!1,duration:v=.8,ease:y="power3.out",initialOpacity:o=0,animateOpacity:i=!0,scale:g=1,threshold:q=.1,delay:V=0,disappearAfter:d=0,disappearDuration:h=.5,disappearEase:w="power3.in",onComplete:n,onDisappearanceComplete:t,className:R="",...W})=>{const x=E.useRef(null);return E.useEffect(()=>{const a=x.current;if(!a)return;let l=p||document.getElementById("snap-main-container")||null;typeof l=="string"&&(l=document.querySelector(l));const f=m==="horizontal"?"x":"y",k=s?-e:e,B=(1-q)*100;u.set(a,{[f]:k,scale:g,opacity:i?o:1,visibility:"visible"});const c=u.timeline({paused:!0,delay:V,onComplete:()=>{n&&n(),d>0&&u.to(a,{[f]:s?e:-e,scale:.8,opacity:i?o:0,delay:d,duration:h,ease:w,onComplete:()=>t==null?void 0:t()})}});c.to(a,{[f]:0,scale:1,opacity:1,duration:v,ease:y});const H=b.create({trigger:a,scroller:l,start:`top ${B}%`,once:!0,onEnter:()=>c.play()});return()=>{H.kill(),c.kill()}},[p,e,m,s,v,y,o,i,g,q,V,d,h,w,n,t]),I.jsx("div",{ref:x,className:R,style:{visibility:"hidden"},...W,children:O})};j.__docgenInfo={description:"",methods:[],displayName:"AnimatedContent",props:{distance:{defaultValue:{value:"100",computed:!1},required:!1},direction:{defaultValue:{value:"'vertical'",computed:!1},required:!1},reverse:{defaultValue:{value:"false",computed:!1},required:!1},duration:{defaultValue:{value:"0.8",computed:!1},required:!1},ease:{defaultValue:{value:"'power3.out'",computed:!1},required:!1},initialOpacity:{defaultValue:{value:"0",computed:!1},required:!1},animateOpacity:{defaultValue:{value:"true",computed:!1},required:!1},scale:{defaultValue:{value:"1",computed:!1},required:!1},threshold:{defaultValue:{value:"0.1",computed:!1},required:!1},delay:{defaultValue:{value:"0",computed:!1},required:!1},disappearAfter:{defaultValue:{value:"0",computed:!1},required:!1},disappearDuration:{defaultValue:{value:"0.5",computed:!1},required:!1},disappearEase:{defaultValue:{value:"'power3.in'",computed:!1},required:!1},className:{defaultValue:{value:"''",computed:!1},required:!1}}};const $={title:"ReactBits/Animations/AnimatedContent",component:j,parameters:{layout:"fullscreen"},tags:["autodocs"]},r={args:{children:"Hello World",distance:100,direction:"vertical",reverse:!1,duration:.8,ease:"power3.out",initialOpacity:0,animateOpacity:!0,scale:1,threshold:.1,delay:0,disappearAfter:0,disappearDuration:.5,disappearEase:"power3.in"}};var S,A,_;r.parameters={...r.parameters,docs:{...(S=r.parameters)==null?void 0:S.docs,source:{originalSource:`{
+import{r as E,j as I}from"./iframe-Cw8dCV4Z.js";import{g as u}from"./index-C8pce-KX.js";import{S as b}from"./ScrollTrigger-D1XJUMov.js";import"./preload-helper-C1FmrZbK.js";u.registerPlugin(b);const j=({children:O,container:p,distance:e=100,direction:m="vertical",reverse:s=!1,duration:v=.8,ease:y="power3.out",initialOpacity:o=0,animateOpacity:i=!0,scale:g=1,threshold:q=.1,delay:V=0,disappearAfter:d=0,disappearDuration:h=.5,disappearEase:w="power3.in",onComplete:n,onDisappearanceComplete:t,className:R="",...W})=>{const x=E.useRef(null);return E.useEffect(()=>{const a=x.current;if(!a)return;let l=p||document.getElementById("snap-main-container")||null;typeof l=="string"&&(l=document.querySelector(l));const f=m==="horizontal"?"x":"y",k=s?-e:e,B=(1-q)*100;u.set(a,{[f]:k,scale:g,opacity:i?o:1,visibility:"visible"});const c=u.timeline({paused:!0,delay:V,onComplete:()=>{n&&n(),d>0&&u.to(a,{[f]:s?e:-e,scale:.8,opacity:i?o:0,delay:d,duration:h,ease:w,onComplete:()=>t==null?void 0:t()})}});c.to(a,{[f]:0,scale:1,opacity:1,duration:v,ease:y});const H=b.create({trigger:a,scroller:l,start:`top ${B}%`,once:!0,onEnter:()=>c.play()});return()=>{H.kill(),c.kill()}},[p,e,m,s,v,y,o,i,g,q,V,d,h,w,n,t]),I.jsx("div",{ref:x,className:R,style:{visibility:"hidden"},...W,children:O})};j.__docgenInfo={description:"",methods:[],displayName:"AnimatedContent",props:{distance:{defaultValue:{value:"100",computed:!1},required:!1},direction:{defaultValue:{value:"'vertical'",computed:!1},required:!1},reverse:{defaultValue:{value:"false",computed:!1},required:!1},duration:{defaultValue:{value:"0.8",computed:!1},required:!1},ease:{defaultValue:{value:"'power3.out'",computed:!1},required:!1},initialOpacity:{defaultValue:{value:"0",computed:!1},required:!1},animateOpacity:{defaultValue:{value:"true",computed:!1},required:!1},scale:{defaultValue:{value:"1",computed:!1},required:!1},threshold:{defaultValue:{value:"0.1",computed:!1},required:!1},delay:{defaultValue:{value:"0",computed:!1},required:!1},disappearAfter:{defaultValue:{value:"0",computed:!1},required:!1},disappearDuration:{defaultValue:{value:"0.5",computed:!1},required:!1},disappearEase:{defaultValue:{value:"'power3.in'",computed:!1},required:!1},className:{defaultValue:{value:"''",computed:!1},required:!1}}};const $={title:"ReactBits/Animations/AnimatedContent",component:j,parameters:{layout:"fullscreen"}},r={args:{children:"Hello World",distance:100,direction:"vertical",reverse:!1,duration:.8,ease:"power3.out",initialOpacity:0,animateOpacity:!0,scale:1,threshold:.1,delay:0,disappearAfter:0,disappearDuration:.5,disappearEase:"power3.in"}};var S,A,_;r.parameters={...r.parameters,docs:{...(S=r.parameters)==null?void 0:S.docs,source:{originalSource:`{
   args: {
     children: 'Hello World',
     distance: 100,

package/storybook-static/assets/{AnimatedList.stories-D8a9eYqH.js → AnimatedList.stories-DQ8jdk44.js}

@@ -1,4 +1,4 @@
-import{r as a,j as s}from"./iframe-B8pH-Lvr.js";import{u as A}from"./use-in-view-Zn8evg3J.js";import{m as D}from"./proxy-BA3VZtN5.js";import"./preload-helper-C1FmrZbK.js";import"./MotionConfigContext-D5hZdVGx.js";const G="_item_1to6w_34",H="_selected_1to6w_41",n={"scroll-list-container":"_scroll-list-container_1to6w_1","scroll-list":"_scroll-list_1to6w_1","no-scrollbar":"_no-scrollbar_1to6w_25",item:G,selected:H,"item-text":"_item-text_1to6w_45","top-gradient":"_top-gradient_1to6w_50","bottom-gradient":"_bottom-gradient_1to6w_61"},L=({children:l,delay:r=0,index:p,onMouseEnter:c,onClick:y})=>{const d=a.useRef(null),h=A(d,{amount:.5});return s.jsx(D.div,{ref:d,"data-index":p,onMouseEnter:c,onClick:y,initial:{scale:.7,opacity:0},animate:h?{scale:1,opacity:1}:{scale:.7,opacity:0},transition:{duration:.2,delay:r},style:{marginBottom:"1rem",cursor:"pointer"},children:l})},j=({items:l=["Item 1","Item 2","Item 3","Item 4","Item 5","Item 6","Item 7","Item 8","Item 9","Item 10","Item 11","Item 12","Item 13","Item 14","Item 15"],onItemSelect:r,showGradients:p=!0,enableArrowNavigation:c=!0,className:y="",itemClassName:d="",displayScrollbar:h=!0,initialSelectedIndex:M=-1})=>{const g=a.useRef(null),[o,u]=a.useState(M),[w,_]=a.useState(!1),[S,$]=a.useState(0),[E,T]=a.useState(1),C=a.useCallback(t=>{u(t)},[]),V=a.useCallback((t,e)=>{u(e),r&&r(t,e)},[r]),q=a.useCallback(t=>{const{scrollTop:e,scrollHeight:i,clientHeight:m}=t.target;$(Math.min(e/50,1));const I=i-(e+m);T(i<=m?0:Math.min(I/50,1))},[]);return a.useEffect(()=>{if(!c)return;const t=e=>{e.key==="ArrowDown"||e.key==="Tab"&&!e.shiftKey?(e.preventDefault(),_(!0),u(i=>Math.min(i+1,l.length-1))):e.key==="ArrowUp"||e.key==="Tab"&&e.shiftKey?(e.preventDefault(),_(!0),u(i=>Math.max(i-1,0))):e.key==="Enter"&&o>=0&&o<l.length&&(e.preventDefault(),r&&r(l[o],o))};return window.addEventListener("keydown",t),()=>window.removeEventListener("keydown",t)},[l,o,r,c]),a.useEffect(()=>{if(!w||o<0||!g.current)return;const t=g.current,e=t.querySelector(`[data-index="${o}"]`);if(e){const m=t.scrollTop,I=t.clientHeight,v=e.offsetTop,x=v+e.offsetHeight;v<m+50?t.scrollTo({top:v-50,behavior:"smooth"}):x>m+I-50&&t.scrollTo({top:x-I+50,behavior:"smooth"})}_(!1)},[o,w]),s.jsxs("div",{className:`${n["scroll-list-container"]} ${y}`,children:[s.jsx("div",{ref:g,className:`${n["scroll-list"]} ${h?"":n["no-scrollbar"]}`,onScroll:q,children:l.map((t,e)=>s.jsx(L,{delay:.1,index:e,onMouseEnter:()=>C(e),onClick:()=>V(t,e),children:s.jsx("div",{className:`${n.item} ${o===e?n.selected:""} ${d}`,children:s.jsx("p",{className:`${n["item-text"]}`,children:t})})},e))}),p&&s.jsxs(s.Fragment,{children:[s.jsx("div",{className:`${n["top-gradient"]}`,style:{opacity:S}}),s.jsx("div",{className:`${n["bottom-gradient"]}`,style:{opacity:E}})]})]})};j.__docgenInfo={description:"",methods:[],displayName:"AnimatedList",props:{items:{defaultValue:{value:`[
+import{r as a,j as s}from"./iframe-Cw8dCV4Z.js";import{u as A}from"./use-in-view-Dv3LTdsl.js";import{m as D}from"./proxy-p8L3T_Zy.js";import"./preload-helper-C1FmrZbK.js";import"./MotionConfigContext-BCa1jVYq.js";const G="_item_1to6w_34",H="_selected_1to6w_41",n={"scroll-list-container":"_scroll-list-container_1to6w_1","scroll-list":"_scroll-list_1to6w_1","no-scrollbar":"_no-scrollbar_1to6w_25",item:G,selected:H,"item-text":"_item-text_1to6w_45","top-gradient":"_top-gradient_1to6w_50","bottom-gradient":"_bottom-gradient_1to6w_61"},L=({children:l,delay:o=0,index:p,onMouseEnter:c,onClick:y})=>{const d=a.useRef(null),h=A(d,{amount:.5});return s.jsx(D.div,{ref:d,"data-index":p,onMouseEnter:c,onClick:y,initial:{scale:.7,opacity:0},animate:h?{scale:1,opacity:1}:{scale:.7,opacity:0},transition:{duration:.2,delay:o},style:{marginBottom:"1rem",cursor:"pointer"},children:l})},j=({items:l=["Item 1","Item 2","Item 3","Item 4","Item 5","Item 6","Item 7","Item 8","Item 9","Item 10","Item 11","Item 12","Item 13","Item 14","Item 15"],onItemSelect:o,showGradients:p=!0,enableArrowNavigation:c=!0,className:y="",itemClassName:d="",displayScrollbar:h=!0,initialSelectedIndex:M=-1})=>{const _=a.useRef(null),[r,u]=a.useState(M),[w,g]=a.useState(!1),[S,$]=a.useState(0),[E,T]=a.useState(1),C=a.useCallback(t=>{u(t)},[]),V=a.useCallback((t,e)=>{u(e),o&&o(t,e)},[o]),q=a.useCallback(t=>{const{scrollTop:e,scrollHeight:i,clientHeight:m}=t.target;$(Math.min(e/50,1));const I=i-(e+m);T(i<=m?0:Math.min(I/50,1))},[]);return a.useEffect(()=>{if(!c)return;const t=e=>{e.key==="ArrowDown"||e.key==="Tab"&&!e.shiftKey?(e.preventDefault(),g(!0),u(i=>Math.min(i+1,l.length-1))):e.key==="ArrowUp"||e.key==="Tab"&&e.shiftKey?(e.preventDefault(),g(!0),u(i=>Math.max(i-1,0))):e.key==="Enter"&&r>=0&&r<l.length&&(e.preventDefault(),o&&o(l[r],r))};return window.addEventListener("keydown",t),()=>window.removeEventListener("keydown",t)},[l,r,o,c]),a.useEffect(()=>{if(!w||r<0||!_.current)return;const t=_.current,e=t.querySelector(`[data-index="${r}"]`);if(e){const m=t.scrollTop,I=t.clientHeight,v=e.offsetTop,x=v+e.offsetHeight;v<m+50?t.scrollTo({top:v-50,behavior:"smooth"}):x>m+I-50&&t.scrollTo({top:x-I+50,behavior:"smooth"})}g(!1)},[r,w]),s.jsxs("div",{className:`${n["scroll-list-container"]} ${y}`,children:[s.jsx("div",{ref:_,className:`${n["scroll-list"]} ${h?"":n["no-scrollbar"]}`,onScroll:q,children:l.map((t,e)=>s.jsx(L,{delay:.1,index:e,onMouseEnter:()=>C(e),onClick:()=>V(t,e),children:s.jsx("div",{className:`${n.item} ${r===e?n.selected:""} ${d}`,children:s.jsx("p",{className:`${n["item-text"]}`,children:t})})},e))}),p&&s.jsxs(s.Fragment,{children:[s.jsx("div",{className:`${n["top-gradient"]}`,style:{opacity:S}}),s.jsx("div",{className:`${n["bottom-gradient"]}`,style:{opacity:E}})]})]})};j.__docgenInfo={description:"",methods:[],displayName:"AnimatedList",props:{items:{defaultValue:{value:`[
   'Item 1',
   'Item 2',
   'Item 3',
@@ -14,7 +14,7 @@ import{r as a,j as s}from"./iframe-B8pH-Lvr.js";import{u as A}from"./use-in-view
   'Item 13',
   'Item 14',
   'Item 15'
-]`,computed:!1},required:!1},showGradients:{defaultValue:{value:"true",computed:!1},required:!1},enableArrowNavigation:{defaultValue:{value:"true",computed:!1},required:!1},className:{defaultValue:{value:"''",computed:!1},required:!1},itemClassName:{defaultValue:{value:"''",computed:!1},required:!1},displayScrollbar:{defaultValue:{value:"true",computed:!1},required:!1},initialSelectedIndex:{defaultValue:{value:"-1",computed:!1},required:!1}}};const U={title:"ReactBits/Components/AnimatedList",component:j,parameters:{layout:"fullscreen"},tags:["autodocs"]},f={args:{items:["Item 1","Item 2","Item 3","Item 4","Item 5","Item 6","Item 7","Item 8","Item 9","Item 10","Item 11","Item 12","Item 13","Item 14","Item 15"],showGradients:!0,enableArrowNavigation:!0,itemClassName:"",displayScrollbar:!0,initialSelectedIndex:-1}};var b,N,k;f.parameters={...f.parameters,docs:{...(b=f.parameters)==null?void 0:b.docs,source:{originalSource:`{
+]`,computed:!1},required:!1},showGradients:{defaultValue:{value:"true",computed:!1},required:!1},enableArrowNavigation:{defaultValue:{value:"true",computed:!1},required:!1},className:{defaultValue:{value:"''",computed:!1},required:!1},itemClassName:{defaultValue:{value:"''",computed:!1},required:!1},displayScrollbar:{defaultValue:{value:"true",computed:!1},required:!1},initialSelectedIndex:{defaultValue:{value:"-1",computed:!1},required:!1}}};const U={title:"ReactBits/Components/AnimatedList",component:j,parameters:{layout:"fullscreen"}},f={args:{items:["Item 1","Item 2","Item 3","Item 4","Item 5","Item 6","Item 7","Item 8","Item 9","Item 10","Item 11","Item 12","Item 13","Item 14","Item 15"],showGradients:!0,enableArrowNavigation:!0,itemClassName:"",displayScrollbar:!0,initialSelectedIndex:-1}};var b,N,k;f.parameters={...f.parameters,docs:{...(b=f.parameters)==null?void 0:b.docs,source:{originalSource:`{
   args: {
     items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8', 'Item 9', 'Item 10', 'Item 11', 'Item 12', 'Item 13', 'Item 14', 'Item 15'],
     showGradients: true,

package/storybook-static/assets/{Antigravity.stories-D_mJbWK0.js → Antigravity.stories-BTIHyYKU.js}

@@ -1,4 +1,4 @@
-import{j as s,r as m}from"./iframe-B8pH-Lvr.js";import{C as mt,u as dt,a as ut}from"./react-three-fiber.esm-DI-wNJmP.js";import{O as ht}from"./three.module--_vTUKhS.js";import"./preload-helper-C1FmrZbK.js";const xt=({count:d=300,magnetRadius:H=10,ringRadius:C=10,waveSpeed:J=.4,waveAmplitude:O=1,particleSize:K=2,lerpSpeed:w=.1,color:L="#FF9FFC",autoAnimate:Q=!1,particleVariance:W=1,rotationSpeed:Z=0,depthFactor:R=1,pulseSpeed:$=3,particleShape:h="capsule",fieldStrength:tt=10})=>{const G=m.useRef(null),{viewport:x}=dt(),o=m.useMemo(()=>new ht,[]),z=m.useRef({x:0,y:0}),X=m.useRef(0),n=m.useRef({x:0,y:0}),et=m.useMemo(()=>{const a=[],u=x.width||100,r=x.height||100;for(let e=0;e<d;e++){const _=Math.random()*100,p=20+Math.random()*100,l=.01+Math.random()/200,M=-50+Math.random()*100,j=-50+Math.random()*100,S=-50+Math.random()*100,g=(Math.random()-.5)*u,t=(Math.random()-.5)*r,y=(Math.random()-.5)*20,c=(Math.random()-.5)*2;a.push({t:_,factor:p,speed:l,xFactor:M,yFactor:j,zFactor:S,mx:g,my:t,mz:y,cx:g,cy:t,cz:y,vx:0,vy:0,vz:0,randomRadiusOffset:c})}return a},[d,x.width,x.height]);return ut(a=>{const u=G.current;if(!u)return;const{viewport:r,pointer:e}=a;Math.sqrt(Math.pow(e.x-z.current.x,2)+Math.pow(e.y-z.current.y,2))>.001&&(X.current=Date.now(),z.current={x:e.x,y:e.y});let p=e.x*r.width/2,l=e.y*r.height/2;if(Q&&Date.now()-X.current>2e3){const t=a.clock.getElapsedTime();p=Math.sin(t*.5)*(r.width/4),l=Math.cos(t*.5*2)*(r.height/4)}const M=.05;n.current.x+=(p-n.current.x)*M,n.current.y+=(l-n.current.y)*M;const j=n.current.x,S=n.current.y,g=a.clock.getElapsedTime()*Z;et.forEach((t,y)=>{let{t:c,speed:st,mx:k,my:q,mz:I,cz:ot,randomRadiusOffset:nt}=t;c=t.t+=st/2;const P=1-ot/50,f=j*P,v=S*P,A=k-f,D=q-v,at=Math.sqrt(A*A+D*D);let i={x:k,y:q,z:I*R};if(at<H){const b=Math.atan2(D,A)+g,ct=Math.sin(c*J+b)*(.5*O),it=nt*(5/(tt+.1)),Y=C+ct+it;i.x=f+Y*Math.cos(b),i.y=v+Y*Math.sin(b),i.z=I*R+Math.sin(c)*(1*O*R)}t.cx+=(i.x-t.cx)*w,t.cy+=(i.y-t.cy)*w,t.cz+=(i.z-t.cz)*w,o.position.set(t.cx,t.cy,t.cz),o.lookAt(f,v,t.cz),o.rotateX(Math.PI/2);const rt=Math.sqrt(Math.pow(t.cx-f,2)+Math.pow(t.cy-v,2));let T=1-Math.abs(rt-C)/10;T=Math.max(0,Math.min(1,T));const E=T*(.8+Math.sin(c*$)*.2*W)*K;o.scale.set(E,E,E),o.updateMatrix(),u.setMatrixAt(y,o.matrix)}),u.instanceMatrix.needsUpdate=!0}),s.jsxs("instancedMesh",{ref:G,args:[void 0,void 0,d],children:[h==="capsule"&&s.jsx("capsuleGeometry",{args:[.1,.4,4,8]}),h==="sphere"&&s.jsx("sphereGeometry",{args:[.2,16,16]}),h==="box"&&s.jsx("boxGeometry",{args:[.3,.3,.3]}),h==="tetrahedron"&&s.jsx("tetrahedronGeometry",{args:[.3]}),s.jsx("meshBasicMaterial",{color:L})]})},U=d=>s.jsx(mt,{camera:{position:[0,0,50],fov:35},children:s.jsx(xt,{...d})});U.__docgenInfo={description:"",methods:[],displayName:"Antigravity"};const ft={title:"ReactBits/Animations/Antigravity",component:U,parameters:{layout:"fullscreen"},tags:["autodocs"]},F={args:{count:300,magnetRadius:10,ringRadius:10,waveSpeed:.4,waveAmplitude:1,particleSize:2,lerpSpeed:.1,color:"#FF9FFC",autoAnimate:!1,particleVariance:1,rotationSpeed:0,depthFactor:1,pulseSpeed:3,particleShape:"capsule",fieldStrength:10}};var B,V,N;F.parameters={...F.parameters,docs:{...(B=F.parameters)==null?void 0:B.docs,source:{originalSource:`{
+import{j as s,r as m}from"./iframe-Cw8dCV4Z.js";import{C as mt,u as dt,a as ut}from"./react-three-fiber.esm-BnMrba87.js";import{O as ht}from"./three.module--_vTUKhS.js";import"./preload-helper-C1FmrZbK.js";const xt=({count:d=300,magnetRadius:H=10,ringRadius:C=10,waveSpeed:J=.4,waveAmplitude:O=1,particleSize:K=2,lerpSpeed:w=.1,color:L="#FF9FFC",autoAnimate:Q=!1,particleVariance:W=1,rotationSpeed:Z=0,depthFactor:R=1,pulseSpeed:$=3,particleShape:h="capsule",fieldStrength:tt=10})=>{const G=m.useRef(null),{viewport:x}=dt(),o=m.useMemo(()=>new ht,[]),z=m.useRef({x:0,y:0}),X=m.useRef(0),n=m.useRef({x:0,y:0}),et=m.useMemo(()=>{const a=[],u=x.width||100,r=x.height||100;for(let e=0;e<d;e++){const _=Math.random()*100,p=20+Math.random()*100,l=.01+Math.random()/200,M=-50+Math.random()*100,j=-50+Math.random()*100,S=-50+Math.random()*100,g=(Math.random()-.5)*u,t=(Math.random()-.5)*r,y=(Math.random()-.5)*20,c=(Math.random()-.5)*2;a.push({t:_,factor:p,speed:l,xFactor:M,yFactor:j,zFactor:S,mx:g,my:t,mz:y,cx:g,cy:t,cz:y,vx:0,vy:0,vz:0,randomRadiusOffset:c})}return a},[d,x.width,x.height]);return ut(a=>{const u=G.current;if(!u)return;const{viewport:r,pointer:e}=a;Math.sqrt(Math.pow(e.x-z.current.x,2)+Math.pow(e.y-z.current.y,2))>.001&&(X.current=Date.now(),z.current={x:e.x,y:e.y});let p=e.x*r.width/2,l=e.y*r.height/2;if(Q&&Date.now()-X.current>2e3){const t=a.clock.getElapsedTime();p=Math.sin(t*.5)*(r.width/4),l=Math.cos(t*.5*2)*(r.height/4)}const M=.05;n.current.x+=(p-n.current.x)*M,n.current.y+=(l-n.current.y)*M;const j=n.current.x,S=n.current.y,g=a.clock.getElapsedTime()*Z;et.forEach((t,y)=>{let{t:c,speed:st,mx:k,my:q,mz:I,cz:ot,randomRadiusOffset:nt}=t;c=t.t+=st/2;const P=1-ot/50,f=j*P,v=S*P,A=k-f,D=q-v,at=Math.sqrt(A*A+D*D);let i={x:k,y:q,z:I*R};if(at<H){const b=Math.atan2(D,A)+g,ct=Math.sin(c*J+b)*(.5*O),it=nt*(5/(tt+.1)),Y=C+ct+it;i.x=f+Y*Math.cos(b),i.y=v+Y*Math.sin(b),i.z=I*R+Math.sin(c)*(1*O*R)}t.cx+=(i.x-t.cx)*w,t.cy+=(i.y-t.cy)*w,t.cz+=(i.z-t.cz)*w,o.position.set(t.cx,t.cy,t.cz),o.lookAt(f,v,t.cz),o.rotateX(Math.PI/2);const rt=Math.sqrt(Math.pow(t.cx-f,2)+Math.pow(t.cy-v,2));let T=1-Math.abs(rt-C)/10;T=Math.max(0,Math.min(1,T));const E=T*(.8+Math.sin(c*$)*.2*W)*K;o.scale.set(E,E,E),o.updateMatrix(),u.setMatrixAt(y,o.matrix)}),u.instanceMatrix.needsUpdate=!0}),s.jsxs("instancedMesh",{ref:G,args:[void 0,void 0,d],children:[h==="capsule"&&s.jsx("capsuleGeometry",{args:[.1,.4,4,8]}),h==="sphere"&&s.jsx("sphereGeometry",{args:[.2,16,16]}),h==="box"&&s.jsx("boxGeometry",{args:[.3,.3,.3]}),h==="tetrahedron"&&s.jsx("tetrahedronGeometry",{args:[.3]}),s.jsx("meshBasicMaterial",{color:L})]})},U=d=>s.jsx(mt,{camera:{position:[0,0,50],fov:35},children:s.jsx(xt,{...d})});U.__docgenInfo={description:"",methods:[],displayName:"Antigravity"};const ft={title:"ReactBits/Animations/Antigravity",component:U,parameters:{layout:"fullscreen"}},F={args:{count:300,magnetRadius:10,ringRadius:10,waveSpeed:.4,waveAmplitude:1,particleSize:2,lerpSpeed:.1,color:"#FF9FFC",autoAnimate:!1,particleVariance:1,rotationSpeed:0,depthFactor:1,pulseSpeed:3,particleShape:"capsule",fieldStrength:10}};var B,V,N;F.parameters={...F.parameters,docs:{...(B=F.parameters)==null?void 0:B.docs,source:{originalSource:`{
   args: {
     count: 300,
     magnetRadius: 10,

package/storybook-static/assets/ArrayInput.stories-d5_OJJMu.js

@@ -0,0 +1,138 @@
+import{j as e,r as f}from"./iframe-Cw8dCV4Z.js";import{B as j}from"./Button-DgpqJWgD.js";import{T as J}from"./TextInput-CLgIGUn3.js";import{T as W}from"./TextArea-DN6IYITs.js";import{A as q}from"./index-CzApopWo.js";import{m as P}from"./proxy-p8L3T_Zy.js";import"./preload-helper-C1FmrZbK.js";import"./useSound-D23BsIr4.js";import"./MotionConfigContext-BCa1jVYq.js";const V="_arrayInput_6qbs9_1",D="_arrayInputLabel_6qbs9_5",O="_arrayInputItem_6qbs9_14",F="_inputWrapper_6qbs9_38",U="_input_6qbs9_38",G="_complexItem_6qbs9_71",H="_fieldsWrapper_6qbs9_77",K="_removeButton_6qbs9_96",Q="_addButton_6qbs9_112",l={arrayInput:V,arrayInputLabel:D,arrayInputItem:O,inputWrapper:F,input:U,complexItem:G,fieldsWrapper:H,removeButton:K,addButton:Q};function p(n){return n.type==="complex"?e.jsx(Y,{...n}):e.jsx(X,{...n})}function X({label:n,values:r,onChange:m,placeholder:c,itemStyle:d,inputStyle:u,multiline:I=!1,rows:w=3,buttonVariant:h="primary"}){const i=f.useRef([]);for(;i.current.length<r.length;)i.current.push(`item-${Date.now()}-${Math.random()}`);i.current.length>r.length&&(i.current=i.current.slice(0,r.length));const g=(a,t)=>{const s=[...r];s[a]=t,m(s)},C=()=>{i.current.push(`item-${Date.now()}-${Math.random()}`),m([...r,""])},o=a=>{const t=r.filter((s,$)=>$!==a);i.current.splice(a,1),m(t)};return e.jsxs("div",{className:l.arrayInput,children:[e.jsx("h3",{className:l.arrayInputLabel,children:n}),e.jsx("div",{children:e.jsx(q,{children:r.map((a,t)=>e.jsxs(P.div,{className:l.arrayInputItem,style:d,initial:{opacity:0,y:10},animate:{opacity:1,y:0},exit:{opacity:0},transition:{duration:.3,ease:"easeInOut",layout:{duration:.2}},children:[e.jsx("div",{className:l.inputWrapper,children:I?e.jsx("div",{style:u,children:e.jsx(W,{label:"",value:a,onChange:s=>g(t,s),placeholder:c,rows:w,compact:!0})}):e.jsx("input",{type:"text",value:a,onChange:s=>g(t,s.target.value),placeholder:c,className:l.input,style:u})}),e.jsx(j,{variant:"ghost",size:"small",onClick:()=>o(t),"aria-label":"Remove item",className:l.removeButton,children:e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"currentColor",children:e.jsx("path",{d:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"})})})]},i.current[t]))})}),e.jsx(j,{variant:h,size:"small",onClick:C,className:l.addButton,children:n})]})}function Y({label:n,values:r,onChange:m,fields:c,getKey:d,itemStyle:u,inputStyle:I,buttonVariant:w="primary"}){const h=(o,a,t)=>{const s=[...r];s[o]={...s[o],[a]:t},m(s)},i=()=>{const o=c.reduce((a,t)=>({...a,[t.name]:""}),{});m([...r,o])},g=o=>{const a=r.filter((t,s)=>s!==o);m(a)},C=(o,a)=>d?d(o,a):c.map(t=>o[t.name]||"").join("-")+`-${a}`;return e.jsxs("div",{className:l.arrayInput,children:[e.jsx("h3",{className:l.arrayInputLabel,children:n}),e.jsx("div",{children:e.jsx(q,{children:r.map((o,a)=>e.jsxs(P.div,{className:`${l.arrayInputItem} ${c.length>1?l.complexItem:""}`,style:u,initial:{opacity:0,y:10},animate:{opacity:1,y:0},exit:{opacity:0},transition:{duration:.3,ease:"easeInOut",layout:{duration:.2}},children:[e.jsx("div",{className:l.fieldsWrapper,children:c.map(t=>e.jsx("div",{style:I,children:t.multiline?e.jsx(W,{value:o[t.name]||"",onChange:s=>h(a,t.name,s),label:t.label,placeholder:t.placeholder,rows:t.rows,compact:!0}):e.jsx(J,{value:o[t.name]||"",onChange:s=>h(a,t.name,s),label:t.label,type:t.type,placeholder:t.placeholder})},t.name))}),e.jsx(j,{variant:"ghost",size:"small",onClick:()=>g(a),"aria-label":"Remove item",className:l.removeButton,children:e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"currentColor",children:e.jsx("path",{d:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"})})})]},C(o,a)))})}),e.jsxs(j,{variant:w,size:"small",onClick:i,className:l.addButton,children:["Add ",n]})]})}p.__docgenInfo={description:`ArrayInput component - Versatile dynamic list manager
+
+@component
+@description
+A flexible component that can handle both simple string arrays and complex object arrays.
+Users can add, remove, and edit items dynamically. Supports custom field configurations
+for complex data structures.
+
+@example
+// Simple string array
+<ArrayInput
+  label="Tags"
+  values={tags}
+  onChange={setTags}
+  placeholder="Enter tag"
+/>
+
+@example
+// Complex object array
+<ArrayInput
+  type="complex"
+  label="Social Links"
+  values={links}
+  onChange={setLinks}
+  fields={[
+    { name: 'label', label: 'Label', placeholder: 'GitHub' },
+    { name: 'url', label: 'URL', type: 'url', placeholder: 'https://github.com/...' }
+  ]}
+/>`,methods:[],displayName:"ArrayInput"};const ie={title:"Molecules/ArrayInput",component:p,parameters:{layout:"centered",docs:{description:{component:"A dynamic array input component that allows adding and removing multiple text inputs."}}},argTypes:{label:{control:"text"},values:{control:"object"},placeholder:{control:"text"},onChange:{action:"changed"}}},y={args:{label:"Tags",values:["React","TypeScript","Storybook"],placeholder:"Enter tag",onChange:()=>{}}},x={args:{label:"Email Addresses",values:["john@example.com","jane@example.com"],placeholder:"Enter email",onChange:()=>{}},render:()=>{const[n,r]=f.useState(["john@example.com","jane@example.com"]);return e.jsxs("div",{children:[e.jsx(p,{label:"Email Addresses",values:n,onChange:r,placeholder:"Enter email"}),e.jsxs("div",{style:{marginTop:"1rem",padding:"1rem",background:"var(--color-background-secondary)",borderRadius:"var(--radius-sm)"},children:[e.jsx("p",{style:{margin:0,fontSize:"0.875rem"},children:e.jsxs("strong",{children:["Emails (",n.length,"):"]})}),e.jsx("ul",{style:{margin:"0.5rem 0 0",paddingLeft:"1.5rem"},children:n.map((m,c)=>e.jsx("li",{style:{fontSize:"0.875rem"},children:m||"(empty)"},c))})]})]})},parameters:{controls:{disable:!0}}},b={args:{label:"Project Notes",values:[""],placeholder:"Enter detailed note...",onChange:()=>{}},render:()=>{const[n,r]=f.useState(["This is a longer note that demonstrates how multiline text works. The textarea will wrap properly and allow for multiple lines of content.","Another note with some detailed information that spans multiple lines and shows how the component handles longer text content.",""]);return e.jsx("div",{style:{maxWidth:"600px"},children:e.jsx(p,{label:"Project Notes",values:n,onChange:r,placeholder:"Enter detailed note...",multiline:!0,rows:4})})},parameters:{controls:{disable:!0}}},v={args:{label:"Customer Testimonials",values:[],onChange:()=>{}},render:()=>{const[n,r]=f.useState([{name:"Sarah Johnson",title:"Product Manager",feedback:"This tool has completely transformed how our team collaborates. The intuitive interface and powerful features make project management effortless."},{name:"Mike Chen",title:"Software Engineer",feedback:"Amazing performance and reliability. The development experience is smooth and the documentation is comprehensive."}]);return e.jsx("div",{style:{maxWidth:"700px"},children:e.jsx(p,{type:"complex",label:"Customer Testimonials",values:n,onChange:r,fields:[{name:"name",label:"Name",placeholder:"Customer name"},{name:"title",label:"Job Title",placeholder:"Job title"},{name:"feedback",label:"Testimonial",placeholder:"Enter customer feedback...",multiline:!0,rows:4}]})})},parameters:{controls:{disable:!0}}};var T,_,k;y.parameters={...y.parameters,docs:{...(T=y.parameters)==null?void 0:T.docs,source:{originalSource:`{
+  args: {
+    label: 'Tags',
+    values: ['React', 'TypeScript', 'Storybook'],
+    placeholder: 'Enter tag',
+    onChange: () => {}
+  }
+}`,...(k=(_=y.parameters)==null?void 0:_.docs)==null?void 0:k.source}}};var A,E,N;x.parameters={...x.parameters,docs:{...(A=x.parameters)==null?void 0:A.docs,source:{originalSource:`{
+  args: {
+    label: 'Email Addresses',
+    values: ['john@example.com', 'jane@example.com'],
+    placeholder: 'Enter email',
+    onChange: () => {}
+  },
+  render: () => {
+    const [emails, setEmails] = useState(['john@example.com', 'jane@example.com']);
+    return <div>
+                <ArrayInput label="Email Addresses" values={emails} onChange={setEmails} placeholder="Enter email" />
+                <div style={{
+        marginTop: '1rem',
+        padding: '1rem',
+        background: 'var(--color-background-secondary)',
+        borderRadius: 'var(--radius-sm)'
+      }}>
+                    <p style={{
+          margin: 0,
+          fontSize: '0.875rem'
+        }}>
+                        <strong>Emails ({emails.length}):</strong>
+                    </p>
+                    <ul style={{
+          margin: '0.5rem 0 0',
+          paddingLeft: '1.5rem'
+        }}>
+                        {emails.map((email, index) => <li key={index} style={{
+            fontSize: '0.875rem'
+          }}>
+                                {email || '(empty)'}
+                            </li>)}
+                    </ul>
+                </div>
+            </div>;
+  },
+  parameters: {
+    controls: {
+      disable: true
+    }
+  }
+}`,...(N=(E=x.parameters)==null?void 0:E.docs)==null?void 0:N.source}}};var S,B,L;b.parameters={...b.parameters,docs:{...(S=b.parameters)==null?void 0:S.docs,source:{originalSource:`{
+  args: {
+    label: 'Project Notes',
+    values: [''],
+    placeholder: 'Enter detailed note...',
+    onChange: () => {}
+  },
+  render: () => {
+    const [notes, setNotes] = useState(['This is a longer note that demonstrates how multiline text works. The textarea will wrap properly and allow for multiple lines of content.', 'Another note with some detailed information that spans multiple lines and shows how the component handles longer text content.', '']);
+    return <div style={{
+      maxWidth: '600px'
+    }}>
+                <ArrayInput label="Project Notes" values={notes} onChange={setNotes} placeholder="Enter detailed note..." multiline={true} rows={4} />
+            </div>;
+  },
+  parameters: {
+    controls: {
+      disable: true
+    }
+  }
+}`,...(L=(B=b.parameters)==null?void 0:B.docs)==null?void 0:L.source}}};var M,z,R;v.parameters={...v.parameters,docs:{...(M=v.parameters)==null?void 0:M.docs,source:{originalSource:`{
+  args: {
+    label: 'Customer Testimonials',
+    values: [],
+    onChange: () => {}
+  },
+  render: () => {
+    const [testimonials, setTestimonials] = useState([{
+      name: 'Sarah Johnson',
+      title: 'Product Manager',
+      feedback: 'This tool has completely transformed how our team collaborates. The intuitive interface and powerful features make project management effortless.'
+    }, {
+      name: 'Mike Chen',
+      title: 'Software Engineer',
+      feedback: 'Amazing performance and reliability. The development experience is smooth and the documentation is comprehensive.'
+    }]);
+    return <div style={{
+      maxWidth: '700px'
+    }}>
+                <ArrayInput type="complex" label="Customer Testimonials" values={testimonials} onChange={setTestimonials} fields={[{
+        name: 'name',
+        label: 'Name',
+        placeholder: 'Customer name'
+      }, {
+        name: 'title',
+        label: 'Job Title',
+        placeholder: 'Job title'
+      }, {
+        name: 'feedback',
+        label: 'Testimonial',
+        placeholder: 'Enter customer feedback...',
+        multiline: true,
+        rows: 4
+      }]} />
+            </div>;
+  },
+  parameters: {
+    controls: {
+      disable: true
+    }
+  }
+}`,...(R=(z=v.parameters)==null?void 0:z.docs)==null?void 0:R.source}}};const me=["Default","Interactive","MultilineNotes","ComplexMultilineForm"];export{v as ComplexMultilineForm,y as Default,x as Interactive,b as MultilineNotes,me as __namedExportsOrder,ie as default};

package/storybook-static/assets/{Aurora.stories-BN4MataE.js → Aurora.stories-D_eQNPaB.js}

@@ -1,4 +1,4 @@
-import{r as f,j as E}from"./iframe-B8pH-Lvr.js";import{R as B,P,M as T}from"./Mesh-CwXV3WjE.js";import{T as L}from"./Triangle-64ffRKNB.js";import{C as h}from"./Color-YRkaOI4u.js";import"./preload-helper-C1FmrZbK.js";const N={"aurora-container":"_aurora-container_10y7n_1"},O=`#version 300 es
+import{r as f,j as E}from"./iframe-Cw8dCV4Z.js";import{R as B,P,M as T}from"./Mesh-CwXV3WjE.js";import{T as L}from"./Triangle-64ffRKNB.js";import{C as h}from"./Color-YRkaOI4u.js";import"./preload-helper-C1FmrZbK.js";const N={"aurora-container":"_aurora-container_10y7n_1"},O=`#version 300 es
 in vec2 position;
 void main() {
   gl_Position = vec4(position, 0.0, 1.0);
@@ -88,7 +88,7 @@ void main() {
   
   fragColor = vec4(auroraColor * auroraAlpha, auroraAlpha);
 }
-`;function F(s){const{colorStops:d=["#5227FF","#7cff67","#5227FF"],amplitude:x=1,blend:v=.5}=s,i=f.useRef(s);i.current=s;const C=f.useRef(null);return f.useEffect(()=>{const e=C.current;if(!e)return;const l=new B({alpha:!0,premultipliedAlpha:!0,antialias:!0}),o=l.gl;o.clearColor(0,0,0,0),o.enable(o.BLEND),o.blendFunc(o.ONE,o.ONE_MINUS_SRC_ALPHA),o.canvas.style.backgroundColor="transparent";let t;function c(){if(!e)return;const r=e.offsetWidth,n=e.offsetHeight;l.setSize(r,n),t&&(t.uniforms.uResolution.value=[r,n])}window.addEventListener("resize",c);const u=new L(o);u.attributes.uv&&delete u.attributes.uv;const w=d.map(r=>{const n=new h(r);return[n.r,n.g,n.b]});t=new P(o,{vertex:O,fragment:I,uniforms:{uTime:{value:0},uAmplitude:{value:x},uColorStops:{value:w},uResolution:{value:[e.offsetWidth,e.offsetHeight]},uBlend:{value:v}}});const R=new T(o,{geometry:u,program:t});e.appendChild(o.canvas);let m=0;const g=r=>{m=requestAnimationFrame(g);const{time:n=r*.01,speed:_=1}=i.current;t.uniforms.uTime.value=n*_*.1,t.uniforms.uAmplitude.value=i.current.amplitude??1,t.uniforms.uBlend.value=i.current.blend??v;const b=i.current.colorStops??d;t.uniforms.uColorStops.value=b.map(z=>{const p=new h(z);return[p.r,p.g,p.b]}),l.render({scene:R})};return m=requestAnimationFrame(g),c(),()=>{var r;cancelAnimationFrame(m),window.removeEventListener("resize",c),e&&o.canvas.parentNode===e&&e.removeChild(o.canvas),(r=o.getExtension("WEBGL_lose_context"))==null||r.loseContext()}},[x]),E.jsx("div",{ref:C,className:`${N["aurora-container"]}`})}F.__docgenInfo={description:"",methods:[],displayName:"Aurora"};const k={title:"ReactBits/Backgrounds/Aurora",component:F,parameters:{layout:"fullscreen"},tags:["autodocs"]},a={args:{colorStops:["#5227FF","#7cff67","#5227FF"],amplitude:1,blend:.5}};var y,S,A;a.parameters={...a.parameters,docs:{...(y=a.parameters)==null?void 0:y.docs,source:{originalSource:`{
+`;function F(s){const{colorStops:d=["#5227FF","#7cff67","#5227FF"],amplitude:x=1,blend:v=.5}=s,i=f.useRef(s);i.current=s;const C=f.useRef(null);return f.useEffect(()=>{const e=C.current;if(!e)return;const l=new B({alpha:!0,premultipliedAlpha:!0,antialias:!0}),o=l.gl;o.clearColor(0,0,0,0),o.enable(o.BLEND),o.blendFunc(o.ONE,o.ONE_MINUS_SRC_ALPHA),o.canvas.style.backgroundColor="transparent";let t;function c(){if(!e)return;const r=e.offsetWidth,n=e.offsetHeight;l.setSize(r,n),t&&(t.uniforms.uResolution.value=[r,n])}window.addEventListener("resize",c);const u=new L(o);u.attributes.uv&&delete u.attributes.uv;const w=d.map(r=>{const n=new h(r);return[n.r,n.g,n.b]});t=new P(o,{vertex:O,fragment:I,uniforms:{uTime:{value:0},uAmplitude:{value:x},uColorStops:{value:w},uResolution:{value:[e.offsetWidth,e.offsetHeight]},uBlend:{value:v}}});const R=new T(o,{geometry:u,program:t});e.appendChild(o.canvas);let m=0;const g=r=>{m=requestAnimationFrame(g);const{time:n=r*.01,speed:_=1}=i.current;t.uniforms.uTime.value=n*_*.1,t.uniforms.uAmplitude.value=i.current.amplitude??1,t.uniforms.uBlend.value=i.current.blend??v;const b=i.current.colorStops??d;t.uniforms.uColorStops.value=b.map(z=>{const p=new h(z);return[p.r,p.g,p.b]}),l.render({scene:R})};return m=requestAnimationFrame(g),c(),()=>{var r;cancelAnimationFrame(m),window.removeEventListener("resize",c),e&&o.canvas.parentNode===e&&e.removeChild(o.canvas),(r=o.getExtension("WEBGL_lose_context"))==null||r.loseContext()}},[x]),E.jsx("div",{ref:C,className:`${N["aurora-container"]}`})}F.__docgenInfo={description:"",methods:[],displayName:"Aurora"};const k={title:"ReactBits/Backgrounds/Aurora",component:F,parameters:{layout:"fullscreen"}},a={args:{colorStops:["#5227FF","#7cff67","#5227FF"],amplitude:1,blend:.5}};var y,S,A;a.parameters={...a.parameters,docs:{...(y=a.parameters)==null?void 0:y.docs,source:{originalSource:`{
   args: {
     colorStops: ['#5227FF', '#7cff67', '#5227FF'],
     amplitude: 1.0,

package/storybook-static/assets/{Beams.stories-CCtZOw8G.js → Beams.stories-VLKuYE0_.js}

@@ -1,10 +1,10 @@
-import{r as n,j as x}from"./iframe-B8pH-Lvr.js";import{n as A,x as L,y as D,j as W,i as T,h as U,t as b}from"./three.module--_vTUKhS.js";import{u as h,a as O,C as X}from"./react-three-fiber.esm-DI-wNJmP.js";import{u as G,_ as Z}from"./Fbo-CTQm-4Bw.js";import"./preload-helper-C1FmrZbK.js";const Y=e=>typeof e=="function",J=n.forwardRef(({envMap:e,resolution:t=256,frames:a=1/0,makeDefault:r,children:o,...i},m)=>{const f=h(({set:c})=>c),s=h(({camera:c})=>c),g=h(({size:c})=>c),u=n.useRef(null);n.useImperativeHandle(m,()=>u.current,[]);const d=n.useRef(null),y=G(t);n.useLayoutEffect(()=>{i.manual||(u.current.aspect=g.width/g.height)},[g,i]),n.useLayoutEffect(()=>{u.current.updateProjectionMatrix()});let l=0,v=null;const p=Y(o);return O(c=>{p&&(a===1/0||l<a)&&(d.current.visible=!1,c.gl.setRenderTarget(y),v=c.scene.background,e&&(c.scene.background=e),c.gl.render(c.scene,u.current),c.scene.background=v,c.gl.setRenderTarget(null),d.current.visible=!0,l++)}),n.useLayoutEffect(()=>{if(r){const c=s;return f(()=>({camera:u.current})),()=>f(()=>({camera:c}))}},[u,r,f]),n.createElement(n.Fragment,null,n.createElement("perspectiveCamera",Z({ref:u},i),!p&&o),n.createElement("group",{ref:d},p&&o(y.texture)))}),K=Math.PI/180;function Q(e){return e*K}const ee={"beams-container":"_beams-container_wtefy_1"};function te(e,t){var y;const a=D.physical,{vertexShader:r,fragmentShader:o,uniforms:i}=a,m=a.defines??{},f=W.clone(i),s=new e(t.material||{});s.color&&(f.diffuse.value=s.color),"roughness"in s&&(f.roughness.value=s.roughness),"metalness"in s&&(f.metalness.value=s.metalness),"envMap"in s&&(f.envMap.value=s.envMap),"envMapIntensity"in s&&(f.envMapIntensity.value=s.envMapIntensity),Object.entries(t.uniforms??{}).forEach(([l,v])=>{f[l]=v!==null&&typeof v=="object"&&"value"in v?v:{value:v}});let g=`${t.header}
+import{r as n,j as x}from"./iframe-Cw8dCV4Z.js";import{n as A,x as L,y as D,j as W,i as T,h as U,t as b}from"./three.module--_vTUKhS.js";import{u as h,a as O,C as X}from"./react-three-fiber.esm-BnMrba87.js";import{u as G,_ as Z}from"./Fbo-Clk04E0N.js";import"./preload-helper-C1FmrZbK.js";const Y=e=>typeof e=="function",J=n.forwardRef(({envMap:e,resolution:t=256,frames:a=1/0,makeDefault:r,children:o,...i},g)=>{const f=h(({set:c})=>c),s=h(({camera:c})=>c),m=h(({size:c})=>c),u=n.useRef(null);n.useImperativeHandle(g,()=>u.current,[]);const d=n.useRef(null),y=G(t);n.useLayoutEffect(()=>{i.manual||(u.current.aspect=m.width/m.height)},[m,i]),n.useLayoutEffect(()=>{u.current.updateProjectionMatrix()});let l=0,v=null;const p=Y(o);return O(c=>{p&&(a===1/0||l<a)&&(d.current.visible=!1,c.gl.setRenderTarget(y),v=c.scene.background,e&&(c.scene.background=e),c.gl.render(c.scene,u.current),c.scene.background=v,c.gl.setRenderTarget(null),d.current.visible=!0,l++)}),n.useLayoutEffect(()=>{if(r){const c=s;return f(()=>({camera:u.current})),()=>f(()=>({camera:c}))}},[u,r,f]),n.createElement(n.Fragment,null,n.createElement("perspectiveCamera",Z({ref:u},i),!p&&o),n.createElement("group",{ref:d},p&&o(y.texture)))}),K=Math.PI/180;function Q(e){return e*K}const ee={"beams-container":"_beams-container_wtefy_1"};function te(e,t){var y;const a=D.physical,{vertexShader:r,fragmentShader:o,uniforms:i}=a,g=a.defines??{},f=W.clone(i),s=new e(t.material||{});s.color&&(f.diffuse.value=s.color),"roughness"in s&&(f.roughness.value=s.roughness),"metalness"in s&&(f.metalness.value=s.metalness),"envMap"in s&&(f.envMap.value=s.envMap),"envMapIntensity"in s&&(f.envMapIntensity.value=s.envMapIntensity),Object.entries(t.uniforms??{}).forEach(([l,v])=>{f[l]=v!==null&&typeof v=="object"&&"value"in v?v:{value:v}});let m=`${t.header}
 ${t.vertexHeader??""}
 ${r}`,u=`${t.header}
 ${t.fragmentHeader??""}
-${o}`;for(const[l,v]of Object.entries(t.vertex??{}))g=g.replace(l,`${l}
+${o}`;for(const[l,v]of Object.entries(t.vertex??{}))m=m.replace(l,`${l}
 ${v}`);for(const[l,v]of Object.entries(t.fragment??{}))u=u.replace(l,`${l}
-${v}`);return new T({defines:{...m},uniforms:f,vertexShader:g,fragmentShader:u,lights:!0,fog:!!((y=t.material)!=null&&y.fog)})}const re=({children:e})=>x.jsx(X,{dpr:[1,2],frameloop:"always",className:`${ee["beams-container"]}`,children:e}),ne=e=>{const t=e.replace("#",""),a=parseInt(t.substring(0,2),16),r=parseInt(t.substring(2,4),16),o=parseInt(t.substring(4,6),16);return[a/255,r/255,o/255]},ae=`
+${v}`);return new T({defines:{...g},uniforms:f,vertexShader:m,fragmentShader:u,lights:!0,fog:!!((y=t.material)!=null&&y.fog)})}const re=({children:e})=>x.jsx(X,{dpr:[1,2],frameloop:"always",className:`${ee["beams-container"]}`,children:e}),ne=e=>{const t=e.replace("#",""),a=parseInt(t.substring(0,2),16),r=parseInt(t.substring(2,4),16),o=parseInt(t.substring(4,6),16);return[a/255,r/255,o/255]},ae=`
 float random (in vec2 st) {
     return fract(sin(dot(st.xy,
                          vec2(12.9898,78.233)))*
@@ -79,7 +79,7 @@ float cnoise(vec3 P){
   float n_xyz = mix(n_yz.x,n_yz.y,fade_xyz.x);
   return 2.2 * n_xyz;
 }
-`,$=({beamWidth:e=2,beamHeight:t=15,beamNumber:a=12,lightColor:r="#ffffff",speed:o=2,noiseIntensity:i=1.75,scale:m=.2,rotation:f=0})=>{const s=n.useRef(null),g=n.useMemo(()=>te(L,{header:`
+`,$=({beamWidth:e=2,beamHeight:t=15,beamNumber:a=12,lightColor:r="#ffffff",speed:o=2,noiseIntensity:i=1.75,scale:g=.2,rotation:f=0})=>{const s=n.useRef(null),m=n.useMemo(()=>te(L,{header:`
   varying vec3 vEye;
   varying float vNoise;
   varying vec2 vUv;
@@ -108,7 +108,7 @@ float cnoise(vec3 P){
     return normalize(cross(tangentZ, tangentX));
   }`,fragmentHeader:"",vertex:{"#include <begin_vertex>":"transformed.z += getPos(transformed.xyz);","#include <beginnormal_vertex>":"objectNormal = getNormal(position.xyz);"},fragment:{"#include <dithering_fragment>":`
     float randomNoise = noise(gl_FragCoord.xy);
-    gl_FragColor.rgb -= randomNoise / 15. * uNoiseIntensity;`},material:{fog:!0},uniforms:{diffuse:new A(...ne("#000000")),time:{shared:!0,mixed:!0,linked:!0,value:0},roughness:.3,metalness:.3,uSpeed:{shared:!0,mixed:!0,linked:!0,value:o},envMapIntensity:10,uNoiseIntensity:i,uScale:m}}),[o,i,m]);return x.jsxs(re,{children:[x.jsxs("group",{rotation:[0,0,Q(f)],children:[x.jsx(B,{ref:s,material:g,count:a,width:e,height:t}),x.jsx(se,{color:r,position:[0,3,10]})]}),x.jsx("ambientLight",{intensity:1}),x.jsx("color",{attach:"background",args:["#000000"]}),x.jsx(J,{makeDefault:!0,position:[0,0,20],fov:30})]})};function oe(e,t,a,r,o){const i=new U,m=e*(o+1)*2,f=e*o*2,s=new Float32Array(m*3),g=new Uint32Array(f*3),u=new Float32Array(m*2);let d=0,y=0,l=0;const p=-(e*t+(e-1)*r)/2;for(let c=0;c<e;c++){const w=p+c*(t+r),_=Math.random()*300,I=Math.random()*300;for(let z=0;z<=o;z++){const j=a*(z/o-.5),V=[w,j,0],F=[w+t,j,0];s.set([...V,...F],d*3);const M=z/o;if(u.set([_,M+I,_+1,M+I],l),z<o){const H=d,N=d+1,R=d+2,k=d+3;g.set([H,N,R,R,N,k],y),y+=6}d+=2,l+=4}}return i.setAttribute("position",new b(s,3)),i.setAttribute("uv",new b(u,2)),i.setIndex(new b(g,1)),i.computeVertexNormals(),i}const q=n.forwardRef(({material:e,width:t,count:a,height:r},o)=>{const i=n.useRef(null);n.useImperativeHandle(o,()=>i.current);const m=n.useMemo(()=>oe(a,t,r,0,100),[a,t,r]);return O((f,s)=>{i.current.material.uniforms.time.value+=.1*s}),x.jsx("mesh",{ref:i,geometry:m,material:e})});q.displayName="MergedPlanes";const B=n.forwardRef((e,t)=>x.jsx(q,{ref:t,material:e.material,width:e.width,count:e.count,height:e.height}));B.displayName="PlaneNoise";const se=({position:e,color:t})=>{const a=n.useRef(null);return n.useEffect(()=>{if(!a.current)return;const r=a.current.shadow.camera;r&&(r.top=24,r.bottom=-24,r.left=-24,r.right=24,r.far=64,a.current.shadow.bias=-.004)},[]),x.jsx("directionalLight",{ref:a,color:t,intensity:1,position:e})};$.__docgenInfo={description:"",methods:[],displayName:"Beams",props:{beamWidth:{defaultValue:{value:"2",computed:!1},required:!1},beamHeight:{defaultValue:{value:"15",computed:!1},required:!1},beamNumber:{defaultValue:{value:"12",computed:!1},required:!1},lightColor:{defaultValue:{value:"'#ffffff'",computed:!1},required:!1},speed:{defaultValue:{value:"2",computed:!1},required:!1},noiseIntensity:{defaultValue:{value:"1.75",computed:!1},required:!1},scale:{defaultValue:{value:"0.2",computed:!1},required:!1},rotation:{defaultValue:{value:"0",computed:!1},required:!1}}};const ve={title:"ReactBits/Backgrounds/Beams",component:$,parameters:{layout:"fullscreen"},tags:["autodocs"]},P={args:{beamWidth:2,beamHeight:15,beamNumber:12,lightColor:"#ffffff",speed:2,noiseIntensity:1.75,scale:.2,rotation:0}};var C,E,S;P.parameters={...P.parameters,docs:{...(C=P.parameters)==null?void 0:C.docs,source:{originalSource:`{
+    gl_FragColor.rgb -= randomNoise / 15. * uNoiseIntensity;`},material:{fog:!0},uniforms:{diffuse:new A(...ne("#000000")),time:{shared:!0,mixed:!0,linked:!0,value:0},roughness:.3,metalness:.3,uSpeed:{shared:!0,mixed:!0,linked:!0,value:o},envMapIntensity:10,uNoiseIntensity:i,uScale:g}}),[o,i,g]);return x.jsxs(re,{children:[x.jsxs("group",{rotation:[0,0,Q(f)],children:[x.jsx(B,{ref:s,material:m,count:a,width:e,height:t}),x.jsx(se,{color:r,position:[0,3,10]})]}),x.jsx("ambientLight",{intensity:1}),x.jsx("color",{attach:"background",args:["#000000"]}),x.jsx(J,{makeDefault:!0,position:[0,0,20],fov:30})]})};function oe(e,t,a,r,o){const i=new U,g=e*(o+1)*2,f=e*o*2,s=new Float32Array(g*3),m=new Uint32Array(f*3),u=new Float32Array(g*2);let d=0,y=0,l=0;const p=-(e*t+(e-1)*r)/2;for(let c=0;c<e;c++){const w=p+c*(t+r),_=Math.random()*300,I=Math.random()*300;for(let z=0;z<=o;z++){const j=a*(z/o-.5),V=[w,j,0],F=[w+t,j,0];s.set([...V,...F],d*3);const M=z/o;if(u.set([_,M+I,_+1,M+I],l),z<o){const H=d,N=d+1,R=d+2,k=d+3;m.set([H,N,R,R,N,k],y),y+=6}d+=2,l+=4}}return i.setAttribute("position",new b(s,3)),i.setAttribute("uv",new b(u,2)),i.setIndex(new b(m,1)),i.computeVertexNormals(),i}const q=n.forwardRef(({material:e,width:t,count:a,height:r},o)=>{const i=n.useRef(null);n.useImperativeHandle(o,()=>i.current);const g=n.useMemo(()=>oe(a,t,r,0,100),[a,t,r]);return O((f,s)=>{i.current.material.uniforms.time.value+=.1*s}),x.jsx("mesh",{ref:i,geometry:g,material:e})});q.displayName="MergedPlanes";const B=n.forwardRef((e,t)=>x.jsx(q,{ref:t,material:e.material,width:e.width,count:e.count,height:e.height}));B.displayName="PlaneNoise";const se=({position:e,color:t})=>{const a=n.useRef(null);return n.useEffect(()=>{if(!a.current)return;const r=a.current.shadow.camera;r&&(r.top=24,r.bottom=-24,r.left=-24,r.right=24,r.far=64,a.current.shadow.bias=-.004)},[]),x.jsx("directionalLight",{ref:a,color:t,intensity:1,position:e})};$.__docgenInfo={description:"",methods:[],displayName:"Beams",props:{beamWidth:{defaultValue:{value:"2",computed:!1},required:!1},beamHeight:{defaultValue:{value:"15",computed:!1},required:!1},beamNumber:{defaultValue:{value:"12",computed:!1},required:!1},lightColor:{defaultValue:{value:"'#ffffff'",computed:!1},required:!1},speed:{defaultValue:{value:"2",computed:!1},required:!1},noiseIntensity:{defaultValue:{value:"1.75",computed:!1},required:!1},scale:{defaultValue:{value:"0.2",computed:!1},required:!1},rotation:{defaultValue:{value:"0",computed:!1},required:!1}}};const ve={title:"ReactBits/Backgrounds/Beams",component:$,parameters:{layout:"fullscreen"}},P={args:{beamWidth:2,beamHeight:15,beamNumber:12,lightColor:"#ffffff",speed:2,noiseIntensity:1.75,scale:.2,rotation:0}};var C,E,S;P.parameters={...P.parameters,docs:{...(C=P.parameters)==null?void 0:C.docs,source:{originalSource:`{
   args: {
     beamWidth: 2,
     beamHeight: 15,
@@ -119,4 +119,4 @@ float cnoise(vec3 P){
     scale: 0.2,
     rotation: 0
   }
-}`,...(S=(E=P.parameters)==null?void 0:E.docs)==null?void 0:S.source}}};const ge=["Default"];export{P as Default,ge as __namedExportsOrder,ve as default};
+}`,...(S=(E=P.parameters)==null?void 0:E.docs)==null?void 0:S.source}}};const me=["Default"];export{P as Default,me as __namedExportsOrder,ve as default};

package/storybook-static/assets/{BlobCursor.stories-CdB55R5G.js → BlobCursor.stories-BQJgTsuD.js}

@@ -1,4 +1,4 @@
-import{r as t,j as a}from"./iframe-B8pH-Lvr.js";import{g as Y}from"./index-C8pce-KX.js";import"./preload-helper-C1FmrZbK.js";const N="_blob_xnpks_1",u={"blob-container":"_blob-container_xnpks_1","blob-main":"_blob-main_xnpks_9",blob:N,"inner-dot":"_inner-dot_xnpks_26"};function y({blobType:f="circle",fillColor:E="#5227FF",trailCount:j=3,sizes:r=[60,125,75],innerSizes:o=[20,35,25],innerColor:D="rgba(255,255,255,0.8)",opacities:F=[.6,.6,.6],shadowColor:R="rgba(0,0,0,0.75)",shadowBlur:B=5,shadowOffsetX:$=10,shadowOffsetY:k=10,filterId:c="blob-filter",filterStdDeviation:M=30,filterColorMatrixValues:O="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 35 -10",useFilter:p=!0,fastDuration:b=.1,slowDuration:m=.5,fastEase:v="power3.out",slowEase:h="power1.out",zIndex:S=100}){const i=t.useRef(null),w=t.useRef([]),s=t.useCallback(()=>{if(!i.current)return{left:0,top:0};const e=i.current.getBoundingClientRect();return{left:e.left,top:e.top}},[]),x=t.useCallback(e=>{const{left:l,top:d}=s(),z="clientX"in e?e.clientX:e.touches[0].clientX,I="clientY"in e?e.clientY:e.touches[0].clientY;w.current.forEach((C,X)=>{if(!C)return;const g=X===0;Y.to(C,{x:z-l,y:I-d,duration:g?b:m,ease:g?v:h})})},[s,b,m,v,h]);return t.useEffect(()=>{const e=()=>s();return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[s]),a.jsxs("div",{ref:i,className:`${u["blob-container"]}`,style:{zIndex:S},onMouseMove:x,onTouchMove:x,children:[p&&a.jsx("svg",{style:{position:"absolute",width:0,height:0},children:a.jsxs("filter",{id:c,children:[a.jsx("feGaussianBlur",{in:"SourceGraphic",result:"blur",stdDeviation:M}),a.jsx("feColorMatrix",{in:"blur",values:O})]})}),a.jsx("div",{className:`${u["blob-main"]}`,style:{filter:p?`url(#${c})`:void 0},children:Array.from({length:j}).map((e,l)=>a.jsx("div",{ref:d=>w.current[l]=d,className:`${u.blob}`,style:{width:r[l],height:r[l],borderRadius:f==="circle"?"50%":"0%",backgroundColor:E,opacity:F[l],boxShadow:`${$}px ${k}px ${B}px 0 ${R}`},children:a.jsx("div",{className:`${u["inner-dot"]}`,style:{width:o[l],height:o[l],top:(r[l]-o[l])/2,left:(r[l]-o[l])/2,backgroundColor:D,borderRadius:f==="circle"?"50%":"0%"}})},l))})]})}y.__docgenInfo={description:"",methods:[],displayName:"BlobCursor",props:{blobType:{defaultValue:{value:"'circle'",computed:!1},required:!1},fillColor:{defaultValue:{value:"'#5227FF'",computed:!1},required:!1},trailCount:{defaultValue:{value:"3",computed:!1},required:!1},sizes:{defaultValue:{value:"[60, 125, 75]",computed:!1},required:!1},innerSizes:{defaultValue:{value:"[20, 35, 25]",computed:!1},required:!1},innerColor:{defaultValue:{value:"'rgba(255,255,255,0.8)'",computed:!1},required:!1},opacities:{defaultValue:{value:"[0.6, 0.6, 0.6]",computed:!1},required:!1},shadowColor:{defaultValue:{value:"'rgba(0,0,0,0.75)'",computed:!1},required:!1},shadowBlur:{defaultValue:{value:"5",computed:!1},required:!1},shadowOffsetX:{defaultValue:{value:"10",computed:!1},required:!1},shadowOffsetY:{defaultValue:{value:"10",computed:!1},required:!1},filterId:{defaultValue:{value:"'blob-filter'",computed:!1},required:!1},filterStdDeviation:{defaultValue:{value:"30",computed:!1},required:!1},filterColorMatrixValues:{defaultValue:{value:"'1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 35 -10'",computed:!1},required:!1},useFilter:{defaultValue:{value:"true",computed:!1},required:!1},fastDuration:{defaultValue:{value:"0.1",computed:!1},required:!1},slowDuration:{defaultValue:{value:"0.5",computed:!1},required:!1},fastEase:{defaultValue:{value:"'power3.out'",computed:!1},required:!1},slowEase:{defaultValue:{value:"'power1.out'",computed:!1},required:!1},zIndex:{defaultValue:{value:"100",computed:!1},required:!1}}};const G={title:"ReactBits/Animations/BlobCursor",component:y,parameters:{layout:"fullscreen"},tags:["autodocs"]},n={args:{blobType:"circle",fillColor:"#5227FF",trailCount:3,sizes:[60,125,75],innerSizes:[20,35,25],innerColor:"rgba(255,255,255,0.8)",opacities:[.6,.6,.6],shadowColor:"rgba(0,0,0,0.75)",shadowBlur:5,shadowOffsetX:10,shadowOffsetY:10,filterId:"blob",filterStdDeviation:30,filterColorMatrixValues:"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 35 -10",useFilter:!0,fastDuration:.1,slowDuration:.5,fastEase:"power3.out",slowEase:"power1.out",zIndex:100}};var V,q,_;n.parameters={...n.parameters,docs:{...(V=n.parameters)==null?void 0:V.docs,source:{originalSource:`{
+import{r as t,j as a}from"./iframe-Cw8dCV4Z.js";import{g as Y}from"./index-C8pce-KX.js";import"./preload-helper-C1FmrZbK.js";const N="_blob_xnpks_1",u={"blob-container":"_blob-container_xnpks_1","blob-main":"_blob-main_xnpks_9",blob:N,"inner-dot":"_inner-dot_xnpks_26"};function y({blobType:f="circle",fillColor:E="#5227FF",trailCount:j=3,sizes:r=[60,125,75],innerSizes:o=[20,35,25],innerColor:D="rgba(255,255,255,0.8)",opacities:F=[.6,.6,.6],shadowColor:R="rgba(0,0,0,0.75)",shadowBlur:B=5,shadowOffsetX:$=10,shadowOffsetY:k=10,filterId:c="blob-filter",filterStdDeviation:M=30,filterColorMatrixValues:O="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 35 -10",useFilter:p=!0,fastDuration:b=.1,slowDuration:m=.5,fastEase:v="power3.out",slowEase:h="power1.out",zIndex:S=100}){const i=t.useRef(null),w=t.useRef([]),s=t.useCallback(()=>{if(!i.current)return{left:0,top:0};const e=i.current.getBoundingClientRect();return{left:e.left,top:e.top}},[]),x=t.useCallback(e=>{const{left:l,top:d}=s(),z="clientX"in e?e.clientX:e.touches[0].clientX,I="clientY"in e?e.clientY:e.touches[0].clientY;w.current.forEach((C,X)=>{if(!C)return;const g=X===0;Y.to(C,{x:z-l,y:I-d,duration:g?b:m,ease:g?v:h})})},[s,b,m,v,h]);return t.useEffect(()=>{const e=()=>s();return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[s]),a.jsxs("div",{ref:i,className:`${u["blob-container"]}`,style:{zIndex:S},onMouseMove:x,onTouchMove:x,children:[p&&a.jsx("svg",{style:{position:"absolute",width:0,height:0},children:a.jsxs("filter",{id:c,children:[a.jsx("feGaussianBlur",{in:"SourceGraphic",result:"blur",stdDeviation:M}),a.jsx("feColorMatrix",{in:"blur",values:O})]})}),a.jsx("div",{className:`${u["blob-main"]}`,style:{filter:p?`url(#${c})`:void 0},children:Array.from({length:j}).map((e,l)=>a.jsx("div",{ref:d=>w.current[l]=d,className:`${u.blob}`,style:{width:r[l],height:r[l],borderRadius:f==="circle"?"50%":"0%",backgroundColor:E,opacity:F[l],boxShadow:`${$}px ${k}px ${B}px 0 ${R}`},children:a.jsx("div",{className:`${u["inner-dot"]}`,style:{width:o[l],height:o[l],top:(r[l]-o[l])/2,left:(r[l]-o[l])/2,backgroundColor:D,borderRadius:f==="circle"?"50%":"0%"}})},l))})]})}y.__docgenInfo={description:"",methods:[],displayName:"BlobCursor",props:{blobType:{defaultValue:{value:"'circle'",computed:!1},required:!1},fillColor:{defaultValue:{value:"'#5227FF'",computed:!1},required:!1},trailCount:{defaultValue:{value:"3",computed:!1},required:!1},sizes:{defaultValue:{value:"[60, 125, 75]",computed:!1},required:!1},innerSizes:{defaultValue:{value:"[20, 35, 25]",computed:!1},required:!1},innerColor:{defaultValue:{value:"'rgba(255,255,255,0.8)'",computed:!1},required:!1},opacities:{defaultValue:{value:"[0.6, 0.6, 0.6]",computed:!1},required:!1},shadowColor:{defaultValue:{value:"'rgba(0,0,0,0.75)'",computed:!1},required:!1},shadowBlur:{defaultValue:{value:"5",computed:!1},required:!1},shadowOffsetX:{defaultValue:{value:"10",computed:!1},required:!1},shadowOffsetY:{defaultValue:{value:"10",computed:!1},required:!1},filterId:{defaultValue:{value:"'blob-filter'",computed:!1},required:!1},filterStdDeviation:{defaultValue:{value:"30",computed:!1},required:!1},filterColorMatrixValues:{defaultValue:{value:"'1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 35 -10'",computed:!1},required:!1},useFilter:{defaultValue:{value:"true",computed:!1},required:!1},fastDuration:{defaultValue:{value:"0.1",computed:!1},required:!1},slowDuration:{defaultValue:{value:"0.5",computed:!1},required:!1},fastEase:{defaultValue:{value:"'power3.out'",computed:!1},required:!1},slowEase:{defaultValue:{value:"'power1.out'",computed:!1},required:!1},zIndex:{defaultValue:{value:"100",computed:!1},required:!1}}};const G={title:"ReactBits/Animations/BlobCursor",component:y,parameters:{layout:"fullscreen"}},n={args:{blobType:"circle",fillColor:"#5227FF",trailCount:3,sizes:[60,125,75],innerSizes:[20,35,25],innerColor:"rgba(255,255,255,0.8)",opacities:[.6,.6,.6],shadowColor:"rgba(0,0,0,0.75)",shadowBlur:5,shadowOffsetX:10,shadowOffsetY:10,filterId:"blob",filterStdDeviation:30,filterColorMatrixValues:"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 35 -10",useFilter:!0,fastDuration:.1,slowDuration:.5,fastEase:"power3.out",slowEase:"power1.out",zIndex:100}};var V,q,_;n.parameters={...n.parameters,docs:{...(V=n.parameters)==null?void 0:V.docs,source:{originalSource:`{
   args: {
     blobType: 'circle',
     fillColor: '#5227FF',