@soyfri/shared-library 2.0.0-beta.1 → 2.0.0-beta.10

package/storybook-static/assets/Autocomplete.stories-CXJm8FOT.js

@@ -0,0 +1,788 @@
+import{j as r}from"./jsx-runtime-D_zvdyIk.js";import{r as l}from"./iframe-BAJnc_4n.js";import{b as mo,C as go,u as fo}from"./formField.sx-DMCmZIAa.js";import{r as ho}from"./resolvePreset-CN2aOJJr.js";import{L as bo,C as xo}from"./Clear-4kYcKvT3.js";import{C as Dt}from"./Chip-C3vKPpzR.js";import{A as Zt}from"./Avatar-NbFfkZws.js";import{B as E}from"./Box-BnhEcfFm.js";import{C as vo}from"./CircularProgress-DC7ZNWwl.js";import{T as J}from"./Typography-BgntX2Ep.js";import{u as yo}from"./useTheme-BmOJK7ra.js";import{a as Ao,g as So,u as Co,s as Q,c as jt,b as eo,d as Oo,m as Me}from"./DefaultPropsProvider-BGoQxtDa.js";import{A as Io,f as De,i as Ie,o as Wt,a as kt}from"./Select-DJh2biEb.js";import{C as Po}from"./Close-Cy8nELYU.js";import{u as Et}from"./useSlot-b6pXgp5_.js";import{u as wo}from"./useId-b4fZxjOL.js";import{u as $t}from"./useControlled-DsVh1a5j.js";import{u as To}from"./usePreviousProps-WR0rG4aR.js";import{u as lt}from"./useTimeout-DNjRaOWc.js";import{s as Ro}from"./Portal-Cj8XF9Lf.js";import{P as to}from"./Paper-SwQBhqI7.js";import{P as oo}from"./Popper-CnCTYXxy.js";import{I as no}from"./IconButton-9OYSTH58.js";import{T as Bo}from"./TextField-22T-xHBm.js";import{S as Ft}from"./Stack-D01OUIXi.js";import{B as Lo}from"./Button-DBpqmVB_.js";import"./preload-helper-PPVm8Dsz.js";import"./createSvgIcon-D_Gca4vA.js";import"./createSimplePaletteValueFilter-bm0fmN_7.js";import"./useForkRef-0ANIrxcF.js";import"./ButtonBase-qyaMEhe4.js";import"./emotion-react.browser.esm--g-C9cX9.js";import"./isFocusVisible-B8k4qzLc.js";import"./extendSxProp-CEpa30hT.js";import"./Menu-ClzfjLc3.js";import"./useSlotProps-C0uMfuBt.js";import"./ownerDocument-DW-IO8s5.js";import"./ownerWindow-HkKU3E4x.js";import"./debounce-Be36O1Ab.js";import"./Grow-8y4FglGK.js";import"./getReactElementRef-BQ3ANZdy.js";import"./index-CY7j4a7o.js";import"./index-BF3FAXTk.js";import"./mergeSlotProps-B0UBKBMe.js";import"./Modal-3okp9H2i.js";import"./Fade-Ll96CvH8.js";import"./isMuiElement-CTZSFcY5.js";import"./useThemeProps-DYtxXiUU.js";function Ht({array1:e,array2:n,parser:a=i=>i}){return e&&n&&e.length===n.length&&e.every((i,d)=>a(i)===a(n[d]))}function _t(e){return e.normalize("NFD").replace(/[\u0300-\u036f]/g,"")}function Vo(e={}){const{ignoreAccents:n=!0,ignoreCase:a=!0,limit:i,matchFrom:d="any",stringify:I,trim:y=!1}=e;return(S,{inputValue:B,getOptionLabel:x})=>{let C=y?B.trim():B;a&&(C=C.toLowerCase()),n&&(C=_t(C));const Y=C?S.filter(Pe=>{let $=(I||x)(Pe);return a&&($=$.toLowerCase()),n&&($=_t($)),d==="start"?$.startsWith(C):$.includes(C)}):S;return typeof i=="number"?Y.slice(0,i):Y}}const jo=Vo(),Gt=5,ko=e=>e.current!==null&&e.current.parentElement?.contains(document.activeElement),Eo=[];function Kt(e,n,a,i){if(n||e==null||i)return"";const d=a(e);return typeof d=="string"?d:""}function $o(e){const{unstable_isActiveElementInListbox:n=ko,unstable_classNamePrefix:a="Mui",autoComplete:i=!1,autoHighlight:d=!1,autoSelect:I=!1,blurOnSelect:y=!1,clearOnBlur:S=!e.freeSolo,clearOnEscape:B=!1,componentName:x="useAutocomplete",defaultValue:C=e.multiple?Eo:null,disableClearable:Y=!1,disableCloseOnSelect:Pe=!1,disabled:$,disabledItemsFocusable:fe=!1,disableListWrap:he=!1,filterOptions:Qe=jo,filterSelectedOptions:we=!1,freeSolo:U=!1,getOptionDisabled:q,getOptionKey:Xe,getOptionLabel:Te=o=>o.label??o,groupBy:Z,handleHomeEndKeys:Fe=!e.freeSolo,id:Ye,includeInputInList:be=!1,inputValue:Re,isOptionEqualToValue:ee=(o,t)=>o===t,multiple:g=!1,onChange:Be,onClose:Le,onHighlightChange:xe,onInputChange:N,onOpen:ie,open:Ne,openOnFocus:Ze=!1,options:qe,readOnly:W=!1,renderValue:j,selectOnFocus:ze=!e.freeSolo,value:ve}=e,D=wo(Ye);let f=Te;f=o=>{const t=Te(o);return typeof t!="string"?String(t):t};const M=l.useRef(!1),z=l.useRef(!0),v=l.useRef(null),T=l.useRef(null),[te,Ue]=l.useState(null),[k,X]=l.useState(-1),ye=d?0:-1,h=l.useRef(ye),ce=l.useRef(Kt(C??ve,g,f)).current,[u,We]=$t({controlled:ve,default:C,name:x}),[A,Ae]=$t({controlled:Re,default:ce,name:x,state:"inputValue"}),[Ve,et]=l.useState(!1),je=l.useCallback((o,t,s)=>{if(!(g?u.length<t.length:t!==null)&&!S)return;const p=Kt(t,g,f,j);A!==p&&(Ae(p),N&&N(o,p,s))},[f,A,g,N,Ae,S,u,j]),[oe,Se]=$t({controlled:Ne,default:!1,name:x,state:"open"}),[Nt,ke]=l.useState(!0),tt=!g&&u!=null&&A===f(u),F=oe&&!W,O=F?Qe(qe.filter(o=>!(we&&(g?u:[u]).some(t=>t!==null&&ee(o,t)))),{inputValue:tt&&Nt?"":A,getOptionLabel:f}):[],H=To({filteredOptions:O,value:u,inputValue:A});l.useEffect(()=>{const o=u!==H.value;Ve&&!o||U&&!o||je(null,u,"reset")},[u,je,Ve,H.value,U]);const ot=oe&&O.length>0&&!W,_=lt(o=>{if(o===-1)v.current.focus();else{const t=j?"data-item-index":"data-tag-index";te.querySelector(`[${t}="${o}"]`).focus()}});l.useEffect(()=>{g&&k>u.length-1&&(X(-1),_(-1))},[u,g,k,_]);function Ot(o,t){if(!T.current||o<0||o>=O.length)return-1;let s=o;for(;;){const c=T.current.querySelector(`[data-option-index="${s}"]`),p=fe?!1:!c||c.disabled||c.getAttribute("aria-disabled")==="true";if(c&&c.hasAttribute("tabindex")&&!p)return s;if(t==="next"?s=(s+1)%O.length:s=(s-1+O.length)%O.length,s===o)return-1}}const ne=lt(({event:o,index:t,reason:s})=>{if(h.current=t,t===-1?v.current.removeAttribute("aria-activedescendant"):v.current.setAttribute("aria-activedescendant",`${D}-option-${t}`),xe&&["mouse","keyboard","touch"].includes(s)&&xe(o,t===-1?null:O[t],s),!T.current)return;const c=T.current.querySelector(`[role="option"].${a}-focused`);c&&(c.classList.remove(`${a}-focused`),c.classList.remove(`${a}-focusVisible`));let p=T.current;if(T.current.getAttribute("role")!=="listbox"&&(p=T.current.parentElement.querySelector('[role="listbox"]')),!p)return;if(t===-1){p.scrollTop=0;return}const V=T.current.querySelector(`[data-option-index="${t}"]`);if(V&&(V.classList.add(`${a}-focused`),s==="keyboard"&&V.classList.add(`${a}-focusVisible`),p.scrollHeight>p.clientHeight&&s!=="mouse"&&s!=="touch")){const P=V,K=p.clientHeight+p.scrollTop,st=P.offsetTop+P.offsetHeight;st>K?p.scrollTop=st-p.clientHeight:P.offsetTop-P.offsetHeight*(Z?1.3:0)<p.scrollTop&&(p.scrollTop=P.offsetTop-P.offsetHeight*(Z?1.3:0))}}),G=lt(({event:o,diff:t,direction:s="next",reason:c})=>{if(!F)return;const V=Ot((()=>{const P=O.length-1;if(t==="reset")return ye;if(t==="start")return 0;if(t==="end")return P;const K=h.current+t;return K<0?K===-1&&be?-1:he&&h.current!==-1||Math.abs(t)>1?0:P:K>P?K===P+1&&be?-1:he||Math.abs(t)>1?P:0:K})(),s);if(ne({index:V,reason:c,event:o}),i&&t!=="reset")if(V===-1)v.current.value=A;else{const P=f(O[V]);v.current.value=P,P.toLowerCase().indexOf(A.toLowerCase())===0&&A.length>0&&v.current.setSelectionRange(A.length,P.length)}}),nt=!Ht({array1:H.filteredOptions,array2:O,parser:f}),It=()=>{const o=(t,s)=>{const c=t?f(t):"",p=s?f(s):"";return c===p};if(h.current!==-1&&!Ht({array1:H.filteredOptions,array2:O,parser:f})&&H.inputValue===A&&(g?u.length===H.value.length&&H.value.every((t,s)=>f(u[s])===f(t)):o(H.value,u))){const t=H.filteredOptions[h.current];if(t)return O.findIndex(s=>f(s)===f(t))}return-1},He=l.useCallback(()=>{if(!F)return;const o=It();if(o!==-1){h.current=o;return}const t=g?u[0]:u;if(O.length===0||t==null){G({diff:"reset"});return}if(T.current){if(t!=null){const s=O[h.current];if(g&&s&&u.findIndex(p=>ee(s,p))!==-1)return;const c=O.findIndex(p=>ee(p,t));c===-1?G({diff:"reset"}):ne({index:c});return}if(h.current>=O.length-1){ne({index:O.length-1});return}ne({index:h.current})}},[O.length,g?!1:u,we,G,ne,F,A,g]),ue=lt(o=>{Ro(T,o),o&&He()});l.useEffect(()=>{nt&&He()},[He,nt]);const ae=o=>{oe||(Se(!0),ke(!0),ie&&ie(o))},Ce=(o,t)=>{oe&&(Se(!1),Le&&Le(o,t))},re=(o,t,s,c)=>{if(g){if(u.length===t.length&&u.every((p,V)=>p===t[V]))return}else if(u===t)return;Be&&Be(o,t,s,c),We(t)},se=l.useRef(!1),pe=(o,t,s="selectOption",c="options")=>{let p=s,V=t;if(g){V=Array.isArray(u)?u.slice():[];const P=V.findIndex(K=>ee(t,K));P===-1?V.push(t):c!=="freeSolo"&&(V.splice(P,1),p="removeOption")}je(o,V,p),re(o,V,p,{option:t}),!Pe&&(!o||!o.ctrlKey&&!o.metaKey)&&Ce(o,p),(y===!0||y==="touch"&&se.current||y==="mouse"&&!se.current)&&v.current.blur()};function Pt(o,t){if(o===-1)return-1;let s=o;for(;;){if(t==="next"&&s===u.length||t==="previous"&&s===-1)return-1;const c=j?"data-item-index":"data-tag-index",p=te.querySelector(`[${c}="${s}"]`);if(!p||!p.hasAttribute("tabindex")||p.disabled||p.getAttribute("aria-disabled")==="true")s+=t==="next"?1:-1;else return s}}const Oe=(o,t)=>{if(!g)return;A===""&&Ce(o,"toggleInput");let s=k;k===-1?A===""&&t==="previous"&&(s=u.length-1):(s+=t==="next"?1:-1,s<0&&(s=0),s===u.length&&(s=-1)),s=Pt(s,t),X(s),_(s)},at=o=>{M.current=!0,Ae(""),N&&N(o,"","clear"),re(o,g?[]:null,"clear")},wt=o=>t=>{if(o.onKeyDown&&o.onKeyDown(t),!t.defaultMuiPrevented&&(k!==-1&&!["ArrowLeft","ArrowRight"].includes(t.key)&&(X(-1),_(-1)),t.which!==229))switch(t.key){case"Home":F&&Fe&&(t.preventDefault(),G({diff:"start",direction:"next",reason:"keyboard",event:t}));break;case"End":F&&Fe&&(t.preventDefault(),G({diff:"end",direction:"previous",reason:"keyboard",event:t}));break;case"PageUp":t.preventDefault(),G({diff:-Gt,direction:"previous",reason:"keyboard",event:t}),ae(t);break;case"PageDown":t.preventDefault(),G({diff:Gt,direction:"next",reason:"keyboard",event:t}),ae(t);break;case"ArrowDown":t.preventDefault(),G({diff:1,direction:"next",reason:"keyboard",event:t}),ae(t);break;case"ArrowUp":t.preventDefault(),G({diff:-1,direction:"previous",reason:"keyboard",event:t}),ae(t);break;case"ArrowLeft":!g&&j?_(0):Oe(t,"previous");break;case"ArrowRight":!g&&j?_(-1):Oe(t,"next");break;case"Enter":if(h.current!==-1&&F){const s=O[h.current],c=q?q(s):!1;if(t.preventDefault(),c)return;pe(t,s,"selectOption"),i&&v.current.setSelectionRange(v.current.value.length,v.current.value.length)}else U&&A!==""&&tt===!1&&(g&&t.preventDefault(),pe(t,A,"createOption","freeSolo"));break;case"Escape":F?(t.preventDefault(),t.stopPropagation(),Ce(t,"escape")):B&&(A!==""||g&&u.length>0||j)&&(t.preventDefault(),t.stopPropagation(),at(t));break;case"Backspace":if(g&&!W&&A===""&&u.length>0){const s=k===-1?u.length-1:k,c=u.slice();c.splice(s,1),re(t,c,"removeOption",{option:u[s]})}!g&&j&&!W&&(We(null),_(-1));break;case"Delete":if(g&&!W&&A===""&&u.length>0&&k!==-1){const s=k,c=u.slice();c.splice(s,1),re(t,c,"removeOption",{option:u[s]})}!g&&j&&!W&&(We(null),_(-1));break}},Ee=o=>{et(!0),Ze&&!M.current&&ae(o)},$e=o=>{if(n(T)){v.current.focus();return}et(!1),z.current=!0,M.current=!1,I&&h.current!==-1&&F?pe(o,O[h.current],"blur"):I&&U&&A!==""?pe(o,A,"blur","freeSolo"):S&&je(o,u,"blur"),Ce(o,"blur")},_e=o=>{const t=o.target.value;A!==t&&(Ae(t),ke(!1),N&&N(o,t,"input")),t===""?!Y&&!g&&re(o,null,"clear"):ae(o)},Tt=o=>{const t=Number(o.currentTarget.getAttribute("data-option-index"));h.current!==t&&ne({event:o,index:t,reason:"mouse"})},Rt=o=>{ne({event:o,index:Number(o.currentTarget.getAttribute("data-option-index")),reason:"touch"}),se.current=!0},Bt=o=>{const t=Number(o.currentTarget.getAttribute("data-option-index"));pe(o,O[t],"selectOption"),se.current=!1},Lt=o=>t=>{const s=u.slice();s.splice(o,1),re(t,s,"removeOption",{option:u[o]})},Ge=o=>{re(o,null,"removeOption",{option:u})},R=o=>{oe?Ce(o,"toggleInput"):ae(o)},L=o=>{o.currentTarget.contains(o.target)&&o.target.getAttribute("id")!==D&&o.preventDefault()},de=o=>{o.currentTarget.contains(o.target)&&(v.current.focus(),ze&&z.current&&v.current.selectionEnd-v.current.selectionStart===0&&v.current.select(),z.current=!1)},Vt=o=>{!$&&(A===""||!oe)&&R(o)};let Ke=U&&A.length>0;Ke=Ke||(g?u.length>0:u!==null);let rt=O;return Z&&(rt=O.reduce((o,t,s)=>{const c=Z(t);return o.length>0&&o[o.length-1].group===c?o[o.length-1].options.push(t):o.push({key:s,index:s,group:c,options:[t]}),o},[])),$&&Ve&&$e(),{getRootProps:(o={})=>({...o,onKeyDown:wt(o),onMouseDown:L,onClick:de}),getInputLabelProps:()=>({id:`${D}-label`,htmlFor:D}),getInputProps:()=>({id:D,value:A,onBlur:$e,onFocus:Ee,onChange:_e,onMouseDown:Vt,"aria-activedescendant":F?"":null,"aria-autocomplete":i?"both":"list","aria-controls":ot?`${D}-listbox`:void 0,"aria-expanded":ot,autoComplete:"off",ref:v,autoCapitalize:"none",spellCheck:"false",role:"combobox",disabled:$}),getClearProps:()=>({tabIndex:-1,type:"button",onClick:at}),getItemProps:({index:o=0}={})=>({...g&&{key:o},...j?{"data-item-index":o}:{"data-tag-index":o},tabIndex:-1,...!W&&{onDelete:g?Lt(o):Ge}}),getPopupIndicatorProps:()=>({tabIndex:-1,type:"button",onClick:R}),getTagProps:({index:o})=>({key:o,"data-tag-index":o,tabIndex:-1,...!W&&{onDelete:Lt(o)}}),getListboxProps:()=>({role:"listbox",id:`${D}-listbox`,"aria-labelledby":`${D}-label`,ref:ue,onMouseDown:o=>{o.preventDefault()}}),getOptionProps:({index:o,option:t})=>{const s=(g?u:[u]).some(p=>p!=null&&ee(t,p)),c=q?q(t):!1;return{key:Xe?.(t)??f(t),tabIndex:-1,role:"option",id:`${D}-option-${o}`,onMouseMove:Tt,onClick:Bt,onTouchStart:Rt,"data-option-index":o,"aria-disabled":c,"aria-selected":s}},id:D,inputValue:A,value:u,dirty:Ke,expanded:F&&te,popupOpen:F,focused:Ve||k!==-1,anchorEl:te,setAnchorEl:Ue,focusedItem:k,focusedTag:k,groupedOptions:rt}}function Do(e){return So("MuiAutocomplete",e)}const m=Ao("MuiAutocomplete",["root","expanded","fullWidth","focused","focusVisible","tag","tagSizeSmall","tagSizeMedium","hasPopupIcon","hasClearIcon","inputRoot","input","inputFocused","endAdornment","clearIndicator","popupIndicator","popupIndicatorOpen","popper","popperDisablePortal","paper","listbox","loading","noOptions","option","groupLabel","groupUl"]);var Jt,Qt;const Mo=e=>{const{classes:n,disablePortal:a,expanded:i,focused:d,fullWidth:I,hasClearIcon:y,hasPopupIcon:S,inputFocused:B,popupOpen:x,size:C}=e,Y={root:["root",i&&"expanded",d&&"focused",I&&"fullWidth",y&&"hasClearIcon",S&&"hasPopupIcon"],inputRoot:["inputRoot"],input:["input",B&&"inputFocused"],tag:["tag",`tagSize${eo(C)}`],endAdornment:["endAdornment"],clearIndicator:["clearIndicator"],popupIndicator:["popupIndicator",x&&"popupIndicatorOpen"],popper:["popper",a&&"popperDisablePortal"],paper:["paper"],listbox:["listbox"],loading:["loading"],noOptions:["noOptions"],option:["option"],groupLabel:["groupLabel"],groupUl:["groupUl"]};return Oo(Y,Do,n)},Fo=Q("div",{name:"MuiAutocomplete",slot:"Root",overridesResolver:(e,n)=>{const{ownerState:a}=e,{fullWidth:i,hasClearIcon:d,hasPopupIcon:I,inputFocused:y,size:S}=a;return[{[`& .${m.tag}`]:n.tag},{[`& .${m.tag}`]:n[`tagSize${eo(S)}`]},{[`& .${m.inputRoot}`]:n.inputRoot},{[`& .${m.input}`]:n.input},{[`& .${m.input}`]:y&&n.inputFocused},n.root,i&&n.fullWidth,I&&n.hasPopupIcon,d&&n.hasClearIcon]}})({[`&.${m.focused} .${m.clearIndicator}`]:{visibility:"visible"},"@media (pointer: fine)":{[`&:hover .${m.clearIndicator}`]:{visibility:"visible"}},[`& .${m.tag}`]:{margin:3,maxWidth:"calc(100% - 6px)"},[`& .${m.inputRoot}`]:{[`.${m.hasPopupIcon}&, .${m.hasClearIcon}&`]:{paddingRight:30},[`.${m.hasPopupIcon}.${m.hasClearIcon}&`]:{paddingRight:56},[`& .${m.input}`]:{width:0,minWidth:30}},[`& .${kt.root}`]:{paddingBottom:1,"& .MuiInput-input":{padding:"4px 4px 4px 0px"}},[`& .${kt.root}.${Ie.sizeSmall}`]:{[`& .${kt.input}`]:{padding:"2px 4px 3px 0"}},[`& .${Wt.root}`]:{padding:9,[`.${m.hasPopupIcon}&, .${m.hasClearIcon}&`]:{paddingRight:39},[`.${m.hasPopupIcon}.${m.hasClearIcon}&`]:{paddingRight:65},[`& .${m.input}`]:{padding:"7.5px 4px 7.5px 5px"},[`& .${m.endAdornment}`]:{right:9}},[`& .${Wt.root}.${Ie.sizeSmall}`]:{paddingTop:6,paddingBottom:6,paddingLeft:6,[`& .${m.input}`]:{padding:"2.5px 4px 2.5px 8px"}},[`& .${De.root}`]:{paddingTop:19,paddingLeft:8,[`.${m.hasPopupIcon}&, .${m.hasClearIcon}&`]:{paddingRight:39},[`.${m.hasPopupIcon}.${m.hasClearIcon}&`]:{paddingRight:65},[`& .${De.input}`]:{padding:"7px 4px"},[`& .${m.endAdornment}`]:{right:9}},[`& .${De.root}.${Ie.sizeSmall}`]:{paddingBottom:1,[`& .${De.input}`]:{padding:"2.5px 4px"}},[`& .${Ie.hiddenLabel}`]:{paddingTop:8},[`& .${De.root}.${Ie.hiddenLabel}`]:{paddingTop:0,paddingBottom:0,[`& .${m.input}`]:{paddingTop:16,paddingBottom:17}},[`& .${De.root}.${Ie.hiddenLabel}.${Ie.sizeSmall}`]:{[`& .${m.input}`]:{paddingTop:8,paddingBottom:9}},[`& .${m.input}`]:{flexGrow:1,textOverflow:"ellipsis",opacity:0},variants:[{props:{fullWidth:!0},style:{width:"100%"}},{props:{size:"small"},style:{[`& .${m.tag}`]:{margin:2,maxWidth:"calc(100% - 4px)"}}},{props:{inputFocused:!0},style:{[`& .${m.input}`]:{opacity:1}}},{props:{multiple:!0},style:{[`& .${m.inputRoot}`]:{flexWrap:"wrap"}}}]}),No=Q("div",{name:"MuiAutocomplete",slot:"EndAdornment"})({position:"absolute",right:0,top:"50%",transform:"translate(0, -50%)"}),qo=Q(no,{name:"MuiAutocomplete",slot:"ClearIndicator"})({marginRight:-2,padding:4,visibility:"hidden"}),zo=Q(no,{name:"MuiAutocomplete",slot:"PopupIndicator",overridesResolver:(e,n)=>{const{ownerState:a}=e;return[n.popupIndicator,a.popupOpen&&n.popupIndicatorOpen]}})({padding:2,marginRight:-2,variants:[{props:{popupOpen:!0},style:{transform:"rotate(180deg)"}}]}),Uo=Q(oo,{name:"MuiAutocomplete",slot:"Popper",overridesResolver:(e,n)=>{const{ownerState:a}=e;return[{[`& .${m.option}`]:n.option},n.popper,a.disablePortal&&n.popperDisablePortal]}})(Me(({theme:e})=>({zIndex:(e.vars||e).zIndex.modal,variants:[{props:{disablePortal:!0},style:{position:"absolute"}}]}))),Wo=Q(to,{name:"MuiAutocomplete",slot:"Paper"})(Me(({theme:e})=>({...e.typography.body1,overflow:"auto"}))),Ho=Q("div",{name:"MuiAutocomplete",slot:"Loading"})(Me(({theme:e})=>({color:(e.vars||e).palette.text.secondary,padding:"14px 16px"}))),_o=Q("div",{name:"MuiAutocomplete",slot:"NoOptions"})(Me(({theme:e})=>({color:(e.vars||e).palette.text.secondary,padding:"14px 16px"}))),Go=Q("ul",{name:"MuiAutocomplete",slot:"Listbox"})(Me(({theme:e})=>({listStyle:"none",margin:0,padding:"8px 0",maxHeight:"40vh",overflow:"auto",position:"relative",[`& .${m.option}`]:{minHeight:48,display:"flex",overflow:"hidden",justifyContent:"flex-start",alignItems:"center",cursor:"pointer",paddingTop:6,boxSizing:"border-box",outline:"0",WebkitTapHighlightColor:"transparent",paddingBottom:6,paddingLeft:16,paddingRight:16,[e.breakpoints.up("sm")]:{minHeight:"auto"},[`&.${m.focused}`]:{backgroundColor:(e.vars||e).palette.action.hover,"@media (hover: none)":{backgroundColor:"transparent"}},'&[aria-disabled="true"]':{opacity:(e.vars||e).palette.action.disabledOpacity,pointerEvents:"none"},[`&.${m.focusVisible}`]:{backgroundColor:(e.vars||e).palette.action.focus},'&[aria-selected="true"]':{backgroundColor:e.alpha((e.vars||e).palette.primary.main,(e.vars||e).palette.action.selectedOpacity),[`&.${m.focused}`]:{backgroundColor:e.alpha((e.vars||e).palette.primary.main,`${(e.vars||e).palette.action.selectedOpacity} + ${(e.vars||e).palette.action.hoverOpacity}`),"@media (hover: none)":{backgroundColor:(e.vars||e).palette.action.selected}},[`&.${m.focusVisible}`]:{backgroundColor:e.alpha((e.vars||e).palette.primary.main,`${(e.vars||e).palette.action.selectedOpacity} + ${(e.vars||e).palette.action.focusOpacity}`)}}}}))),Ko=Q(bo,{name:"MuiAutocomplete",slot:"GroupLabel"})(Me(({theme:e})=>({backgroundColor:(e.vars||e).palette.background.paper,top:-8}))),Jo=Q("ul",{name:"MuiAutocomplete",slot:"GroupUl"})({padding:0,[`& .${m.option}`]:{paddingLeft:24}}),Qo=l.forwardRef(function(n,a){const i=Co({props:n,name:"MuiAutocomplete"}),{autoComplete:d=!1,autoHighlight:I=!1,autoSelect:y=!1,blurOnSelect:S=!1,ChipProps:B,className:x,clearIcon:C=Jt||(Jt=r.jsx(Po,{fontSize:"small"})),clearOnBlur:Y=!i.freeSolo,clearOnEscape:Pe=!1,clearText:$="Clear",closeText:fe="Close",componentsProps:he,defaultValue:Qe=i.multiple?[]:null,disableClearable:we=!1,disableCloseOnSelect:U=!1,disabled:q=!1,disabledItemsFocusable:Xe=!1,disableListWrap:Te=!1,disablePortal:Z=!1,filterOptions:Fe,filterSelectedOptions:Ye=!1,forcePopupIcon:be="auto",freeSolo:Re=!1,fullWidth:ee=!1,getLimitTagsText:g=b=>`+${b}`,getOptionDisabled:Be,getOptionKey:Le,getOptionLabel:xe,isOptionEqualToValue:N,groupBy:ie,handleHomeEndKeys:Ne=!i.freeSolo,id:Ze,includeInputInList:qe=!1,inputValue:W,limitTags:j=-1,ListboxComponent:ze,ListboxProps:ve,loading:D=!1,loadingText:f="Loading…",multiple:M=!1,noOptionsText:z="No options",onChange:v,onClose:T,onHighlightChange:te,onInputChange:Ue,onOpen:k,open:X,openOnFocus:ye=!1,openText:h="Open",options:ce,PaperComponent:u,PopperComponent:We,popupIcon:A=Qt||(Qt=r.jsx(Io,{})),readOnly:Ae=!1,renderGroup:Ve,renderInput:et,renderOption:je,renderTags:oe,renderValue:Se,selectOnFocus:Nt=!i.freeSolo,size:ke="medium",slots:tt={},slotProps:F={},value:O,...H}=i,{getRootProps:ot,getInputProps:_,getInputLabelProps:Ot,getPopupIndicatorProps:ne,getClearProps:G,getItemProps:nt,getListboxProps:It,getOptionProps:He,value:ue,dirty:ae,expanded:Ce,id:re,popupOpen:se,focused:pe,focusedItem:Pt,anchorEl:Oe,setAnchorEl:at,inputValue:wt,groupedOptions:Ee}=$o({...i,componentName:"Autocomplete"}),$e=!we&&!q&&ae&&!Ae,_e=(!Re||be===!0)&&be!==!1,{onMouseDown:Tt}=_(),{ref:Rt,...Bt}=It(),Ge=xe||(b=>b.label??b),R={...i,disablePortal:Z,expanded:Ce,focused:pe,fullWidth:ee,getOptionLabel:Ge,hasClearIcon:$e,hasPopupIcon:_e,inputFocused:Pt===-1,popupOpen:se,size:ke},L=Mo(R),de={slots:{paper:u,popper:We,...tt},slotProps:{chip:B,listbox:ve,...he,...F}},[Vt,Ke]=Et("listbox",{elementType:Go,externalForwardedProps:de,ownerState:R,className:L.listbox,additionalProps:Bt,ref:Rt}),[rt,o]=Et("paper",{elementType:to,externalForwardedProps:de,ownerState:R,className:L.paper}),[t,s]=Et("popper",{elementType:oo,externalForwardedProps:de,ownerState:R,className:L.popper,additionalProps:{disablePortal:Z,style:{width:Oe?Oe.clientWidth:null},role:"presentation",anchorEl:Oe,open:se}});let c;const p=b=>({className:L.tag,disabled:q,...nt(b)});if(M?ue.length>0&&(oe?c=oe(ue,p,R):Se?c=Se(ue,p,R):c=ue.map((b,me)=>{const{key:ge,...Je}=p({index:me});return r.jsx(Dt,{label:Ge(b),size:ke,...Je,...de.slotProps.chip},ge)})):Se&&ue!=null&&(c=Se(ue,p,R)),j>-1&&Array.isArray(c)){const b=c.length-j;!pe&&b>0&&(c=c.splice(0,j),c.push(r.jsx("span",{className:L.tag,children:g(b)},c.length)))}const P=Ve||(b=>r.jsxs("li",{children:[r.jsx(Ko,{className:L.groupLabel,ownerState:R,component:"div",children:b.group}),r.jsx(Jo,{className:L.groupUl,ownerState:R,children:b.children})]},b.key)),st=je||((b,me)=>{const{key:ge,...Je}=b;return r.jsx("li",{...Je,children:Ge(me)},ge)}),qt=(b,me)=>{const ge=He({option:b,index:me});return st({...ge,className:L.option},b,{selected:ge["aria-selected"],index:me,inputValue:wt},R)},zt=de.slotProps.clearIndicator,Ut=de.slotProps.popupIndicator;return r.jsxs(l.Fragment,{children:[r.jsx(Fo,{ref:a,className:jt(L.root,x),ownerState:R,...ot(H),children:et({id:re,disabled:q,fullWidth:!0,size:ke==="small"?"small":void 0,InputLabelProps:Ot(),InputProps:{ref:at,className:L.inputRoot,startAdornment:c,onMouseDown:b=>{b.target===b.currentTarget&&Tt(b)},...($e||_e)&&{endAdornment:r.jsxs(No,{className:L.endAdornment,ownerState:R,children:[$e?r.jsx(qo,{...G(),"aria-label":$,title:$,ownerState:R,...zt,className:jt(L.clearIndicator,zt?.className),children:C}):null,_e?r.jsx(zo,{...ne(),disabled:q,"aria-label":se?fe:h,title:se?fe:h,ownerState:R,...Ut,className:jt(L.popupIndicator,Ut?.className),children:A}):null]})}},inputProps:{className:L.input,disabled:q,readOnly:Ae,..._()}})}),Oe?r.jsx(Uo,{as:t,...s,children:r.jsxs(Wo,{as:rt,...o,children:[D&&Ee.length===0?r.jsx(Ho,{className:L.loading,ownerState:R,children:f}):null,Ee.length===0&&!Re&&!D?r.jsx(_o,{className:L.noOptions,ownerState:R,role:"presentation",onMouseDown:b=>{b.preventDefault()},children:z}):null,Ee.length>0?r.jsx(Vt,{as:ze,...Ke,children:Ee.map((b,me)=>ie?P({key:b.key,group:b.group,children:b.options.map((ge,Je)=>qt(ge,b.index+Je))}):qt(b,me))}):null]})}):null]})}),Xo=(e,n)=>mo({borderRadius:e,labelPosition:n,extraOutsideSx:{"& .MuiAutocomplete-input":{paddingTop:"4px",paddingBottom:"4px"},"& .MuiAutocomplete-inputRoot":{paddingTop:"4px",paddingBottom:"4px"}}}),Xt=(e,n)=>e.find(a=>a.value===n)??null,Yt=(e,n)=>Array.isArray(n)?e.filter(a=>n.includes(a.value)):[],Yo=(e,n,a)=>a?!Array.isArray(e)||!Array.isArray(n)||e.length!==n.length?!1:e.every((i,d)=>i.value===n[d]?.value):e?.value===n?.value,Zo=(e,n)=>n?!Array.isArray(e)||e.length===0:!e,ao=({liProps:e,option:n,customRender:a})=>{const{key:i,...d}=e;return r.jsx("li",{...d,children:a?a(n):n.label},n.value)};ao.__docgenInfo={description:"Render por defecto de un <li> del dropdown del Autocomplete.\nSe expone como componente para testear y extender fácilmente, pero MUI\nlo llama desde `renderOption={(props, option) => ...}` en el padre.\n\nEl `key` lo manejamos nosotros (no spreadeamos junto al resto) porque MUI\nlo inyecta como parte de `propsLi` y React exige que sea prop directo.",methods:[],displayName:"AutocompleteOption",props:{liProps:{required:!0,tsType:{name:"intersection",raw:"React.HTMLAttributes<HTMLLIElement> & { key?: React.Key }",elements:[{name:"ReactHTMLAttributes",raw:"React.HTMLAttributes<HTMLLIElement>",elements:[{name:"HTMLLIElement"}]},{name:"signature",type:"object",raw:"{ key?: React.Key }",signature:{properties:[{key:"key",value:{name:"ReactKey",raw:"React.Key",required:!1}}]}}]},description:""},option:{required:!0,tsType:{name:"SelectOption"},description:""},customRender:{required:!1,tsType:{name:"signature",type:"function",raw:"(item: SelectOption) => ReactNode",signature:{arguments:[{type:{name:"SelectOption"},name:"item"}],return:{name:"ReactNode"}}},description:""}}};const ro=({value:e,getTagProps:n,size:a,maxChipsToShow:i,renderChipLabel:d})=>{const I=e.slice(0,i),y=e.length-i;return r.jsxs(r.Fragment,{children:[I.map((S,B)=>{const x=n({index:B});return l.createElement(Dt,{...x,key:S.value,size:a,label:d?d(S):S.label,avatar:S.img?r.jsx(Zt,{src:S.img}):void 0,deleteIcon:r.jsx(xo,{})})}),y>0&&r.jsx(Dt,{size:a,label:`+${y} más`})]})};ro.__docgenInfo={description:'Render de los chips del Autocomplete en modo multiple.\nTrunca después de `maxChipsToShow` con un chip "+N más".\nEl `getTagProps({ index })` viene de MUI y contiene el handler de delete,\nla key, etc. — se spreadea tal cual al Chip.',methods:[],displayName:"AutocompleteChips",props:{value:{required:!0,tsType:{name:"Array",elements:[{name:"SelectOption"}],raw:"SelectOption[]"},description:""},getTagProps:{required:!0,tsType:{name:"signature",type:"function",raw:"(args: { index: number }) => Record<string, any>",signature:{arguments:[{type:{name:"signature",type:"object",raw:"{ index: number }",signature:{properties:[{key:"index",value:{name:"number",required:!0}}]}},name:"args"}],return:{name:"Record",elements:[{name:"string"},{name:"any"}],raw:"Record<string, any>"}}},description:""},size:{required:!0,tsType:{name:"union",raw:"'small' | 'medium'",elements:[{name:"literal",value:"'small'"},{name:"literal",value:"'medium'"}]},description:""},maxChipsToShow:{required:!0,tsType:{name:"number"},description:""},renderChipLabel:{required:!1,tsType:{name:"signature",type:"function",raw:"(item: SelectOption) => ReactNode",signature:{arguments:[{type:{name:"SelectOption"},name:"item"}],return:{name:"ReactNode"}}},description:""}}};const so=({text:e="Cargando..."})=>r.jsxs(E,{sx:{display:"flex",alignItems:"center",gap:1},children:[r.jsx(vo,{size:16}),r.jsx(J,{variant:"body2",children:e})]});so.__docgenInfo={description:"Loader por defecto para el `loadingText` del Autocomplete.\nEl consumer puede sobrescribirlo pasando `loadingText` al componente padre.",methods:[],displayName:"AutocompleteLoader",props:{text:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"'Cargando...'",computed:!1}}}};function w(e){const{label:n,options:a,placeholder:i,multiple:d=!1,disabled:I=!1,readOnly:y=!1,loading:S=!1,error:B=!1,helperText:x,maxChipsToShow:C=3,renderOptionItem:Y,renderChipLabel:Pe,borderRadius:$=10,labelPosition:fe="outside",size:he="small",noOptionsText:Qe="No hay opciones",loadingText:we,sx:U,className:q,preset:Xe,textFieldProps:Te,onInputChange:Z,inputValue:Fe,filterOptions:Ye,freeSolo:be,open:Re,onOpen:ee,onClose:g}=e,[Be,Le]=l.useState(!1),xe=l.useRef(new Map);for(const f of a)xe.current.set(f.value,f);const N=l.useMemo(()=>{const f=new Map(xe.current);for(const M of a)f.set(M.value,M);return Array.from(f.values())},[a]),ie=l.useRef(d?[]:null),Ne=f=>Yo(ie.current,f,d)?ie.current:(ie.current=f,f),Ze=yo(),qe=ho("Autocomplete",Xe,Ze),W=[Xo($,fe),...qe?[qe]:[],...Array.isArray(U)?U:U?[U]:[]],j=(f,M,z,v,T,te)=>{const Ue=!!T||!!B,k=te||x,X=Zo(f,d),ye=X&&Be&&!!i;return r.jsx(Qo,{multiple:d,options:a,value:f,disabled:I,readOnly:y,loading:S,className:q,sx:W,freeSolo:be,open:Re,onOpen:ee,onClose:g,inputValue:Fe,onInputChange:Z,filterOptions:Ye,getOptionLabel:h=>typeof h=="string"?h:h?.label??"",isOptionEqualToValue:(h,ce)=>h?.value===ce?.value,getOptionDisabled:h=>!!h?.disabled,onChange:M,onFocus:()=>Le(!0),onBlur:()=>{Le(!1),z?.()},renderOption:(h,ce)=>r.jsx(ao,{liProps:h,option:ce,customRender:Y}),renderTags:d?(h,ce)=>r.jsx(ro,{value:h,getTagProps:ce,size:he,maxChipsToShow:C,renderChipLabel:Pe}):void 0,noOptionsText:Qe,loadingText:we??r.jsx(so,{}),renderInput:h=>r.jsx(Bo,{...h,label:n,size:he,variant:"outlined",placeholder:ye?i:void 0,error:Ue,helperText:k,inputRef:v,...Te,InputLabelProps:{...h.InputLabelProps,...Te?.InputLabelProps,shrink:fe==="outside"?!X||Be:h.InputLabelProps?.shrink}})})},ze=(f,M)=>{const z=e.onChange;if(d){const v=(M??[]).map(T=>T.value);z(v)}else z(M?.value??null)};if("control"in e&&e.control){const{name:f,control:M,validation:z}=e;return r.jsx(go,{name:f,control:M,rules:z,render:({field:v,fieldState:{error:T}})=>{const te=Ne(d?Yt(N,v.value):Xt(N,v.value));return j(te,(k,X)=>{d?v.onChange((X??[]).map(ye=>ye.value)):v.onChange(X?.value??null)},v.onBlur,v.ref,!!T,T?.message)}})}const ve=e.value,D=Ne(d?Yt(N,ve):Xt(N,ve));return j(D,ze)}w.__docgenInfo={description:"",methods:[],displayName:"Autocomplete"};const en=`
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+import { Box, Typography } from '@mui/material';
+
+const options = [
+  { value: '10', label: '10' },
+  { value: '25', label: '25' },
+];
+
+export const SimpleExample = () => {
+  const [value, setValue] = useState(options[1]);
+
+  return (
+    <Box sx={{ width: 250 }}>
+      <Autocomplete
+        label="Registros por página"
+        options={options}
+        value={value}
+        onChange={(val) => {
+          setValue(val as string);
+        }}
+      />
+      <Typography sx={{ mt: 2 }}>
+        Valor: {value}
+      </Typography>
+    </Box>
+  );
+};
+`,tn=`
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+import { Box, Typography } from '@mui/material';
+
+export const WithPlaceholderExample = () => {
+  const [value, setValue] = useState(null);
+
+  return (
+    <Box sx={{ width: 300 }}>
+      <Autocomplete
+        label="Seleccione una opción"
+        options={[]}
+        value={value}
+        onChange={(val) => {
+         setValue(val as string);
+        }}
+        placeholder="Ninguna opción seleccionada"
+      />
+      <Typography sx={{ mt: 2 }}>
+        {value || 'Ninguno'}
+      </Typography>
+    </Box>
+  );
+};
+`,on=`
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+import { Box } from '@mui/material';
+
+const options = [
+  { value: 'pending', label: 'Pendiente' },
+  { value: 'approved', label: 'Aprobado' },
+];
+
+export const MultipleExample = () => {
+  const [value, setValue] = useState([]);
+
+  return (
+    <Box sx={{ width: 400 }}>
+      <Autocomplete
+        multiple
+        options={options}
+        value={value}
+        onChange={(val) => {
+          setValue(val as string[]);
+        }}
+      />
+    </Box>
+  );
+};
+`,nn=`
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+
+export const MultipleWithLimitExample = () => {
+  const [value, setValue] = useState([]);
+
+  return (
+    <Autocomplete
+      multiple
+      maxChipsToShow={2}
+      options={[]}
+      value={value}
+      onChange={(val) => {
+        setValue(val as string[]);
+      }}
+    />
+  );
+};
+`,an=`
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+import { Avatar, Box } from '@mui/material';
+
+const users = [
+  { value: 'admin', label: 'Administrador', img: '...' },
+];
+
+export const CustomRenderExample = () => {
+  const [value, setValue] = useState([]);
+
+  return (
+    <Autocomplete
+      multiple
+      options={users}
+      value={value}
+      onChange={(val) => {
+        setValue(val as string[]);
+      }}
+      renderOptionItem={(item) => (
+        <Box sx={{ display: 'flex', gap: 1 }}>
+          <Avatar src={item.img} />
+          {item.label}
+        </Box>
+      )}
+    />
+  );
+};
+`,rn=`
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+import { Typography } from '@mui/material';
+
+export const CustomChipExample = () => {
+  const [value, setValue] = useState([]);
+
+  return (
+    <Autocomplete
+      multiple
+      options={[]}
+      value={value}
+      onChange={(val) => {
+        setValue(val as string[]);
+      }}
+      renderChipLabel={(item) => (
+        <Typography variant="caption">
+          {item.label.charAt(0)}
+        </Typography>
+      )}
+    />
+  );
+};
+`,sn=`
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+
+export const LoadingExample = () => {
+  const [value, setValue] = useState(null);
+
+  return (
+    <Autocomplete
+      loading
+      options={[]}
+      value={value}
+      onChange={(val) => {
+				setValue(val as string);
+			}}
+    />
+  );
+};
+`,lo=`
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+
+export const EmptyExample = () => {
+  const [value, setValue] = useState(null);
+
+  return (
+    <Autocomplete
+      options={[]}
+      value={value}
+      onChange={(val) => {
+				setValue(val as string);
+			}}
+      placeholder="No hay opciones"
+    />
+  );
+};
+`,ln=`
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+import { Box } from '@mui/material';
+
+const options = [
+  { value: '10', label: '10' },
+  { value: '25', label: '25' },
+];
+
+export const WithErrorExample = () => {
+  const [value, setValue] = useState<string | null>(null);
+  return (
+    <Box sx={{ width: 300 }}>
+      <Autocomplete
+        label="Cantidad"
+        options={options}
+        value={value}
+        onChange={(val) => setValue(val as string | null)}
+        error={!value}
+        helperText={!value ? 'Debes seleccionar una cantidad' : ' '}
+      />
+    </Box>
+  );
+};
+`,cn=`
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+import { Box, Stack } from '@mui/material';
+
+const options = [
+  { value: 'a', label: 'Opción A' },
+  { value: 'b', label: 'Opción B' },
+];
+
+export const LabelPositionExample = () => {
+  const [a, setA] = useState<string | null>(null);
+  const [b, setB] = useState<string | null>(null);
+  return (
+    <Stack spacing={3} sx={{ width: 320 }}>
+      <Autocomplete
+        label="Outside (default)"
+        labelPosition="outside"
+        options={options}
+        value={a}
+        onChange={(val) => setA(val as string | null)}
+      />
+      <Autocomplete
+        label="Floating"
+        labelPosition="floating"
+        options={options}
+        value={b}
+        onChange={(val) => setB(val as string | null)}
+      />
+    </Stack>
+  );
+};
+`,un=`
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+import { Box, Stack } from '@mui/material';
+
+const options = [
+  { value: '10', label: '10' },
+  { value: '25', label: '25' },
+];
+
+export const CustomBorderRadiusExample = () => {
+  const [a, setA] = useState<string | null>(null);
+  const [b, setB] = useState<string | null>(null);
+  const [c, setC] = useState<string | null>(null);
+  return (
+    <Stack spacing={2} sx={{ width: 300 }}>
+      <Autocomplete label="0" borderRadius={0} options={options} value={a} onChange={(v) => setA(v as string | null)} />
+      <Autocomplete label="10 (default)" borderRadius={10} options={options} value={b} onChange={(v) => setB(v as string | null)} />
+      <Autocomplete label="24 (pill)" borderRadius={24} options={options} value={c} onChange={(v) => setC(v as string | null)} />
+    </Stack>
+  );
+};
+`,pn=`
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+import { Box } from '@mui/material';
+
+const options = [
+  { value: 'mx', label: 'México' },
+  { value: 'co', label: 'Colombia' },
+  { value: 'ar', label: 'Argentina' },
+];
+
+export const EmptyWithPlaceholderExample = () => {
+  const [value, setValue] = useState<string | null>(null);
+  return (
+    <Box sx={{ width: 300 }}>
+      <Autocomplete
+        label="País"
+        placeholder="Buscar país..."
+        options={options}
+        value={value}
+        onChange={(val) => setValue(val as string | null)}
+      />
+    </Box>
+  );
+};
+`,dn=`
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import Autocomplete from './Autocomplete';
+import { Box, Button, Stack } from '@mui/material';
+
+const options = [
+  { value: 'mx', label: 'México' },
+  { value: 'co', label: 'Colombia' },
+  { value: 'ar', label: 'Argentina' },
+];
+
+type FormValues = { country: string | null };
+
+export const RHFExample = () => {
+  const { control, handleSubmit, watch } = useForm<FormValues>({
+    defaultValues: { country: null },
+  });
+
+  return (
+    <Box component="form" onSubmit={handleSubmit((data) => console.log(data))}>
+      <Stack spacing={2} sx={{ width: 320 }}>
+        <Autocomplete
+          name="country"
+          control={control}
+          validation={{ required: 'Campo requerido' }}
+          label="País"
+          placeholder="Seleccione..."
+          options={options}
+        />
+        <Button type="submit" variant="contained">Guardar</Button>
+        <Box>Valor actual: {JSON.stringify(watch('country'))}</Box>
+      </Stack>
+    </Box>
+  );
+};
+`,io=["import React, { useState, useEffect, useMemo } from ","'react'",";","import Autocomplete from ","'./Autocomplete'",";","import { Box } from ","'@mui/material'",";","import debounce from ","'lodash/debounce'",";","","// Supón que tienes un servicio:","// await fetch(`/api/users?q=${query}`).then(r => r.json())","async function fetchUsers(query: string) {","  const res = await fetch(`/api/users?q=${encodeURIComponent(query)}`);","  const data = await res.json();","  return data.map((u: any) => ({ value: u.id, label: u.name }));","}","","export const AsyncServiceExample = () => {","  const [value, setValue] = useState<string | null>(null);",'  const [input, setInput] = useState("");',"  const [options, setOptions] = useState<any[]>([]);","  const [loading, setLoading] = useState(false);","","  const search = useMemo(","    () =>","      debounce(async (q: string) => {","        if (!q) { setOptions([]); return; }","        setLoading(true);","        try {","          setOptions(await fetchUsers(q));","        } finally {","          setLoading(false);","        }","      }, 300),","    [],","  );","","  useEffect(() => { search(input); }, [input, search]);","","  return (","    <Box sx={{ width: 320 }}>","      <Autocomplete",'        label="Usuario"','        placeholder="Buscar usuario..."',"        options={options}","        value={value}","        onChange={(v) => setValue(v as string | null)}","        inputValue={input}","        onInputChange={(_, v) => setInput(v)}","        loading={loading}","        // Desactiva el filtro cliente: el servicio ya filtra.","        filterOptions={(x) => x}","      />","    </Box>","  );","};"].join(`
+`),le=[{value:"10",label:"10"},{value:"25",label:"25"},{value:"50",label:"50"},{value:"100",label:"100"}],co=[{value:"admin",label:"Administrador",img:"https://placehold.co/40x40?text=A"},{value:"user",label:"Usuario",img:"https://placehold.co/40x40?text=U"},{value:"moderator",label:"Moderador",img:"https://placehold.co/40x40?text=M"}],Mt=Array.from({length:50},(e,n)=>({value:`option-${n}`,label:`Opción ${n+1}`})),ia={title:"Components/Autocomplete",component:w,tags:["autodocs"],parameters:{layout:"padded",docs:{description:{component:"Autocomplete personalizado basado en MUI con soporte para selección múltiple, chips, render custom y async."}}},argTypes:{label:{control:"text",description:"Etiqueta para el campo de selección."},options:{control:"object",description:"Array de objetos `SelectOption` para las opciones del menú."},value:{control:"object",description:"Valor(es) seleccionado(s) del select."},onChange:{action:"changed",description:"Función de callback que se llama cuando el valor del select cambia."},multiple:{control:"boolean",description:"Si es verdadero, permite la selección de múltiples opciones."},placeholder:{control:"text",description:"Texto que se muestra cuando no hay nada seleccionado."},maxChipsToShow:{control:"number",description:"Número máximo de chips a mostrar en selección múltiple antes de agrupar.",if:{arg:"multiple",eq:!0}},renderChipLabel:{control:!1,description:"Función para personalizar el contenido del label de cada chip seleccionado (para múltiple) o del valor mostrado (para individual)."}}},it={render:()=>{const[e,n]=l.useState("25");return r.jsxs(E,{sx:{width:250},children:[r.jsx(w,{label:"Registros por página",options:le,value:e,onChange:a=>{n(a)}}),r.jsxs(J,{sx:{mt:2},children:["Valor: ",e]})]})},parameters:{docs:{description:{story:"Autocomplete simple con opciones básicas y valor por defecto."},source:{code:en.trim()}}}},ct={render:()=>{const[e,n]=l.useState("");return r.jsxs(E,{sx:{width:300},children:[r.jsx(w,{label:"Seleccione una opción",options:le,value:e,onChange:a=>{n(a)},placeholder:"Ninguna opción seleccionada"}),r.jsx(J,{sx:{mt:2},children:e||"Ninguno"})]})},parameters:{docs:{description:{story:"Autocomplete sin valor inicial que muestra un placeholder cuando no hay selección."},source:{code:tn.trim()}}}},ut={render:()=>{const[e,n]=l.useState([]);return r.jsxs(E,{sx:{width:400},children:[r.jsx(w,{label:"Seleccionar valores",multiple:!0,options:le,value:e,onChange:a=>{n(a)}}),r.jsxs(J,{sx:{mt:2},children:["Valor seleccionado: ",JSON.stringify(e)]})]})},parameters:{docs:{description:{story:"Autocomplete en modo múltiple que permite seleccionar varias opciones y las muestra como chips."},source:{code:on.trim()}}}},pt={render:()=>{const[e,n]=l.useState(Mt.slice(0,5).map(a=>a.value));return r.jsx(E,{sx:{width:400},children:r.jsx(w,{label:"Muchas selecciones",multiple:!0,maxChipsToShow:2,options:Mt,value:e,onChange:a=>{n(a)}})})},parameters:{docs:{description:{story:"Autocomplete múltiple con límite de chips visibles, agrupando el resto en un contador."},source:{code:nn.trim()}}}},dt={render:()=>{const[e,n]=l.useState([]);return r.jsx(E,{sx:{width:300},children:r.jsx(w,{label:"Usuarios",multiple:!0,options:co,value:e,onChange:a=>{n(a)},renderOptionItem:a=>r.jsxs(E,{sx:{display:"flex",gap:1,alignItems:"center"},children:[r.jsx(Zt,{src:a.img,sx:{width:24,height:24}}),a.label]})})})},parameters:{docs:{description:{story:"Autocomplete con renderizado personalizado de opciones, incluyendo avatar e información adicional."},source:{code:an.trim()}}}},mt={render:()=>{const[e,n]=l.useState([]);return r.jsx(E,{sx:{width:400},children:r.jsx(w,{label:"Usuarios seleccionados",multiple:!0,options:co,value:e,onChange:a=>{n(a)},maxChipsToShow:2,renderChipLabel:a=>r.jsx(J,{variant:"caption",fontWeight:"bold",children:a.label.charAt(0)})})})},parameters:{docs:{description:{story:"Autocomplete múltiple con renderizado personalizado de chips, mostrando solo la inicial del label."},source:{code:rn.trim()}}}},gt={render:()=>{const[e,n]=l.useState("");return r.jsx(E,{sx:{width:300},children:r.jsx(w,{label:"Cargando...",options:[],loading:!0,value:e,onChange:a=>{n(a)}})})},parameters:{docs:{description:{story:"Autocomplete en estado de carga, útil para integraciones con APIs o búsquedas asíncronas."},source:{code:sn.trim()}}}},ft={render:()=>{const[e,n]=l.useState("");return r.jsx(E,{sx:{width:300},children:r.jsx(w,{label:"Sin opciones",options:[],value:e,onChange:a=>{n(a)},placeholder:"No hay opciones"})})},parameters:{docs:{description:{story:"Autocomplete sin opciones disponibles, mostrando mensaje vacío al usuario."},source:{code:lo.trim()}}}},ht={render:()=>{const[e,n]=l.useState("");return r.jsx(E,{sx:{width:300},children:r.jsx(w,{label:"Muchas opciones",options:Mt,value:e,onChange:a=>{n(a)}})})},parameters:{docs:{description:{story:"Autocomplete sin opciones disponibles, mostrando mensaje vacío al usuario."},source:{code:lo.trim()}}}},bt={render:()=>{const[e,n]=l.useState(null);return r.jsx(E,{sx:{width:300},children:r.jsx(w,{label:"Cantidad",options:le,value:e,onChange:a=>n(a),error:!e,helperText:e?" ":"Debes seleccionar una cantidad"})})},parameters:{docs:{description:{story:"Autocomplete en estado de error con `helperText`. Muestra la validación visual (borde + label + texto en rojo)."},source:{code:ln.trim()}}}},xt={render:()=>{const[e,n]=l.useState(null),[a,i]=l.useState(null);return r.jsxs(Ft,{spacing:3,sx:{width:320},children:[r.jsx(w,{label:"Outside (default)",labelPosition:"outside",options:le,value:e,onChange:d=>n(d)}),r.jsx(w,{label:"Floating",labelPosition:"floating",options:le,value:a,onChange:d=>i(d)})]})},parameters:{docs:{description:{story:"Comparación entre `labelPosition='outside'` (label arriba del input, consistente con Input/Select/DatePicker) y `labelPosition='floating'` (comportamiento nativo MUI dentro del notch)."},source:{code:cn.trim()}}}},vt={render:()=>{const[e,n]=l.useState(null),[a,i]=l.useState(null),[d,I]=l.useState(null);return r.jsxs(Ft,{spacing:2,sx:{width:300},children:[r.jsx(w,{label:"0",borderRadius:0,options:le,value:e,onChange:y=>n(y)}),r.jsx(w,{label:"10 (default)",borderRadius:10,options:le,value:a,onChange:y=>i(y)}),r.jsx(w,{label:"24 (pill)",borderRadius:24,options:le,value:d,onChange:y=>I(y)})]})},parameters:{docs:{description:{story:"La prop `borderRadius` permite personalizar el radio del borde sin usar `sx` (acepta number en px o string)."},source:{code:un.trim()}}}},yt={render:()=>{const[e,n]=l.useState(null),a=[{value:"mx",label:"México"},{value:"co",label:"Colombia"},{value:"ar",label:"Argentina"}];return r.jsxs(E,{sx:{width:300},children:[r.jsx(w,{label:"País",placeholder:"Buscar país...",options:a,value:e,onChange:i=>n(i)}),r.jsx(J,{sx:{mt:2},variant:"caption",color:"text.secondary",children:"Al estar vacío y sin foco, solo se ve el label como placeholder. Al enfocar, el label sube y aparece el placeholder real."})]})},parameters:{docs:{description:{story:"Autocomplete vacío con placeholder. El placeholder solo se muestra cuando el campo está enfocado (mismo patrón que Select/Input)."},source:{code:pn.trim()}}}},At={render:()=>{const{control:e,handleSubmit:n,watch:a}=fo({defaultValues:{country:null}}),i=[{value:"mx",label:"México"},{value:"co",label:"Colombia"},{value:"ar",label:"Argentina"}],[d,I]=l.useState(null);return r.jsx(E,{component:"form",onSubmit:n(y=>I(y)),children:r.jsxs(Ft,{spacing:2,sx:{width:320},children:[r.jsx(w,{name:"country",control:e,validation:{required:"Campo requerido"},label:"País",placeholder:"Seleccione...",options:i}),r.jsx(Lo,{type:"submit",variant:"contained",children:"Guardar"}),r.jsxs(J,{variant:"caption",color:"text.secondary",children:["Valor actual (watch): ",JSON.stringify(a("country"))]}),d&&r.jsxs(J,{variant:"caption",color:"success.main",children:["Submit: ",JSON.stringify(d)]})]})})},parameters:{docs:{description:{story:"Integración con React Hook Form usando `name`/`control`/`validation`. El error de validación se renderiza automáticamente como helperText."},source:{code:dn.trim()}}}},mn=[{value:1,label:"Andrea García"},{value:2,label:"Andrés Pérez"},{value:3,label:"Beatriz López"},{value:4,label:"Carlos Ruiz"},{value:5,label:"Camila Torres"},{value:6,label:"Diego Fernández"},{value:7,label:"Elena Morales"},{value:8,label:"Fabián Núñez"}],uo=e=>new Promise(n=>{setTimeout(()=>{if(!e)return n([]);const a=e.toLowerCase();n(mn.filter(i=>i.label.toLowerCase().includes(a)))},400)});function po(e,n){let a;return(...i)=>{clearTimeout(a),a=setTimeout(()=>e(...i),n)}}const St={render:()=>{const[e,n]=l.useState(null),[a,i]=l.useState(""),[d,I]=l.useState([]),[y,S]=l.useState(!1),B=l.useMemo(()=>po(async x=>{if(!x){I([]);return}S(!0);try{const C=await uo(x);I(C)}finally{S(!1)}},300),[]);return l.useEffect(()=>{B(a)},[a,B]),r.jsxs(E,{sx:{width:320},children:[r.jsx(w,{label:"Usuario",placeholder:"Buscar usuario...",options:d,value:e,onChange:x=>n(x),inputValue:a,onInputChange:(x,C)=>i(C),loading:y,filterOptions:x=>x}),r.jsx(J,{sx:{mt:2},variant:"caption",color:"text.secondary",children:"Escribe para buscar. El servicio se consulta con debounce (300ms). filterOptions={(x) => x} desactiva el filtro cliente."})]})},parameters:{docs:{description:{story:"Búsqueda asíncrona contra un servicio. El consumer maneja el estado de `options`/`loading` y reacciona a `onInputChange` para llamar al servicio. Usar `filterOptions={(x) => x}` para desactivar el filtro cliente."},source:{code:io.trim()}}}},Ct={render:()=>{const[e,n]=l.useState([]),[a,i]=l.useState(""),[d,I]=l.useState([]),[y,S]=l.useState(!1),B=l.useMemo(()=>po(async x=>{if(!x){I([]);return}S(!0);try{const C=await uo(x);I(C)}finally{S(!1)}},300),[]);return l.useEffect(()=>{B(a)},[a,B]),r.jsxs(E,{sx:{width:420},children:[r.jsx(w,{multiple:!0,maxChipsToShow:4,label:"Usuarios",placeholder:"Buscar y seleccionar varios...",options:d,value:e,onChange:x=>n(x),inputValue:a,onInputChange:(x,C)=>i(C),loading:y,filterOptions:x=>x}),r.jsx(J,{sx:{mt:2},variant:"caption",color:"text.secondary",children:"Selecciona varios usuarios buscando con diferentes queries. Los chips persisten aunque el search cambie las `options` (cache interno)."}),r.jsxs(J,{sx:{mt:1},variant:"caption",display:"block",children:["Seleccionados: ",JSON.stringify(e)]})]})},parameters:{docs:{description:{story:"Búsqueda asíncrona **con selección múltiple**. El componente mantiene un cache interno de opciones ya vistas, así los chips de los items seleccionados NO desaparecen cuando el usuario busca otros términos. Flujo: buscar 'an' → seleccionar Andrea → buscar 'be' → seleccionar Beatriz → los dos chips siguen visibles."},source:{code:io.trim()}}}};it.parameters={...it.parameters,docs:{...it.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState<string>("25");
+    return <Box sx={{
+      width: 250
+    }}>
+        <Autocomplete label="Registros por página" options={basicOptions} value={value} onChange={val => {
+        setValue(val as string);
+      }} />
+        <Typography sx={{
+        mt: 2
+      }}>Valor: {value}</Typography>
+      </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Autocomplete simple con opciones básicas y valor por defecto."
+      },
+      source: {
+        code: SimpleAutocompleteDefinition.trim()
+      }
+    }
+  }
+}`,...it.parameters?.docs?.source}}};ct.parameters={...ct.parameters,docs:{...ct.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState<string>("");
+    return <Box sx={{
+      width: 300
+    }}>
+        <Autocomplete label="Seleccione una opción" options={basicOptions} value={value} onChange={val => {
+        setValue(val as string);
+      }} placeholder="Ninguna opción seleccionada" />
+        <Typography sx={{
+        mt: 2
+      }}>{value || "Ninguno"}</Typography>
+      </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Autocomplete sin valor inicial que muestra un placeholder cuando no hay selección."
+      },
+      source: {
+        code: WithPlaceholderAutocompleteDefinition.trim()
+      }
+    }
+  }
+}`,...ct.parameters?.docs?.source}}};ut.parameters={...ut.parameters,docs:{...ut.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState<string[]>([]);
+    return <Box sx={{
+      width: 400
+    }}>
+        <Autocomplete label="Seleccionar valores" multiple options={basicOptions} value={value} onChange={val => {
+        setValue(val as string[]);
+      }} />
+        <Typography sx={{
+        mt: 2
+      }}>
+          Valor seleccionado: {JSON.stringify(value)}
+        </Typography>
+      </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Autocomplete en modo múltiple que permite seleccionar varias opciones y las muestra como chips."
+      },
+      source: {
+        code: MultipleAutocompleteDefinition.trim()
+      }
+    }
+  }
+}`,...ut.parameters?.docs?.source}}};pt.parameters={...pt.parameters,docs:{...pt.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState<string[]>(manyOptions.slice(0, 5).map(opt => opt.value));
+    return <Box sx={{
+      width: 400
+    }}>
+        <Autocomplete label="Muchas selecciones" multiple maxChipsToShow={2} options={manyOptions} value={value} onChange={val => {
+        setValue(val as string[]);
+      }} />
+      </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Autocomplete múltiple con límite de chips visibles, agrupando el resto en un contador."
+      },
+      source: {
+        code: MultipleWithLimitAutocompleteDefinition.trim()
+      }
+    }
+  }
+}`,...pt.parameters?.docs?.source}}};dt.parameters={...dt.parameters,docs:{...dt.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState<string[]>([]);
+    return <Box sx={{
+      width: 300
+    }}>
+        <Autocomplete label="Usuarios" multiple options={userOptions} value={value} onChange={val => {
+        setValue(val as string[]);
+      }} renderOptionItem={item => <Box sx={{
+        display: "flex",
+        gap: 1,
+        alignItems: "center"
+      }}>
+              <Avatar src={item.img} sx={{
+          width: 24,
+          height: 24
+        }} />
+              {item.label}
+            </Box>} />
+      </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Autocomplete con renderizado personalizado de opciones, incluyendo avatar e información adicional."
+      },
+      source: {
+        code: CustomRenderOptionAutocompleteDefinition.trim()
+      }
+    }
+  }
+}`,...dt.parameters?.docs?.source}}};mt.parameters={...mt.parameters,docs:{...mt.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState<string[]>([]);
+    return <Box sx={{
+      width: 400
+    }}>
+        <Autocomplete label="Usuarios seleccionados" multiple options={userOptions} value={value} onChange={val => {
+        setValue(val as string[]);
+      }} maxChipsToShow={2} renderChipLabel={item => <Typography variant="caption" fontWeight="bold">
+              {item.label.charAt(0)}
+            </Typography>} />
+      </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Autocomplete múltiple con renderizado personalizado de chips, mostrando solo la inicial del label."
+      },
+      source: {
+        code: CustomChipRenderAutocompleteDefinition.trim()
+      }
+    }
+  }
+}`,...mt.parameters?.docs?.source}}};gt.parameters={...gt.parameters,docs:{...gt.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState<string>("");
+    return <Box sx={{
+      width: 300
+    }}>
+        <Autocomplete label="Cargando..." options={[]} loading value={value} onChange={val => {
+        setValue(val as string);
+      }} />
+      </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Autocomplete en estado de carga, útil para integraciones con APIs o búsquedas asíncronas."
+      },
+      source: {
+        code: LoadingAutocompleteDefinition.trim()
+      }
+    }
+  }
+}`,...gt.parameters?.docs?.source}}};ft.parameters={...ft.parameters,docs:{...ft.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState<string>("");
+    return <Box sx={{
+      width: 300
+    }}>
+        <Autocomplete label="Sin opciones" options={[]} value={value} onChange={val => {
+        setValue(val as string);
+      }} placeholder="No hay opciones" />
+      </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Autocomplete sin opciones disponibles, mostrando mensaje vacío al usuario."
+      },
+      source: {
+        code: EmptyOptionsAutocompleteDefinition.trim()
+      }
+    }
+  }
+}`,...ft.parameters?.docs?.source}}};ht.parameters={...ht.parameters,docs:{...ht.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState<string>("");
+    return <Box sx={{
+      width: 300
+    }}>
+        <Autocomplete label="Muchas opciones" options={manyOptions} value={value} onChange={val => {
+        setValue(val as string);
+      }} />
+      </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Autocomplete sin opciones disponibles, mostrando mensaje vacío al usuario."
+      },
+      source: {
+        code: EmptyOptionsAutocompleteDefinition.trim()
+      }
+    }
+  }
+}`,...ht.parameters?.docs?.source}}};bt.parameters={...bt.parameters,docs:{...bt.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState<string | null>(null);
+    return <Box sx={{
+      width: 300
+    }}>
+        <Autocomplete label="Cantidad" options={basicOptions} value={value} onChange={val => setValue(val as string | null)} error={!value} helperText={!value ? "Debes seleccionar una cantidad" : " "} />
+      </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Autocomplete en estado de error con \`helperText\`. Muestra la validación visual (borde + label + texto en rojo)."
+      },
+      source: {
+        code: WithErrorAutocompleteDefinition.trim()
+      }
+    }
+  }
+}`,...bt.parameters?.docs?.source}}};xt.parameters={...xt.parameters,docs:{...xt.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [a, setA] = useState<string | null>(null);
+    const [b, setB] = useState<string | null>(null);
+    return <Stack spacing={3} sx={{
+      width: 320
+    }}>
+        <Autocomplete label="Outside (default)" labelPosition="outside" options={basicOptions} value={a} onChange={val => setA(val as string | null)} />
+        <Autocomplete label="Floating" labelPosition="floating" options={basicOptions} value={b} onChange={val => setB(val as string | null)} />
+      </Stack>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Comparación entre \`labelPosition='outside'\` (label arriba del input, consistente con Input/Select/DatePicker) y \`labelPosition='floating'\` (comportamiento nativo MUI dentro del notch)."
+      },
+      source: {
+        code: LabelPositionAutocompleteDefinition.trim()
+      }
+    }
+  }
+}`,...xt.parameters?.docs?.source}}};vt.parameters={...vt.parameters,docs:{...vt.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [a, setA] = useState<string | null>(null);
+    const [b, setB] = useState<string | null>(null);
+    const [c, setC] = useState<string | null>(null);
+    return <Stack spacing={2} sx={{
+      width: 300
+    }}>
+        <Autocomplete label="0" borderRadius={0} options={basicOptions} value={a} onChange={v => setA(v as string | null)} />
+        <Autocomplete label="10 (default)" borderRadius={10} options={basicOptions} value={b} onChange={v => setB(v as string | null)} />
+        <Autocomplete label="24 (pill)" borderRadius={24} options={basicOptions} value={c} onChange={v => setC(v as string | null)} />
+      </Stack>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "La prop \`borderRadius\` permite personalizar el radio del borde sin usar \`sx\` (acepta number en px o string)."
+      },
+      source: {
+        code: CustomBorderRadiusAutocompleteDefinition.trim()
+      }
+    }
+  }
+}`,...vt.parameters?.docs?.source}}};yt.parameters={...yt.parameters,docs:{...yt.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState<string | null>(null);
+    const countries: SelectOption[] = [{
+      value: "mx",
+      label: "México"
+    }, {
+      value: "co",
+      label: "Colombia"
+    }, {
+      value: "ar",
+      label: "Argentina"
+    }];
+    return <Box sx={{
+      width: 300
+    }}>
+        <Autocomplete label="País" placeholder="Buscar país..." options={countries} value={value} onChange={val => setValue(val as string | null)} />
+        <Typography sx={{
+        mt: 2
+      }} variant="caption" color="text.secondary">
+          Al estar vacío y sin foco, solo se ve el label como placeholder. Al
+          enfocar, el label sube y aparece el placeholder real.
+        </Typography>
+      </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Autocomplete vacío con placeholder. El placeholder solo se muestra cuando el campo está enfocado (mismo patrón que Select/Input)."
+      },
+      source: {
+        code: EmptyWithPlaceholderAutocompleteDefinition.trim()
+      }
+    }
+  }
+}`,...yt.parameters?.docs?.source}}};At.parameters={...At.parameters,docs:{...At.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    type FormValues = {
+      country: string | null;
+    };
+    const {
+      control,
+      handleSubmit,
+      watch
+    } = useForm<FormValues>({
+      defaultValues: {
+        country: null
+      }
+    });
+    const countries: SelectOption[] = [{
+      value: "mx",
+      label: "México"
+    }, {
+      value: "co",
+      label: "Colombia"
+    }, {
+      value: "ar",
+      label: "Argentina"
+    }];
+    const [submitted, setSubmitted] = useState<FormValues | null>(null);
+    return <Box component="form" onSubmit={handleSubmit(data => setSubmitted(data))}>
+        <Stack spacing={2} sx={{
+        width: 320
+      }}>
+          <Autocomplete name="country" control={control} validation={{
+          required: "Campo requerido"
+        }} label="País" placeholder="Seleccione..." options={countries} />
+          <Button type="submit" variant="contained">
+            Guardar
+          </Button>
+          <Typography variant="caption" color="text.secondary">
+            Valor actual (watch): {JSON.stringify(watch("country"))}
+          </Typography>
+          {submitted && <Typography variant="caption" color="success.main">
+              Submit: {JSON.stringify(submitted)}
+            </Typography>}
+        </Stack>
+      </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Integración con React Hook Form usando \`name\`/\`control\`/\`validation\`. El error de validación se renderiza automáticamente como helperText."
+      },
+      source: {
+        code: RHFAutocompleteDefinition.trim()
+      }
+    }
+  }
+}`,...At.parameters?.docs?.source}}};St.parameters={...St.parameters,docs:{...St.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState<number | null>(null);
+    const [input, setInput] = useState("");
+    const [options, setOptions] = useState<SelectOption[]>([]);
+    const [loading, setLoading] = useState(false);
+    const search = useMemo(() => debounce(async (q: string) => {
+      if (!q) {
+        setOptions([]);
+        return;
+      }
+      setLoading(true);
+      try {
+        const res = await fakeFetchUsers(q);
+        setOptions(res);
+      } finally {
+        setLoading(false);
+      }
+    }, 300), []);
+    useEffect(() => {
+      search(input);
+    }, [input, search]);
+    return <Box sx={{
+      width: 320
+    }}>
+        <Autocomplete<number> label="Usuario" placeholder="Buscar usuario..." options={options} value={value} onChange={v => setValue(v as number | null)} inputValue={input} onInputChange={(_, v) => setInput(v)} loading={loading}
+      // Desactiva filtro cliente: confiamos en el servicio.
+      filterOptions={x => x} />
+        <Typography sx={{
+        mt: 2
+      }} variant="caption" color="text.secondary">
+          {"Escribe para buscar. El servicio se consulta con debounce (300ms). filterOptions={(x) => x} desactiva el filtro cliente."}
+        </Typography>
+      </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Búsqueda asíncrona contra un servicio. El consumer maneja el estado de \`options\`/\`loading\` y reacciona a \`onInputChange\` para llamar al servicio. Usar \`filterOptions={(x) => x}\` para desactivar el filtro cliente."
+      },
+      source: {
+        code: AsyncServiceAutocompleteDefinition.trim()
+      }
+    }
+  }
+}`,...St.parameters?.docs?.source}}};Ct.parameters={...Ct.parameters,docs:{...Ct.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [value, setValue] = useState<number[]>([]);
+    const [input, setInput] = useState("");
+    const [options, setOptions] = useState<SelectOption[]>([]);
+    const [loading, setLoading] = useState(false);
+    const search = useMemo(() => debounce(async (q: string) => {
+      if (!q) {
+        setOptions([]);
+        return;
+      }
+      setLoading(true);
+      try {
+        const res = await fakeFetchUsers(q);
+        setOptions(res);
+      } finally {
+        setLoading(false);
+      }
+    }, 300), []);
+    useEffect(() => {
+      search(input);
+    }, [input, search]);
+    return <Box sx={{
+      width: 420
+    }}>
+        <Autocomplete<number> multiple maxChipsToShow={4} label="Usuarios" placeholder="Buscar y seleccionar varios..." options={options} value={value} onChange={v => setValue(v as number[])} inputValue={input} onInputChange={(_, v) => setInput(v)} loading={loading} filterOptions={x => x} />
+        <Typography sx={{
+        mt: 2
+      }} variant="caption" color="text.secondary">
+          Selecciona varios usuarios buscando con diferentes queries. Los chips
+          persisten aunque el search cambie las \`options\` (cache interno).
+        </Typography>
+        <Typography sx={{
+        mt: 1
+      }} variant="caption" display="block">
+          Seleccionados: {JSON.stringify(value)}
+        </Typography>
+      </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Búsqueda asíncrona **con selección múltiple**. El componente mantiene un cache interno de opciones ya vistas, así los chips de los items seleccionados NO desaparecen cuando el usuario busca otros términos. Flujo: buscar 'an' → seleccionar Andrea → buscar 'be' → seleccionar Beatriz → los dos chips siguen visibles."
+      },
+      source: {
+        code: AsyncServiceAutocompleteDefinition.trim()
+      }
+    }
+  }
+}`,...Ct.parameters?.docs?.source}}};const ca=["Simple","WithPlaceholder","Multiple","MultipleWithLimit","CustomRenderOption","CustomChipRender","Loading","EmptyOptions","ManyOptions","WithError","LabelPosition","CustomBorderRadius","EmptyWithPlaceholder","WithReactHookForm","AsyncService","AsyncServiceMultiple"];export{St as AsyncService,Ct as AsyncServiceMultiple,vt as CustomBorderRadius,mt as CustomChipRender,dt as CustomRenderOption,ft as EmptyOptions,yt as EmptyWithPlaceholder,xt as LabelPosition,gt as Loading,ht as ManyOptions,ut as Multiple,pt as MultipleWithLimit,it as Simple,bt as WithError,ct as WithPlaceholder,At as WithReactHookForm,ca as __namedExportsOrder,ia as default};