1:"$Sreact.fragment"
2:I[83150,["5103","static/chunks/5103-ddf313fc4065f45b.js","5454","static/chunks/5454-17baf1dcf281acc9.js","8658","static/chunks/8658-3c1c3f2e012d6fec.js","8408","static/chunks/8408-c5000046505ef5af.js","6210","static/chunks/6210-7b18ec24a0777d8e.js","2153","static/chunks/2153-342ff3fdebf5d18b.js","7177","static/chunks/app/layout-3e6d9be074ff2673.js"],"ThemeProvider"]
3:I[81502,[],""]
4:I[20628,[],""]
5:I[41981,["5103","static/chunks/5103-ddf313fc4065f45b.js","5454","static/chunks/5454-17baf1dcf281acc9.js","8658","static/chunks/8658-3c1c3f2e012d6fec.js","8408","static/chunks/8408-c5000046505ef5af.js","6210","static/chunks/6210-7b18ec24a0777d8e.js","2153","static/chunks/2153-342ff3fdebf5d18b.js","7177","static/chunks/app/layout-3e6d9be074ff2673.js"],"ThemeSwitcher"]
6:I[8985,["5103","static/chunks/5103-ddf313fc4065f45b.js","5454","static/chunks/5454-17baf1dcf281acc9.js","8658","static/chunks/8658-3c1c3f2e012d6fec.js","8408","static/chunks/8408-c5000046505ef5af.js","6210","static/chunks/6210-7b18ec24a0777d8e.js","2153","static/chunks/2153-342ff3fdebf5d18b.js","7177","static/chunks/app/layout-3e6d9be074ff2673.js"],"Toaster"]
7:I[56695,["5454","static/chunks/5454-17baf1dcf281acc9.js","8358","static/chunks/8358-b19a3338dfba1199.js","1747","static/chunks/1747-126c5a1152f5fed0.js","8658","static/chunks/8658-3c1c3f2e012d6fec.js","9387","static/chunks/9387-638d698e6dfb8cf9.js","3840","static/chunks/3840-c0c4b27ae6b73bc9.js","4944","static/chunks/app/(app)/layout-58d04bc414dcaa9a.js"],"MainNav"]
8:I[62893,["5454","static/chunks/5454-17baf1dcf281acc9.js","8358","static/chunks/8358-b19a3338dfba1199.js","1747","static/chunks/1747-126c5a1152f5fed0.js","8658","static/chunks/8658-3c1c3f2e012d6fec.js","9387","static/chunks/9387-638d698e6dfb8cf9.js","3840","static/chunks/3840-c0c4b27ae6b73bc9.js","4944","static/chunks/app/(app)/layout-58d04bc414dcaa9a.js"],"MobileNav"]
9:I[24693,["5454","static/chunks/5454-17baf1dcf281acc9.js","8358","static/chunks/8358-b19a3338dfba1199.js","1747","static/chunks/1747-126c5a1152f5fed0.js","8658","static/chunks/8658-3c1c3f2e012d6fec.js","9387","static/chunks/9387-638d698e6dfb8cf9.js","3840","static/chunks/3840-c0c4b27ae6b73bc9.js","4944","static/chunks/app/(app)/layout-58d04bc414dcaa9a.js"],"CommandMenu"]
a:I[91747,["5454","static/chunks/5454-17baf1dcf281acc9.js","1747","static/chunks/1747-126c5a1152f5fed0.js","8658","static/chunks/8658-3c1c3f2e012d6fec.js","6210","static/chunks/6210-7b18ec24a0777d8e.js","9387","static/chunks/9387-638d698e6dfb8cf9.js","4188","static/chunks/4188-5bb01a8789460d34.js","4207","static/chunks/4207-d704f6e9304fd0e9.js","2153","static/chunks/2153-342ff3fdebf5d18b.js","845","static/chunks/845-e156b4c3b5a4b749.js","757","static/chunks/app/(app)/docs/%5B%5B...slug%5D%5D/page-3a1c6c2ec826dbe4.js"],""]
c:I[78291,["5454","static/chunks/5454-17baf1dcf281acc9.js","8358","static/chunks/8358-b19a3338dfba1199.js","1747","static/chunks/1747-126c5a1152f5fed0.js","8658","static/chunks/8658-3c1c3f2e012d6fec.js","9387","static/chunks/9387-638d698e6dfb8cf9.js","3840","static/chunks/3840-c0c4b27ae6b73bc9.js","4944","static/chunks/app/(app)/layout-58d04bc414dcaa9a.js"],"ModeSwitcher"]
d:I[33173,["5454","static/chunks/5454-17baf1dcf281acc9.js","1747","static/chunks/1747-126c5a1152f5fed0.js","6556","static/chunks/app/(app)/docs/layout-9727230af77a41e4.js"],"DocsNav"]
f:I[56543,[],"OutletBoundary"]
11:I[56543,[],"MetadataBoundary"]
13:I[56543,[],"ViewportBoundary"]
15:I[45721,[],""]
:HL["/_next/static/media/66f30814ff6d7cdf.p.woff2","font",{"crossOrigin":"","type":"font/woff2"}]
:HL["/_next/static/media/e11418ac562b8ac1-s.p.woff2","font",{"crossOrigin":"","type":"font/woff2"}]
:HL["/_next/static/css/cd3f7513904a9efa.css","style"]
:HL["/_next/static/css/8d783b7b2ed5c1af.css","style"]
:HL["/_next/static/css/708a24b68ab79981.css","style"]
b:T843,M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z0:{"P":null,"b":"8Ffee0CL29eIsRTe7df76","p":"","c":["","docs","components","tags-input"],"i":false,"f":[[["",{"children":["(app)",{"children":["docs",{"children":[["slug","components/tags-input","oc"],{"children":["__PAGE__",{}]}]}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/cd3f7513904a9efa.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/8d783b7b2ed5c1af.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","suppressHydrationWarning":true,"children":[["$","head",null,{"children":["$","script",null,{"dangerouslySetInnerHTML":{"__html":"\n              try {\n                if (localStorage.theme === 'dark' || ((!('theme' in localStorage) || localStorage.theme === 'system') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {\n                  document.querySelector('meta[name=\"theme-color\"]').setAttribute('content', '#09090b')\n                }\n              } catch (_) {}\n            "}}]}],["$","body",null,{"className":"min-h-svh bg-background font-sans antialiased __variable_3a0388 __variable_c1e5c9","children":["$","$L2",null,{"attribute":"class","defaultTheme":"system","enableSystem":true,"disableTransitionOnChange":true,"enableColorScheme":true,"children":[["$","div",null,{"vaul-drawer-wrapper":"","children":["$","div",null,{"className":"relative flex min-h-svh flex-col bg-background","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]}]}],null,["$","$L5",null,{}],["$","$L6",null,{}]]}]}]]}]]}],{"children":["(app)",["$","$1","c",{"children":[null,["$","div",null,{"data-wrapper":"","className":"border-grid flex flex-1 flex-col","children":[["$","header",null,{"className":"border-grid sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60","children":["$","div",null,{"className":"container-wrapper","children":["$","div",null,{"className":"container flex h-14 items-center","children":[["$","$L7",null,{}],["$","$L8",null,{}],["$","div",null,{"className":"flex flex-1 items-center justify-between gap-2 md:justify-end","children":[["$","div",null,{"className":"w-full flex-1 md:w-auto md:flex-none","children":["$","$L9",null,{}]}],["$","nav",null,{"className":"flex items-center gap-0.5","children":[["$","button",null,{"data-slot":"button","className":"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-bold transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 focus-visible:ring-4 focus-visible:outline-1 aria-invalid:focus-visible:ring-0 hover:bg-accent hover:text-accent-foreground h-8 w-8 px-0","type":"button","disabled":"$undefined","children":["$","$La",null,{"href":"https://github.com/AKASHAorg/akasha-ui","target":"_blank","rel":"noreferrer","children":[["$","svg",null,{"viewBox":"0 0 438.549 438.549","className":"h-4 w-4","children":["$","path",null,{"fill":"currentColor","d":"$b"}]}],["$","span",null,{"className":"sr-only","children":"GitHub"}]]}]}],["$","$Lc",null,{}]]}]]}]]}]}]}],["$","main",null,{"className":"flex flex-1 flex-col","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","(app)","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$0:f:0:1:1:props:children:1:props:children:1:props:children:props:children:0:props:children:props:children:props:notFound:1:1:props:style","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$0:f:0:1:1:props:children:1:props:children:1:props:children:props:children:0:props:children:props:children:props:notFound:1:1:props:children:props:children:1:props:style","children":404}],["$","div",null,{"style":"$0:f:0:1:1:props:children:1:props:children:1:props:children:props:children:0:props:children:props:children:props:notFound:1:1:props:children:props:children:2:props:style","children":["$","h2",null,{"style":"$0:f:0:1:1:props:children:1:props:children:1:props:children:props:children:0:props:children:props:children:props:notFound:1:1:props:children:props:children:2:props:children:props:style","children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]}],["$","footer",null,{"className":"border-grid border-t py-6 md:px-8 md:py-0","children":["$","div",null,{"className":"container-wrapper","children":["$","div",null,{"className":"container py-4","children":["$","div",null,{"className":"text-balance text-center text-sm leading-loose text-muted-foreground md:text-left","children":["Built by"," ",["$","a",null,{"href":"https://x.com/AKASHAorg","target":"_blank","rel":"noreferrer","className":"font-medium underline underline-offset-4","children":"AKASHA"}],". The source code is available on"," ",["$","a",null,{"href":"https://github.com/AKASHAorg/akasha-ui","target":"_blank","rel":"noreferrer","className":"font-medium underline underline-offset-4","children":"GitHub"}],"."]}]}]}]}]]}]]}],{"children":["docs",["$","$1","c",{"children":[null,["$","div",null,{"className":"container-wrapper","children":["$","div",null,{"className":"container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10","children":[["$","aside",null,{"className":"border-grid fixed top-14 z-30 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 border-r md:sticky md:block","children":["$","div",null,{"className":"no-scrollbar h-full overflow-auto py-6 pr-4 lg:py-8","children":["$","$Ld",null,{"config":{"mainNav":[{"title":"Home","href":"/"},{"title":"Documentation","href":"/docs"},{"title":"Components","href":"/docs/components/autocomplete"},{"title":"Blocks","href":"/blocks"}],"sidebarNav":[{"title":"Getting Started","items":[{"title":"Introduction","href":"/docs","items":[]},{"title":"Installation","href":"/docs/installation","items":[]},{"title":"Theming","href":"/docs/theming","items":[]}]},{"title":"AKASHA Components","items":[{"title":"Autocomplete","href":"/docs/components/autocomplete","items":[]},{"title":"Circular Progress","href":"/docs/components/circular-progress","items":[]},{"title":"Content Card","href":"/docs/components/content-card","items":[]},{"title":"Copy to clipboard","href":"/docs/components/copy-to-clipboard","items":[]},{"title":"Duplex Button","href":"/docs/components/duplex-button","items":[]},{"title":"Error Loader","href":"/docs/components/error-loader","items":[]},{"title":"Extension Avatar","href":"/docs/components/extension-avatar","items":[]},{"title":"Extension Card","href":"/docs/components/extension-card","items":[]},{"title":"Extension Type Icon","href":"/docs/components/extension-type-icon","items":[]},{"title":"Feed CTA","href":"/docs/components/feed-cta","items":[]},{"title":"Icon Container","href":"/docs/components/icon-container","items":[]},{"title":"Image","href":"/docs/components/image","items":[]},{"title":"Infinite Scroll","href":"/docs/components/infinite-scroll","items":[]},{"title":"Profile Avatar Button","href":"/docs/components/profile-avatar-button","items":[]},{"title":"Profile Avatar","href":"/docs/components/profile-avatar","items":[]},{"title":"Stack","href":"/docs/components/stack","items":[]},{"title":"Stacked Avatar","href":"/docs/components/stacked-avatar","items":[]},{"title":"Stepper","href":"/docs/components/stepper","items":[]},{"title":"Tags Input","href":"/docs/components/tags-input","items":[]},{"title":"Typography","href":"/docs/components/typography","items":[]}]},{"title":"Custom ShadCN Components","items":[{"title":"Accordion","href":"/docs/components/accordion","items":[]},{"title":"Badge","href":"/docs/components/badge","items":[]},{"title":"Button","href":"/docs/components/button","items":[]},{"title":"Card","href":"/docs/components/card","items":[]},{"title":"Checkbox","href":"/docs/components/checkbox","items":[]},{"title":"Form","href":"/docs/components/form","items":[]},{"title":"Inline Notification","href":"/docs/components/inline-notification","items":[]},{"title":"Input","href":"/docs/components/input","items":[]},{"title":"Select","href":"/docs/components/select","items":[]},{"title":"Slider","href":"/docs/components/slider","items":[]},{"title":"Sonner","href":"/docs/components/sonner","items":[]},{"title":"Tabs","href":"/docs/components/tabs","items":[]},{"title":"Textarea","href":"/docs/components/textarea","items":[]}]}]}}]}]}],["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","(app)","children","docs","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","components/tags-input","oc"],["$","$1","c",{"children":[null,["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","(app)","children","docs","children","$0:f:0:1:2:children:2:children:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$Le",[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/708a24b68ab79981.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","$Lf",null,{"children":"$L10"}]]}],{},null,false]},null,false]},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","FNCBvsximPfHpgVipyijA",{"children":[["$","$L11",null,{"children":"$L12"}],["$","$L13",null,{"children":"$L14"}],["$","meta",null,{"name":"next-size-adjust","content":""}]]}]]}],false]],"m":"$undefined","G":["$15","$undefined"],"s":false,"S":true}
16:I[45628,["5454","static/chunks/5454-17baf1dcf281acc9.js","1747","static/chunks/1747-126c5a1152f5fed0.js","8658","static/chunks/8658-3c1c3f2e012d6fec.js","6210","static/chunks/6210-7b18ec24a0777d8e.js","9387","static/chunks/9387-638d698e6dfb8cf9.js","4188","static/chunks/4188-5bb01a8789460d34.js","4207","static/chunks/4207-d704f6e9304fd0e9.js","2153","static/chunks/2153-342ff3fdebf5d18b.js","845","static/chunks/845-e156b4c3b5a4b749.js","757","static/chunks/app/(app)/docs/%5B%5B...slug%5D%5D/page-3a1c6c2ec826dbe4.js"],"default"]
17:I[28453,["5454","static/chunks/5454-17baf1dcf281acc9.js","1747","static/chunks/1747-126c5a1152f5fed0.js","8658","static/chunks/8658-3c1c3f2e012d6fec.js","6210","static/chunks/6210-7b18ec24a0777d8e.js","9387","static/chunks/9387-638d698e6dfb8cf9.js","4188","static/chunks/4188-5bb01a8789460d34.js","4207","static/chunks/4207-d704f6e9304fd0e9.js","2153","static/chunks/2153-342ff3fdebf5d18b.js","845","static/chunks/845-e156b4c3b5a4b749.js","757","static/chunks/app/(app)/docs/%5B%5B...slug%5D%5D/page-3a1c6c2ec826dbe4.js"],"Mdx"]
19:I[23702,["5454","static/chunks/5454-17baf1dcf281acc9.js","1747","static/chunks/1747-126c5a1152f5fed0.js","8658","static/chunks/8658-3c1c3f2e012d6fec.js","6210","static/chunks/6210-7b18ec24a0777d8e.js","9387","static/chunks/9387-638d698e6dfb8cf9.js","4188","static/chunks/4188-5bb01a8789460d34.js","4207","static/chunks/4207-d704f6e9304fd0e9.js","2153","static/chunks/2153-342ff3fdebf5d18b.js","845","static/chunks/845-e156b4c3b5a4b749.js","757","static/chunks/app/(app)/docs/%5B%5B...slug%5D%5D/page-3a1c6c2ec826dbe4.js"],"DashboardTableOfContents"]
18:T17b4d,var Component=(()=>{var g=Object.create;var o=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var C=(e,l)=>()=>(l||e((l={exports:{}}).exports,l),l.exports),I=(e,l)=>{for(var s in l)o(e,s,{get:l[s],enumerable:!0})},E=(e,l,s,a)=>{if(l&&typeof l=="object"||typeof l=="function")for(let c of B(l))!T.call(e,c)&&c!==s&&o(e,c,{get:()=>l[c],enumerable:!(a=N(l,c))||a.enumerable});return e};var v=(e,l,s)=>(s=e!=null?g(f(e)):{},E(l||!e||!e.__esModule?o(s,"default",{value:e,enumerable:!0}):s,e)),x=e=>E(o({},"__esModule",{value:!0}),e);var F=C((S,y)=>{y.exports=_jsx_runtime});var w={};I(w,{default:()=>u,frontmatter:()=>b});var n=v(F()),b={title:"Tags Input",description:"Tags input renders an input followed by tags.",component:!0};function m(e){let l={a:"a",code:"code",div:"div",h2:"h2",h3:"h3",h4:"h4",pre:"pre",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...e.components},{ComponentPreview:s,ComponentSource:a,Step:c,Steps:p,Tabs:d,TabsContent:t,TabsList:h,TabsTrigger:i}=l;return s||r("ComponentPreview",!0),a||r("ComponentSource",!0),c||r("Step",!0),p||r("Steps",!0),d||r("Tabs",!0),t||r("TabsContent",!0),h||r("TabsList",!0),i||r("TabsTrigger",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(s,{name:"tags-input-demo",children:(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import * as React from "react";

import {
  TagsInput,
  TagsInputItem,
  TagsInputList,
} from "@/components/ui/tags-input";

const INTERESTS = ["akasha", "ipfs", "ethereum", "web3"];

export function TagsInputDemo() {
  const [interests, setInterests] = React.useState(INTERESTS);

  return (
    <TagsInput
      onTagsChange={(tags) => setInterests([...tags])}
      placeholder="Interests"
      className="w-100"
    >
      <TagsInputList>
        {interests.map((interest) => (
          <TagsInputItem key={interest} tag={interest} />
        ))}
      </TagsInputList>
    </TagsInput>
  );
}
`,__src__:"registry/default/examples/tags-input-demo.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" *"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" as"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  TagsInput,"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  TagsInputItem,"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  TagsInputList,"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/tags-input"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" INTERESTS"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"akasha"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"ipfs"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"ethereum"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"web3"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"];"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" TagsInputDemo"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"  const"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"interests"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"setInterests"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"INTERESTS"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:");"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"  return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"TagsInput"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"      onTagsChange"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"tags"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" setInterests"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(["}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"tags])}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"      placeholder"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Interests"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"      className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"w-100"'})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    >"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"TagsInputList"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"        {interests."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"interest"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"          <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"TagsInputItem"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" key"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{interest} "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"tag"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{interest} />"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"        ))}"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      </"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"TagsInputList"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    </"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"TagsInput"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  );"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})}),`
`,(0,n.jsxs)(l.h2,{id:"installation",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),`
`,(0,n.jsxs)(d,{defaultValue:"cli",children:[(0,n.jsxs)(h,{children:[(0,n.jsx)(i,{value:"cli",children:"CLI"}),(0,n.jsx)(i,{value:"manual",children:"Manual"})]}),(0,n.jsx)(t,{value:"cli",children:(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx shadcn@latest add "https://akasha-ui.pages.dev/r/styles/default/tags-input.json"
`,__npmCommand__:`npx shadcn@latest add "https://akasha-ui.pages.dev/r/styles/default/tags-input.json"
`,__yarnCommand__:`npx shadcn@latest add "https://akasha-ui.pages.dev/r/styles/default/tags-input.json"
`,__pnpmCommand__:`pnpm dlx shadcn@latest add "https://akasha-ui.pages.dev/r/styles/default/tags-input.json"
`,__bunCommand__:`bunx --bun shadcn@latest add "https://akasha-ui.pages.dev/r/styles/default/tags-input.json"
`,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"npx"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" shadcn@latest"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" add"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "https://akasha-ui.pages.dev/r/styles/default/tags-input.json"'})]})})})})}),(0,n.jsx)(t,{value:"manual",children:(0,n.jsxs)(p,{children:[(0,n.jsx)(c,{children:"Install the following dependencies:"}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install lucide-react
`,__npmCommand__:`npm install lucide-react
`,__yarnCommand__:`yarn add lucide-react
`,__pnpmCommand__:`pnpm add lucide-react
`,__bunCommand__:`bun add lucide-react
`,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"npm"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" install"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" lucide-react"})]})})})}),(0,n.jsx)(c,{children:"Copy and paste the following code into your project."}),(0,n.jsx)(a,{name:"tags-input",children:(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import * as React from "react";
import { X } from "lucide-react";

import { cn } from "@/lib/utils";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";

type Separator = "Space" | "Enter" | "Comma";

interface TagsInputContextProps {
  tags: Set<string>;
  registerTag: (tag: string) => void;
  handleRemove: (tag: string) => void;
}

const TagsInputContext = React.createContext<TagsInputContextProps | null>(
  null
);

function useTagsInputContext() {
  const context = React.useContext(TagsInputContext);
  if (!context) {
    throw new Error("\`useTagsInputContext\` must be used within \`TagsInput\`");
  }
  return context;
}

function isSeparator(code: string, separators: Separator[]): code is Separator {
  return !!separators.find((separator) => separator === code);
}

const TagsInputList = ({
  className,
  children,
  ...props
}: React.ComponentProps<"div">) => {
  const { tags, handleRemove } = useTagsInputContext();

  //remove unmounted TagsInputItem's from local state
  React.useEffect(() => {
    const childrenArray = React.Children.toArray(children).filter(
      (
        child
      ): child is React.ReactElement<
        React.ComponentProps<typeof TagsInputItem>
      > => React.isValidElement(child) && child.type === TagsInputItem
    );

    const currentTags = new Set(childrenArray.map((child) => child.props.tag));

    if (currentTags.size < tags.size) {
      const removedTags = tags.difference(currentTags);
      removedTags.forEach(handleRemove);
    }
  }, [children, handleRemove, tags]);

  return (
    <div
      data-slot="tags-input-list"
      className={cn("w-full flex items-center gap-2 flex-wrap", className)}
      {...props}
    >
      {children}
    </div>
  );
};

const TagsInputItem = ({
  tag,
  children,
  className,
  ...props
}: React.ComponentProps<typeof Badge> & { tag: string }) => {
  const { tags, registerTag, handleRemove } = useTagsInputContext();

  React.useEffect(() => {
    if (!tags.has(tag)) {
      registerTag(tag);
    }
  }, [tag, registerTag, tags]);

  return (
    <Badge
      data-slot="tags-input-item"
      variant="outline"
      className={cn("rounded-full", className)}
      {...props}
    >
      {React.Children.count(children) ? children : tag}
      <button type="button" onClick={() => handleRemove(tag)}>
        <X className="size-4" />
      </button>
    </Badge>
  );
};

const TagsInput = ({
  ref,
  separators = ["Enter"],
  className,
  children,
  onTagsChange,
  onChange,
  onKeyDown,
  ...props
}: React.ComponentProps<typeof Input> & {
  separators?: Separator[];
  onTagsChange?: (tags: Set<string>) => void;
}) => {
  const [tags, setTags] = React.useState<Set<string>>(new Set());
  const [inputValue, setInputValue] = React.useState("");
  const inputRef = React.useRef<HTMLInputElement>(null);

  const registerTag = (tag: string) => {
    setTags((prevTags) => new Set([...prevTags, tag]));
  };

  const handleRemove = (tag: string) => {
    const newTags = new Set(tags);
    newTags.delete(tag);
    setTags(newTags);
    onTagsChange?.(newTags);
  };

  return (
    <TagsInputContext.Provider value={{ tags, registerTag, handleRemove }}>
      <div
        data-slot="tags-input"
        className={cn("flex flex-col gap-3", className)}
      >
        <Input
          ref={(node) => {
            inputRef.current = node;
            if (typeof ref === "function") {
              ref(node);
            } else if (ref) {
              ref.current = node;
            }
          }}
          data-slot="tags-input-field"
          type="search"
          value={inputValue}
          onChange={(event) => {
            setInputValue(event.target.value);
            onChange?.(event);
          }}
          onKeyDown={(event) => {
            if (isSeparator(event.code, separators) && inputValue.trim()) {
              if (event.key === "," && separators.includes("Comma")) {
                event.preventDefault();
              }

              registerTag(inputValue);
              onTagsChange?.(new Set([...tags, inputValue]));

              // Clear controlled input via native setter to propagate change event.
              const input = event.target as HTMLInputElement;
              Object.getOwnPropertyDescriptor(
                HTMLInputElement.prototype,
                "value"
              )?.set?.call(input, "");

              input.dispatchEvent(new Event("change", { bubbles: true }));
              inputRef.current?.blur();
            }

            onKeyDown?.(event);
          }}
          {...props}
        />
        {children}
      </div>
    </TagsInputContext.Provider>
  );
};

export { TagsInput, TagsInputList, TagsInputItem };
`,__src__:"registry/default/ui/tags-input.tsx",__style__:"default",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" *"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" as"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { X } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lucide-react"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { cn } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/lib/utils"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Badge } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/badge"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Input } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/input"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Separator"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "Space"'}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "Enter"'}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "Comma"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"interface"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" TagsInputContextProps"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"  tags"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Set"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">;"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"  registerTag"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"tag"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" void"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"  handleRemove"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"tag"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" void"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" TagsInputContext"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"createContext"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"TagsInputContextProps"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"  null"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:");"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" useTagsInputContext"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"  const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" context"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"useContext"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(TagsInputContext);"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"  if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"context) {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"    throw"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" new"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Error"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"`useTagsInputContext` must be used within `TagsInput`"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:");"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  }"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"  return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" context;"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" isSeparator"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"code"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"separators"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Separator"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"[])"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:" code"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" is"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Separator"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"  return"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" !!"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"separators."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"find"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"separator"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" separator "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" code);"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" TagsInputList"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ({"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  className,"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  children,"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"  ..."}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"props"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"ComponentProps"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"div"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">) "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"  const"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"tags"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"handleRemove"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" useTagsInputContext"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"();"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#6A737D"},children:"  //remove unmounted TagsInputItem's from local state"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  React."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"useEffect"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"    const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" childrenArray"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React.Children."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"toArray"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(children)."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"filter"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      ("})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"        child"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      ): child is React.ReactElement"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"<"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"        React.ComponentProps"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"<typeof"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" TagsInputItem"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"      >"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"isValidElement"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(child) "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" child.type "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" TagsInputItem"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    );"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"    const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" currentTags"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" new"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Set"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(childrenArray."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"child"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" child.props.tag));"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"    if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (currentTags.size "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" tags.size) {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"      const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" removedTags"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" tags."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"difference"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(currentTags);"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      removedTags."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"forEach"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(handleRemove);"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    }"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  }, [children, handleRemove, tags]);"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"  return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"      data-slot"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"tags-input-list"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"      className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"w-full flex items-center gap-2 flex-wrap"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", className)}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      {"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"props}"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    >"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      {children}"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    </"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  );"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"};"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" TagsInputItem"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ({"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  tag,"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  children,"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  className,"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"  ..."}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"props"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"ComponentProps"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Badge> "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"&"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"tag"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }) "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"  const"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"tags"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"registerTag"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"handleRemove"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" useTagsInputContext"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"();"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  React."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"useEffect"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"    if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"tags."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"has"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(tag)) {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"      registerTag"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(tag);"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    }"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  }, [tag, registerTag, tags]);"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"  return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Badge"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"      data-slot"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"tags-input-item"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"      variant"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"outline"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"      className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"rounded-full"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", className)}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      {"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"props}"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    >"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      {React.Children."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"count"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(children) "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" children "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" tag}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"button"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" type"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"button"'}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" onClick"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" handleRemove"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(tag)}>"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"        <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"X"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"size-4"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      </"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"button"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    </"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Badge"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  );"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"};"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" TagsInput"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ({"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  ref,"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  separators "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Enter"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"],"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  className,"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  children,"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  onTagsChange,"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  onChange,"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  onKeyDown,"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"  ..."}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"props"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"ComponentProps"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Input> "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"&"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"  separators"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Separator"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"[];"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"  onTagsChange"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"tags"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Set"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">) "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" void"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}) "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"  const"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"tags"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"setTags"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"Set"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">>("}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Set"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"());"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"  const"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"inputValue"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"setInputValue"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'""'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:");"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"  const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" inputRef"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"useRef"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"HTMLInputElement"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"null"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:");"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"  const"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" registerTag"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"tag"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"    setTags"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"prevTags"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" new"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Set"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(["}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"prevTags, tag]));"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  };"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"  const"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" handleRemove"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"tag"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"    const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" newTags"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" new"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Set"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(tags);"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    newTags."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"delete"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(tag);"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"    setTags"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(newTags);"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"    onTagsChange"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"?.(newTags);"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  };"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"  return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"TagsInputContext.Provider"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" value"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{{ tags, registerTag, handleRemove }}>"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"        data-slot"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"tags-input"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"        className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"flex flex-col gap-3"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", className)}"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      >"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"        <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Input"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"          ref"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"node"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"            inputRef.current "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" node;"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"            if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ref "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "function"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"              ref"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(node);"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"            } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"else"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (ref) {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"              ref.current "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" node;"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"            }"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"          }}"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"          data-slot"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"tags-input-field"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"          type"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"search"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"          value"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{inputValue}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"          onChange"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"            setInputValue"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(event.target.value);"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"            onChange"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"?.(event);"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"          }}"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"          onKeyDown"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"            if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"isSeparator"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(event.code, separators) "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" inputValue."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"trim"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()) {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"              if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (event.key "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' ","'}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" &&"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" separators."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"includes"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Comma"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")) {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"                event."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"preventDefault"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"();"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"              }"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"              registerTag"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(inputValue);"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"              onTagsChange"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"?.("}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Set"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(["}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"tags, inputValue]));"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#6A737D"},children:"              // Clear controlled input via native setter to propagate change event."})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"              const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" input"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" event.target "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" HTMLInputElement"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"              Object."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"getOwnPropertyDescriptor"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"                HTMLInputElement"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"prototype"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'                "value"'})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"              )?.set?."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"call"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(input, "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'""'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:");"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"              input."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"dispatchEvent"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Event"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"change"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", { bubbles: "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"true"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }));"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"              inputRef.current?."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"blur"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"();"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"            }"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"            onKeyDown"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"?.(event);"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"          }}"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"          {"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"props}"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"        />"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"        {children}"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      </"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    </"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"TagsInputContext.Provider"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  );"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"};"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { TagsInput, TagsInputList, TagsInputItem };"})]})]})})})}),(0,n.jsx)(c,{children:"Update the import paths to match your project setup."})]})})]}),`
`,(0,n.jsxs)(l.h2,{id:"usage",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Usage"]}),`
`,(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import {
  TagsInput,
  TagsInputItem,
  TagsInputList,
} from "<path-to-ui-components>/tags-input";
`,children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  TagsInput,"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  TagsInputItem,"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  TagsInputList,"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "<path-to-ui-components>/tags-input"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]})]})})}),`
`,(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`<TagsInput
  onTagsChange={(tags) => setInterests([...tags])}
  placeholder="Interests"
  className="w-100"
>
  <TagsInputList>
    {interests.map((interest) => (
      <TagsInputItem key={interest} tag={interest} />
    ))}
  </TagsInputList>
</TagsInput>
`,children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"TagsInput"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"  onTagsChange"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"tags"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" setInterests"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(["}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"tags])}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"  placeholder"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Interests"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"  className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"w-100"'})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"TagsInputList"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    {interests."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"interest"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"TagsInputItem"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" key"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{interest} "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"tag"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{interest} />"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    ))}"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  </"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"TagsInputList"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"</"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"TagsInput"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]})]})})}),`
`,(0,n.jsxs)(l.h2,{id:"props",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Props"]}),`
`,(0,n.jsxs)(l.table,{children:[(0,n.jsx)(l.thead,{children:(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.th,{children:"Name"}),(0,n.jsx)(l.th,{children:"Type"}),(0,n.jsx)(l.th,{children:"Description"})]})}),(0,n.jsxs)(l.tbody,{children:[(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:"separators"}),(0,n.jsx)(l.td,{children:"'Enter' or 'Space' or 'Comma'"}),(0,n.jsx)(l.td,{children:"List of separators."})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:"onTagsChange"}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"(tags: Set<string>) => void"})}),(0,n.jsx)(l.td,{children:"Handler function invoked when a tags change."})]})]})]}),`
`,(0,n.jsxs)(l.h3,{id:"tagsinputitem",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#tagsinputitem",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"TagsInputItem"]}),`
`,(0,n.jsxs)(l.h4,{id:"props-1",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props-1",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Props"]}),`
`,(0,n.jsxs)(l.table,{children:[(0,n.jsx)(l.thead,{children:(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.th,{children:"Name"}),(0,n.jsx)(l.th,{children:"Type"}),(0,n.jsx)(l.th,{children:"Description"})]})}),(0,n.jsx)(l.tbody,{children:(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:"tag"}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:"string"})}),(0,n.jsx)(l.td,{children:"Tag value."})]})})]}),`
`,(0,n.jsxs)(l.h2,{id:"examples",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#examples",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Examples"]}),`
`,(0,n.jsxs)(l.h3,{id:"autocomplete",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#autocomplete",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Autocomplete"]}),`
`,(0,n.jsx)(s,{name:"tags-input-autocomplete",description:"Tags input with autocomplete ",children:(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client";

import { useState } from "react";

import {
  Autocomplete,
  AutocompleteItem,
  AutocompleteList,
  AutocompleteTrigger,
} from "@/components/ui/autocomplete";
import {
  TagsInput,
  TagsInputItem,
  TagsInputList,
} from "@/components/ui/tags-input";

const frameworks = [
  { value: "next", label: "Next.js" },
  { value: "sveltekit", label: "SvelteKit" },
  { value: "nuxt", label: "Nuxt.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
  { value: "wordpress", label: "WordPress" },
  { value: "express", label: "Express.js" },
  { value: "nest", label: "Nest.js" },
];

export function TagsInputAutocomplete() {
  const [value, setValue] = useState("");
  const [selectedValues, setSelectedValues] = useState<string[]>([
    "next",
    "remix",
    "astro",
    "nest",
  ]);

  const handleValueChange = (value: string[]) => {
    setSelectedValues(value);
  };

  return (
    <div className="flex flex-col gap-2 items-center w-full">
      <Autocomplete
        multiple
        value={selectedValues}
        onValueChange={handleValueChange}
        className="w-100"
      >
        <AutocompleteTrigger asChild>
          <TagsInput
            value={value}
            separators={["Enter", "Space"]}
            onChange={(event) => setValue(event.target.value)}
            onTagsChange={(tags) => {
              setSelectedValues([...tags]);
            }}
            placeholder="Interests"
          >
            <TagsInputList>
              {selectedValues.map((interest) => (
                <TagsInputItem key={interest} tag={interest}>
                  {frameworks.find((framework) => framework.value === interest)
                    ?.label ?? interest}
                </TagsInputItem>
              ))}
            </TagsInputList>
          </TagsInput>
        </AutocompleteTrigger>
        <AutocompleteList>
          {frameworks.map((framework) => (
            <AutocompleteItem key={framework.value} value={framework.value}>
              {framework.label}
            </AutocompleteItem>
          ))}
        </AutocompleteList>
      </Autocomplete>
    </div>
  );
}
`,__src__:"registry/default/examples/tags-input-autocomplete.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"use client"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useState } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  Autocomplete,"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  AutocompleteItem,"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  AutocompleteList,"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  AutocompleteTrigger,"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/autocomplete"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  TagsInput,"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  TagsInputItem,"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  TagsInputList,"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/tags-input"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" frameworks"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  { value: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"next"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Next.js"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  { value: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sveltekit"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"SvelteKit"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  { value: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"nuxt"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Nuxt.js"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  { value: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"remix"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Remix"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  { value: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"astro"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Astro"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  { value: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"wordpress"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"WordPress"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  { value: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"express"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Express.js"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  { value: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"nest"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", label: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Nest.js"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"];"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" TagsInputAutocomplete"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"  const"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"setValue"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'""'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:");"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"  const"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"selectedValues"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"setSelectedValues"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"[]>(["})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'    "next"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'    "remix"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'    "astro"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'    "nest"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  ]);"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"  const"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" handleValueChange"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"[]) "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"    setSelectedValues"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(value);"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  };"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"  return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"flex flex-col gap-2 items-center w-full"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Autocomplete"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"        multiple"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"        value"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{selectedValues}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"        onValueChange"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{handleValueChange}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"        className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"w-100"'})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      >"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"        <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"AutocompleteTrigger"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" asChild"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"          <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"TagsInput"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"            value"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{value}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"            separators"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{["}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Enter"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Space"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"]}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"            onChange"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" setValue"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(event.target.value)}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"            onTagsChange"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"tags"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"              setSelectedValues"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(["}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"tags]);"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"            }}"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"            placeholder"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Interests"'})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"          >"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"            <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"TagsInputList"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"              {selectedValues."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"interest"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"                <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"TagsInputItem"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" key"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{interest} "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"tag"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{interest}>"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"                  {frameworks."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"find"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"framework"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" framework.value "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" interest)"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"                    ?.label "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"??"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" interest}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"                </"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"TagsInputItem"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"              ))}"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"            </"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"TagsInputList"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"          </"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"TagsInput"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"        </"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"AutocompleteTrigger"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"        <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"AutocompleteList"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"          {frameworks."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"framework"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"            <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"AutocompleteItem"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" key"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{framework.value} "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{framework.value}>"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"              {framework.label}"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"            </"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"AutocompleteItem"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"          ))}"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"        </"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"AutocompleteList"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      </"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Autocomplete"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    </"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  );"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})})]})}function u(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,{...e,children:(0,n.jsx)(m,{...e})}):m(e)}function r(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(w);})();
;return Component;e:["$","main",null,{"className":"relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]","children":[["$","div",null,{"className":"mx-auto w-full min-w-0 max-w-2xl","children":[["$","div",null,{"className":"mb-4 flex items-center space-x-1 text-sm leading-none text-muted-foreground","children":[["$","div",null,{"className":"truncate","children":"Docs"}],["$","svg",null,{"ref":"$undefined","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-right h-3.5 w-3.5","children":[["$","path","mthhwq",{"d":"m9 18 6-6-6-6"}],"$undefined"]}],["$","div",null,{"className":"text-foreground","children":"Tags Input"}]]}],["$","div",null,{"className":"space-y-2","children":[["$","h1",null,{"className":"scroll-m-20 text-3xl font-bold tracking-tight","children":"Tags Input"}],["$","p",null,{"className":"text-base text-muted-foreground","children":["$","$L16",null,{"children":"Tags input renders an input followed by tags."}]}]]}],null,["$","div",null,{"className":"pb-12 pt-8","children":["$","$L17",null,{"code":"$18"}]}],["$","div",null,{"className":"flex flex-row items-center justify-between","children":[["$","$La",null,{"href":"/docs/components/stepper","children":[["$","svg",null,{"ref":"$undefined","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-left","children":[["$","path","1wnfg3",{"d":"m15 18-6-6 6-6"}],"$undefined"]}],"Stepper"],"data-slot":"button","className":"text-sm inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-bold transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 focus-visible:ring-4 focus-visible:outline-1 aria-invalid:focus-visible:ring-0 text-primary underline-offset-4 hover:underline p-0 h-fit","type":"button","disabled":"$undefined","ref":null}],["$","$La",null,{"href":"/docs/components/typography","children":["Typography",["$","svg",null,{"ref":"$undefined","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-right","children":[["$","path","mthhwq",{"d":"m9 18 6-6-6-6"}],"$undefined"]}]],"data-slot":"button","className":"text-sm inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-bold transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 focus-visible:ring-4 focus-visible:outline-1 aria-invalid:focus-visible:ring-0 text-primary underline-offset-4 hover:underline ml-auto p-0 h-fit","type":"button","disabled":"$undefined","ref":null}]]}]]}],["$","div",null,{"className":"hidden text-sm xl:block","children":["$","div",null,{"className":"sticky top-20 -mt-6 h-[calc(100vh-3.5rem)] pt-4","children":["$","div",null,{"className":"no-scrollbar h-full overflow-auto pb-10","children":["$","$L19",null,{"toc":{"items":[{"url":"#installation","title":"Installation"},{"url":"#usage","title":"Usage"},{"url":"#props","title":"Props","items":[{"url":"#tagsinputitem","title":"TagsInputItem","items":[{"url":"#props-1","title":"Props"}]}]},{"url":"#examples","title":"Examples","items":[{"url":"#autocomplete","title":"Autocomplete"}]}]}}]}]}]}]]}]
14:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"name":"theme-color","content":"#ffffff"}]]
12:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Tags Input - AKASHA UI"}],["$","meta","2",{"name":"description","content":"Tags input renders an input followed by tags."}],["$","link","3",{"rel":"author","href":"https://akasha.org/"}],["$","meta","4",{"name":"author","content":"akasha"}],["$","link","5",{"rel":"manifest","href":"https://akasha-ui.pages.dev/site.webmanifest","crossOrigin":"$undefined"}],["$","meta","6",{"name":"keywords","content":"Next.js,React,Tailwind CSS,Server Components,Radix UI"}],["$","meta","7",{"name":"creator","content":"akasha"}],["$","meta","8",{"property":"og:title","content":"Tags Input"}],["$","meta","9",{"property":"og:description","content":"Tags input renders an input followed by tags."}],["$","meta","10",{"property":"og:url","content":"https://akasha-ui.pages.dev/undefined/docs/components/tags-input"}],["$","meta","11",{"property":"og:image","content":"https://akasha-ui.pages.dev/og.jpg"}],["$","meta","12",{"property":"og:image:width","content":"1200"}],["$","meta","13",{"property":"og:image:height","content":"630"}],["$","meta","14",{"property":"og:image:alt","content":"AKASHA UI"}],["$","meta","15",{"property":"og:type","content":"article"}],["$","meta","16",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","17",{"name":"twitter:creator","content":"AKASHAorg"}],["$","meta","18",{"name":"twitter:title","content":"AKASHA UI"}],["$","meta","19",{"name":"twitter:description","content":"A curated set of components and blocks built with Shadcn UI and Tailwind CSS. Customizable. Free. Open Source."}],["$","meta","20",{"name":"twitter:image","content":"https://akasha-ui.pages.dev/og.jpg"}],["$","link","21",{"rel":"shortcut icon","href":"/favicon-16x16.png"}],["$","link","22",{"rel":"icon","href":"/favicon.ico"}],["$","link","23",{"rel":"apple-touch-icon","href":"/apple-touch-icon.png"}]]
10:null