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

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

'use client';
"use strict";var n=require("react/jsx-runtime"),a=require("clsx"),i=require("tailwind-merge");function e(){for(var n=[],e=0;e<arguments.length;e++)n[e]=arguments[e];return i.twMerge(a.clsx(n))}module.exports=function(a){var i=a.size,t=void 0===i?"md":i,s=a.variant,r=void 0===s?"default":s,l=a.speed,o=void 0===l?"normal":l,m=a.type,d=void 0===m?"border":m,c=a.label,f=a.labelPosition,y=void 0===f?"right":f,u=a.className,h=void 0===u?"":u,b=a.containerClassName,p=void 0===b?"":b,x=a.spinnerClassName,w=void 0===x?"":x,g=a.labelClassName,k=void 0===g?"":g,v=a.ariaLabel,j=a.ariaLive,N=void 0===j?"polite":j,z={xs:"w-3 h-3",sm:"w-4 h-4",md:"w-6 h-6",lg:"w-8 h-8",xl:"w-12 h-12"},L={xs:"w-3 h-3",sm:"w-4 h-4",md:"w-6 h-6",lg:"w-8 h-8",xl:"w-12 h-12"},W={xs:"w-0.5 h-0.5",sm:"w-1 h-1",md:"w-1.5 h-1.5",lg:"w-2 h-2",xl:"w-2.5 h-2.5"},Y={xs:"w-2.5 h-2.5",sm:"w-3.5 h-3.5",md:"w-5 h-5",lg:"w-7 h-7",xl:"w-10 h-10"},C={xs:"w-0.5 h-0.5",sm:"w-1 h-1",md:"w-1.5 h-1.5",lg:"w-2 h-2",xl:"w-2.5 h-2.5"},q={xs:"border-[1px]",sm:"border-[1.5px]",md:"border-2",lg:"border-3",xl:"border-4"},A={slow:"animate-spin-slow",normal:"animate-spin",fast:"animate-spin-fast"},_={slow:{first:"animate-wave-slow-1",second:"animate-wave-slow-2",third:"animate-wave-slow-3"},normal:{first:"animate-wave-1",second:"animate-wave-2",third:"animate-wave-3"},fast:{first:"animate-wave-fast-1",second:"animate-wave-fast-2",third:"animate-wave-fast-3"}},B={default:"border-zinc-200 dark:border-zinc-700 border-t-zinc-600 dark:border-t-zinc-300",primary:"border-blue-200 dark:border-blue-700 border-t-blue-600 dark:border-t-blue-400",secondary:"border-purple-200 dark:border-purple-700 border-t-purple-600 dark:border-t-purple-400",success:"border-green-200 dark:border-green-700 border-t-green-600 dark:border-t-green-400",warning:"border-amber-200 dark:border-amber-700 border-t-amber-600 dark:border-t-amber-400",danger:"border-red-200 dark:border-red-700 border-t-red-600 dark:border-t-red-400"},M={default:"bg-zinc-600 dark:bg-zinc-300",primary:"bg-blue-600 dark:bg-blue-400",secondary:"bg-purple-600 dark:bg-purple-400",success:"bg-green-600 dark:bg-green-400",warning:"bg-amber-600 dark:bg-amber-400",danger:"bg-red-600 dark:bg-red-400"},P={default:"bg-zinc-600 dark:bg-zinc-300",primary:"bg-blue-600 dark:bg-blue-400",secondary:"bg-purple-600 dark:bg-purple-400",success:"bg-green-600 dark:bg-green-400",warning:"bg-amber-600 dark:bg-amber-400",danger:"bg-red-600 dark:bg-red-400"},R={default:"stroke-zinc-600 dark:stroke-zinc-300",primary:"stroke-blue-600 dark:stroke-blue-400",secondary:"stroke-purple-600 dark:stroke-purple-400",success:"stroke-green-600 dark:stroke-green-400",warning:"stroke-amber-600 dark:stroke-amber-400",danger:"stroke-red-600 dark:stroke-red-400"},D={default:"text-neutral-900 dark:text-neutral-100",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"},E={xs:"text-xs",sm:"text-xs",md:"text-sm",lg:"text-base",xl:"text-base"},F={left:"mr-2",right:"ml-2",top:"mb-1",bottom:"mt-1"},G="\n    @keyframes dot-animation-1 {\n      0%, 80%, 100% { transform: scale(0); }\n      40% { transform: scale(1); }\n    }\n    @keyframes dot-animation-2 {\n      0%, 80%, 100% { transform: scale(0); }\n      40% { transform: scale(1); }\n    }\n    @keyframes dot-animation-3 {\n      0%, 80%, 100% { transform: scale(0); }\n      40% { transform: scale(1); }\n    }\n    \n    @keyframes grow-animation {\n      0% { transform: scale(0); }\n      50% { transform: scale(1); }\n      100% { transform: scale(0); }\n    }\n    \n    @keyframes wave-animation-1 {\n      0% { transform: translateY(0); }\n      25% { transform: translateY(-3px); }\n      50% { transform: translateY(0); }\n      100% { transform: translateY(0); }\n    }\n    \n    @keyframes wave-animation-2 {\n      0% { transform: translateY(0); }\n      25% { transform: translateY(-3px); }\n      50% { transform: translateY(0); }\n      100% { transform: translateY(0); }\n    }\n    \n    @keyframes wave-animation-3 {\n      0% { transform: translateY(0); }\n      25% { transform: translateY(-3px); }\n      50% { transform: translateY(0); }\n      100% { transform: translateY(0); }\n    }\n    \n   @keyframes lines-opacity {\n  0%, 100% { opacity: 0.1; }\n  10% { opacity: 0.2; }\n  20% { opacity: 0.4; }\n  30% { opacity: 0.6; }\n  40% { opacity: 0.8; }\n  50% { opacity: 1; }\n  60% { opacity: 0.8; }\n  70% { opacity: 0.6; }\n  80% { opacity: 0.4; }\n  90% { opacity: 0.2; }\n}\n\n/* Nueva animación solo para el brillo de la última línea */\n@keyframes line-highlight {\n  0%, 100% { filter: brightness(1); }\n  50% { filter: brightness(1.8); }\n}\n    \n    .animate-spin-slow {\n      animation: spin 1.5s linear infinite;\n    }\n    .animate-spin-fast {\n      animation: spin 0.5s linear infinite;\n    }\n    \n    .animate-wave-1 {\n      animation: wave-animation-1 1.2s infinite cubic-bezier(0.45, 0, 0.55, 1);\n    }\n    .animate-wave-2 {\n      animation: wave-animation-2 1.2s infinite cubic-bezier(0.45, 0, 0.55, 1);\n      animation-delay: 0.2s;\n    }\n    .animate-wave-3 {\n      animation: wave-animation-3 1.2s infinite cubic-bezier(0.45, 0, 0.55, 1);\n      animation-delay: 0.4s;\n    }\n    \n    .animate-wave-slow-1 {\n      animation: wave-animation-1 2s infinite cubic-bezier(0.45, 0, 0.55, 1);\n    }\n    .animate-wave-slow-2 {\n      animation: wave-animation-2 2s infinite cubic-bezier(0.45, 0, 0.55, 1);\n      animation-delay: 0.3s;\n    }\n    .animate-wave-slow-3 {\n      animation: wave-animation-3 2s infinite cubic-bezier(0.45, 0, 0.55, 1);\n      animation-delay: 0.6s;\n    }\n    \n    .animate-wave-fast-1 {\n      animation: wave-animation-1 0.8s infinite cubic-bezier(0.45, 0, 0.55, 1);\n    }\n    .animate-wave-fast-2 {\n      animation: wave-animation-2 0.8s infinite cubic-bezier(0.45, 0, 0.55, 1);\n      animation-delay: 0.1s;\n    }\n    .animate-wave-fast-3 {\n      animation: wave-animation-3 0.8s infinite cubic-bezier(0.45, 0, 0.55, 1);\n      animation-delay: 0.2s;\n    }\n    \n    .animate-dot-1 {\n      animation: dot-animation-1 1.4s infinite ease-in-out both;\n    }\n    .animate-dot-2 {\n      animation: dot-animation-2 1.4s infinite ease-in-out both;\n      animation-delay: 0.16s;\n    }\n    .animate-dot-3 {\n      animation: dot-animation-3 1.4s infinite ease-in-out both;\n      animation-delay: 0.32s;\n    }\n    \n    .animate-grow {\n      animation: grow-animation 1.8s infinite cubic-bezier(0.25, 0.1, 0.25, 1);\n    }\n    \n   /* Animación Normal (1.5s) */\n.animate-line-1 {\n  animation: lines-opacity 1.5s infinite linear;\n  animation-delay: -1.375s; /* Línea 12 original */\n}\n.animate-line-2 {\n  animation: lines-opacity 1.5s infinite linear;\n  animation-delay: -1.25s; /* Línea 11 original */\n}\n.animate-line-3 {\n  animation: lines-opacity 1.5s infinite linear;\n  animation-delay: -1.125s;\n}\n.animate-line-4 {\n  animation: lines-opacity 1.5s infinite linear;\n  animation-delay: -1s;\n}\n.animate-line-5 {\n  animation: lines-opacity 1.5s infinite linear;\n  animation-delay: -0.875s;\n}\n.animate-line-6 {\n  animation: lines-opacity 1.5s infinite linear;\n  animation-delay: -0.75s;\n}\n.animate-line-7 {\n  animation: lines-opacity 1.5s infinite linear;\n  animation-delay: -0.625s;\n}\n.animate-line-8 {\n  animation: lines-opacity 1.5s infinite linear;\n  animation-delay: -0.5s;\n}\n.animate-line-9 {\n  animation: lines-opacity 1.5s infinite linear;\n  animation-delay: -0.375s;\n}\n.animate-line-10 {\n  animation: lines-opacity 1.5s infinite linear;\n  animation-delay: -0.25s;\n}\n.animate-line-11 {\n  animation: lines-opacity 1.5s infinite linear;\n  animation-delay: -0.125s;\n}\n.animate-line-12 {\n  animation: lines-opacity 1.5s infinite linear;\n  animation-delay: 0s; /* Línea 1 original */\n}\n\n/* Animación Lenta (2s) */\n.animate-line-slow-1 {\n  animation: lines-opacity 2s infinite linear;\n  animation-delay: -1.833s;\n}\n.animate-line-slow-2 {\n  animation: lines-opacity 2s infinite linear;\n  animation-delay: -1.667s;\n}\n.animate-line-slow-3 {\n  animation: lines-opacity 2s infinite linear;\n  animation-delay: -1.5s;\n}\n.animate-line-slow-4 {\n  animation: lines-opacity 2s infinite linear;\n  animation-delay: -1.333s;\n}\n.animate-line-slow-5 {\n  animation: lines-opacity 2s infinite linear;\n  animation-delay: -1.167s;\n}\n.animate-line-slow-6 {\n  animation: lines-opacity 2s infinite linear;\n  animation-delay: -1s;\n}\n.animate-line-slow-7 {\n  animation: lines-opacity 2s infinite linear;\n  animation-delay: -0.833s;\n}\n.animate-line-slow-8 {\n  animation: lines-opacity 2s infinite linear;\n  animation-delay: -0.667s;\n}\n.animate-line-slow-9 {\n  animation: lines-opacity 2s infinite linear;\n  animation-delay: -0.5s;\n}\n.animate-line-slow-10 {\n  animation: lines-opacity 2s infinite linear;\n  animation-delay: -0.333s;\n}\n.animate-line-slow-11 {\n  animation: lines-opacity 2s infinite linear;\n  animation-delay: -0.167s;\n}\n.animate-line-slow-12 {\n  animation: lines-opacity 2s infinite linear;\n  animation-delay: 0s;\n}\n\n/* Animación Rápida (0.8s) */\n.animate-line-fast-1 {\n  animation: lines-opacity 0.8s infinite linear;\n  animation-delay: -0.733s;\n}\n.animate-line-fast-2 {\n  animation: lines-opacity 0.8s infinite linear;\n  animation-delay: -0.667s;\n}\n.animate-line-fast-3 {\n  animation: lines-opacity 0.8s infinite linear;\n  animation-delay: -0.6s;\n}\n.animate-line-fast-4 {\n  animation: lines-opacity 0.8s infinite linear;\n  animation-delay: -0.533s;\n}\n.animate-line-fast-5 {\n  animation: lines-opacity 0.8s infinite linear;\n  animation-delay: -0.467s;\n}\n.animate-line-fast-6 {\n  animation: lines-opacity 0.8s infinite linear;\n  animation-delay: -0.4s;\n}\n.animate-line-fast-7 {\n  animation: lines-opacity 0.8s infinite linear;\n  animation-delay: -0.333s;\n}\n.animate-line-fast-8 {\n  animation: lines-opacity 0.8s infinite linear;\n  animation-delay: -0.267s;\n}\n.animate-line-fast-9 {\n  animation: lines-opacity 0.8s infinite linear;\n  animation-delay: -0.2s;\n}\n.animate-line-fast-10 {\n  animation: lines-opacity 0.8s infinite linear;\n  animation-delay: -0.133s;\n}\n.animate-line-fast-11 {\n  animation: lines-opacity 0.8s infinite linear;\n  animation-delay: -0.067s;\n}\n.animate-line-fast-12 {\n  animation: lines-opacity 0.8s infinite linear;\n  animation-delay: 0s;\n}\n  ",H={slow:{first:"animate-line-slow-1",second:"animate-line-slow-2",third:"animate-line-slow-3",fourth:"animate-line-slow-4",fifth:"animate-line-slow-5",sixth:"animate-line-slow-6",seventh:"animate-line-slow-7",eighth:"animate-line-slow-8",ninth:"animate-line-slow-9",tenth:"animate-line-slow-10",eleventh:"animate-line-slow-11",twelfth:"animate-line-slow-12"},normal:{first:"animate-line-1",second:"animate-line-2",third:"animate-line-3",fourth:"animate-line-4",fifth:"animate-line-5",sixth:"animate-line-6",seventh:"animate-line-7",eighth:"animate-line-8",ninth:"animate-line-9",tenth:"animate-line-10",eleventh:"animate-line-11",twelfth:"animate-line-12"},fast:{first:"animate-line-fast-1",second:"animate-line-fast-2",third:"animate-line-fast-3",fourth:"animate-line-fast-4",fifth:"animate-line-fast-5",sixth:"animate-line-fast-6",seventh:"animate-line-fast-7",eighth:"animate-line-fast-8",ninth:"animate-line-fast-9",tenth:"animate-line-fast-10",eleventh:"animate-line-fast-11",twelfth:"animate-line-fast-12"}},I=function(){switch(d){case"border":return n.jsx("div",{className:e("inline-block rounded-full",z[t],q[t],A[o],B[r],w),role:"status","aria-busy":"true"});case"dots":return n.jsxs("div",{className:e("flex space-x-1",w),role:"status","aria-busy":"true",children:[n.jsx("style",{children:G}),n.jsx("div",{className:e(W[t],"rounded-full animate-dot-1",P[r]),"aria-hidden":"true"}),n.jsx("div",{className:e(W[t],"rounded-full animate-dot-2",P[r]),"aria-hidden":"true"}),n.jsx("div",{className:e(W[t],"rounded-full animate-dot-3",P[r]),"aria-hidden":"true"})]});case"grow":return n.jsxs("div",{className:e(w),role:"status","aria-busy":"true",children:[n.jsx("style",{children:G}),n.jsx("div",{className:e(Y[t],"rounded-full animate-grow",M[r]),"aria-hidden":"true"})]});case"wave":return n.jsxs("div",{className:e("flex space-x-1 items-end",w),role:"status","aria-busy":"true",children:[n.jsx("style",{children:G}),n.jsx("div",{className:e(C[t],"rounded-full",_[o].first,P[r]),"aria-hidden":"true"}),n.jsx("div",{className:e(C[t],"rounded-full",_[o].second,P[r]),"aria-hidden":"true"}),n.jsx("div",{className:e(C[t],"rounded-full",_[o].third,P[r]),"aria-hidden":"true"})]});case"lines":return n.jsxs("div",{className:e(w),role:"status","aria-busy":"true",children:[n.jsx("style",{children:G}),n.jsxs("svg",{className:e(L[t],R[r]),viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",role:"img",children:[n.jsx("line",{x1:"18.5",y1:"12",x2:"22.5",y2:"12",strokeWidth:"2",strokeLinecap:"round",className:H[o].first}),n.jsx("line",{x1:"17.6",y1:"15.3",x2:"21.1",y2:"17.3",strokeWidth:"2",strokeLinecap:"round",className:H[o].second}),n.jsx("line",{x1:"15.3",y1:"17.6",x2:"17.3",y2:"21.1",strokeWidth:"2",strokeLinecap:"round",className:H[o].third}),n.jsx("line",{x1:"12",y1:"18.5",x2:"12",y2:"22.5",strokeWidth:"2",strokeLinecap:"round",className:H[o].fourth}),n.jsx("line",{x1:"8.8",y1:"17.6",x2:"6.8",y2:"21.1",strokeWidth:"2",strokeLinecap:"round",className:H[o].fifth}),n.jsx("line",{x1:"6.4",y1:"15.3",x2:"2.9",y2:"17.3",strokeWidth:"2",strokeLinecap:"round",className:H[o].sixth}),n.jsx("line",{x1:"5.5",y1:"12",x2:"1.5",y2:"12",strokeWidth:"2",strokeLinecap:"round",className:H[o].seventh}),n.jsx("line",{x1:"6.4",y1:"8.8",x2:"2.9",y2:"6.8",strokeWidth:"2",strokeLinecap:"round",className:H[o].eighth}),n.jsx("line",{x1:"8.8",y1:"6.4",x2:"6.8",y2:"2.9",strokeWidth:"2",strokeLinecap:"round",className:H[o].ninth}),n.jsx("line",{x1:"12",y1:"5.5",x2:"12",y2:"1.5",strokeWidth:"2",strokeLinecap:"round",className:H[o].tenth}),n.jsx("line",{x1:"15.3",y1:"6.4",x2:"17.3",y2:"2.9",strokeWidth:"2",strokeLinecap:"round",className:H[o].eleventh}),n.jsx("line",{x1:"17.6",y1:"8.8",x2:"21.1",y2:"6.8",strokeWidth:"2",strokeLinecap:"round",className:"".concat(H[o].twelfth," \n             filter \n             animate-[line-highlight_1.5s_infinite_linear]")})]})]});default:return null}}();return c?n.jsxs("div",{className:e("inline-flex items-center justify-center","top"===y||"bottom"===y?"flex-col":"flex-row",h,p),role:"status","aria-live":N,"aria-busy":"true",children:["top"===y&&n.jsx("span",{className:e(D[r],E[t],F[y],k),id:"spinner-label",children:c}),"left"===y&&n.jsx("span",{className:e(D[r],E[t],F[y],k),id:"spinner-label",children:c}),I,"right"===y&&n.jsx("span",{className:e(D[r],E[t],F[y],k),id:"spinner-label",children:c}),"bottom"===y&&n.jsx("span",{className:e(D[r],E[t],F[y],k),id:"spinner-label",children:c}),n.jsx("span",{className:"sr-only",children:v||"Cargando"})]}):n.jsxs("div",{className:e(h),"aria-live":N,children:[I,n.jsx("span",{className:"sr-only",children:v||"Cargando"})]})};
//# sourceMappingURL=index.js.map