stofli-ui/dist/components/autocomplete/index.esm.js

Biblioteca moderna de componentes UI para React con Tailwind CSS y Framer Motion

'use client';
import{jsxs as e,jsx as r}from"react/jsx-runtime";import a,{useState as t,useRef as n,useEffect as o,useCallback as i,useId as l}from"react";import{AnimatePresence as d,motion as c}from"framer-motion";import{X as u,ChevronsUpDown as s,Check as b}from"lucide-react";import{clsx as p}from"clsx";import{twMerge as m}from"tailwind-merge";function f(){for(var e=[],r=0;r<arguments.length;r++)e[r]=arguments[r];return m(p(e))}var v=function(a){var t=a.title,n=a.children,o=a.className,i=void 0===o?"":o,l=a.titleClassName,d=void 0===l?"":l;return e("div",{className:f("py-2",i),children:[r("div",{className:f("px-3 py-1.5 text-sm font-medium text-neutral-400 dark:text-neutral-500",d),children:t}),n]})},h=function(a){var t=a.option,n=a.isSelected,o=a.onSelect,i=a.className,l=void 0===i?"":i;return e(c.div,{initial:{opacity:0,y:-5},animate:{opacity:1,y:0},exit:{opacity:0,y:5},className:f("flex items-center justify-between px-3 py-2 text-sm transition-colors",t.disabled?"opacity-50 bg-zinc-50 dark:bg-zinc-800/30 text-neutral-400 dark:text-neutral-500 cursor-not-allowed":n?"bg-zinc-100 dark:bg-zinc-800 text-neutral-900 dark:text-neutral-100 font-medium cursor-pointer":"hover:bg-zinc-50 dark:hover:bg-zinc-800/50 text-neutral-700 dark:text-neutral-300 cursor-pointer",l),onClick:function(){t.disabled||o()},children:[r("span",{children:t.label}),n&&!t.disabled&&r(b,{className:"h-5 w-5 text-neutral-800 dark:text-neutral-200"})]})},x=function(b){var p=b.options,m=b.value,x=b.onChange,g=b.placeholder,k=void 0===g?"Selecciona una opción...":g,w=b.title,y=b.required,N=void 0!==y&&y,C=b.className,z=void 0===C?"":C,L=b.containerClassName,D=void 0===L?"":L,j=b.inputClassName,A=void 0===j?"":j,E=b.dropdownClassName,S=void 0===E?"":E,q=b.itemClassName,F=void 0===q?"":q,I=b.iconClassName,O=void 0===I?"":I,T=b.sectionTitleClassName,W=void 0===T?"":T,K=b.disabled,P=void 0!==K&&K,U=b.variant,B=void 0===U?"default":U,G=t(!1),H=G[0],J=G[1],M=t(""),Q=M[0],R=M[1],V=t(m),X=V[0],Y=V[1],Z=t(!1),$=Z[0],_=Z[1],ee=n(null),re=n(null),ae=p.find((function(e){return e.value===(m||X)})),te={default:"border-zinc-200 dark:border-zinc-800",primary:"border-blue-200 dark:border-blue-800",secondary:"border-purple-200 dark:border-purple-800",success:"border-green-200 dark:border-green-800",warning:"border-amber-200 dark:border-amber-800",danger:"border-red-200 dark:border-red-800"},ne={default:"hover:border-zinc-300 dark:hover:border-zinc-700",primary:"hover:border-blue-300 dark:hover:border-blue-700",secondary:"hover:border-purple-300 dark:hover:border-purple-700",success:"hover:border-green-300 dark:hover:border-green-700",warning:"hover:border-amber-300 dark:hover:border-amber-700",danger:"hover:border-red-300 dark:hover:border-red-700"},oe={default:"ring-zinc-500/20",primary:"ring-blue-500/30",secondary:"ring-purple-500/30",success:"ring-green-500/30",warning:"ring-amber-500/30",danger:"ring-red-500/30"},ie=t(-1),le=ie[0],de=ie[1],ce=function(e,r,a){for(var t=e,n="next"===r?1:-1;;){if((t+=n)<0||t>=a.length)return e;if(!a[t].disabled)return t}};o((function(){Y(m)}),[m]),o((function(){var e=function(e){re.current&&!re.current.contains(e.target)&&(J(!1),_(!1),ae?R(ae.label):Q&&!p.some((function(e){return e.label.toLowerCase()===Q.toLowerCase()}))&&R(""))};return document.addEventListener("mousedown",e),function(){return document.removeEventListener("mousedown",e)}}),[H,p,Q,ae]),o((function(){ae&&R(ae.label)}),[ae]),o((function(){Q&&ae&&!ae.label.toLowerCase().startsWith(Q.toLowerCase())&&Q.toLowerCase().startsWith(ae.label.toLowerCase())}),[Q,ae]);o((function(){H&&ee.current&&ee.current.focus()}),[H]);var ue,se,be=p.filter((function(e){return $&&Q&&""!==Q.trim()?e.label.toLowerCase().includes(Q.toLowerCase()):!!H||(!ae||e.value===ae.value)})),pe=be.reduce((function(e,r){var a=r.group||"default";return e[a]||(e[a]=[]),e[a].push(r),e}),{}),me=i((function(e){e.disabled||(R(e.label),_(!1),Y(e.value),setTimeout((function(){J(!1),null==x||x(e.value)}),50))}),[x]),fe=i((function(e){var r;e.stopPropagation(),Y(""),null==x||x(""),R(""),_(!1),J(!1),null===(r=ee.current)||void 0===r||r.focus()}),[x]),ve=l(),he="autocomplete-".concat(ve.replace(/:/g,"")),xe="listbox-".concat(ve.replace(/:/g,"")),ge=function(e,a){return r("div",{role:"option",id:"option-".concat(e.value),"aria-selected":e.value===(m||X),"aria-disabled":e.disabled,children:r(h,{option:e,isSelected:e.value===(m||X),onSelect:function(){return me(e)},className:f(F,le===a&&!e.disabled&&"bg-zinc-100 dark:bg-zinc-800")})},e.value)};return e("div",{ref:re,className:f("relative w-full max-w-sm",z),role:"combobox","aria-expanded":H,"aria-haspopup":"listbox","aria-controls":xe,"aria-owns":xe,children:[e("div",{className:f("relative flex flex-col group bg-white dark:bg-black",(se="border rounded-lg shadow-sm will-change-transform",{default:"".concat(se),primary:"".concat(se),secondary:"".concat(se),success:"".concat(se),warning:"".concat(se),danger:"".concat(se)}[B]),(ue="".concat(te[B]," transition-all duration-300 ").concat(ne[B]),H?"".concat(ue," ring-2 ").concat(oe[B]):ue),P&&"opacity-50 cursor-not-allowed",!P&&"cursor-pointer",D),children:[w&&r("div",{className:"px-3 pt-1.5 pb-0 rounded-lg",children:e("label",{htmlFor:he,className:f("text-xs font-medium ".concat({default:"text-neutral-700 dark:text-neutral-300",primary:"text-blue-600 dark:text-blue-400",secondary:"text-purple-600 dark:text-purple-400",success:"text-green-600 dark:text-green-400",warning:"text-amber-600 dark:text-amber-400",danger:"text-red-600 dark:text-red-400"}[B]),W),children:[w,N&&r("span",{className:"text-red-500 ml-0.5","aria-label":"requerido",children:"*"})]})}),r("input",{ref:ee,type:"text",id:he,className:f("w-full px-3 pr-20",w?"pt-0 pb-1.5":"py-2","bg-white dark:bg-black rounded-lg text-sm text-neutral-900 dark:text-neutral-100 \n            placeholder-neutral-600 dark:placeholder-neutral-400 outline-none disabled:cursor-not-allowed",A),placeholder:k,value:Q,onChange:function(e){var r=e.target.value;R(r),_(!0),J(!0)},onFocus:function(){return J(!0)},onKeyDown:function(e){var r=Object.values(pe).flat();if(H||"ArrowDown"!==e.key&&"Enter"!==e.key&&" "!==e.key){if(H)switch(e.key){case"Escape":e.preventDefault(),J(!1),de(-1);break;case"ArrowDown":e.preventDefault(),de((function(e){if(-1===e){var a=r.findIndex((function(e){return!e.disabled}));return a>=0?a:-1}return ce(e,"next",r)}));break;case"ArrowUp":e.preventDefault(),de((function(e){if(-1===e){var a=r.length-1;return a>=0?a:-1}return ce(e,"prev",r)}));break;case"Enter":if(e.preventDefault(),le>=0&&le<r.length){var a=r[le];a.disabled||(me(a),de(-1),J(!1))}break;case"Tab":J(!1),de(-1)}}else if(e.preventDefault(),J(!0),"ArrowDown"===e.key){var t=r.findIndex((function(e){return!e.disabled}));de(t>=0?t:-1)}},disabled:P,role:"textbox","aria-autocomplete":"list","aria-controls":xe,"aria-activedescendant":ae?"option-".concat(ae.value):void 0,"aria-required":N,"aria-disabled":P}),e("div",{className:"absolute right-0 flex items-center h-full",children:[r("div",{className:"w-6 h-full flex items-center justify-center",children:Q&&r("button",{type:"button",onClick:fe,className:f("h-4 w-4 text-neutral-400 hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300 \n                  opacity-0 group-hover:opacity-100 transition-opacity",O),disabled:P,"aria-label":"Limpiar selección",children:r(u,{size:16,"aria-hidden":"true"})})}),r("button",{type:"button",className:f("flex items-center justify-center w-8 h-full\n              text-neutral-500 dark:text-neutral-400 transition-colors\n              hover:text-neutral-700 dark:hover:text-neutral-300",O),onClick:function(){H?J(!1):(J(!0),_(!1),ae&&R(ae.label))},disabled:P,"aria-label":H?"Cerrar lista de opciones":"Abrir lista de opciones","aria-expanded":H,children:r(s,{className:"h-4 w-4","aria-hidden":"true"})})]})]}),r(d,{children:H&&r(c.div,{initial:{opacity:0,y:-10},animate:{opacity:1,y:0},exit:{opacity:0,y:-10},transition:{duration:.2,ease:"easeInOut"},className:f("absolute z-50 w-full mt-1 bg-white dark:bg-black \n              rounded-lg shadow-lg overflow-hidden max-h-60\n              border border-zinc-200 dark:border-zinc-800",S),role:"listbox",id:xe,"aria-label":"Lista de opciones",children:e("div",{className:f("overflow-y-auto max-h-60","scrollbar-none","no-scrollbar","overflow-y-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"),children:[Object.entries(pe).map((function(t){var n=t[0],o=t[1];return e(a.Fragment,{children:["default"!==n&&r(v,{title:n,titleClassName:W,children:o.map((function(e,r){return ge(e,r)}))}),"default"===n&&o.map((function(e,r){return ge(e,r)}))]},n)})),0===be.length&&r("div",{className:"px-3 py-2 text-sm text-neutral-500 dark:text-neutral-400",role:"alert",children:"No se encontraron resultados"})]})})})]})};export{h as AutocompleteItem,v as AutocompleteSection,x as default};
//# sourceMappingURL=index.esm.js.map