@stfrigerio/sito-template 0.1.37 → 0.1.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stfrigerio/sito-template",
-  "version": "0.1.37",
+  "version": "0.1.44",
   "description": "A library of React components with animations for quick website development",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -46,7 +46,7 @@
     "test:watch": "vitest",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "release": "bash -c 'set -a && source .env && set +a && source ~/.bash_functions && pushino \"releasing new stuff\" && npm version patch && npm run build && npm publish && git push'"
+    "release": "bash -c 'set -a && source .env && set +a && source ~/.bash_functions && pushino \"releasing new stuff\" && npm version patch && npm run build && npm run build-storybook && npm publish && git push'"
   },
   "peerDependencies": {
     "react": "^18.0.0",
@@ -118,5 +118,8 @@
     "typescript"
   ],
   "author": "Stefano",
-  "license": "MIT"
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/storybook-static/assets/ASCIIText.stories-BSKNvcoU.js

@@ -0,0 +1,82 @@
+import{r as v,j as w}from"./iframe-2N7rjfXm.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;
+uniform float uEnableWaves;
+
+void main() {
+    vUv = uv;
+    float time = uTime * 5.;
+
+    float waveFactor = uEnableWaves;
+
+    vec3 transformed = position;
+
+    transformed.x += sin(time + position.y) * 0.5 * waveFactor;
+    transformed.y += cos(time + position.z) * 0.15 * waveFactor;
+    transformed.z += sin(time + position.x) * waveFactor;
+
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(transformed, 1.0);
+}
+`,W=`
+varying vec2 vUv;
+uniform float mouse;
+uniform float uTime;
+uniform sampler2D uTexture;
+
+void main() {
+    float time = uTime;
+    vec2 pos = vUv;
+    
+    float move = sin(time + mouse) * 0.01;
+    float r = texture2D(uTexture, pos + cos(time * 2. - time + pos.x) * .01).r;
+    float g = texture2D(uTexture, pos + tan(time * .5 + pos.x - time) * .01).g;
+    float b = texture2D(uTexture, pos - cos(time * 2. + time + pos.y) * .01).b;
+    float a = texture2D(uTexture, pos).a;
+    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:`
+        @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&display=swap');
+
+        .ascii-text-container canvas {
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+          image-rendering: optimizeSpeed;
+          image-rendering: -moz-crisp-edges;
+          image-rendering: -o-crisp-edges;
+          image-rendering: -webkit-optimize-contrast;
+          image-rendering: optimize-contrast;
+          image-rendering: crisp-edges;
+          image-rendering: pixelated;
+        }
+
+        .ascii-text-container pre {
+          margin: 0;
+          user-select: none;
+          padding: 0;
+          line-height: 1em;
+          text-align: left;
+          position: absolute;
+          left: 0;
+          top: 0;
+          background-image: radial-gradient(circle, #ff6188 0%, #fc9867 50%, #ffd866 100%);
+          background-attachment: fixed;
+          -webkit-text-fill-color: transparent;
+          -webkit-background-clip: text;
+          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:`{
+  args: {
+    text: 'David!',
+    asciiFontSize: 8,
+    textFontSize: 200,
+    textColor: '#fdf9f3',
+    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};

package/storybook-static/assets/AllAtoms.stories-BheGtT2x.js

@@ -0,0 +1,109 @@
+import{j as e,r as a}from"./iframe-2N7rjfXm.js";import{B as s}from"./Button-C_YZ5gR4.js";import{C as t}from"./Card-C1evZ1rT.js";import"./index-DaJY9FlE.js";import{C as v}from"./Checkbox-tM16vTif.js";import{D as R}from"./DateInput-bEXupMbC.js";import{S as Se}from"./SearchableDropdown-C_6nW_fM.js";import{S as $}from"./SelectInput-Cq1kd98Q.js";import{T as G}from"./TextArea-DHBnvidn.js";import{T as d}from"./TextInput-BRLXZRi0.js";import{T as h}from"./Toggle-C26yCxt_.js";import{N as V}from"./NumberStepper-0N2zZmLM.js";import{T as g}from"./ToggleButton-DKVqKQxZ.js";import"./Slider-CjC8kTvA.js";import"./LoadingSpinner-T2OjcR-z.js";import"./preload-helper-C1FmrZbK.js";import"./useSound-BBLJ5Rjg.js";import"./proxy-qiKixXs8.js";import"./MotionConfigContext-4uS6JRtS.js";import"./index-IKMS7NhW.js";import"./createLucideIcon-wa-8tr0c.js";import"./chevron-down-B26xHSrx.js";import"./search-DBjUUDRM.js";import"./check-Bh0K2zJt.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: () => {
+    // State for controlled components
+    const [textValue, setTextValue] = useState('');
+    const [dateValue, setDateValue] = useState('2024-01-01');
+    const [selectValue, setSelectValue] = useState('');
+    const [checkboxValue, setCheckboxValue] = useState(false);
+    const [toggleValue, setToggleValue] = useState(false);
+    const [numberValue, setNumberValue] = useState(0);
+    const [toggleBtnValue, setToggleBtnValue] = useState(false);
+    const [textAreaValue, setTextAreaValue] = useState('');
+    const [clickCount, setClickCount] = useState(0);
+    return <div style={{
+      display: 'grid',
+      gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
+      gap: 'var(--spacing-xl)',
+      padding: 'var(--spacing-xl)'
+    }}>
+                <Card>
+                    <h3>Interactive Buttons</h3>
+                    <p style={{
+          fontSize: 'var(--font-size-sm)',
+          color: 'var(--color-text-secondary)',
+          marginBottom: '12px'
+        }}>
+                        Clicks: {clickCount}
+                    </p>
+                    <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '8px',
+          marginTop: '12px'
+        }}>
+                        <Button variant="primary" size="small" onClick={() => setClickCount(c => c + 1)}>Primary</Button>
+                        <Button variant="secondary" size="small" onClick={() => setClickCount(c => c + 1)}>Secondary</Button>
+                        <Button variant="outline" size="small" onClick={() => setClickCount(c => c + 1)}>Outline</Button>
+                    </div>
+                </Card>
+
+                <Card>
+                    <h3>Form Inputs</h3>
+                    <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '8px',
+          marginTop: '12px'
+        }}>
+                        <TextInput label="Compact Text" value={textValue} onChange={setTextValue} placeholder="Type something..." />
+                        <DateInput label="Compact Date" value={dateValue} onChange={setDateValue} />
+                        <SelectInput label="Compact Select" value={selectValue} onChange={setSelectValue} options={[{
+            value: '1',
+            label: 'Option 1'
+          }, {
+            value: '2',
+            label: 'Option 2'
+          }, {
+            value: '3',
+            label: 'Option 3'
+          }]} placeholder="Select an option" />
+                    </div>
+                </Card>
+
+                <Card>
+                    <h3>Toggle Controls</h3>
+                    <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '12px',
+          marginTop: '12px'
+        }}>
+                        <Checkbox checked={checkboxValue} onChange={setCheckboxValue} label={\`Checkbox (\${checkboxValue ? 'ON' : 'OFF'})\`} />
+                        <Toggle isOn={toggleValue} onToggle={setToggleValue} leftLabel="Off" rightLabel="On" />
+                        <NumberStepper value={numberValue} onChange={setNumberValue} min={0} max={10} step={1} label="Count" icon="🔢" size="small" />
+                        <ToggleButton active={toggleBtnValue} onClick={() => setToggleBtnValue(!toggleBtnValue)} icon="⭐" label="Favorite" size="small" showCheckmark />
+                    </div>
+                    <div style={{
+          marginTop: '12px',
+          padding: '8px',
+          background: toggleValue ? 'var(--color-primary)' : 'var(--color-background-secondary)',
+          color: toggleValue ? 'var(--color-text-inverse)' : 'var(--color-text)',
+          borderRadius: 'var(--radius-sm)',
+          fontSize: 'var(--font-size-xs)',
+          textAlign: 'center',
+          transition: 'all 0.3s ease'
+        }}>
+                        Toggle: {toggleValue ? 'ON' : 'OFF'} | Number: {numberValue} | Button: {toggleBtnValue ? 'Active' : 'Inactive'}
+                    </div>
+                </Card>
+
+                <Card>
+                    <h3>Text Area</h3>
+                    <div style={{
+          marginTop: '12px'
+        }}>
+                        <TextArea label="Compact Text Area" value={textAreaValue} onChange={setTextAreaValue} placeholder="Write something..." rows={3} />
+                        <p style={{
+            marginTop: '8px',
+            fontSize: 'var(--font-size-xs)',
+            color: 'var(--color-text-secondary)'
+          }}>
+                            {textAreaValue.length} characters
+                        </p>
+                    </div>
+                </Card>
+            </div>;
+  }
+}`,...(ae=(ee=T.parameters)==null?void 0:ee.docs)==null?void 0:ae.source}}};const Ke=["AllAtomsShowcase","CompactView"];export{k as AllAtomsShowcase,T as CompactView,Ke as __namedExportsOrder,Je as default};

