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

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

'use client';
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as r,useRef as i,useMemo as n,useCallback as a,useEffect as o}from"react";import{motion as s,AnimatePresence as l}from"framer-motion";import{clsx as c}from"clsx";import{twMerge as f}from"tailwind-merge";function u(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return f(c(e))}var d=function(c){var f=c.tabs,d=c.defaultTab,b=void 0===d?0:d,v=c.variant,g=void 0===v?"default":v,m=c.size,h=void 0===m?"md":m,p=c.radius,x=void 0===p?"md":p,k=c.fullWidth,w=void 0!==k&&k,y=c.className,N=void 0===y?"":y,z=c.tabClassName,C=void 0===z?"":z,L=c.contentClassName,W=void 0===L?"":L,D=c.hoverEffect,T=void 0!==D&&D,E=c.containerClassName,I=void 0===E?"":E,j=c.tabsContainerClassName,O=void 0===j?"":j,S=c.scrollContainerClassName,A=void 0===S?"":S,M=c.indicatorClassName,H=void 0===M?"":M,K=c.activeTabClassName,P=void 0===K?"":K,R=c.tabIconClassName,_=void 0===R?"":R,q=c.tabLabelClassName,B=void 0===q?"":q,F=c.contentContainerClassName,G=void 0===F?"":F,J=c.ariaLabel,Q=void 0===J?"Pestañas":J,U=c.id,V=r(b),X=V[0],Y=V[1],Z=r(null),$=Z[0],ee=Z[1],te=i([]),re=i(null),ie=r({left:0,width:0}),ne=ie[0],ae=ie[1],oe=r([]),se=oe[0],le=oe[1],ce=i(null),fe=n((function(){if(U)return U;var e=f.map((function(e){return e.label})).join("_");return"tabs-".concat(e.replace(/\s+/g,"-").toLowerCase())}),[U,f]),ue=a((function(){if(te.current.length>0){var e=te.current.map((function(e){return e?{width:e.offsetWidth,left:e.offsetLeft}:{width:0,left:0}}));le(e)}}),[]),de=a((function(){var e=T&&null!==$?$:X;se.length>e&&ae({left:se[e].left,width:se[e].width})}),[X,$,T,se]);o((function(){var e=setTimeout((function(){ue()}),50);return function(){return clearTimeout(e)}}),[ue]),o((function(){se.length>0&&de()}),[de,se]),o((function(){return ue(),window.addEventListener("resize",ue),function(){window.removeEventListener("resize",ue)}}),[ue,f.length]),o((function(){if(te.current[X]&&re.current){var e=te.current[X],t=re.current,r=e.offsetLeft,i=e.offsetWidth,n=t.offsetWidth,a=t.scrollLeft,o=a+n;(r+i>o||r<a)&&(r+i>o?t.scrollTo({left:r-n+i,behavior:"smooth"}):r<a&&t.scrollTo({left:r,behavior:"smooth"}))}}),[X]);var be=a((function(e,t){var r,i=f.length,n=t;switch(e.key){case"ArrowRight":e.preventDefault(),n=(t+1)%i;break;case"ArrowLeft":e.preventDefault(),n=(t-1+i)%i;break;case"Home":e.preventDefault(),n=0;break;case"End":e.preventDefault(),n=i-1;break;default:return}Y(n),null===(r=te.current[n])||void 0===r||r.focus()}),[f.length]),ve={default:"bg-transparent text-neutral-600 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300",primary:"bg-transparent text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300",secondary:"bg-transparent text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300",success:"bg-transparent text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300",warning:"bg-transparent text-amber-600 dark:text-amber-400 hover:text-amber-800 dark:hover:text-amber-300",danger:"bg-transparent text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300"},ge={default:"text-neutral-900 dark:text-white",primary:"text-blue-700 dark:text-blue-300",secondary:"text-purple-700 dark:text-purple-300",success:"text-green-700 dark:text-green-300",warning:"text-amber-700 dark:text-amber-300",danger:"text-red-700 dark:text-red-300"},me={sm:"text-xs py-1.5 px-3",md:"text-sm py-2 px-4",lg:"text-base py-2.5 px-5"},he={none:"rounded-none",sm:"rounded-[0.25rem]",md:"rounded-[0.375rem]",full:"rounded-full"},pe={default:"focus-visible:ring-2 focus-visible:ring-zinc-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-900",primary:"focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-900",secondary:"focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-900",success:"focus-visible:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-900",warning:"focus-visible:ring-2 focus-visible:ring-amber-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-900",danger:"focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-900"};return e("div",{className:u("flex flex-col w-full",N,I),children:[t("div",{className:"w-full flex",children:t("div",{className:u("relative p-1 bg-zinc-100/60 dark:bg-black/80 backdrop-blur-sm border dark:border-zinc-800/40",he[x],"overflow-hidden",w?"w-full":"inline-block",O),children:t("div",{ref:re,className:u("overflow-x-auto scrollbar-hide",A),style:{WebkitOverflowScrolling:"touch",msOverflowStyle:"none",scrollbarWidth:"none"},children:e("div",{ref:ce,className:u("flex",w?"w-full":"min-w-max","relative"),role:"tablist","aria-orientation":"horizontal","aria-label":Q,children:[t(s.div,{className:u("absolute",he[x],"z-0",{default:"bg-zinc-200 dark:bg-zinc-800",primary:"bg-blue-200 dark:bg-blue-800",secondary:"bg-purple-200 dark:bg-purple-800",success:"bg-green-200 dark:bg-green-800",warning:"bg-amber-200 dark:bg-amber-800",danger:"bg-red-200 dark:bg-red-800"}[g],"shadow-sm dark:border dark:border-zinc-800/60",H),initial:!1,animate:{left:ne.left,width:ne.width},transition:{type:"spring",stiffness:220,damping:34,mass:1.4,restDelta:.001,restSpeed:.001},style:{top:0,bottom:0,height:"100%"},"aria-hidden":"true"}),f.map((function(r,i){var n,a=X===i,o=(null===(n=se[i])||void 0===n?void 0:n.width)||"auto",s="".concat(fe,"-tab-").concat(i),l="".concat(fe,"-panel-").concat(i),c=u("relative z-10 font-medium whitespace-nowrap",me[h],w?"flex-1":"",he[x],"transition-colors duration-200","flex items-center justify-center gap-2",pe[g],"outline-none"),f=a?ge[g]:ve[g],d=a?u(C,P):C;return e("button",{ref:function(e){te.current[i]=e},id:s,role:"tab","aria-selected":a,"aria-controls":l,tabIndex:a?0:-1,onClick:function(){return function(e){var t;Y(e),null===(t=te.current[e])||void 0===t||t.focus()}(i)},onKeyDown:function(e){return be(e,i)},onMouseEnter:function(){return T&&ee(i)},onMouseLeave:function(){return T&&ee(null)},className:u(c,f,d),style:{minWidth:"number"==typeof o?"".concat(o,"px"):void 0},children:[r.icon&&t("span",{className:u("flex-shrink-0",_),"aria-hidden":"true",children:r.icon}),t("span",{className:u("truncate",B),children:r.label})]},i)}))]})})})}),t("div",{className:u("mt-4 relative w-full overflow-hidden",W,G),children:t(l,{mode:"wait",children:f.map((function(e,r){return X===r&&t(s.div,{id:"".concat(fe,"-panel-").concat(r),role:"tabpanel","aria-labelledby":"".concat(fe,"-tab-").concat(r),tabIndex:0,initial:{opacity:0,y:10},animate:{opacity:1,y:0},exit:{opacity:0,y:-10},transition:{duration:.25,ease:"easeInOut"},className:"w-full outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-900 focus-visible:ring-zinc-500 dark:focus-visible:ring-zinc-400 rounded-md",children:e.content},r)}))})})]})};export{d as default};
//# sourceMappingURL=index.esm.js.map