@stfrigerio/sito-template 0.1.36 → 0.1.39

package/storybook-static/assets/SearchableDropdown.stories-E1pMIVn_.js

@@ -0,0 +1,282 @@
+import{j as e,r as C}from"./iframe-Cz1R6gKZ.js";import{S as r}from"./SearchableDropdown-DhEHRY6d.js";import{U as q}from"./users-C7jpE6gP.js";import{S as Q}from"./search-DcwY6Xta.js";import"./preload-helper-C1FmrZbK.js";import"./proxy-CAwOFzsk.js";import"./MotionConfigContext-C_Ro_xsO.js";import"./chevron-down-BI8IU4ZZ.js";import"./createLucideIcon-C7zEcVM7.js";import"./index-CIvCfZMj.js";import"./check-CAskjz10.js";const ie={title:"Atoms/SearchableDropdown",component:r,parameters:{layout:"centered",docs:{description:{component:"A dropdown component with built-in search functionality and smooth animations."}}},tags:["autodocs"],argTypes:{label:{control:"text",description:"Label for the dropdown"},value:{control:"text",description:"Currently selected value"},placeholder:{control:"text",description:"Placeholder text when no option is selected"},allowEmpty:{control:"boolean",description:"Whether to allow empty/no selection"},onChange:{action:"changed"}}},t=[{label:"United States",value:"us"},{label:"United Kingdom",value:"uk"},{label:"Canada",value:"ca"},{label:"Germany",value:"de"},{label:"France",value:"fr"},{label:"Italy",value:"it"},{label:"Spain",value:"es"},{label:"Japan",value:"jp"},{label:"Australia",value:"au"},{label:"Brazil",value:"br"}],u=[{label:"New York",value:"ny"},{label:"Los Angeles",value:"la"},{label:"Chicago",value:"chi"},{label:"Houston",value:"hou"},{label:"Phoenix",value:"phx"},{label:"Philadelphia",value:"phi"},{label:"San Antonio",value:"sa"},{label:"San Diego",value:"sd"},{label:"Dallas",value:"dal"},{label:"San Jose",value:"sj"}],s=[{label:"React",value:"react"},{label:"Vue.js",value:"vue"},{label:"Angular",value:"angular"},{label:"Svelte",value:"svelte"},{label:"TypeScript",value:"typescript"},{label:"JavaScript",value:"javascript"},{label:"Node.js",value:"nodejs"},{label:"Python",value:"python"},{label:"Java",value:"java"},{label:"C#",value:"csharp"},{label:"Go",value:"go"},{label:"Rust",value:"rust"}],y={args:{label:"Select Country",value:"",options:t,placeholder:"Choose a country",allowEmpty:!0,onChange:()=>{}}},m={args:{label:"Selected Country",value:"us",options:t,placeholder:"Choose a country",allowEmpty:!0,onChange:()=>{}}},g={args:{label:"Technology Stack",value:"react",options:s,placeholder:"Select technology",allowEmpty:!1,onChange:()=>{}}},b={args:{label:"Choose City",value:"",options:u,placeholder:"Search for a city",allowEmpty:!0,onChange:()=>{}}},v={args:{label:"Country",value:"",options:t,placeholder:"Search countries...",allowEmpty:!0,onChange:()=>{}},render:()=>{var p,c;const[l,d]=C.useState(""),[n,i]=C.useState("react");return e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem",width:"300px"},children:[e.jsx(r,{label:"Country",value:l,onChange:d,options:t,placeholder:"Search countries...",allowEmpty:!0}),e.jsx(r,{label:"Technology",value:n,onChange:i,options:s,placeholder:"Search technologies...",allowEmpty:!1}),e.jsxs("div",{style:{marginTop:"1rem",padding:"1rem",background:"#f5f5f5",borderRadius:"4px"},children:[e.jsx("p",{style:{margin:0,fontSize:"0.875rem"},children:e.jsx("strong",{children:"Selected Values:"})}),e.jsxs("ul",{style:{margin:"0.5rem 0 0",paddingLeft:"1.5rem",fontSize:"0.875rem"},children:[e.jsxs("li",{children:["Country: ",l?(p=t.find(o=>o.value===l))==null?void 0:p.label:"None"]}),e.jsxs("li",{children:["Technology: ",(c=s.find(o=>o.value===n))==null?void 0:c.label]})]})]})]})},parameters:{controls:{disable:!0}}},f={args:{label:"Country",value:"",options:t,placeholder:"Search for your country",allowEmpty:!1,onChange:()=>{}},render:()=>{var i,p,c;const[l,d]=C.useState({country:"",city:"",skills:""}),n=(o,h)=>{d(a=>({...a,[o]:h}))};return e.jsxs("div",{style:{padding:"1.5rem",background:"#fff",border:"1px solid #e0e0e0",borderRadius:"8px",maxWidth:"400px"},children:[e.jsxs("h3",{style:{marginTop:0,display:"flex",alignItems:"center",gap:"0.5rem"},children:[e.jsx(q,{})," User Profile"]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[e.jsx(r,{label:"Country",value:l.country,onChange:o=>n("country",o),options:t,placeholder:"Search for your country",allowEmpty:!1}),e.jsx(r,{label:"City",value:l.city,onChange:o=>n("city",o),options:u,placeholder:"Search for your city",allowEmpty:!0}),e.jsx(r,{label:"Primary Skill",value:l.skills,onChange:o=>n("skills",o),options:s,placeholder:"Search technologies",allowEmpty:!0})]}),e.jsxs("div",{style:{marginTop:"1rem",padding:"0.75rem",background:"#f8f9fa",borderRadius:"4px",fontSize:"0.875rem"},children:[e.jsx("strong",{children:"Profile Summary:"}),e.jsx("br",{}),"🌍 Country: ",l.country?(i=t.find(o=>o.value===l.country))==null?void 0:i.label:"Not specified",e.jsx("br",{}),"📍 City: ",l.city?(p=u.find(o=>o.value===l.city))==null?void 0:p.label:"Not specified",e.jsx("br",{}),"💻 Skills: ",l.skills?(c=s.find(o=>o.value===l.skills))==null?void 0:c.label:"Not specified"]})]})},parameters:{controls:{disable:!0}}},x={args:{label:"Location",value:"",options:u,placeholder:"Search locations...",allowEmpty:!0,onChange:()=>{}},render:()=>{var c,o,h;const[l,d]=C.useState({location:"",technology:"",experience:""}),n=[{label:"Entry Level (0-2 years)",value:"entry"},{label:"Mid Level (3-5 years)",value:"mid"},{label:"Senior Level (6-10 years)",value:"senior"},{label:"Lead/Principal (10+ years)",value:"lead"}],i=(a,K)=>{d(Y=>({...Y,[a]:K}))},p=()=>{d({location:"",technology:"",experience:""})};return e.jsxs("div",{style:{padding:"1.5rem",background:"#f8f9fa",border:"1px solid #dee2e6",borderRadius:"8px",maxWidth:"500px"},children:[e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:"1rem"},children:[e.jsxs("h3",{style:{margin:0,display:"flex",alignItems:"center",gap:"0.5rem"},children:[e.jsx(Q,{})," Job Search Filters"]}),e.jsx("button",{onClick:p,style:{padding:"0.25rem 0.75rem",fontSize:"0.75rem",backgroundColor:"transparent",border:"1px solid #6c757d",borderRadius:"4px",cursor:"pointer"},children:"Clear All"})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[e.jsx(r,{label:"Location",value:l.location,onChange:a=>i("location",a),options:u,placeholder:"Search locations...",allowEmpty:!0}),e.jsx(r,{label:"Technology",value:l.technology,onChange:a=>i("technology",a),options:s,placeholder:"Search technologies...",allowEmpty:!0}),e.jsx(r,{label:"Experience Level",value:l.experience,onChange:a=>i("experience",a),options:n,placeholder:"Select experience level...",allowEmpty:!0})]}),e.jsxs("div",{style:{marginTop:"1rem",padding:"0.75rem",background:"#fff",borderRadius:"4px",fontSize:"0.875rem"},children:[e.jsx("strong",{children:"Active Filters:"}),e.jsx("br",{}),!l.location&&!l.technology&&!l.experience?e.jsx("em",{children:"No filters applied"}):e.jsxs("ul",{style:{margin:"0.5rem 0 0",paddingLeft:"1.5rem"},children:[l.location&&e.jsxs("li",{children:["📍 ",(c=u.find(a=>a.value===l.location))==null?void 0:c.label]}),l.technology&&e.jsxs("li",{children:["💻 ",(o=s.find(a=>a.value===l.technology))==null?void 0:o.label]}),l.experience&&e.jsxs("li",{children:["🎯 ",(h=n.find(a=>a.value===l.experience))==null?void 0:h.label]})]})]})]})},parameters:{controls:{disable:!0}}},S={args:{label:"With Empty Option",value:"",options:t.slice(0,5),placeholder:"Choose...",allowEmpty:!0,onChange:()=>{}},render:()=>e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem",width:"300px"},children:[e.jsx(r,{label:"With Empty Option",value:"",onChange:()=>{},options:t.slice(0,5),placeholder:"Choose...",allowEmpty:!0}),e.jsx(r,{label:"No Empty Option",value:"react",onChange:()=>{},options:s.slice(0,5),placeholder:"Choose...",allowEmpty:!1}),e.jsx(r,{label:"Pre-selected",value:"us",onChange:()=>{},options:t.slice(0,5),placeholder:"Choose...",allowEmpty:!0}),e.jsx(r,{label:"Long Options List",value:"",onChange:()=>{},options:s,placeholder:"Search technologies...",allowEmpty:!0})]}),parameters:{controls:{disable:!0}}};var w,E,j;y.parameters={...y.parameters,docs:{...(w=y.parameters)==null?void 0:w.docs,source:{originalSource:`{
+  args: {
+    label: 'Select Country',
+    value: '',
+    options: countryOptions,
+    placeholder: 'Choose a country',
+    allowEmpty: true,
+    onChange: () => {}
+  }
+}`,...(j=(E=y.parameters)==null?void 0:E.docs)==null?void 0:j.source}}};var k,O,L;m.parameters={...m.parameters,docs:{...(k=m.parameters)==null?void 0:k.docs,source:{originalSource:`{
+  args: {
+    label: 'Selected Country',
+    value: 'us',
+    options: countryOptions,
+    placeholder: 'Choose a country',
+    allowEmpty: true,
+    onChange: () => {}
+  }
+}`,...(L=(O=m.parameters)==null?void 0:O.docs)==null?void 0:L.source}}};var D,T,F;g.parameters={...g.parameters,docs:{...(D=g.parameters)==null?void 0:D.docs,source:{originalSource:`{
+  args: {
+    label: 'Technology Stack',
+    value: 'react',
+    options: techStackOptions,
+    placeholder: 'Select technology',
+    allowEmpty: false,
+    onChange: () => {}
+  }
+}`,...(F=(T=g.parameters)==null?void 0:T.docs)==null?void 0:F.source}}};var P,N,R;b.parameters={...b.parameters,docs:{...(P=b.parameters)==null?void 0:P.docs,source:{originalSource:`{
+  args: {
+    label: 'Choose City',
+    value: '',
+    options: cityOptions,
+    placeholder: 'Search for a city',
+    allowEmpty: true,
+    onChange: () => {}
+  }
+}`,...(R=(N=b.parameters)==null?void 0:N.docs)==null?void 0:R.source}}};var A,z,W;v.parameters={...v.parameters,docs:{...(A=v.parameters)==null?void 0:A.docs,source:{originalSource:`{
+  args: {
+    label: 'Country',
+    value: '',
+    options: countryOptions,
+    placeholder: 'Search countries...',
+    allowEmpty: true,
+    onChange: () => {}
+  },
+  render: () => {
+    const [selectedCountry, setSelectedCountry] = useState('');
+    const [selectedTech, setSelectedTech] = useState('react');
+    return <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1rem',
+      width: '300px'
+    }}>
+                <SearchableDropdown label="Country" value={selectedCountry} onChange={setSelectedCountry} options={countryOptions} placeholder="Search countries..." allowEmpty={true} />
+                <SearchableDropdown label="Technology" value={selectedTech} onChange={setSelectedTech} options={techStackOptions} placeholder="Search technologies..." allowEmpty={false} />
+                <div style={{
+        marginTop: '1rem',
+        padding: '1rem',
+        background: '#f5f5f5',
+        borderRadius: '4px'
+      }}>
+                    <p style={{
+          margin: 0,
+          fontSize: '0.875rem'
+        }}>
+                        <strong>Selected Values:</strong>
+                    </p>
+                    <ul style={{
+          margin: '0.5rem 0 0',
+          paddingLeft: '1.5rem',
+          fontSize: '0.875rem'
+        }}>
+                        <li>Country: {selectedCountry ? countryOptions.find(c => c.value === selectedCountry)?.label : 'None'}</li>
+                        <li>Technology: {techStackOptions.find(t => t.value === selectedTech)?.label}</li>
+                    </ul>
+                </div>
+            </div>;
+  },
+  parameters: {
+    controls: {
+      disable: true
+    }
+  }
+}`,...(W=(z=v.parameters)==null?void 0:z.docs)==null?void 0:W.source}}};var I,J,U;f.parameters={...f.parameters,docs:{...(I=f.parameters)==null?void 0:I.docs,source:{originalSource:`{
+  args: {
+    label: 'Country',
+    value: '',
+    options: countryOptions,
+    placeholder: 'Search for your country',
+    allowEmpty: false,
+    onChange: () => {}
+  },
+  render: () => {
+    const [profile, setProfile] = useState({
+      country: '',
+      city: '',
+      skills: ''
+    });
+    const handleChange = (field: keyof typeof profile, value: string) => {
+      setProfile(prev => ({
+        ...prev,
+        [field]: value
+      }));
+    };
+    return <div style={{
+      padding: '1.5rem',
+      background: '#fff',
+      border: '1px solid #e0e0e0',
+      borderRadius: '8px',
+      maxWidth: '400px'
+    }}>
+                <h3 style={{
+        marginTop: 0,
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.5rem'
+      }}>
+                    <Users /> User Profile
+                </h3>
+                <div style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '1rem'
+      }}>
+                    <SearchableDropdown label="Country" value={profile.country} onChange={value => handleChange('country', value)} options={countryOptions} placeholder="Search for your country" allowEmpty={false} />
+                    <SearchableDropdown label="City" value={profile.city} onChange={value => handleChange('city', value)} options={cityOptions} placeholder="Search for your city" allowEmpty={true} />
+                    <SearchableDropdown label="Primary Skill" value={profile.skills} onChange={value => handleChange('skills', value)} options={techStackOptions} placeholder="Search technologies" allowEmpty={true} />
+                </div>
+                <div style={{
+        marginTop: '1rem',
+        padding: '0.75rem',
+        background: '#f8f9fa',
+        borderRadius: '4px',
+        fontSize: '0.875rem'
+      }}>
+                    <strong>Profile Summary:</strong><br />
+                    🌍 Country: {profile.country ? countryOptions.find(c => c.value === profile.country)?.label : 'Not specified'}<br />
+                    📍 City: {profile.city ? cityOptions.find(c => c.value === profile.city)?.label : 'Not specified'}<br />
+                    💻 Skills: {profile.skills ? techStackOptions.find(s => s.value === profile.skills)?.label : 'Not specified'}
+                </div>
+            </div>;
+  },
+  parameters: {
+    controls: {
+      disable: true
+    }
+  }
+}`,...(U=(J=f.parameters)==null?void 0:J.docs)==null?void 0:U.source}}};var V,B,G;x.parameters={...x.parameters,docs:{...(V=x.parameters)==null?void 0:V.docs,source:{originalSource:`{
+  args: {
+    label: 'Location',
+    value: '',
+    options: cityOptions,
+    placeholder: 'Search locations...',
+    allowEmpty: true,
+    onChange: () => {}
+  },
+  render: () => {
+    const [filters, setFilters] = useState({
+      location: '',
+      technology: '',
+      experience: ''
+    });
+    const experienceOptions = [{
+      label: 'Entry Level (0-2 years)',
+      value: 'entry'
+    }, {
+      label: 'Mid Level (3-5 years)',
+      value: 'mid'
+    }, {
+      label: 'Senior Level (6-10 years)',
+      value: 'senior'
+    }, {
+      label: 'Lead/Principal (10+ years)',
+      value: 'lead'
+    }];
+    const updateFilter = (field: keyof typeof filters, value: string) => {
+      setFilters(prev => ({
+        ...prev,
+        [field]: value
+      }));
+    };
+    const clearFilters = () => {
+      setFilters({
+        location: '',
+        technology: '',
+        experience: ''
+      });
+    };
+    return <div style={{
+      padding: '1.5rem',
+      background: '#f8f9fa',
+      border: '1px solid #dee2e6',
+      borderRadius: '8px',
+      maxWidth: '500px'
+    }}>
+                <div style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: '1rem'
+      }}>
+                    <h3 style={{
+          margin: 0,
+          display: 'flex',
+          alignItems: 'center',
+          gap: '0.5rem'
+        }}>
+                        <Search /> Job Search Filters
+                    </h3>
+                    <button onClick={clearFilters} style={{
+          padding: '0.25rem 0.75rem',
+          fontSize: '0.75rem',
+          backgroundColor: 'transparent',
+          border: '1px solid #6c757d',
+          borderRadius: '4px',
+          cursor: 'pointer'
+        }}>
+                        Clear All
+                    </button>
+                </div>
+                
+                <div style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '1rem'
+      }}>
+                    <SearchableDropdown label="Location" value={filters.location} onChange={value => updateFilter('location', value)} options={cityOptions} placeholder="Search locations..." allowEmpty={true} />
+                    <SearchableDropdown label="Technology" value={filters.technology} onChange={value => updateFilter('technology', value)} options={techStackOptions} placeholder="Search technologies..." allowEmpty={true} />
+                    <SearchableDropdown label="Experience Level" value={filters.experience} onChange={value => updateFilter('experience', value)} options={experienceOptions} placeholder="Select experience level..." allowEmpty={true} />
+                </div>
+                
+                <div style={{
+        marginTop: '1rem',
+        padding: '0.75rem',
+        background: '#fff',
+        borderRadius: '4px',
+        fontSize: '0.875rem'
+      }}>
+                    <strong>Active Filters:</strong><br />
+                    {!filters.location && !filters.technology && !filters.experience ? <em>No filters applied</em> : <ul style={{
+          margin: '0.5rem 0 0',
+          paddingLeft: '1.5rem'
+        }}>
+                            {filters.location && <li>📍 {cityOptions.find(c => c.value === filters.location)?.label}</li>}
+                            {filters.technology && <li>💻 {techStackOptions.find(t => t.value === filters.technology)?.label}</li>}
+                            {filters.experience && <li>🎯 {experienceOptions.find(e => e.value === filters.experience)?.label}</li>}
+                        </ul>}
+                </div>
+            </div>;
+  },
+  parameters: {
+    controls: {
+      disable: true
+    }
+  }
+}`,...(G=(B=x.parameters)==null?void 0:B.docs)==null?void 0:G.source}}};var M,_,H;S.parameters={...S.parameters,docs:{...(M=S.parameters)==null?void 0:M.docs,source:{originalSource:`{
+  args: {
+    label: 'With Empty Option',
+    value: '',
+    options: countryOptions.slice(0, 5),
+    placeholder: 'Choose...',
+    allowEmpty: true,
+    onChange: () => {}
+  },
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '1rem',
+    width: '300px'
+  }}>
+            <SearchableDropdown label="With Empty Option" value="" onChange={() => {}} options={countryOptions.slice(0, 5)} placeholder="Choose..." allowEmpty={true} />
+            <SearchableDropdown label="No Empty Option" value="react" onChange={() => {}} options={techStackOptions.slice(0, 5)} placeholder="Choose..." allowEmpty={false} />
+            <SearchableDropdown label="Pre-selected" value="us" onChange={() => {}} options={countryOptions.slice(0, 5)} placeholder="Choose..." allowEmpty={true} />
+            <SearchableDropdown label="Long Options List" value="" onChange={() => {}} options={techStackOptions} placeholder="Search technologies..." allowEmpty={true} />
+        </div>,
+  parameters: {
+    controls: {
+      disable: true
+    }
+  }
+}`,...(H=(_=S.parameters)==null?void 0:_.docs)==null?void 0:H.source}}};const ce=["Default","WithValue","NoEmptyOption","LongList","Interactive","ProfileForm","JobFilter","AllVariants"];export{S as AllVariants,y as Default,v as Interactive,x as JobFilter,b as LongList,g as NoEmptyOption,f as ProfileForm,m as WithValue,ce as __namedExportsOrder,ie as default};

package/storybook-static/assets/SelectInput-BTPptV1H.css

@@ -0,0 +1 @@
+._selectInput_evuah_1{margin-bottom:var(--spacing-lg);position:relative}._selectInput_evuah_1 label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text);margin-bottom:var(--spacing-sm);letter-spacing:var(--letter-spacing-wide);transition:color var(--transition-base)}._selectWrapper_evuah_16{position:relative;width:100%}._selectInput_evuah_1 select{width:100%;padding:var(--spacing-sm) var(--spacing-md);padding-right:48px;border:2px solid var(--color-border);border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--color-background),var(--color-background-secondary));font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:var(--color-text);display:block;appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;transition:all var(--transition-base);min-height:44px;outline:none}._selectInput_evuah_1 select:hover:not(:focus):not(:disabled){border-color:var(--color-border-hover);background:var(--color-background);box-shadow:var(--shadow-sm);transform:translateY(-1px)}._selectInput_evuah_1 select:focus{border-color:var(--color-primary);background:var(--color-background);box-shadow:0 0 0 3px #7c3aed1a;transform:translateY(-2px)}._selectInput_evuah_1 select:disabled{background:var(--color-background-tertiary);border-color:var(--color-border);color:var(--color-text-tertiary);cursor:not-allowed;opacity:.6;transform:none}._selectIcon_evuah_68{position:absolute;right:var(--spacing-md);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--color-primary);width:20px;height:20px;transition:color var(--transition-base)}._selectInput_evuah_1 select:hover:not(:disabled)~._selectIcon_evuah_68{color:var(--color-primary-hover)}._selectInput_evuah_1 select:focus~._selectIcon_evuah_68{color:var(--color-primary-hover)}._selectWrapper_evuah_16:before{content:"";position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;background:linear-gradient(135deg,#7c3aed0d,#7c3aed1a);border-radius:var(--radius-md);pointer-events:none;opacity:0;transition:opacity var(--transition-base)}._selectInput_evuah_1 select:focus~:before{opacity:1}._selectInput_evuah_1 select option{padding:var(--spacing-sm);background:var(--color-background);color:var(--color-text);font-weight:var(--font-weight-normal)}._selectInput_evuah_1 select option:checked{background:linear-gradient(135deg,var(--color-primary-lighter),var(--color-primary-light));color:var(--color-text)}._selectInput_evuah_1 select option[value=""]{color:var(--color-text-secondary);font-style:italic}._error_evuah_134 select{border-color:var(--color-error);background:linear-gradient(135deg,var(--color-error-bg),var(--color-background));animation:_shake_evuah_1 .3s cubic-bezier(.36,.07,.19,.97) both}._error_evuah_134 label{color:var(--color-error)}._error_evuah_134 select:focus{box-shadow:0 0 0 3px #f43f5e26}._error_evuah_134 ._selectIcon_evuah_68{color:var(--color-error)}@keyframes _shake_evuah_1{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-3px)}40%,60%{transform:translate(3px)}}._success_evuah_163 select{border-color:var(--color-success)}._success_evuah_163:after{content:"✓";position:absolute;right:52px;top:50%;transform:translateY(-50%);color:var(--color-success);font-weight:700;animation:_checkIn_evuah_1 .3s ease-out}@keyframes _checkIn_evuah_1{0%{opacity:0;transform:translateY(-50%) scale(0)}to{opacity:1;transform:translateY(-50%) scale(1)}}._loading_evuah_190 select{position:relative;overflow:hidden}._loading_evuah_190:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(124,58,237,.1),transparent);animation:_shimmer_evuah_1 2s infinite;pointer-events:none}@keyframes _shimmer_evuah_1{to{left:100%}}[data-theme=dark] ._selectInput_evuah_1 select{background:linear-gradient(135deg,var(--color-background-secondary),var(--color-background-tertiary));border-color:var(--color-border)}[data-theme=dark] ._selectInput_evuah_1 select:hover:not(:disabled){background:var(--color-background-secondary);border-color:var(--color-border-hover)}[data-theme=dark] ._selectInput_evuah_1 select:focus{background:var(--color-background-secondary);border-color:var(--color-primary-light);box-shadow:0 0 0 3px #a78bfa1a}[data-theme=dark] ._selectIcon_evuah_68{color:var(--color-primary-light)}[data-theme=dark] ._selectWrapper_evuah_16:before{background:linear-gradient(135deg,#a78bfa0d,#a78bfa1a)}[data-theme=dark] ._selectInput_evuah_1 select option{background:var(--color-background-secondary)}[data-theme=dark] ._selectInput_evuah_1 select option:checked{background:var(--color-primary)}@media (max-width: 768px){._selectInput_evuah_1{margin-bottom:var(--spacing-md)}._selectInput_evuah_1 label{font-size:var(--font-size-base);margin-bottom:var(--spacing-xs)}._selectInput_evuah_1 select{min-height:48px;padding:var(--spacing-md);padding-right:52px;font-size:16px}._selectIcon_evuah_68{right:var(--spacing-md);width:24px;height:24px}._selectWrapper_evuah_16:before{width:36px;height:36px;right:10px}._selectInput_evuah_1 select:active:not(:disabled){transform:translateY(0);background:var(--color-background-tertiary)}}@-moz-document url-prefix(){._selectInput_evuah_1 select{padding-top:calc(var(--spacing-sm) + 1px);padding-bottom:calc(var(--spacing-sm) + 1px)}}@media (prefers-contrast: high){._selectInput_evuah_1 select{border-width:3px}._selectInput_evuah_1 select:focus{outline:2px solid var(--color-primary);outline-offset:2px}}

package/storybook-static/assets/SelectInput-BrdH7gJ5.js

@@ -0,0 +1,31 @@
+import{j as s}from"./iframe-Cz1R6gKZ.js";import{u as g}from"./useSound-DOpt9DfD.js";import{C as I}from"./chevron-down-BI8IU4ZZ.js";const S="_selectInput_evuah_1",x="_selectWrapper_evuah_16",j="_selectIcon_evuah_68",C="_error_evuah_134",V="_success_evuah_163",q="_loading_evuah_190",l={selectInput:S,selectWrapper:x,selectIcon:j,error:C,success:V,loading:q};function w({label:r,value:c,onChange:u,options:i,placeholder:p="Select...",disabled:d=!1,error:f=!1,success:v=!1,loading:a=!1,required:t=!1,soundConfig:h,className:n}){const{handlers:m,playSound:_}=g(h),b=()=>{const e=[l.selectInput];return f&&e.push(l.error),v&&e.push(l.success),a&&e.push(l.loading),e.join(" ")};return s.jsxs("div",{className:`${b()}${n?` ${n}`:""}`,children:[s.jsxs("label",{children:[r,t&&s.jsx("span",{style:{color:"var(--color-error)"},children:" *"})]}),s.jsxs("div",{className:l.selectWrapper,children:[s.jsxs("select",{value:c,onChange:e=>{_("click"),u(e.target.value)},disabled:d||a,required:t,...m,children:[s.jsx("option",{value:"",children:p}),i.map(e=>{const o=typeof e=="string"?e:e.value,y=typeof e=="string"?e:e.label;return s.jsx("option",{value:o,children:y},o)})]}),s.jsx(I,{className:l.selectIcon})]})]})}w.__docgenInfo={description:`SelectInput component - Styled dropdown selector with flexible option format
+
+@component
+@description
+A customizable select dropdown that accepts both simple string arrays and
+label-value object arrays for options. Features custom styling that maintains
+consistency across browsers while preserving native select functionality.
+Includes a styled chevron icon for better visual feedback.
+
+@example
+// With simple string options
+<SelectInput
+  label="Country"
+  value={country}
+  onChange={setCountry}
+  options={['Italy', 'France', 'Spain', 'Germany']}
+  placeholder="Select a country"
+/>
+
+@example
+// With label-value pairs
+<SelectInput
+  label="Status"
+  value={status}
+  onChange={setStatus}
+  options={[
+    { label: 'Active', value: 'active' },
+    { label: 'Pending', value: 'pending' },
+    { label: 'Archived', value: 'archived' }
+  ]}
+/>`,methods:[],displayName:"SelectInput",props:{placeholder:{defaultValue:{value:'"Select..."',computed:!1},required:!1},disabled:{defaultValue:{value:"false",computed:!1},required:!1},error:{defaultValue:{value:"false",computed:!1},required:!1},success:{defaultValue:{value:"false",computed:!1},required:!1},loading:{defaultValue:{value:"false",computed:!1},required:!1},required:{defaultValue:{value:"false",computed:!1},required:!1}}};export{w as S};

package/storybook-static/assets/SelectInput.stories-BJ8-v1VC.js

@@ -0,0 +1,129 @@
+import{r as w,j as o}from"./iframe-Cz1R6gKZ.js";import{S as l}from"./SelectInput-BrdH7gJ5.js";import"./preload-helper-C1FmrZbK.js";import"./useSound-DOpt9DfD.js";import"./chevron-down-BI8IU4ZZ.js";import"./createLucideIcon-C7zEcVM7.js";const H={title:"Atoms/SelectInput",component:l,parameters:{layout:"centered",docs:{description:{component:"A simple dropdown select component with customizable options."}}},tags:["autodocs"],argTypes:{label:{control:"text",description:"Label for the select input"},value:{control:"text",description:"Currently selected value"},placeholder:{control:"text",description:"Placeholder text when no value is selected"},onChange:{action:"changed"}}},P=["Option 1","Option 2","Option 3","Option 4"],p=[{label:"United States",value:"us"},{label:"United Kingdom",value:"uk"},{label:"Canada",value:"ca"},{label:"Australia",value:"au"},{label:"Germany",value:"de"},{label:"France",value:"fr"},{label:"Italy",value:"it"},{label:"Spain",value:"es"}],r={args:{label:"Select an option",value:"",onChange:()=>{},options:P,placeholder:"Choose..."}},n={args:{label:"Choose your favorite",value:"Option 2",onChange:()=>{},options:P}},s={args:{label:"Country",value:"uk",onChange:()=>{},options:p,placeholder:"Select a country"}},i={args:{label:"Priority",value:"",onChange:()=>{},options:["Low","Medium","High","Critical"]}},c={args:{label:"Interactive Select",value:"",onChange:()=>{},options:p,placeholder:"Choose a country"},render:()=>{var a;const[e,t]=w.useState("");return o.jsxs("div",{children:[o.jsx(l,{label:"Select your country",value:e,onChange:t,options:p,placeholder:"Choose a country"}),e&&o.jsxs("p",{style:{marginTop:"1rem",fontSize:"0.875rem",color:"#666"},children:["Selected: ",((a=p.find(k=>k.value===e))==null?void 0:a.label)||e]})]})}},u={args:{label:"Form Example",value:"",onChange:()=>{},options:["Option 1","Option 2"]},render:()=>{const[e,t]=w.useState({title:"",category:"",priority:"",assignee:""});return o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem",padding:"1.5rem",background:"#f9f9f9",borderRadius:"8px",minWidth:"300px"},children:[o.jsx("h3",{style:{marginTop:0},children:"Create Task"}),o.jsx(l,{label:"Title",value:e.title,onChange:a=>t({...e,title:a}),options:["Mr","Mrs","Ms","Dr","Prof"],placeholder:"Select title"}),o.jsx(l,{label:"Category",value:e.category,onChange:a=>t({...e,category:a}),options:[{label:"Bug",value:"bug"},{label:"Feature",value:"feature"},{label:"Documentation",value:"docs"},{label:"Testing",value:"test"}],placeholder:"Select category"}),o.jsx(l,{label:"Priority",value:e.priority,onChange:a=>t({...e,priority:a}),options:["Low","Medium","High","Critical"],placeholder:"Select priority"}),o.jsx(l,{label:"Assignee",value:e.assignee,onChange:a=>t({...e,assignee:a}),options:[{label:"John Doe",value:"john"},{label:"Jane Smith",value:"jane"},{label:"Bob Johnson",value:"bob"},{label:"Alice Brown",value:"alice"}],placeholder:"Select assignee"})]})},parameters:{controls:{disable:!0}}};var d,m,g;r.parameters={...r.parameters,docs:{...(d=r.parameters)==null?void 0:d.docs,source:{originalSource:`{
+  args: {
+    label: 'Select an option',
+    value: '',
+    onChange: () => {},
+    options: simpleOptions,
+    placeholder: 'Choose...'
+  }
+}`,...(g=(m=r.parameters)==null?void 0:m.docs)==null?void 0:g.source}}};var h,v,b;n.parameters={...n.parameters,docs:{...(h=n.parameters)==null?void 0:h.docs,source:{originalSource:`{
+  args: {
+    label: 'Choose your favorite',
+    value: 'Option 2',
+    onChange: () => {},
+    options: simpleOptions
+  }
+}`,...(b=(v=n.parameters)==null?void 0:v.docs)==null?void 0:b.source}}};var y,C,S;s.parameters={...s.parameters,docs:{...(y=s.parameters)==null?void 0:y.docs,source:{originalSource:`{
+  args: {
+    label: 'Country',
+    value: 'uk',
+    onChange: () => {},
+    options: countryOptions,
+    placeholder: 'Select a country'
+  }
+}`,...(S=(C=s.parameters)==null?void 0:C.docs)==null?void 0:S.source}}};var f,x,D;i.parameters={...i.parameters,docs:{...(f=i.parameters)==null?void 0:f.docs,source:{originalSource:`{
+  args: {
+    label: 'Priority',
+    value: '',
+    onChange: () => {},
+    options: ['Low', 'Medium', 'High', 'Critical']
+  }
+}`,...(D=(x=i.parameters)==null?void 0:x.docs)==null?void 0:D.source}}};var O,j,F;c.parameters={...c.parameters,docs:{...(O=c.parameters)==null?void 0:O.docs,source:{originalSource:`{
+  args: {
+    label: 'Interactive Select',
+    value: '',
+    onChange: () => {},
+    options: countryOptions,
+    placeholder: 'Choose a country'
+  },
+  render: () => {
+    const [selectedCountry, setSelectedCountry] = useState('');
+    return <div>
+                <SelectInput label="Select your country" value={selectedCountry} onChange={setSelectedCountry} options={countryOptions} placeholder="Choose a country" />
+                {selectedCountry && <p style={{
+        marginTop: '1rem',
+        fontSize: '0.875rem',
+        color: '#666'
+      }}>
+                        Selected: {countryOptions.find(opt => opt.value === selectedCountry)?.label || selectedCountry}
+                    </p>}
+            </div>;
+  }
+}`,...(F=(j=c.parameters)==null?void 0:j.docs)==null?void 0:F.source}}};var I,T,M;u.parameters={...u.parameters,docs:{...(I=u.parameters)==null?void 0:I.docs,source:{originalSource:`{
+  args: {
+    label: 'Form Example',
+    value: '',
+    onChange: () => {},
+    options: ['Option 1', 'Option 2']
+  },
+  render: () => {
+    const [formData, setFormData] = useState({
+      title: '',
+      category: '',
+      priority: '',
+      assignee: ''
+    });
+    return <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1rem',
+      padding: '1.5rem',
+      background: '#f9f9f9',
+      borderRadius: '8px',
+      minWidth: '300px'
+    }}>
+            <h3 style={{
+        marginTop: 0
+      }}>Create Task</h3>
+            
+            <SelectInput label="Title" value={formData.title} onChange={value => setFormData({
+        ...formData,
+        title: value
+      })} options={['Mr', 'Mrs', 'Ms', 'Dr', 'Prof']} placeholder="Select title" />
+            
+            <SelectInput label="Category" value={formData.category} onChange={value => setFormData({
+        ...formData,
+        category: value
+      })} options={[{
+        label: 'Bug',
+        value: 'bug'
+      }, {
+        label: 'Feature',
+        value: 'feature'
+      }, {
+        label: 'Documentation',
+        value: 'docs'
+      }, {
+        label: 'Testing',
+        value: 'test'
+      }]} placeholder="Select category" />
+            
+            <SelectInput label="Priority" value={formData.priority} onChange={value => setFormData({
+        ...formData,
+        priority: value
+      })} options={['Low', 'Medium', 'High', 'Critical']} placeholder="Select priority" />
+            
+            <SelectInput label="Assignee" value={formData.assignee} onChange={value => setFormData({
+        ...formData,
+        assignee: value
+      })} options={[{
+        label: 'John Doe',
+        value: 'john'
+      }, {
+        label: 'Jane Smith',
+        value: 'jane'
+      }, {
+        label: 'Bob Johnson',
+        value: 'bob'
+      }, {
+        label: 'Alice Brown',
+        value: 'alice'
+      }]} placeholder="Select assignee" />
+        </div>;
+  },
+  parameters: {
+    controls: {
+      disable: true
+    }
+  }
+}`,...(M=(T=u.parameters)==null?void 0:T.docs)==null?void 0:M.source}}};const z=["Default","WithSimpleOptions","WithObjectOptions","NoPlaceholder","Interactive","FormExample"];export{r as Default,u as FormExample,c as Interactive,i as NoPlaceholder,s as WithObjectOptions,n as WithSimpleOptions,z as __namedExportsOrder,H as default};

package/storybook-static/assets/ShapeBlur.stories-BD9LHX3y.js

@@ -0,0 +1,131 @@
+import{r as M,j}from"./iframe-Cz1R6gKZ.js";import{d as m,S as B,a as D,W as N,q as T,i as k,M as G,r as H}from"./three.module--_vTUKhS.js";import"./preload-helper-C1FmrZbK.js";const U=`
+varying vec2 v_texcoord;
+void main() {
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    v_texcoord = uv;
+}
+`,X=`
+varying vec2 v_texcoord;
+
+uniform vec2 u_mouse;
+uniform vec2 u_resolution;
+uniform float u_pixelRatio;
+
+uniform float u_shapeSize;
+uniform float u_roundness;
+uniform float u_borderSize;
+uniform float u_circleSize;
+uniform float u_circleEdge;
+
+#ifndef PI
+#define PI 3.1415926535897932384626433832795
+#endif
+#ifndef TWO_PI
+#define TWO_PI 6.2831853071795864769252867665590
+#endif
+
+#ifndef VAR
+#define VAR 0
+#endif
+
+#ifndef FNC_COORD
+#define FNC_COORD
+vec2 coord(in vec2 p) {
+    p = p / u_resolution.xy;
+    if (u_resolution.x > u_resolution.y) {
+        p.x *= u_resolution.x / u_resolution.y;
+        p.x += (u_resolution.y - u_resolution.x) / u_resolution.y / 2.0;
+    } else {
+        p.y *= u_resolution.y / u_resolution.x;
+        p.y += (u_resolution.x - u_resolution.y) / u_resolution.x / 2.0;
+    }
+    p -= 0.5;
+    p *= vec2(-1.0, 1.0);
+    return p;
+}
+#endif
+
+#define st0 coord(gl_FragCoord.xy)
+#define mx coord(u_mouse * u_pixelRatio)
+
+float sdRoundRect(vec2 p, vec2 b, float r) {
+    vec2 d = abs(p - 0.5) * 4.2 - b + vec2(r);
+    return min(max(d.x, d.y), 0.0) + length(max(d, 0.0)) - r;
+}
+float sdCircle(in vec2 st, in vec2 center) {
+    return length(st - center) * 2.0;
+}
+float sdPoly(in vec2 p, in float w, in int sides) {
+    float a = atan(p.x, p.y) + PI;
+    float r = TWO_PI / float(sides);
+    float d = cos(floor(0.5 + a / r) * r - a) * length(max(abs(p) * 1.0, 0.0));
+    return d * 2.0 - w;
+}
+
+float aastep(float threshold, float value) {
+    float afwidth = length(vec2(dFdx(value), dFdy(value))) * 0.70710678118654757;
+    return smoothstep(threshold - afwidth, threshold + afwidth, value);
+}
+float fill(in float x) { return 1.0 - aastep(0.0, x); }
+float fill(float x, float size, float edge) {
+    return 1.0 - smoothstep(size - edge, size + edge, x);
+}
+float stroke(in float d, in float t) { return (1.0 - aastep(t, abs(d))); }
+float stroke(float x, float size, float w, float edge) {
+    float d = smoothstep(size - edge, size + edge, x + w * 0.5) - smoothstep(size - edge, size + edge, x - w * 0.5);
+    return clamp(d, 0.0, 1.0);
+}
+
+float strokeAA(float x, float size, float w, float edge) {
+    float afwidth = length(vec2(dFdx(x), dFdy(x))) * 0.70710678;
+    float d = smoothstep(size - edge - afwidth, size + edge + afwidth, x + w * 0.5)
+            - smoothstep(size - edge - afwidth, size + edge + afwidth, x - w * 0.5);
+    return clamp(d, 0.0, 1.0);
+}
+
+void main() {
+    vec2 st = st0 + 0.5;
+    vec2 posMouse = mx * vec2(1., -1.) + 0.5;
+
+    float size = u_shapeSize;
+    float roundness = u_roundness;
+    float borderSize = u_borderSize;
+    float circleSize = u_circleSize;
+    float circleEdge = u_circleEdge;
+
+    float sdfCircle = fill(
+        sdCircle(st, posMouse),
+        circleSize,
+        circleEdge
+    );
+
+    float sdf;
+    if (VAR == 0) {
+        sdf = sdRoundRect(st, vec2(size), roundness);
+        sdf = strokeAA(sdf, 0.0, borderSize, sdfCircle) * 4.0;
+    } else if (VAR == 1) {
+        sdf = sdCircle(st, vec2(0.5));
+        sdf = fill(sdf, 0.6, sdfCircle) * 1.2;
+    } else if (VAR == 2) {
+        sdf = sdCircle(st, vec2(0.5));
+        sdf = strokeAA(sdf, 0.58, 0.02, sdfCircle) * 4.0;
+    } else if (VAR == 3) {
+        sdf = sdPoly(st - vec2(0.5, 0.45), 0.3, 3);
+        sdf = fill(sdf, 0.05, sdfCircle) * 1.4;
+    }
+
+    vec3 color = vec3(1.0);
+    float alpha = sdf;
+    gl_FragColor = vec4(color.rgb, alpha);
+}
+`,I=({className:L="",variation:p=0,pixelRatioProp:v=2,shapeSize:h=1.2,roundness:x=.4,borderSize:_=.05,circleSize:g=.3,circleEdge:z=.5})=>{const w=M.useRef();return M.useEffect(()=>{const t=w.current;if(!t)return;let l=!0,S,f=0,R=0;const y=new m,c=new m,C=new m;let s=1,a=1;const E=new B,r=new D;r.position.z=1;const e=new N({alpha:!0});e.setClearColor(0,0),t.appendChild(e.domElement);const W=new T(1,1),b=new k({vertexShader:U,fragmentShader:X,uniforms:{u_mouse:{value:c},u_resolution:{value:C},u_pixelRatio:{value:v},u_shapeSize:{value:h},u_roundness:{value:x},u_borderSize:{value:_},u_circleSize:{value:g},u_circleEdge:{value:z}},defines:{VAR:p},transparent:!0}),V=new G(W,b);E.add(V);const n=o=>{const i=t.getBoundingClientRect();y.set(o.clientX-i.left,o.clientY-i.top)};document.addEventListener("mousemove",n),document.addEventListener("pointermove",n);const d=()=>{if(!l)return;s=t.clientWidth,a=t.clientHeight;const o=Math.min(window.devicePixelRatio,2);e.setSize(s,a),e.setPixelRatio(o),r.left=-s/2,r.right=s/2,r.top=a/2,r.bottom=-a/2,r.updateProjectionMatrix(),V.scale.set(s,a,1),C.set(s,a).multiplyScalar(o),b.uniforms.u_pixelRatio.value=o};d(),window.addEventListener("resize",d);const A=new ResizeObserver(()=>{l&&d()});A.observe(t);const P=()=>{if(!l)return;f=performance.now()*.001;const o=f-R;R=f,["x","y"].forEach(i=>{c[i]=H.damp(c[i],y[i],8,o)}),e.render(E,r),S=requestAnimationFrame(P)};return P(),()=>{l=!1,cancelAnimationFrame(S),window.removeEventListener("resize",d),A.disconnect(),document.removeEventListener("mousemove",n),document.removeEventListener("pointermove",n),t.contains(e.domElement)&&t.removeChild(e.domElement),e.dispose(),e.forceContextLoss()}},[p,v,h,x,_,g,z]),j.jsx("div",{className:L,ref:w,style:{width:"100%",minHeight:"100vh",position:"relative"}})};I.__docgenInfo={description:"",methods:[],displayName:"ShapeBlur",props:{className:{defaultValue:{value:"''",computed:!1},required:!1},variation:{defaultValue:{value:"0",computed:!1},required:!1},pixelRatioProp:{defaultValue:{value:"2",computed:!1},required:!1},shapeSize:{defaultValue:{value:"1.2",computed:!1},required:!1},roundness:{defaultValue:{value:"0.4",computed:!1},required:!1},borderSize:{defaultValue:{value:"0.05",computed:!1},required:!1},circleSize:{defaultValue:{value:"0.3",computed:!1},required:!1},circleEdge:{defaultValue:{value:"0.5",computed:!1},required:!1}}};const Q={title:"ReactBits/Animations/ShapeBlur",component:I,parameters:{layout:"fullscreen"},tags:["autodocs"]},u={args:{variation:0,pixelRatioProp:2,shapeSize:1.2,roundness:.4,borderSize:.05,circleSize:.3,circleEdge:.5}};var q,F,O;u.parameters={...u.parameters,docs:{...(q=u.parameters)==null?void 0:q.docs,source:{originalSource:`{
+  args: {
+    variation: 0,
+    pixelRatioProp: 2,
+    shapeSize: 1.2,
+    roundness: 0.4,
+    borderSize: 0.05,
+    circleSize: 0.3,
+    circleEdge: 0.5
+  }
+}`,...(O=(F=u.parameters)==null?void 0:F.docs)==null?void 0:O.source}}};const Z=["Default"];export{u as Default,Z as __namedExportsOrder,Q as default};

package/storybook-static/assets/ShapeGrid-D5w-KuEm.css

@@ -0,0 +1 @@
+._shapegrid-canvas_ilyut_1{width:100%;min-height:100vh;border:none;display:block}

package/storybook-static/assets/ShapeGrid.stories-MtqpqIIh.js

@@ -0,0 +1,11 @@
+import{r as v,j as q}from"./iframe-Cz1R6gKZ.js";import"./preload-helper-C1FmrZbK.js";const z={"shapegrid-canvas":"_shapegrid-canvas_ilyut_1"},J=({direction:P="right",speed:L=1,borderColor:k="#999",squareSize:t=40,hoverFillColor:b="#222",shape:X="square",hoverTrailAmount:y=0,className:Q=""})=>{const _=v.useRef(null),j=v.useRef(null),U=v.useRef(),Z=v.useRef(),r=v.useRef({x:0,y:0}),o=v.useRef(null),p=v.useRef([]),M=v.useRef(new Map);return v.useEffect(()=>{const s=_.current,n=s.getContext("2d"),Y=X==="hexagon",E=X==="triangle",w=t*1.5,m=t*Math.sqrt(3),V=()=>{s.width=s.offsetWidth,s.height=s.offsetHeight,U.current=Math.ceil(s.width/t)+1,Z.current=Math.ceil(s.height/t)+1};window.addEventListener("resize",V),V();const C=(l,e,c)=>{n.beginPath();for(let u=0;u<6;u++){const h=Math.PI/3*u,d=l+c*Math.cos(h),f=e+c*Math.sin(h);u===0?n.moveTo(d,f):n.lineTo(d,f)}n.closePath()},G=(l,e,c)=>{n.beginPath(),n.arc(l,e,c/2,0,Math.PI*2),n.closePath()},O=(l,e,c,u)=>{n.beginPath(),u?(n.moveTo(l,e+c/2),n.lineTo(l+c/2,e-c/2),n.lineTo(l-c/2,e-c/2)):(n.moveTo(l,e-c/2),n.lineTo(l+c/2,e+c/2),n.lineTo(l-c/2,e+c/2)),n.closePath()},A=()=>{if(n.clearRect(0,0,s.width,s.height),Y){const e=Math.floor(r.current.x/w),c=(r.current.x%w+w)%w,u=(r.current.y%m+m)%m,h=Math.ceil(s.width/w)+3,d=Math.ceil(s.height/m)+3;for(let f=-2;f<h;f++)for(let g=-2;g<d;g++){const i=f*w+c,a=g*m+((f+e)%2!==0?m/2:0)+u,x=`${f},${g}`,R=M.current.get(x);R&&(n.globalAlpha=R,C(i,a,t),n.fillStyle=b,n.fill(),n.globalAlpha=1),C(i,a,t),n.strokeStyle=k,n.stroke()}}else if(E){const e=t/2,c=Math.floor(r.current.x/e),u=Math.floor(r.current.y/t),h=(r.current.x%e+e)%e,d=(r.current.y%t+t)%t,f=Math.ceil(s.width/e)+4,g=Math.ceil(s.height/t)+4;for(let i=-2;i<f;i++)for(let a=-2;a<g;a++){const x=i*e+h,R=a*t+t/2+d,I=((i+c+a+u)%2+2)%2!==0,S=`${i},${a}`,N=M.current.get(S);N&&(n.globalAlpha=N,O(x,R,t,I),n.fillStyle=b,n.fill(),n.globalAlpha=1),O(x,R,t,I),n.strokeStyle=k,n.stroke()}}else if(X==="circle"){const e=(r.current.x%t+t)%t,c=(r.current.y%t+t)%t,u=Math.ceil(s.width/t)+3,h=Math.ceil(s.height/t)+3;for(let d=-2;d<u;d++)for(let f=-2;f<h;f++){const g=d*t+t/2+e,i=f*t+t/2+c,a=`${d},${f}`,x=M.current.get(a);x&&(n.globalAlpha=x,G(g,i,t),n.fillStyle=b,n.fill(),n.globalAlpha=1),G(g,i,t),n.strokeStyle=k,n.stroke()}}else{const e=(r.current.x%t+t)%t,c=(r.current.y%t+t)%t,u=Math.ceil(s.width/t)+3,h=Math.ceil(s.height/t)+3;for(let d=-2;d<u;d++)for(let f=-2;f<h;f++){const g=d*t+e,i=f*t+c,a=`${d},${f}`,x=M.current.get(a);x&&(n.globalAlpha=x,n.fillStyle=b,n.fillRect(g,i,t,t),n.globalAlpha=1),n.strokeStyle=k,n.strokeRect(g,i,t,t)}}const l=n.createRadialGradient(s.width/2,s.height/2,0,s.width/2,s.height/2,Math.sqrt(s.width**2+s.height**2)/2);l.addColorStop(0,"rgba(0, 0, 0, 0)"),n.fillStyle=l,n.fillRect(0,0,s.width,s.height)},H=()=>{const l=Math.max(L,.1),e=Y?w*2:t,c=Y?m:E?t*2:t;switch(P){case"right":r.current.x=(r.current.x-l+e)%e;break;case"left":r.current.x=(r.current.x+l+e)%e;break;case"up":r.current.y=(r.current.y+l+c)%c;break;case"down":r.current.y=(r.current.y-l+c)%c;break;case"diagonal":r.current.x=(r.current.x-l+e)%e,r.current.y=(r.current.y-l+c)%c;break}T(),A(),j.current=requestAnimationFrame(H)},T=()=>{const l=new Map;if(o.current&&l.set(`${o.current.x},${o.current.y}`,1),y>0)for(let e=0;e<p.current.length;e++){const c=p.current[e],u=`${c.x},${c.y}`;l.has(u)||l.set(u,(p.current.length-e)/(p.current.length+1))}for(const[e]of l)M.current.has(e)||M.current.set(e,0);for(const[e,c]of M.current){const u=l.get(e)||0,h=c+(u-c)*.15;h<.005?M.current.delete(e):M.current.set(e,h)}},K=l=>{const e=s.getBoundingClientRect(),c=l.clientX-e.left,u=l.clientY-e.top;if(Y){const h=Math.floor(r.current.x/w),d=(r.current.x%w+w)%w,f=(r.current.y%m+m)%m,g=c-d,i=u-f,a=Math.round(g/w),x=(a+h)%2!==0?m/2:0,R=Math.round((i-x)/m);(!o.current||o.current.x!==a||o.current.y!==R)&&(o.current&&y>0&&(p.current.unshift({...o.current}),p.current.length>y&&(p.current.length=y)),o.current={x:a,y:R})}else if(E){const h=t/2,d=(r.current.x%h+h)%h,f=(r.current.y%t+t)%t,g=c-d,i=u-f,a=Math.round(g/h),x=Math.floor(i/t);(!o.current||o.current.x!==a||o.current.y!==x)&&(o.current&&y>0&&(p.current.unshift({...o.current}),p.current.length>y&&(p.current.length=y)),o.current={x:a,y:x})}else if(X==="circle"){const h=(r.current.x%t+t)%t,d=(r.current.y%t+t)%t,f=c-h,g=u-d,i=Math.round(f/t),a=Math.round(g/t);(!o.current||o.current.x!==i||o.current.y!==a)&&(o.current&&y>0&&(p.current.unshift({...o.current}),p.current.length>y&&(p.current.length=y)),o.current={x:i,y:a})}else{const h=(r.current.x%t+t)%t,d=(r.current.y%t+t)%t,f=c-h,g=u-d,i=Math.floor(f/t),a=Math.floor(g/t);(!o.current||o.current.x!==i||o.current.y!==a)&&(o.current&&y>0&&(p.current.unshift({...o.current}),p.current.length>y&&(p.current.length=y)),o.current={x:i,y:a})}},B=()=>{o.current&&y>0&&(p.current.unshift({...o.current}),p.current.length>y&&(p.current.length=y)),o.current=null};return s.addEventListener("mousemove",K),s.addEventListener("mouseleave",B),j.current=requestAnimationFrame(H),()=>{window.removeEventListener("resize",V),cancelAnimationFrame(j.current),s.removeEventListener("mousemove",K),s.removeEventListener("mouseleave",B)}},[P,L,k,b,t,X,y]),q.jsx("canvas",{ref:_,className:`${z["shapegrid-canvas"]} ${Q}`})};J.__docgenInfo={description:"",methods:[],displayName:"ShapeGrid",props:{direction:{defaultValue:{value:"'right'",computed:!1},required:!1},speed:{defaultValue:{value:"1",computed:!1},required:!1},borderColor:{defaultValue:{value:"'#999'",computed:!1},required:!1},squareSize:{defaultValue:{value:"40",computed:!1},required:!1},hoverFillColor:{defaultValue:{value:"'#222'",computed:!1},required:!1},shape:{defaultValue:{value:"'square'",computed:!1},required:!1},hoverTrailAmount:{defaultValue:{value:"0",computed:!1},required:!1},className:{defaultValue:{value:"''",computed:!1},required:!1}}};const nt={title:"ReactBits/Backgrounds/ShapeGrid",component:J,parameters:{layout:"fullscreen"},tags:["autodocs"]},$={args:{direction:"right",speed:1,borderColor:"#999",squareSize:40,hoverFillColor:"#222",shape:"square",hoverTrailAmount:0}};var W,D,F;$.parameters={...$.parameters,docs:{...(W=$.parameters)==null?void 0:W.docs,source:{originalSource:`{
+  args: {
+    direction: 'right',
+    speed: 1,
+    borderColor: '#999',
+    squareSize: 40,
+    hoverFillColor: '#222',
+    shape: 'square',
+    hoverTrailAmount: 0
+  }
+}`,...(F=(D=$.parameters)==null?void 0:D.docs)==null?void 0:F.source}}};const ct=["Default"];export{$ as Default,ct as __namedExportsOrder,nt as default};

package/storybook-static/assets/ShinyText-D0_UmCBv.css

@@ -0,0 +1 @@
+._shiny-text_183zx_1{display:inline-block}