@stfrigerio/sito-template 0.1.57 → 0.1.59

package/storybook-static/assets/QuantifiableHabitsChart-Bam6n9X_.css

@@ -1 +0,0 @@
-._container_1dsyv_1{background:var(--color-background-secondary);border-radius:var(--radius-lg);padding:var(--spacing-xl);display:flex;flex-direction:column;align-items:center}._controls_1dsyv_10{display:flex;justify-content:center;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-xl)}._viewToggle_1dsyv_18{display:flex;gap:4px;background:var(--color-background-tertiary);padding:4px;border-radius:12px;border:1px solid var(--color-border)}._viewButton_1dsyv_27{display:flex;align-items:center;gap:6px;padding:8px 12px;background:transparent;border:none;border-radius:8px;color:var(--color-text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;position:relative}._viewButton_1dsyv_27:hover{background:var(--color-surface-hover);transform:translateY(-1px)}._viewButton_1dsyv_27._active_1dsyv_48{background:var(--color-primary);color:var(--color-text-inverse);box-shadow:0 4px 12px #d4af374d}._viewIcon_1dsyv_54{font-size:16px;display:inline-block}._viewLabel_1dsyv_59{display:inline-block}@media (max-width: 640px){._viewLabel_1dsyv_59{display:none}}._aggregationToggle_1dsyv_69{display:flex;gap:4px;background:var(--color-background-tertiary);padding:4px;border-radius:12px;border:1px solid var(--color-border)}._aggregationButton_1dsyv_78{display:flex;align-items:center;gap:6px;padding:8px 12px;background:transparent;border:none;border-radius:8px;color:var(--color-text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;position:relative}._aggregationButton_1dsyv_78:hover{background:var(--color-surface-hover);transform:translateY(-1px)}._aggregationButton_1dsyv_78._active_1dsyv_48{background:var(--color-accent);color:var(--color-text-inverse);box-shadow:0 4px 12px #d4af374d}._aggregationIcon_1dsyv_105{font-size:16px;display:inline-block}._aggregationLabel_1dsyv_110{display:inline-block}@media (max-width: 640px){._aggregationLabel_1dsyv_110{display:none}}._legend_1dsyv_120{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--spacing-xl);padding:12px;background:var(--color-background-tertiary);border-radius:12px;border:1px solid var(--color-border);justify-content:center}._compactLegend_1dsyv_132{gap:4px;padding:6px 8px}._compactLegend_1dsyv_132 ._legendItem_1dsyv_137{padding:3px 8px;gap:4px}._compactLegend_1dsyv_132 ._legendEmoji_1dsyv_142{font-size:14px}._compactLegend_1dsyv_132 ._legendLabel_1dsyv_146{font-size:11px}._legendItem_1dsyv_137{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--color-background-secondary);border:2px solid var(--border-primary);border-radius:20px;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #00000014;position:relative;overflow:hidden}._legendItem_1dsyv_137:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,transparent,var(--color-primary-lighter));opacity:0;transition:opacity .2s ease}._legendItem_1dsyv_137:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026;border-color:var(--color-primary)}._legendItem_1dsyv_137:hover:before{opacity:1}._legendItem_1dsyv_137._inactive_1dsyv_187{opacity:.4;background:var(--color-background-tertiary)}._legendItem_1dsyv_137._inactive_1dsyv_187:hover{opacity:.6}._legendItem_1dsyv_137._inactive_1dsyv_187 ._legendColor_1dsyv_196{background:var(--color-text-tertiary)!important}._legendEmoji_1dsyv_142{font-size:18px;display:inline-block;animation:_bounce_1dsyv_1 2s infinite;animation-delay:var(--animation-delay, 0s)}@keyframes _bounce_1dsyv_1{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}._legendColor_1dsyv_196{width:12px;height:12px;border-radius:50%;transition:all .2s ease;box-shadow:0 2px 4px #0003;position:relative}._legendItem_1dsyv_137:hover ._legendColor_1dsyv_196{transform:scale(1.2)}._legendLabel_1dsyv_146{font-size:13px;font-weight:500;color:var(--color-text);position:relative;z-index:1}._chart_1dsyv_233{display:block;margin:0 auto}._gridLine_1dsyv_238{stroke:var(--color-border);stroke-opacity:.15;stroke-dasharray:4,4}._line_1dsyv_244{fill:none;stroke-width:2.5;transition:opacity .3s ease;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}._xAxis_1dsyv_251,._yAxis_1dsyv_252{color:var(--color-text-secondary);font-size:11px;font-weight:500}._xAxis_1dsyv_251 line,._xAxis_1dsyv_251 path,._yAxis_1dsyv_252 line,._yAxis_1dsyv_252 path{stroke:var(--color-border);stroke-opacity:.3}._xAxis_1dsyv_251 text,._yAxis_1dsyv_252 text{fill:var(--color-text-secondary)}._dataPoint_1dsyv_271{transition:all .3s ease;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}._dataPoint_1dsyv_271:hover{r:6;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}._tooltip_1dsyv_281{position:fixed;pointer-events:none;background:var(--color-background-primary);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--color-border);border-radius:12px;padding:12px 16px;font-size:13px;font-weight:500;z-index:10000;box-shadow:0 0 0 1px var(--color-border),0 10px 20px #00000026,0 4px 8px #0000001a;transition:opacity .15s ease,transform .15s ease;opacity:0;transform:translateY(-8px) translate(-50%)}._tooltip_1dsyv_281._visible_1dsyv_302{opacity:1;transform:translateY(-4px) translate(-50%)}._tooltipHeader_1dsyv_307{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--color-border);font-weight:600;color:var(--color-text)}._tooltipEmoji_1dsyv_318{font-size:18px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.1))}._tooltipDot_1dsyv_323{width:10px;height:10px;border-radius:50%;box-shadow:0 2px 4px #0003}._tooltipInfo_1dsyv_330{display:flex;flex-direction:column;gap:6px}._tooltipDate_1dsyv_336{color:var(--color-text-secondary);font-size:12px;font-weight:500}._tooltipValue_1dsyv_342{color:var(--color-text);font-weight:700;font-size:16px;display:flex;align-items:baseline;gap:6px}

package/storybook-static/assets/SearchBar.stories-CGaj__zF.js

@@ -1,169 +0,0 @@
-import{r as c,j as r}from"./iframe-B8pH-Lvr.js";import{S as Ne}from"./search-2YqBkJlG.js";import{F as Ee}from"./folder-BjriMpXc.js";import{U as Pe}from"./users-aNPxMiig.js";import{c as B}from"./createLucideIcon-BNUG5osq.js";import{m as G}from"./proxy-BA3VZtN5.js";import{X as ze}from"./x-BC8LCdn9.js";import{A as Xe}from"./index-DBfrIdYd.js";import"./preload-helper-C1FmrZbK.js";import"./MotionConfigContext-D5hZdVGx.js";/**
- * @license lucide-react v0.539.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */const Ye=[["path",{d:"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20",key:"k3hazp"}]],qe=B("book",Ye);/**
- * @license lucide-react v0.539.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */const Ze=[["path",{d:"M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z",key:"18887p"}]],Me=B("message-square",Ze);/**
- * @license lucide-react v0.539.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */const et=[["path",{d:"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2",key:"1yyitq"}],["circle",{cx:"9",cy:"7",r:"4",key:"nufk8"}],["line",{x1:"19",x2:"19",y1:"8",y2:"14",key:"1bvyxn"}],["line",{x1:"22",x2:"16",y1:"11",y2:"11",key:"1shjgl"}]],Ae=B("user-plus",et),tt="_searchContainer_on5sv_1",rt="_searchInputWrapper_on5sv_7",st="_searchIcon_on5sv_23",nt="_searchInput_on5sv_7",at="_clearButton_on5sv_62",ot="_filterSelect_on5sv_82",lt="_resultsDropdown_on5sv_98",ct="_loadingState_on5sv_112",it="_emptyState_on5sv_113",ut="_spinner_on5sv_123",dt="_resultsGroups_on5sv_138",pt="_resultGroup_on5sv_142",mt="_groupHeader_on5sv_150",ht="_groupIcon_on5sv_161",gt="_groupTitle_on5sv_166",yt="_groupCount_on5sv_170",St="_groupResults_on5sv_177",ft="_resultItem_on5sv_181",Ct="_highlighted_on5sv_198",wt="_resultTitle_on5sv_205",bt="_resultSubtitle_on5sv_209",vt="_resultMeta_on5sv_213",kt="_resultContent_on5sv_217",_t="_highlight_on5sv_198",s={searchContainer:tt,searchInputWrapper:rt,searchIcon:st,searchInput:nt,clearButton:at,filterSelect:ot,resultsDropdown:lt,loadingState:ct,emptyState:it,spinner:ut,resultsGroups:dt,resultGroup:pt,groupHeader:mt,groupIcon:ht,groupTitle:gt,groupCount:yt,groupResults:St,resultItem:ft,highlighted:Ct,resultTitle:wt,resultSubtitle:bt,resultMeta:vt,resultContent:kt,highlight:_t},xt=[{value:"all",label:"All",icon:Ne},{value:"projects",label:"Projects",icon:Ee},{value:"clients",label:"Clients",icon:Pe},{value:"contacts",label:"Contacts",icon:qe},{value:"interactions",label:"Interactions",icon:Me},{value:"team",label:"Team",icon:Ae}],Rt={projects:Ee,clients:Pe,contacts:qe,interactions:Me,team:Ae},Fe=({className:e,placeholder:h="Search (Ctrl+Space)...",onSearch:d,onResultClick:l,onClear:m,debounceDelay:o=300,minSearchLength:g=2,showFilter:x=!0,enableKeyboardShortcut:U=!0,filterOptions:He,entityIcons:Ge})=>{var z;const W=He??xt,Be=Ge??Rt,[S,A]=c.useState(""),[F,Ue]=c.useState(((z=W[0])==null?void 0:z.value)??"all"),[i,w]=c.useState([]),[We,Q]=c.useState(!1),[v,p]=c.useState(!1),[b,y]=c.useState(-1),O=c.useRef(null),k=c.useRef(null),_=c.useRef(),H=c.useRef(null),K=c.useCallback(async(t,n)=>{if(t.trim().length<g){w([]),p(!1);return}if(!d){w([]),p(!1);return}Q(!0);try{const a=await d(t,n);w(a),p(a.length>0),y(-1)}catch(a){console.error("Search error:",a),w([]),p(!1)}finally{Q(!1)}},[d,g]);c.useEffect(()=>(_.current&&clearTimeout(_.current),S.trim()?_.current=setTimeout(()=>{K(S,F)},o):(w([]),p(!1)),()=>{_.current&&clearTimeout(_.current)}),[S,F,K,o]),c.useEffect(()=>{const t=n=>{O.current&&!O.current.contains(n.target)&&(p(!1),y(-1))};return document.addEventListener("mousedown",t),()=>document.removeEventListener("mousedown",t)},[]),c.useEffect(()=>{if(!U)return;const t=n=>{var a,u;(n.ctrlKey||n.metaKey)&&n.code==="Space"&&(n.preventDefault(),(a=k.current)==null||a.focus(),(u=k.current)==null||u.select())};return document.addEventListener("keydown",t),()=>document.removeEventListener("keydown",t)},[U]),c.useEffect(()=>{if(b>=0&&H.current){const t=H.current.querySelector(`[data-result-index="${b}"]`);t&&t.scrollIntoView({behavior:"smooth",block:"nearest"})}},[b]);const Qe=t=>{var n;switch(t.key){case"ArrowDown":t.preventDefault(),!v&&i.length>0?(p(!0),y(0)):i.length>0&&y(a=>a<i.length-1?a+1:0);break;case"ArrowUp":t.preventDefault(),v&&i.length>0&&y(a=>a>0?a-1:i.length-1);break;case"Enter":if(t.preventDefault(),!v&&i.length>0)p(!0),y(0);else if(i.length>0){const a=b>=0?b:0;a<i.length&&V(i[a])}break;case"Escape":p(!1),y(-1),(n=k.current)==null||n.blur();break}},V=t=>{l&&l(t),A(""),p(!1),y(-1)},Ke=()=>{var t;A(""),w([]),p(!1),y(-1),(t=k.current)==null||t.focus(),m&&m()},Ve=i.reduce((t,n)=>(t[n.type]||(t[n.type]=[]),t[n.type].push(n),t),{}),J=(t,n)=>{if(!t||!n.trim())return t||"";const a=new RegExp(`(${n.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")})`,"gi");return t.split(a).map((C,Je)=>a.test(C)?r.jsx("mark",{className:s.highlight,children:C},Je):C)};return r.jsxs("div",{ref:O,className:`${s.searchContainer} ${e||""}`,children:[r.jsxs("div",{className:s.searchInputWrapper,children:[r.jsx(Ne,{className:s.searchIcon}),r.jsx("input",{ref:k,type:"text",value:S,onChange:t=>A(t.target.value),onKeyDown:Qe,onFocus:()=>S.trim()&&i.length>0&&p(!0),placeholder:h,className:s.searchInput,"aria-label":"Search","aria-expanded":v,"aria-controls":"search-results","aria-autocomplete":"list"}),S&&r.jsx(G.button,{className:s.clearButton,onClick:Ke,whileHover:{scale:1.1},whileTap:{scale:.9},initial:{opacity:0,scale:.8},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.8},children:r.jsx(ze,{})}),x&&r.jsx("select",{value:F,onChange:t=>Ue(t.target.value),className:s.filterSelect,"aria-label":"Filter search results",children:W.map(t=>r.jsx("option",{value:t.value,children:t.label},t.value))})]}),r.jsx(Xe,{children:v&&r.jsx(G.div,{ref:H,id:"search-results",className:s.resultsDropdown,initial:{opacity:0,y:-10},animate:{opacity:1,y:0},exit:{opacity:0,y:-10},transition:{duration:.2},children:We?r.jsxs("div",{className:s.loadingState,children:[r.jsx("div",{className:s.spinner}),r.jsx("span",{children:"Searching..."})]}):i.length===0?r.jsxs("div",{className:s.emptyState,children:['No results found for "',S,'"']}):r.jsx("div",{className:s.resultsGroups,children:Object.entries(Ve).map(([t,n])=>{const a=Be[t];return r.jsxs("div",{className:s.resultGroup,children:[r.jsxs("div",{className:s.groupHeader,children:[a&&r.jsx(a,{className:s.groupIcon}),r.jsx("span",{className:s.groupTitle,children:t.charAt(0).toUpperCase()+t.slice(1)}),r.jsx("span",{className:s.groupCount,children:n.length})]}),r.jsx("div",{className:s.groupResults,children:n.map(u=>{const C=i.indexOf(u);return r.jsxs(G.button,{"data-result-index":C,className:`${s.resultItem} ${b===C?s.highlighted:""}`,onClick:()=>V(u),whileHover:{x:4},onMouseEnter:()=>y(C),children:[r.jsxs("div",{className:s.resultContent,children:[r.jsx("div",{className:s.resultTitle,children:J(u.title||"Untitled",S)}),u.subtitle&&r.jsx("div",{className:s.resultSubtitle,children:J(u.subtitle,S)})]}),u.meta&&r.jsx("div",{className:s.resultMeta,children:u.meta})]},`${u.type}-${u.id}`)})})]},t)})})})})]})};Fe.__docgenInfo={description:"",methods:[],displayName:"SearchBar",props:{className:{required:!1,tsType:{name:"string"},description:""},placeholder:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:'"Search (Ctrl+Space)..."',computed:!1}},onSearch:{required:!1,tsType:{name:"signature",type:"function",raw:"(query: string, filter: string) => Promise<SearchResult[]>",signature:{arguments:[{type:{name:"string"},name:"query"},{type:{name:"string"},name:"filter"}],return:{name:"Promise",elements:[{name:"Array",elements:[{name:"SearchResult"}],raw:"SearchResult[]"}],raw:"Promise<SearchResult[]>"}}},description:""},onResultClick:{required:!1,tsType:{name:"signature",type:"function",raw:"(result: SearchResult) => void",signature:{arguments:[{type:{name:"SearchResult"},name:"result"}],return:{name:"void"}}},description:""},onClear:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:""},debounceDelay:{required:!1,tsType:{name:"number"},description:"",defaultValue:{value:"300",computed:!1}},minSearchLength:{required:!1,tsType:{name:"number"},description:"",defaultValue:{value:"2",computed:!1}},showFilter:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}},enableKeyboardShortcut:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}},filterOptions:{required:!1,tsType:{name:"Array",elements:[{name:"FilterOption"}],raw:"FilterOption[]"},description:""},entityIcons:{required:!1,tsType:{name:"signature",type:"object",raw:"{ [key: string]: React.ElementType }",signature:{properties:[{key:{name:"string"},value:{name:"ReactElementType",raw:"React.ElementType",required:!0}}]}},description:""}}};const Mt={title:"Molecules/SearchBar",component:Fe,parameters:{layout:"centered",docs:{description:{component:"A powerful search bar component with filtering, keyboard navigation, and grouped results display."}}},tags:["autodocs"],argTypes:{placeholder:{control:"text",description:"Placeholder text for the search input"},debounceDelay:{control:{type:"number",min:0,max:1e3,step:50},description:"Delay in ms before triggering search"},minSearchLength:{control:{type:"number",min:1,max:5},description:"Minimum characters required to trigger search"},showFilter:{control:"boolean",description:"Show/hide the filter dropdown"},enableKeyboardShortcut:{control:"boolean",description:"Enable Ctrl+Space to focus search"}}},Oe=[{id:"1",type:"projects",title:"Website Redesign",subtitle:"E-commerce Platform",meta:"Active"},{id:"2",type:"projects",title:"Mobile App Development",subtitle:"iOS & Android",meta:"In Progress"},{id:"3",type:"projects",title:"API Integration",subtitle:"Payment Gateway",meta:"Completed"},{id:"4",type:"projects",title:"Database Migration",subtitle:"PostgreSQL to MongoDB",meta:"Planning"},{id:"5",type:"clients",title:"Acme Corporation",subtitle:"Technology Partner",meta:"Premium"},{id:"6",type:"clients",title:"Global Industries",subtitle:"Manufacturing",meta:"Standard"},{id:"7",type:"clients",title:"StartUp Inc",subtitle:"SaaS Platform",meta:"Growth"},{id:"8",type:"contacts",title:"John Doe",subtitle:"john@example.com",meta:"CEO"},{id:"9",type:"contacts",title:"Jane Smith",subtitle:"jane@example.com",meta:"CTO"},{id:"10",type:"contacts",title:"Bob Johnson",subtitle:"bob@example.com",meta:"Developer"},{id:"11",type:"team",title:"Alice Williams",subtitle:"Frontend Developer",meta:"Senior"},{id:"12",type:"team",title:"Charlie Brown",subtitle:"Backend Developer",meta:"Mid-level"},{id:"13",type:"team",title:"Diana Prince",subtitle:"UI/UX Designer",meta:"Lead"},{id:"14",type:"interactions",title:"Meeting with Client",subtitle:"Discussed project scope",meta:"2 days ago"},{id:"15",type:"interactions",title:"Code Review",subtitle:"PR #123 approved",meta:"Yesterday"},{id:"16",type:"interactions",title:"Sprint Planning",subtitle:"Q4 roadmap defined",meta:"Last week"}],f=async(e,h)=>{await new Promise(l=>setTimeout(l,500));const d=e.toLowerCase();return Oe.filter(l=>{var m,o;return h!=="all"&&l.type!==h?!1:((m=l.title)==null?void 0:m.toLowerCase().includes(d))||((o=l.subtitle)==null?void 0:o.toLowerCase().includes(d))})},R={args:{placeholder:"Search...",onSearch:f,onResultClick:e=>{console.log("Clicked result:",e),alert(`Selected: ${e.title}`)}}},I={args:{placeholder:"Search with filter...",showFilter:!0,onSearch:f,onResultClick:e=>{console.log("Clicked result:",e),alert(`Selected: ${e.title}`)}}},$={args:{placeholder:"Search without filter...",showFilter:!1,onSearch:f,onResultClick:e=>{console.log("Clicked result:",e),alert(`Selected: ${e.title}`)}}},j={args:{placeholder:"Fast search (100ms debounce)...",debounceDelay:100,onSearch:f,onResultClick:e=>{console.log("Clicked result:",e),alert(`Selected: ${e.title}`)}}},D={args:{placeholder:"Slow search (1000ms debounce)...",debounceDelay:1e3,onSearch:f,onResultClick:e=>{console.log("Clicked result:",e),alert(`Selected: ${e.title}`)}}},T={args:{placeholder:"Type at least 3 characters...",minSearchLength:3,onSearch:f,onResultClick:e=>{console.log("Clicked result:",e),alert(`Selected: ${e.title}`)}}},L={args:{placeholder:"Search (no keyboard shortcut)...",enableKeyboardShortcut:!1,onSearch:f,onResultClick:e=>{console.log("Clicked result:",e),alert(`Selected: ${e.title}`)}}},N={args:{placeholder:"Search (always empty)...",onSearch:async()=>(await new Promise(e=>setTimeout(e,500)),[]),onResultClick:e=>{console.log("Clicked result:",e)}}},E={args:{placeholder:"Search (will error)...",onSearch:async()=>{throw await new Promise(e=>setTimeout(e,500)),new Error("Search failed!")},onResultClick:e=>{console.log("Clicked result:",e)}}},P={args:{placeholder:"Instant search (no debounce)...",debounceDelay:0,minSearchLength:1,onSearch:async(e,h)=>{const d=e.toLowerCase();return Oe.filter(l=>{var m,o;return h!=="all"&&l.type!==h?!1:((m=l.title)==null?void 0:m.toLowerCase().includes(d))||((o=l.subtitle)==null?void 0:o.toLowerCase().includes(d))})},onResultClick:e=>{console.log("Clicked result:",e),alert(`Selected: ${e.title}`)}}},q={args:{placeholder:"Search with custom actions...",onSearch:f,onResultClick:e=>{console.log("Custom action for:",e),alert(`Custom action: ${e.type} - ${e.title}`)},onClear:()=>{console.log("Search cleared!"),alert("Search was cleared")}}},M={args:{placeholder:"Search large dataset...",onSearch:async(e,h)=>{await new Promise(o=>setTimeout(o,300));const d=["projects","clients","contacts","team","interactions"],l=[];for(let o=0;o<100;o++){const g=d[o%d.length];(h==="all"||h===g)&&l.push({id:`large-${o}`,type:g,title:`${g.charAt(0).toUpperCase()+g.slice(1)} Item ${o}`,subtitle:`Description for item ${o} containing ${e}`,meta:`Meta ${o}`})}const m=e.toLowerCase();return l.filter(o=>{var g,x;return((g=o.title)==null?void 0:g.toLowerCase().includes(m))||((x=o.subtitle)==null?void 0:x.toLowerCase().includes(m))}).slice(0,20)},onResultClick:e=>{console.log("Selected from large dataset:",e),alert(`Selected: ${e.title}`)}}};var X,Y,Z;R.parameters={...R.parameters,docs:{...(X=R.parameters)==null?void 0:X.docs,source:{originalSource:`{
-  args: {
-    placeholder: 'Search...',
-    onSearch: mockSearch,
-    onResultClick: result => {
-      console.log('Clicked result:', result);
-      alert(\`Selected: \${result.title}\`);
-    }
-  }
-}`,...(Z=(Y=R.parameters)==null?void 0:Y.docs)==null?void 0:Z.source}}};var ee,te,re;I.parameters={...I.parameters,docs:{...(ee=I.parameters)==null?void 0:ee.docs,source:{originalSource:`{
-  args: {
-    placeholder: 'Search with filter...',
-    showFilter: true,
-    onSearch: mockSearch,
-    onResultClick: result => {
-      console.log('Clicked result:', result);
-      alert(\`Selected: \${result.title}\`);
-    }
-  }
-}`,...(re=(te=I.parameters)==null?void 0:te.docs)==null?void 0:re.source}}};var se,ne,ae;$.parameters={...$.parameters,docs:{...(se=$.parameters)==null?void 0:se.docs,source:{originalSource:`{
-  args: {
-    placeholder: 'Search without filter...',
-    showFilter: false,
-    onSearch: mockSearch,
-    onResultClick: result => {
-      console.log('Clicked result:', result);
-      alert(\`Selected: \${result.title}\`);
-    }
-  }
-}`,...(ae=(ne=$.parameters)==null?void 0:ne.docs)==null?void 0:ae.source}}};var oe,le,ce;j.parameters={...j.parameters,docs:{...(oe=j.parameters)==null?void 0:oe.docs,source:{originalSource:`{
-  args: {
-    placeholder: 'Fast search (100ms debounce)...',
-    debounceDelay: 100,
-    onSearch: mockSearch,
-    onResultClick: result => {
-      console.log('Clicked result:', result);
-      alert(\`Selected: \${result.title}\`);
-    }
-  }
-}`,...(ce=(le=j.parameters)==null?void 0:le.docs)==null?void 0:ce.source}}};var ie,ue,de;D.parameters={...D.parameters,docs:{...(ie=D.parameters)==null?void 0:ie.docs,source:{originalSource:`{
-  args: {
-    placeholder: 'Slow search (1000ms debounce)...',
-    debounceDelay: 1000,
-    onSearch: mockSearch,
-    onResultClick: result => {
-      console.log('Clicked result:', result);
-      alert(\`Selected: \${result.title}\`);
-    }
-  }
-}`,...(de=(ue=D.parameters)==null?void 0:ue.docs)==null?void 0:de.source}}};var pe,me,he;T.parameters={...T.parameters,docs:{...(pe=T.parameters)==null?void 0:pe.docs,source:{originalSource:`{
-  args: {
-    placeholder: 'Type at least 3 characters...',
-    minSearchLength: 3,
-    onSearch: mockSearch,
-    onResultClick: result => {
-      console.log('Clicked result:', result);
-      alert(\`Selected: \${result.title}\`);
-    }
-  }
-}`,...(he=(me=T.parameters)==null?void 0:me.docs)==null?void 0:he.source}}};var ge,ye,Se;L.parameters={...L.parameters,docs:{...(ge=L.parameters)==null?void 0:ge.docs,source:{originalSource:`{
-  args: {
-    placeholder: 'Search (no keyboard shortcut)...',
-    enableKeyboardShortcut: false,
-    onSearch: mockSearch,
-    onResultClick: result => {
-      console.log('Clicked result:', result);
-      alert(\`Selected: \${result.title}\`);
-    }
-  }
-}`,...(Se=(ye=L.parameters)==null?void 0:ye.docs)==null?void 0:Se.source}}};var fe,Ce,we;N.parameters={...N.parameters,docs:{...(fe=N.parameters)==null?void 0:fe.docs,source:{originalSource:`{
-  args: {
-    placeholder: 'Search (always empty)...',
-    onSearch: async () => {
-      await new Promise(resolve => setTimeout(resolve, 500));
-      return [];
-    },
-    onResultClick: result => {
-      console.log('Clicked result:', result);
-    }
-  }
-}`,...(we=(Ce=N.parameters)==null?void 0:Ce.docs)==null?void 0:we.source}}};var be,ve,ke;E.parameters={...E.parameters,docs:{...(be=E.parameters)==null?void 0:be.docs,source:{originalSource:`{
-  args: {
-    placeholder: 'Search (will error)...',
-    onSearch: async () => {
-      await new Promise(resolve => setTimeout(resolve, 500));
-      throw new Error('Search failed!');
-    },
-    onResultClick: result => {
-      console.log('Clicked result:', result);
-    }
-  }
-}`,...(ke=(ve=E.parameters)==null?void 0:ve.docs)==null?void 0:ke.source}}};var _e,xe,Re;P.parameters={...P.parameters,docs:{...(_e=P.parameters)==null?void 0:_e.docs,source:{originalSource:`{
-  args: {
-    placeholder: 'Instant search (no debounce)...',
-    debounceDelay: 0,
-    minSearchLength: 1,
-    onSearch: async (query: string, filter: string) => {
-      // Instant response, no delay
-      const lowerQuery = query.toLowerCase();
-      return mockSearchData.filter(item => {
-        if (filter !== 'all' && item.type !== filter) {
-          return false;
-        }
-        return item.title?.toLowerCase().includes(lowerQuery) || item.subtitle?.toLowerCase().includes(lowerQuery);
-      });
-    },
-    onResultClick: result => {
-      console.log('Clicked result:', result);
-      alert(\`Selected: \${result.title}\`);
-    }
-  }
-}`,...(Re=(xe=P.parameters)==null?void 0:xe.docs)==null?void 0:Re.source}}};var Ie,$e,je;q.parameters={...q.parameters,docs:{...(Ie=q.parameters)==null?void 0:Ie.docs,source:{originalSource:`{
-  args: {
-    placeholder: 'Search with custom actions...',
-    onSearch: mockSearch,
-    onResultClick: result => {
-      console.log('Custom action for:', result);
-      alert(\`Custom action: \${result.type} - \${result.title}\`);
-    },
-    onClear: () => {
-      console.log('Search cleared!');
-      alert('Search was cleared');
-    }
-  }
-}`,...(je=($e=q.parameters)==null?void 0:$e.docs)==null?void 0:je.source}}};var De,Te,Le;M.parameters={...M.parameters,docs:{...(De=M.parameters)==null?void 0:De.docs,source:{originalSource:`{
-  args: {
-    placeholder: 'Search large dataset...',
-    onSearch: async (query: string, filter: string) => {
-      await new Promise(resolve => setTimeout(resolve, 300));
-
-      // Generate a large dataset
-      const types = ['projects', 'clients', 'contacts', 'team', 'interactions'];
-      const results: SearchResult[] = [];
-      for (let i = 0; i < 100; i++) {
-        const type = types[i % types.length];
-        if (filter === 'all' || filter === type) {
-          results.push({
-            id: \`large-\${i}\`,
-            type,
-            title: \`\${type.charAt(0).toUpperCase() + type.slice(1)} Item \${i}\`,
-            subtitle: \`Description for item \${i} containing \${query}\`,
-            meta: \`Meta \${i}\`
-          });
-        }
-      }
-      const lowerQuery = query.toLowerCase();
-      return results.filter(item => item.title?.toLowerCase().includes(lowerQuery) || item.subtitle?.toLowerCase().includes(lowerQuery)).slice(0, 20); // Limit to 20 results for performance
-    },
-    onResultClick: result => {
-      console.log('Selected from large dataset:', result);
-      alert(\`Selected: \${result.title}\`);
-    }
-  }
-}`,...(Le=(Te=M.parameters)==null?void 0:Te.docs)==null?void 0:Le.source}}};const At=["Default","WithFilter","WithoutFilter","CustomDebounce","LongDebounce","MinimumLength","NoKeyboardShortcut","EmptyResults","ErrorHandling","InstantSearch","WithCustomActions","LargeDataset"];export{j as CustomDebounce,R as Default,N as EmptyResults,E as ErrorHandling,P as InstantSearch,M as LargeDataset,D as LongDebounce,T as MinimumLength,L as NoKeyboardShortcut,q as WithCustomActions,I as WithFilter,$ as WithoutFilter,At as __namedExportsOrder,Mt as default};

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

@@ -1,282 +0,0 @@
-import{j as e,r as C}from"./iframe-B8pH-Lvr.js";import{S as r}from"./SearchableDropdown-4HgWY0Ck.js";import{U as q}from"./users-aNPxMiig.js";import{S as Q}from"./search-2YqBkJlG.js";import"./preload-helper-C1FmrZbK.js";import"./proxy-BA3VZtN5.js";import"./MotionConfigContext-D5hZdVGx.js";import"./chevron-down-OhqRl4eJ.js";import"./createLucideIcon-BNUG5osq.js";import"./index-DBfrIdYd.js";import"./check-Cty-Z1Ib.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.stories-DByYKCGI.js

@@ -1,129 +0,0 @@
-import{r as w,j as o}from"./iframe-B8pH-Lvr.js";import{S as l}from"./SelectInput-DvSeeIw5.js";import"./preload-helper-C1FmrZbK.js";import"./useSound-Bk2W5gkV.js";import"./chevron-down-OhqRl4eJ.js";import"./createLucideIcon-BNUG5osq.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};