emblor-maintained/dist/index.mjs

A full featured, unstyled tag input component for React

import T,{useMemo as pt}from"react";import ot,{forwardRef as rt}from"react";import{clsx as tt}from"clsx";import{twMerge as nt}from"tailwind-merge";function s(...d){return nt(tt(d))}function Ve(){return crypto.getRandomValues(new Uint32Array(1))[0].toString()}var X=rt(({className:d,type:w,...u},c)=>ot.createElement("input",{type:w,className:s("flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",d),ref:c,...u}));X.displayName="Input";import*as Ie from"react";import{Slot as at}from"@radix-ui/react-slot";import{cva as it}from"class-variance-authority";var st=it("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",{variants:{variant:{default:"bg-primary text-primary-foreground shadow hover:bg-primary/90",destructive:"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",outline:"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-9 px-4 py-2",sm:"h-8 rounded-md px-3 text-xs",lg:"h-10 rounded-md px-8",icon:"h-9 w-9"}},defaultVariants:{variant:"default",size:"default"}}),S=Ie.forwardRef(({className:d,variant:w,size:u,asChild:c=!1,...n},l)=>Ie.createElement(c?at:"button",{className:s(st({variant:w,size:u,className:d})),ref:l,...n}));S.displayName="Button";import $,{useCallback as ut,useEffect as Ke,useRef as Ee,useState as ke}from"react";import*as fe from"react";import*as U from"@radix-ui/react-popover";var Le=U.Root,Ce=U.Trigger;var ve=fe.forwardRef(({className:d,align:w="center",sideOffset:u=4,...c},n)=>fe.createElement(U.Portal,null,fe.createElement(U.Content,{ref:n,align:w,sideOffset:u,className:s("z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",d),...c})));ve.displayName=U.Content.displayName;import k from"react";import be from"react";import{cva as dt}from"class-variance-authority";var lt=dt("transition-all border inline-flex items-center text-sm pl-2 rounded-md",{variants:{variant:{default:"bg-secondary text-secondary-foreground hover:bg-secondary/80 disabled:cursor-not-allowed disabled:opacity-50",primary:"bg-primary border-primary text-primary-foreground hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50",destructive:"bg-destructive border-destructive text-destructive-foreground hover:bg-destructive/90 disabled:cursor-not-allowed disabled:opacity-50"},size:{sm:"text-xs h-7",md:"text-sm h-8",lg:"text-base h-9",xl:"text-lg h-10"},shape:{default:"rounded-sm",rounded:"rounded-lg",square:"rounded-none",pill:"rounded-full"},borderStyle:{default:"border-solid",none:"border-none",dashed:"border-dashed",dotted:"border-dotted",double:"border-double"},textCase:{uppercase:"uppercase",lowercase:"lowercase",capitalize:"capitalize"},interaction:{clickable:"cursor-pointer hover:shadow-md",nonClickable:"cursor-default"},animation:{none:"",fadeIn:"animate-fadeIn",slideIn:"animate-slideIn",bounce:"animate-bounce"},textStyle:{normal:"font-normal",bold:"font-bold",italic:"italic",underline:"underline",lineThrough:"line-through"}},defaultVariants:{variant:"default",size:"md",shape:"default",borderStyle:"default",interaction:"nonClickable",animation:"fadeIn",textStyle:"normal"}}),Te=({tagObj:d,direction:w,draggable:u,onTagClick:c,onRemoveTag:n,variant:l,size:M,shape:C,borderStyle:D,textCase:o,interaction:v,animation:t,textStyle:y,isActiveTag:m,tagClasses:f,disabled:I})=>be.createElement("span",{key:d.id,draggable:u,className:s(lt({variant:l,size:M,shape:C,borderStyle:D,textCase:o,interaction:v,animation:t,textStyle:y}),{"justify-between w-full":w==="column","cursor-pointer":u,"ring-ring ring-offset-2 ring-2 ring-offset-background":m},f==null?void 0:f.body),onClick:()=>c==null?void 0:c(d)},d.text,be.createElement(S,{type:"button",variant:"ghost",onClick:P=>{P.stopPropagation(),n(d.id)},disabled:I,className:s("py-1 px-3 h-full hover:bg-transparent",f==null?void 0:f.closeButton)},be.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"lucide lucide-x"},be.createElement("path",{d:"M18 6 6 18"}),be.createElement("path",{d:"m6 6 12 12"}))));import $e,{SortableItem as We}from"react-easy-sort";var Oe=()=>k.createElement("div",{className:s("h-full rounded-md bg-secondary/50")}),de=({tags:d,customTagRenderer:w,direction:u,draggable:c,onSortEnd:n,className:l,inlineTags:M,activeTagIndex:C,setActiveTagIndex:D,classStyleProps:o,disabled:v,...t})=>{var P,B;let[y,m]=k.useState(null),f=a=>{m(a)},I=()=>{m(null)};return k.createElement(k.Fragment,null,M?k.createElement(k.Fragment,null,c?k.createElement($e,{onSortEnd:n,className:"flex flex-wrap gap-2 list",dropTarget:k.createElement(Oe,null)},d.map((a,h)=>k.createElement(We,{key:a.id},k.createElement("div",{onMouseDown:()=>f(a.id),onMouseLeave:I,className:s({"border border-solid border-primary rounded-md":y===a.id},"transition-all duration-200 ease-in-out")},w?w(a,h===C):k.createElement(Te,{tagObj:a,isActiveTag:h===C,direction:u,draggable:c,tagClasses:o==null?void 0:o.tagClasses,...t,disabled:v}))))):d.map((a,h)=>w?w(a,h===C):k.createElement(Te,{key:a.id,tagObj:a,isActiveTag:h===C,direction:u,draggable:c,tagClasses:o==null?void 0:o.tagClasses,...t,disabled:v}))):k.createElement("div",{className:s("rounded-md w-full",{"flex flex-wrap gap-2":u==="row","flex flex-col gap-2":u==="column"},(P=o==null?void 0:o.tagListClasses)==null?void 0:P.container)},c?k.createElement($e,{onSortEnd:n,className:`flex flex-wrap gap-2 list ${(B=o==null?void 0:o.tagListClasses)==null?void 0:B.sortableList}`,dropTarget:k.createElement(Oe,null)},d.map((a,h)=>k.createElement(We,{key:a.id},k.createElement("div",{onMouseDown:()=>f(a.id),onMouseLeave:I,className:s({"border border-solid border-primary rounded-md":y===a.id},"transition-all duration-200 ease-in-out")},w?w(a,h===C):k.createElement(Te,{tagObj:a,isActiveTag:h===C,direction:u,draggable:c,tagClasses:o==null?void 0:o.tagClasses,...t,disabled:v}))))):d.map((a,h)=>w?w(a,h===C):k.createElement(Te,{key:a.id,tagObj:a,isActiveTag:h===C,direction:u,draggable:c,tagClasses:o==null?void 0:o.tagClasses,...t,disabled:v}))))};var Pe=({children:d,tags:w,customTagRenderer:u,activeTagIndex:c,setActiveTagIndex:n,classStyleProps:l,disabled:M,usePortal:C,...D})=>{var K,R;let o=Ee(null),v=Ee(null),t=Ee(null),y=Ee(null),[m,f]=ke(0),[I,P]=ke(!1),[B,a]=ke(!1),[h,O]=ke(0);Ke(()=>{let b=()=>{var L;o.current&&v.current&&(f(o.current.offsetWidth),O(o.current.offsetWidth-((L=v==null?void 0:v.current)==null?void 0:L.offsetWidth)))};return b(),window.addEventListener("resize",b),()=>window.removeEventListener("resize",b)},[o,v]),Ke(()=>{let b=L=>{I&&o.current&&t.current&&!o.current.contains(L.target)&&!t.current.contains(L.target)&&P(!1)};return document.addEventListener("mousedown",b),()=>{document.removeEventListener("mousedown",b)}},[I]);let Y=ut(b=>{var L;b&&o.current&&f(o.current.offsetWidth),b&&((L=y.current)==null||L.focus(),P(b))},[B]),le=b=>{I&&a(!0);let L=d.props.onFocus;L&&L(b)},q=b=>{a(!1),I||P(!1);let L=d.props.onBlur;L&&L(b)};return $.createElement(Le,{open:I,onOpenChange:Y,modal:C},$.createElement("div",{className:"relative flex items-center rounded-md border border-input bg-transparent pr-3",ref:o},$.cloneElement(d,{onFocus:le,onBlur:q,ref:y}),$.createElement(Ce,{asChild:!0},$.createElement(S,{ref:v,variant:"ghost",size:"icon",role:"combobox",className:s("hover:bg-transparent",(K=l==null?void 0:l.popoverClasses)==null?void 0:K.popoverTrigger),onClick:()=>P(!I)},$.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:`lucide lucide-chevron-down h-4 w-4 shrink-0 opacity-50 ${I?"rotate-180":"rotate-0"}`},$.createElement("path",{d:"m6 9 6 6 6-6"}))))),$.createElement(ve,{ref:t,className:s("w-full space-y-3",(R=l==null?void 0:l.popoverClasses)==null?void 0:R.popoverContent),style:{marginLeft:`-${h}px`,width:`${m}px`}},$.createElement("div",{className:"space-y-1"},$.createElement("h4",{className:"text-sm font-medium leading-none"},"Entered Tags"),$.createElement("p",{className:"text-sm text-muted-foregrounsd text-left"},"These are the tags you've entered.")),$.createElement(de,{tags:w,customTagRenderer:u,activeTagIndex:c,setActiveTagIndex:n,classStyleProps:{tagListClasses:l==null?void 0:l.tagListClasses,tagClasses:l==null?void 0:l.tagClasses},...D,disabled:M})))};import A,{useCallback as gt,useEffect as Ge,useRef as Ne,useState as he}from"react";var Ue=({tags:d,setTags:w,setInputValue:u,setTagCount:c,autocompleteOptions:n,maxTags:l,onTagAdd:M,onTagRemove:C,allowDuplicates:D,inlineTags:o,children:v,classStyleProps:t,usePortal:y})=>{let m=Ne(null),f=Ne(null),I=Ne(null),P=Ne(null),[B,a]=he(0),[h,O]=he(!1),[Y,le]=he(!1),[q,K]=he(0),[R,b]=he(-1);Ge(()=>{var i,g;!m.current||!f.current||K(((i=m.current)==null?void 0:i.getBoundingClientRect().bottom)-((g=f.current)==null?void 0:g.getBoundingClientRect().bottom))},[d]),Ge(()=>{let i=g=>{h&&m.current&&P.current&&!m.current.contains(g.target)&&!P.current.contains(g.target)&&O(!1)};return document.addEventListener("mousedown",i),()=>{document.removeEventListener("mousedown",i)}},[h]);let L=gt(i=>{var g;if(i&&m.current){let{width:E}=m.current.getBoundingClientRect();a(E)}i&&((g=I.current)==null||g.focus(),O(i))},[Y]),_=i=>{if(m.current){let{width:E}=m.current.getBoundingClientRect();a(E),O(!0)}h&&le(!0);let g=v.props.onFocus;g&&g(i)},J=i=>{le(!1),h||O(!1);let g=v.props.onBlur;g&&g(i)},Z=i=>{if(h)switch(i.key){case"ArrowUp":i.preventDefault(),b(g=>g<=0?n.length-1:g-1);break;case"ArrowDown":i.preventDefault(),b(g=>g===n.length-1?0:g+1);break;case"Enter":i.preventDefault(),R!==-1&&(ee(n[R]),b(-1));break}},ee=i=>{let g=d.findIndex(E=>E.text===i.text);if(g>=0){let E=d.filter((G,xe)=>xe!==g);w(E),c(G=>G-1),C&&C(i.text)}else{if(!D&&d.some(E=>E.text===i.text))return;(!l||d.length<l)&&(w([...d,i]),c(E=>E+1),u(""),M&&M(i.text))}b(-1)},j=A.cloneElement(v,{onKeyDown:Z,onFocus:_,onBlur:J,ref:I});return A.createElement("div",{className:s("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",t==null?void 0:t.command)},A.createElement(Le,{open:h,onOpenChange:L,modal:y},A.createElement("div",{className:"relative h-full flex items-center rounded-md border bg-transparent pr-3",ref:m},j,A.createElement(Ce,{asChild:!0,ref:f},A.createElement(S,{variant:"ghost",size:"icon",role:"combobox",className:s(`hover:bg-transparent ${o?"":"ml-auto"}`,t==null?void 0:t.popoverTrigger),onClick:()=>{O(!h)}},A.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:`lucide lucide-chevron-down h-4 w-4 shrink-0 opacity-50 ${h?"rotate-180":"rotate-0"}`},A.createElement("path",{d:"m6 9 6 6 6-6"}))))),A.createElement(ve,{ref:P,side:"bottom",align:"start",forceMount:!0,className:s("p-0 relative",t==null?void 0:t.popoverContent),style:{top:`${q}px`,marginLeft:`calc(-${B}px + 36px)`,width:`${B}px`,minWidth:`${B}px`,zIndex:9999}},A.createElement("div",{className:s("max-h-[300px] overflow-y-auto overflow-x-hidden",t==null?void 0:t.commandList),style:{minHeight:"68px"},key:n.length},n.length>0?A.createElement("div",{key:n.length,role:"group",className:s("overflow-y-auto overflow-hidden p-1 text-foreground",t==null?void 0:t.commandGroup),style:{minHeight:"68px"}},A.createElement("span",{className:"text-muted-foreground font-medium text-sm py-1.5 px-2 pb-2"},"Suggestions"),A.createElement("div",{role:"separator",className:"py-0.5"}),n.map((i,g)=>{let E=g===R;return A.createElement("div",{key:i.id,role:"option","aria-selected":E,className:s("relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-accent",E&&"bg-accent text-accent-foreground",t==null?void 0:t.commandItem),"data-value":i.text,onClick:()=>ee(i)},A.createElement("div",{className:"w-full flex items-center gap-2"},i.text,d.some(G=>G.text===i.text)&&A.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"lucide lucide-check"},A.createElement("path",{d:"M20 6 9 17l-5-5"}))))})):A.createElement("div",{className:"py-6 text-center text-sm"},"No results found.")))))};var ct=(u=>(u.Comma=",",u.Enter="Enter",u))(ct||{}),mt=T.forwardRef((d,w)=>{var Fe,ye,He,De,Re,ze;let{id:u,placeholder:c,tags:n,setTags:l,variant:M,size:C,shape:D,enableAutocomplete:o,autocompleteOptions:v,maxTags:t,delimiter:y=",",onTagAdd:m,onTagRemove:f,allowDuplicates:I,showCount:P,validateTag:B,placeholderWhenFull:a="Max tags reached",sortTags:h,delimiterList:O,truncate:Y,autocompleteFilter:le,borderStyle:q,textCase:K,interaction:R,animation:b,textStyle:L,minLength:_,maxLength:J,direction:Z="row",onInputChange:ee,customTagRenderer:j,onFocus:i,onBlur:g,onTagClick:E,draggable:G=!1,inputFieldPosition:xe="bottom",clearAll:qe=!1,onClearAll:we,usePopoverForTags:Ae=!1,inputProps:te={},restrictTagsToAutocompleteOptions:Be,inlineTags:Q=!0,addTagsOnBlur:Se=!1,activeTagIndex:H,setActiveTagIndex:F,styleClasses:e={},disabled:W=!1,usePortal:_e=!1,addOnPaste:Je=!1,generateTagId:Me=Ve}=d,[z,ue]=T.useState(""),[Qe,ne]=T.useState(Math.max(0,n.length)),oe=T.useRef(null);if(t!==void 0&&t<0||d.minTags!==void 0&&d.minTags<0)return console.warn("maxTags and minTags cannot be less than 0"),null;let re=p=>{let r=p.target.value;Je&&r.includes(y)?(r.split(y).map(N=>N.trim()).filter(N=>N).forEach(N=>{if(!N)return;let V=N.trim();if(Be&&!(v!=null&&v.some(me=>me.text===V))){console.warn("Tag not allowed as per autocomplete options");return}if(B&&!B(V)){console.warn("Invalid tag as per validateTag");return}if(_&&V.length<_){console.warn(`Tag "${V}" is too short`);return}if(J&&V.length>J){console.warn(`Tag "${V}" is too long`);return}let je=Me();if(I||!n.some(me=>me.text===V))if(t===void 0||n.length<t){let me={id:je,text:V};l(et=>[...et,me]),m==null||m(V)}else console.warn("Reached the maximum number of tags allowed");else console.warn(`Duplicate tag "${V}" not added`)}),ue("")):ue(r),ee==null||ee(r)},ae=p=>{F(null),i==null||i(p)},ie=p=>{if(Se&&z.trim()){let r=z.trim();if(B&&!B(r))return;if(_&&r.length<_){console.warn("Tag is too short");return}if(J&&r.length>J){console.warn("Tag is too long");return}if((I||!n.some(x=>x.text===r))&&(t===void 0||n.length<t)){let x=Me();l([...n,{id:x,text:r}]),m==null||m(r),ne(N=>N+1),ue("")}}g==null||g(p)},se=p=>{if(O?O.includes(p.key):p.key===y||p.key==="Enter"){p.preventDefault();let r=z.trim();if(Be&&!(v!=null&&v.some(N=>N.text===r))||B&&!B(r))return;if(_&&r.length<_){console.warn("Tag is too short");return}if(J&&r.length>J){console.warn("Tag is too long");return}let x=Me();r&&(I||!n.some(N=>N.text===r))&&(t===void 0||n.length<t)&&(l([...n,{id:x,text:r}]),m==null||m(r),ne(N=>N+1)),ue("")}else switch(p.key){case"Delete":if(H!==null){p.preventDefault();let r=[...n];r.splice(H,1),l(r),F(x=>r.length===0?null:x>=r.length?r.length-1:x),ne(x=>x-1),f==null||f(n[H].text)}break;case"Backspace":if(H!==null){p.preventDefault();let r=[...n];r.splice(H,1),l(r),F(x=>x===0?null:x-1),ne(x=>x-1),f==null||f(n[H].text)}break;case"ArrowRight":p.preventDefault(),F(H===null?0:r=>r+1>=n.length?0:r+1);break;case"ArrowLeft":p.preventDefault(),F(H===null?n.length-1:r=>r===0?n.length-1:r-1);break;case"Home":p.preventDefault(),F(0);break;case"End":p.preventDefault(),F(n.length-1);break}},ge=p=>{var r;l(n.filter(x=>x.id!==p)),f==null||f(((r=n.find(x=>x.id===p))==null?void 0:r.text)||""),ne(x=>x-1)},pe=(p,r)=>{l(x=>{let N=[...x],[V]=N.splice(p,1);return N.splice(r,0,V),N})},Xe=()=>{if(!we){F(-1),l([]);return}we==null||we()},Ye=pt(()=>(v||[]).filter(p=>p.text.toLowerCase().includes(z?z.toLowerCase():"")),[z,v]),Ze=h?[...n].sort():n,ce=Y?n.map(p=>{var r;return{id:p.id,text:((r=p.text)==null?void 0:r.length)>Y?`${p.text.substring(0,Y)}...`:p.text}}):Ze;return T.createElement("div",{className:`w-full flex ${!Q&&n.length>0?"gap-3":""} ${xe==="bottom"?"flex-col":xe==="top"?"flex-col-reverse":"flex-row"}`},!Ae&&(Q?!o&&T.createElement("div",{className:"w-full"},T.createElement("div",{className:s("flex flex-row flex-wrap items-center gap-2 p-2 w-full rounded-md border border-input bg-background text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",e==null?void 0:e.inlineTagsContainer)},T.createElement(de,{tags:ce,customTagRenderer:j,variant:M,size:C,shape:D,borderStyle:q,textCase:K,interaction:R,animation:b,textStyle:L,onTagClick:E,draggable:G,onSortEnd:pe,onRemoveTag:ge,direction:Z,inlineTags:Q,activeTagIndex:H,setActiveTagIndex:F,classStyleProps:{tagListClasses:e==null?void 0:e.tagList,tagClasses:e==null?void 0:e.tag},disabled:W}),T.createElement(X,{ref:oe,id:u,type:"text",placeholder:t!==void 0&&n.length>=t?a:c,value:z,onChange:re,onKeyDown:se,onFocus:ae,onBlur:ie,...te,className:s("border-0 h-5 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 flex-1 w-fit",e==null?void 0:e.input),autoComplete:o?"on":"off",list:o?"autocomplete-options":void 0,disabled:W||t!==void 0&&n.length>=t}))):T.createElement(de,{tags:ce,customTagRenderer:j,variant:M,size:C,shape:D,borderStyle:q,textCase:K,interaction:R,animation:b,textStyle:L,onTagClick:E,draggable:G,onSortEnd:pe,onRemoveTag:ge,direction:Z,inlineTags:Q,activeTagIndex:H,setActiveTagIndex:F,classStyleProps:{tagListClasses:e==null?void 0:e.tagList,tagClasses:e==null?void 0:e.tag},disabled:W})),o?T.createElement("div",{className:"w-full"},T.createElement(Ue,{tags:n,setTags:l,setInputValue:ue,autocompleteOptions:Ye,setTagCount:ne,maxTags:t,onTagAdd:m,onTagRemove:f,allowDuplicates:I!=null?I:!1,inlineTags:Q,usePortal:_e,classStyleProps:{command:(Fe=e==null?void 0:e.autoComplete)==null?void 0:Fe.command,popoverTrigger:(ye=e==null?void 0:e.autoComplete)==null?void 0:ye.popoverTrigger,popoverContent:(He=e==null?void 0:e.autoComplete)==null?void 0:He.popoverContent,commandList:(De=e==null?void 0:e.autoComplete)==null?void 0:De.commandList,commandGroup:(Re=e==null?void 0:e.autoComplete)==null?void 0:Re.commandGroup,commandItem:(ze=e==null?void 0:e.autoComplete)==null?void 0:ze.commandItem}},Ae?T.createElement(Pe,{tags:ce,customTagRenderer:j,variant:M,size:C,shape:D,borderStyle:q,textCase:K,interaction:R,animation:b,textStyle:L,onTagClick:E,draggable:G,onSortEnd:pe,onRemoveTag:ge,direction:Z,activeTagIndex:H,setActiveTagIndex:F,classStyleProps:{popoverClasses:e==null?void 0:e.tagPopover,tagListClasses:e==null?void 0:e.tagList,tagClasses:e==null?void 0:e.tag},disabled:W},T.createElement(X,{ref:oe,id:u,type:"text",placeholder:t!==void 0&&n.length>=t?a:c,value:z,onChange:re,onKeyDown:se,onFocus:ae,onBlur:ie,...te,className:s("border-0 h-5 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 flex-1 w-fit",e==null?void 0:e.input),autoComplete:o?"on":"off",list:o?"autocomplete-options":void 0,disabled:W||t!==void 0&&n.length>=t})):Q?T.createElement("div",{className:s("flex flex-row flex-wrap items-center p-2 gap-2 h-fit w-full bg-background text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",e==null?void 0:e.inlineTagsContainer)},T.createElement(de,{tags:ce,customTagRenderer:j,variant:M,size:C,shape:D,borderStyle:q,textCase:K,interaction:R,animation:b,textStyle:L,onTagClick:E,draggable:G,onSortEnd:pe,onRemoveTag:ge,direction:Z,inlineTags:Q,activeTagIndex:H,setActiveTagIndex:F,classStyleProps:{tagListClasses:e==null?void 0:e.tagList,tagClasses:e==null?void 0:e.tag},disabled:W}),T.createElement(X,{ref:oe,id:u,type:"text",placeholder:t!==void 0&&n.length>=t?a:c,value:z,onChange:re,onKeyDown:se,onFocus:ae,onBlur:ie,...te,className:s("border-0 h-5 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 flex-1 w-fit",e==null?void 0:e.input),autoComplete:o?"on":"off",list:o?"autocomplete-options":void 0,disabled:W||t!==void 0&&n.length>=t})):T.createElement(X,{ref:oe,id:u,type:"text",placeholder:t!==void 0&&n.length>=t?a:c,value:z,onChange:re,onKeyDown:se,onFocus:ae,onBlur:ie,...te,className:s("border-0 h-5 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 flex-1 w-fit",e==null?void 0:e.input),autoComplete:o?"on":"off",list:o?"autocomplete-options":void 0,disabled:W||t!==void 0&&n.length>=t}))):T.createElement("div",{className:"w-full"},Ae?T.createElement(Pe,{tags:ce,customTagRenderer:j,variant:M,size:C,shape:D,borderStyle:q,textCase:K,interaction:R,animation:b,textStyle:L,onTagClick:E,draggable:G,onSortEnd:pe,onRemoveTag:ge,direction:Z,activeTagIndex:H,setActiveTagIndex:F,classStyleProps:{popoverClasses:e==null?void 0:e.tagPopover,tagListClasses:e==null?void 0:e.tagList,tagClasses:e==null?void 0:e.tag},disabled:W},T.createElement(X,{ref:oe,id:u,type:"text",placeholder:t!==void 0&&n.length>=t?a:c,value:z,onChange:re,onKeyDown:se,onFocus:ae,onBlur:ie,...te,autoComplete:o?"on":"off",list:o?"autocomplete-options":void 0,disabled:W||t!==void 0&&n.length>=t,className:s("border-0 w-full",e==null?void 0:e.input)})):Q?null:T.createElement(X,{ref:oe,id:u,type:"text",placeholder:t!==void 0&&n.length>=t?a:c,value:z,onChange:re,onKeyDown:se,onFocus:ae,onBlur:ie,...te,className:s(e==null?void 0:e.input),autoComplete:o?"on":"off",list:o?"autocomplete-options":void 0,disabled:W||t!==void 0&&n.length>=t})),P&&t&&T.createElement("div",{className:"flex"},T.createElement("span",{className:"text-muted-foreground text-sm mt-1 ml-auto"},`${Qe}`,"/",`${t}`)),qe&&T.createElement(S,{type:"button",onClick:Xe,className:s("mt-2",e==null?void 0:e.clearAllButton)},"Clear All"))});mt.displayName="TagInput";export{ct as Delimiter,mt as TagInput};
//# sourceMappingURL=index.mjs.map