UNPKG

stofli-ui

Version:

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

4 lines (3 loc) 6.33 kB
'use client'; import{jsxs as e,jsx as r,Fragment as t}from"react/jsx-runtime";import i,{useState as n,useRef as a,useId as o,useEffect as l}from"react";import{motion as s,AnimatePresence as d}from"framer-motion";import{Loader2 as c,ArrowRight as u}from"lucide-react";import{clsx as g}from"clsx";import{twMerge as p}from"tailwind-merge";var h=function(){return h=Object.assign||function(e){for(var r,t=1,i=arguments.length;t<i;t++)for(var n in r=arguments[t])Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n]);return e},h.apply(this,arguments)};function b(e,r,t){if(t||2===arguments.length)for(var i,n=0,a=r.length;n<a;n++)!i&&n in r||(i||(i=Array.prototype.slice.call(r,0,n)),i[n]=r[n]);return e.concat(i||Array.prototype.slice.call(r))}function f(){for(var e=[],r=0;r<arguments.length;r++)e[r]=arguments[r];return p(g(e))}"function"==typeof SuppressedError&&SuppressedError;var m=i.forwardRef((function(i,g){var p=i.children,m=i.className,v=void 0===m?"":m,y=i.variant,x=void 0===y?"default":y,k=i.size,w=void 0===k?"md":k,z=i.radius,N=void 0===z?"md":z,C=i.fullWidth,O=void 0!==C&&C,j=i.withRing,I=void 0!==j&&j,R=i.isLoading,T=void 0!==R&&R,A=i.leftIcon,E=i.rightIcon,L=i.withArrow,P=void 0!==L&&L,S=i.withRipple,W=void 0===S||S,B=i.rippleColor,M=i.rippleClassName,D=void 0===M?"":M,X=i.loaderClassName,Y=void 0===X?"":X,q=i.leftIconClassName,F=void 0===q?"":q,G=i.rightIconClassName,H=void 0===G?"":G,J=i.contentClassName,K=void 0===J?"":J,Q=i.arrowClassName,U=void 0===Q?"":Q,V=i.disabled,Z=i.onClick,$=i.loadingText,_=void 0===$?"Cargando...":$,ee=i.ariaLabel,re=i.type,te=void 0===re?"button":re,ie=function(e,r){var t={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&r.indexOf(i)<0&&(t[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(i=Object.getOwnPropertySymbols(e);n<i.length;n++)r.indexOf(i[n])<0&&Object.prototype.propertyIsEnumerable.call(e,i[n])&&(t[i[n]]=e[i[n]])}return t}(i,["children","className","variant","size","radius","fullWidth","withRing","isLoading","leftIcon","rightIcon","withArrow","withRipple","rippleColor","rippleClassName","loaderClassName","leftIconClassName","rightIconClassName","contentClassName","arrowClassName","disabled","onClick","loadingText","ariaLabel","type"]),ne=n([]),ae=ne[0],oe=ne[1],le=a(0),se=a(null),de=V||T,ce=o(),ue="loader-".concat(ce.replace(/:/g,""));l((function(){if(ae.length>0){var e=setTimeout((function(){ae.length>10?oe((function(e){return e.slice(Math.floor(e.length/2))})):oe([])}),800);return function(){return clearTimeout(e)}}}),[ae]);var ge=f("inline-flex items-center justify-center font-medium transition-colors duration-200","link"!==x&&"ghost"!==x&&"active:shadow-inner","focus:outline-none focus:ring-0","link"!==x&&"ghost"!==x&&"focus-visible:ring-2 focus-visible:ring-offset-2","disabled:opacity-50 disabled:cursor-not-allowed",{default:"bg-zinc-600 text-neutral-50 dark:bg-zinc-800 dark:text-neutral-200 hover:bg-zinc-700 dark:hover:bg-zinc-600 focus:ring-zinc-500",primary:"bg-blue-600 text-white dark:bg-blue-800 hover:bg-blue-700 dark:hover:bg-blue-500 focus:ring-blue-400",secondary:"bg-purple-600 text-white dark:bg-purple-800 hover:bg-purple-700 dark:hover:bg-purple-500 focus:ring-purple-400",success:"bg-green-600 text-white dark:bg-green-800 hover:bg-green-700 dark:hover:bg-green-500 focus:ring-green-400",warning:"bg-amber-600 text-white dark:bg-amber-800 hover:bg-amber-700 dark:hover:bg-amber-500 focus:ring-amber-400",danger:"bg-red-600 text-white dark:bg-red-800 hover:bg-red-700 dark:hover:bg-red-500 focus:ring-red-400",outline:"bg-transparent border-2 border-zinc-300 hover:bg-zinc-100 dark:border-zinc-600 dark:hover:bg-zinc-800 text-neutral-900 dark:text-neutral-100",ghost:"bg-transparent border-0 hover:bg-zinc-100 dark:hover:bg-zinc-800 text-neutral-900 dark:text-neutral-100",link:"bg-transparent border-0 underline-offset-4 hover:underline text-neutral-900 dark:text-neutral-100 hover:bg-transparent dark:hover:bg-transparent p-0 h-auto"}[x],{xs:"text-xs px-2.5 py-1.5",sm:"text-sm px-3 py-2",md:"text-sm px-4 py-2",lg:"text-base px-5 py-2.5",xl:"text-lg px-6 py-3",icon:"p-2"}[w],{none:"rounded-none",sm:"rounded-[0.25rem]",md:"rounded-[0.375rem]",lg:"rounded-lg",full:"rounded-full"}[N],O&&"w-full",I&&"link"!==x&&"ghost"!==x&&"ring-1 ring-black ring-opacity-5 dark:ring-white dark:ring-opacity-10","relative overflow-hidden",P&&"group",v),pe=Object.fromEntries(Object.entries(ie).filter((function(e){return!e[0].startsWith("onDrag")}))),he=f("absolute rounded-full pointer-events-none",!B&&("outline"===x||"ghost"===x||"link"===x?"bg-zinc-500 dark:bg-zinc-200 opacity-15":"bg-white dark:bg-zinc-200 opacity-35"));return e(s.button,h({ref:function(e){"function"==typeof g?g(e):g&&(g.current=e),se.current=e},className:ge,whileTap:de||"link"===x||"ghost"===x?void 0:{scale:.97},transition:{duration:.08},disabled:de,onClick:function(e){if(!de&&W){var r=se.current;if(r){var t=r.getBoundingClientRect(),i=e.clientX-t.left,n=e.clientY-t.top,a=2*Math.max(t.width,t.height),o={id:le.current,x:i,y:n,size:a};le.current+=1,oe((function(e){return b(b([],e,!0),[o],!1)}))}}Z&&Z(e)},type:te,role:"button","aria-disabled":de,"aria-label":T?_:ee||("string"==typeof p?p:void 0),"aria-busy":T,"aria-live":T?"polite":void 0},pe,{children:[r(d,{children:W&&ae.map((function(e){return r(s.span,{className:f(he,D),style:{left:e.x-e.size/2,top:e.y-e.size/2,width:e.size,height:e.size,backgroundColor:B,opacity:B?.25:void 0},initial:{opacity:B||"outline"===x||"ghost"===x||"link"===x?.25:.35,scale:0,zIndex:1},animate:{opacity:0,scale:1},exit:{opacity:0},transition:{duration:.75,ease:"easeOut"},"aria-hidden":"true"},e.id)}))}),T&&e(t,{children:[r(c,{className:f("mr-2 h-4 w-4 animate-spin",Y),"aria-hidden":"true"}),r("span",{className:"sr-only",role:"status",id:ue,children:_})]}),!T&&A&&r("span",{className:f("mr-2 relative z-10",F),"aria-hidden":"true",children:A}),r("span",{className:f("relative z-10",(P||E)&&"mr-1",K),children:p}),!T&&P&&r("span",{className:f("ml-1 relative z-10 transition-transform duration-200 group-hover:translate-x-1",U),"aria-hidden":"true",children:r(u,{className:"h-4 w-4"})}),!T&&E&&!P&&r("span",{className:f("ml-2 relative z-10",H),"aria-hidden":"true",children:E})]}))}));m.displayName="Button";export{m as default}; //# sourceMappingURL=index.esm.js.map