package/storybook-static/assets/AnimatedContent.stories-DHs1c0dV.js

@@ -0,0 +1,18 @@
+import{r as E,j as I}from"./iframe-2N7rjfXm.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:`{
+  args: {
+    children: 'Hello World',
+    distance: 100,
+    direction: 'vertical',
+    reverse: false,
+    duration: 0.8,
+    ease: 'power3.out',
+    initialOpacity: 0,
+    animateOpacity: true,
+    scale: 1,
+    threshold: 0.1,
+    delay: 0,
+    disappearAfter: 0,
+    disappearDuration: 0.5,
+    disappearEase: 'power3.in'
+  }
+}`,...(_=(A=r.parameters)==null?void 0:A.docs)==null?void 0:_.source}}};const F=["Default"];export{r as Default,F as __namedExportsOrder,$ as default};

package/storybook-static/assets/AnimatedList-B3_lNwJZ.css

@@ -0,0 +1 @@
+._scroll-list-container_1to6w_1{position:relative;width:500px}._scroll-list_1to6w_1{max-height:400px;overflow-y:auto;padding:16px}._scroll-list_1to6w_1::-webkit-scrollbar{width:8px}._scroll-list_1to6w_1::-webkit-scrollbar-track{background:#060010}._scroll-list_1to6w_1::-webkit-scrollbar-thumb{background:#271e37;border-radius:4px}._no-scrollbar_1to6w_25::-webkit-scrollbar{display:none}._no-scrollbar_1to6w_25{-ms-overflow-style:none;scrollbar-width:none}._item_1to6w_34{padding:16px;background-color:#170d27;border-radius:8px;margin-bottom:1rem}._item_1to6w_34._selected_1to6w_41{background-color:#271e37}._item-text_1to6w_45{color:#fff;margin:0}._top-gradient_1to6w_50{position:absolute;top:0;left:0;right:0;height:50px;background:linear-gradient(to bottom,#060010,transparent);pointer-events:none;transition:opacity .3s ease}._bottom-gradient_1to6w_61{position:absolute;bottom:0;left:0;right:0;height:100px;background:linear-gradient(to top,#060010,transparent);pointer-events:none;transition:opacity .3s ease}

package/storybook-static/assets/AnimatedList.stories-DIfbjb22.js

@@ -0,0 +1,26 @@
+import{r as a,j as s}from"./iframe-2N7rjfXm.js";import{u as A}from"./use-in-view-Dn2glBsV.js";import{m as D}from"./proxy-qiKixXs8.js";import"./preload-helper-C1FmrZbK.js";import"./MotionConfigContext-4uS6JRtS.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:`[
+  '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'
+]`,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:`{
+  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,
+    enableArrowNavigation: true,
+    itemClassName: '',
+    displayScrollbar: true,
+    initialSelectedIndex: -1
+  }
+}`,...(k=(N=f.parameters)==null?void 0:N.docs)==null?void 0:k.source}}};const z=["Default"];export{f as Default,z as __namedExportsOrder,U as default};

package/storybook-static/assets/Antigravity.stories-BsyCq_d_.js

@@ -0,0 +1,19 @@
+import{j as s,r as m}from"./iframe-2N7rjfXm.js";import{C as mt,u as dt,a as ut}from"./react-three-fiber.esm-pSSy_32K.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:`{
+  args: {
+    count: 300,
+    magnetRadius: 10,
+    ringRadius: 10,
+    waveSpeed: 0.4,
+    waveAmplitude: 1,
+    particleSize: 2,
+    lerpSpeed: 0.1,
+    color: '#FF9FFC',
+    autoAnimate: false,
+    particleVariance: 1,
+    rotationSpeed: 0,
+    depthFactor: 1,
+    pulseSpeed: 3,
+    particleShape: 'capsule',
+    fieldStrength: 10
+  }
+}`,...(N=(V=F.parameters)==null?void 0:V.docs)==null?void 0:N.source}}};const vt=["Default"];export{F as Default,vt as __namedExportsOrder,ft as default};

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

@@ -0,0 +1,232 @@
+import{j as e,r as p}from"./iframe-2N7rjfXm.js";import{B as S}from"./Button-C_YZ5gR4.js";import{T as le}from"./TextInput-BRLXZRi0.js";import{T as re}from"./TextArea-DHBnvidn.js";import{A as se}from"./index-IKMS7NhW.js";import{m as ne}from"./proxy-qiKixXs8.js";import"./preload-helper-C1FmrZbK.js";import"./useSound-BBLJ5Rjg.js";import"./MotionConfigContext-4uS6JRtS.js";const ie="_arrayInput_6qbs9_1",me="_arrayInputLabel_6qbs9_5",ce="_arrayInputItem_6qbs9_14",de="_inputWrapper_6qbs9_38",pe="_input_6qbs9_38",ue="_complexItem_6qbs9_71",he="_fieldsWrapper_6qbs9_77",ge="_removeButton_6qbs9_96",be="_addButton_6qbs9_112",l={arrayInput:ie,arrayInputLabel:me,arrayInputItem:ce,inputWrapper:de,input:pe,complexItem:ue,fieldsWrapper:he,removeButton:ge,addButton:be};function d(t){return t.type==="complex"?e.jsx(ye,{...t}):e.jsx(xe,{...t})}function xe({label:t,values:r,onChange:i,placeholder:c,itemStyle:u,inputStyle:h,multiline:w=!1,rows:A=3,buttonVariant:g="primary"}){const m=p.useRef([]);for(;m.current.length<r.length;)m.current.push(`item-${Date.now()}-${Math.random()}`);m.current.length>r.length&&(m.current=m.current.slice(0,r.length));const b=(s,a)=>{const n=[...r];n[s]=a,i(n)},E=()=>{m.current.push(`item-${Date.now()}-${Math.random()}`),i([...r,""])},o=s=>{const a=r.filter((n,oe)=>oe!==s);m.current.splice(s,1),i(a)};return e.jsxs("div",{className:l.arrayInput,children:[e.jsx("h3",{className:l.arrayInputLabel,children:t}),e.jsx("div",{children:e.jsx(se,{children:r.map((s,a)=>e.jsxs(ne.div,{className:l.arrayInputItem,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.inputWrapper,children:w?e.jsx("div",{style:h,children:e.jsx(re,{label:"",value:s,onChange:n=>b(a,n),placeholder:c,rows:A,compact:!0})}):e.jsx("input",{type:"text",value:s,onChange:n=>b(a,n.target.value),placeholder:c,className:l.input,style:h})}),e.jsx(S,{variant:"ghost",size:"small",onClick:()=>o(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"})})})]},m.current[a]))})}),e.jsx(S,{variant:g,size:"small",onClick:E,className:l.addButton,children:t})]})}function ye({label:t,values:r,onChange:i,fields:c,getKey:u,itemStyle:h,inputStyle:w,buttonVariant:A="primary"}){const g=(o,s,a)=>{const n=[...r];n[o]={...n[o],[s]:a},i(n)},m=()=>{const o=c.reduce((s,a)=>({...s,[a.name]:""}),{});i([...r,o])},b=o=>{const s=r.filter((a,n)=>n!==o);i(s)},E=(o,s)=>u?u(o,s):c.map(a=>o[a.name]||"").join("-")+`-${s}`;return e.jsxs("div",{className:l.arrayInput,children:[e.jsx("h3",{className:l.arrayInputLabel,children:t}),e.jsx("div",{children:e.jsx(se,{children:r.map((o,s)=>e.jsxs(ne.div,{className:`${l.arrayInputItem} ${c.length>1?l.complexItem:""}`,style:h,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(a=>e.jsx("div",{style:w,children:a.multiline?e.jsx(re,{value:o[a.name]||"",onChange:n=>g(s,a.name,n),label:a.label,placeholder:a.placeholder,rows:a.rows,compact:!0}):e.jsx(le,{value:o[a.name]||"",onChange:n=>g(s,a.name,n),label:a.label,type:a.type,placeholder:a.placeholder})},a.name))}),e.jsx(S,{variant:"ghost",size:"small",onClick:()=>b(s),"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"})})})]},E(o,s)))})}),e.jsxs(S,{variant:A,size:"small",onClick:m,className:l.addButton,children:["Add ",t]})]})}d.__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 Ae={title:"Molecules/ArrayInput",component:d,parameters:{layout:"centered",docs:{description:{component:"A dynamic array input component that allows adding and removing multiple text inputs."}}},tags:["autodocs"],argTypes:{label:{control:"text",description:"Label for the array input group"},values:{control:"object",description:"Array of string values"},placeholder:{control:"text",description:"Placeholder text for each input"},onChange:{action:"changed"}}},x={args:{label:"Items",values:[""],placeholder:"Enter item",onChange:()=>{}}},y={args:{label:"Tags",values:["React","TypeScript","Storybook"],placeholder:"Enter tag",onChange:()=>{}}},f={args:{label:"Skills",values:[],placeholder:"Add a skill",onChange:()=>{}}},v={args:{label:"Email Addresses",values:["john@example.com","jane@example.com"],placeholder:"Enter email",onChange:()=>{}},render:()=>{const[t,r]=p.useState(["john@example.com","jane@example.com"]);return e.jsxs("div",{children:[e.jsx(d,{label:"Email Addresses",values:t,onChange:r,placeholder:"Enter email"}),e.jsxs("div",{style:{marginTop:"1rem",padding:"1rem",background:"#f5f5f5",borderRadius:"4px"},children:[e.jsx("p",{style:{margin:0,fontSize:"0.875rem"},children:e.jsxs("strong",{children:["Emails (",t.length,"):"]})}),e.jsx("ul",{style:{margin:"0.5rem 0 0",paddingLeft:"1.5rem"},children:t.map((i,c)=>e.jsx("li",{style:{fontSize:"0.875rem"},children:i||"(empty)"},c))})]})]})}},j={args:{label:"Tasks",values:["Buy groceries","Walk the dog",""],placeholder:"Enter a task",onChange:()=>{}},render:()=>{const[t,r]=p.useState(["Buy groceries","Walk the dog",""]);return e.jsxs("div",{style:{maxWidth:"400px"},children:[e.jsx("h3",{style:{marginBottom:"1rem"},children:"Todo List"}),e.jsx(d,{label:"Tasks",values:t,onChange:r,placeholder:"Enter a task"})]})},parameters:{controls:{disable:!0}}},I={args:{label:"Team Members",values:["Alice Johnson","Bob Smith",""],placeholder:"Enter member name",onChange:()=>{}},render:()=>{const[t,r]=p.useState(["Alice Johnson","Bob Smith",""]);return e.jsxs("div",{style:{padding:"1.5rem",background:"#fff",border:"1px solid #e0e0e0",borderRadius:"8px",maxWidth:"450px"},children:[e.jsx("h3",{style:{marginTop:0},children:"Project Team"}),e.jsx(d,{label:"Team Members",values:t,onChange:r,placeholder:"Enter member name"}),e.jsxs("p",{style:{marginTop:"1rem",fontSize:"0.875rem",color:"#666"},children:["Total members: ",t.filter(i=>i).length]})]})},parameters:{controls:{disable:!0}}},T={args:{label:"Ingredients",values:["2 cups flour","1 cup sugar","3 eggs","1 tsp vanilla extract",""],placeholder:"Add ingredient",onChange:()=>{}},render:()=>{const[t,r]=p.useState(["2 cups flour","1 cup sugar","3 eggs","1 tsp vanilla extract",""]);return e.jsxs("div",{style:{padding:"1.5rem",background:"#fffef5",border:"2px solid #f0e68c",borderRadius:"8px",maxWidth:"400px"},children:[e.jsx("h3",{style:{marginTop:0,color:"#8b7355"},children:"Recipe Ingredients"}),e.jsx(d,{label:"Ingredients",values:t,onChange:r,placeholder:"Add ingredient"})]})},parameters:{controls:{disable:!0}}},C={args:{label:"Project Notes",values:[""],placeholder:"Enter detailed note...",onChange:()=>{}},render:()=>{const[t,r]=p.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(d,{label:"Project Notes",values:t,onChange:r,placeholder:"Enter detailed note...",multiline:!0,rows:4})})},parameters:{controls:{disable:!0}}},k={args:{label:"Customer Testimonials",values:[],onChange:()=>{}},render:()=>{const[t,r]=p.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(d,{type:"complex",label:"Customer Testimonials",values:t,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 _,N,B;x.parameters={...x.parameters,docs:{...(_=x.parameters)==null?void 0:_.docs,source:{originalSource:`{
+  args: {
+    label: 'Items',
+    values: [''],
+    placeholder: 'Enter item',
+    onChange: () => {}
+  }
+}`,...(B=(N=x.parameters)==null?void 0:N.docs)==null?void 0:B.source}}};var W,M,L;y.parameters={...y.parameters,docs:{...(W=y.parameters)==null?void 0:W.docs,source:{originalSource:`{
+  args: {
+    label: 'Tags',
+    values: ['React', 'TypeScript', 'Storybook'],
+    placeholder: 'Enter tag',
+    onChange: () => {}
+  }
+}`,...(L=(M=y.parameters)==null?void 0:M.docs)==null?void 0:L.source}}};var R,z,J;f.parameters={...f.parameters,docs:{...(R=f.parameters)==null?void 0:R.docs,source:{originalSource:`{
+  args: {
+    label: 'Skills',
+    values: [],
+    placeholder: 'Add a skill',
+    onChange: () => {}
+  }
+}`,...(J=(z=f.parameters)==null?void 0:z.docs)==null?void 0:J.source}}};var P,q,V;v.parameters={...v.parameters,docs:{...(P=v.parameters)==null?void 0:P.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: '#f5f5f5',
+        borderRadius: '4px'
+      }}>
+                    <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>;
+  }
+}`,...(V=(q=v.parameters)==null?void 0:q.docs)==null?void 0:V.source}}};var $,D,O;j.parameters={...j.parameters,docs:{...($=j.parameters)==null?void 0:$.docs,source:{originalSource:`{
+  args: {
+    label: 'Tasks',
+    values: ['Buy groceries', 'Walk the dog', ''],
+    placeholder: 'Enter a task',
+    onChange: () => {}
+  },
+  render: () => {
+    const [todos, setTodos] = useState(['Buy groceries', 'Walk the dog', '']);
+    return <div style={{
+      maxWidth: '400px'
+    }}>
+                <h3 style={{
+        marginBottom: '1rem'
+      }}>Todo List</h3>
+                <ArrayInput label="Tasks" values={todos} onChange={setTodos} placeholder="Enter a task" />
+            </div>;
+  },
+  parameters: {
+    controls: {
+      disable: true
+    }
+  }
+}`,...(O=(D=j.parameters)==null?void 0:D.docs)==null?void 0:O.source}}};var F,U,G;I.parameters={...I.parameters,docs:{...(F=I.parameters)==null?void 0:F.docs,source:{originalSource:`{
+  args: {
+    label: 'Team Members',
+    values: ['Alice Johnson', 'Bob Smith', ''],
+    placeholder: 'Enter member name',
+    onChange: () => {}
+  },
+  render: () => {
+    const [members, setMembers] = useState(['Alice Johnson', 'Bob Smith', '']);
+    return <div style={{
+      padding: '1.5rem',
+      background: '#fff',
+      border: '1px solid #e0e0e0',
+      borderRadius: '8px',
+      maxWidth: '450px'
+    }}>
+                <h3 style={{
+        marginTop: 0
+      }}>Project Team</h3>
+                <ArrayInput label="Team Members" values={members} onChange={setMembers} placeholder="Enter member name" />
+                <p style={{
+        marginTop: '1rem',
+        fontSize: '0.875rem',
+        color: '#666'
+      }}>
+                    Total members: {members.filter(m => m).length}
+                </p>
+            </div>;
+  },
+  parameters: {
+    controls: {
+      disable: true
+    }
+  }
+}`,...(G=(U=I.parameters)==null?void 0:U.docs)==null?void 0:G.source}}};var H,K,Q;T.parameters={...T.parameters,docs:{...(H=T.parameters)==null?void 0:H.docs,source:{originalSource:`{
+  args: {
+    label: 'Ingredients',
+    values: ['2 cups flour', '1 cup sugar', '3 eggs', '1 tsp vanilla extract', ''],
+    placeholder: 'Add ingredient',
+    onChange: () => {}
+  },
+  render: () => {
+    const [ingredients, setIngredients] = useState(['2 cups flour', '1 cup sugar', '3 eggs', '1 tsp vanilla extract', '']);
+    return <div style={{
+      padding: '1.5rem',
+      background: '#fffef5',
+      border: '2px solid #f0e68c',
+      borderRadius: '8px',
+      maxWidth: '400px'
+    }}>
+                <h3 style={{
+        marginTop: 0,
+        color: '#8b7355'
+      }}>Recipe Ingredients</h3>
+                <ArrayInput label="Ingredients" values={ingredients} onChange={setIngredients} placeholder="Add ingredient" />
+            </div>;
+  },
+  parameters: {
+    controls: {
+      disable: true
+    }
+  }
+}`,...(Q=(K=T.parameters)==null?void 0:K.docs)==null?void 0:Q.source}}};var X,Y,Z;C.parameters={...C.parameters,docs:{...(X=C.parameters)==null?void 0:X.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
+    }
+  }
+}`,...(Z=(Y=C.parameters)==null?void 0:Y.docs)==null?void 0:Z.source}}};var ee,ae,te;k.parameters={...k.parameters,docs:{...(ee=k.parameters)==null?void 0:ee.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
+    }
+  }
+}`,...(te=(ae=k.parameters)==null?void 0:ae.docs)==null?void 0:te.source}}};const Ee=["Default","WithInitialValues","EmptyState","Interactive","TodoList","TeamMembers","IngredientsList","MultilineNotes","ComplexMultilineForm"];export{k as ComplexMultilineForm,x as Default,f as EmptyState,T as IngredientsList,v as Interactive,C as MultilineNotes,I as TeamMembers,j as TodoList,y as WithInitialValues,Ee as __namedExportsOrder,Ae as default};