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

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

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