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

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

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