@frank-auth/react/dist/cjs/components/auth/common/loading-spinner.cjs

Flexible and customizable React UI components for Frank Authentication

'use client';
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime");require("@emotion/styled");const V=require("../../ui/spinner/spinner.cjs"),g=require("framer-motion"),O=require("react"),w=require("../../../hooks/use-config.cjs"),P=require("../../../hooks/use-theme.cjs"),q=e=>e&&e.__esModule?e:{default:e},p=q(O),E=({size:e,color:r,duration:n=1})=>t.jsx(g.motion.div,{className:`border-2 border-transparent border-t-current border-r-current rounded-full ${e}`,animate:{rotate:360},transition:{duration:n,repeat:Number.POSITIVE_INFINITY,ease:"linear"},style:{color:`var(--${r})`}}),B=({size:e,color:r,duration:n=1.4})=>{const s={"w-2 h-2":"w-2 h-2","w-3 h-3":"w-3 h-3","w-4 h-4":"w-4 h-4","w-6 h-6":"w-6 h-6"}[e]||"w-3 h-3";return t.jsx("div",{className:"flex gap-1",children:[0,1,2].map(a=>t.jsx(g.motion.div,{className:`${s} rounded-full bg-current`,style:{color:`var(--${r})`},animate:{scale:[1,1.2,1],opacity:[.5,1,.5]},transition:{duration:n,repeat:Number.POSITIVE_INFINITY,delay:a*.2,ease:"easeInOut"}},a))})},Y=({size:e,color:r,duration:n=1.5})=>t.jsx(g.motion.div,{className:`rounded-full bg-current ${e}`,style:{color:`var(--${r})`},animate:{scale:[1,1.2,1],opacity:[.5,1,.5]},transition:{duration:n,repeat:Number.POSITIVE_INFINITY,ease:"easeInOut"}}),k=({size:e,color:r,duration:n=1.2})=>{const s={"w-2 h-2":"w-1 h-4","w-3 h-3":"w-1 h-6","w-4 h-4":"w-1 h-8","w-6 h-6":"w-2 h-12"}[e]||"w-1 h-6";return t.jsx("div",{className:"flex items-end gap-1",children:[0,1,2,3].map(a=>t.jsx(g.motion.div,{className:`${s} bg-current rounded-sm`,style:{color:`var(--${r})`},animate:{scaleY:[1,2,1]},transition:{duration:n,repeat:Number.POSITIVE_INFINITY,delay:a*.1,ease:"easeInOut"}},a))})};function b({variant:e="spinner",size:r="md",color:n="primary",text:i="Loading...",showText:s=!1,textPosition:a="bottom",centered:o=!1,overlay:c=!1,className:m="",children:x,duration:l=1,backdrop:f=!1,backdropOpacity:h=.5}){const{getColorValue:y}=P.useTheme(),{components:I}=w.useConfig(),v=I.LoadingSpinner;if(v)return t.jsx(v,{variant:e,size:r,color:n,text:i,showText:s,textPosition:a,centered:o,overlay:c,className:m,children:x,duration:l,backdrop:f,backdropOpacity:h});const S={sm:"w-4 h-4",md:"w-6 h-6",lg:"w-8 h-8",xl:"w-12 h-12"},N={sm:"text-xs",md:"text-sm",lg:"text-base",xl:"text-lg"};y(n);const L=()=>{const d=S[r],u=`text-${n}-600 dark:text-${n}-400`;switch(e){case"dots":return t.jsx(B,{size:d,color:u,duration:l});case"pulse":return t.jsx(Y,{size:d,color:u,duration:l});case"bars":return t.jsx(k,{size:d,color:u,duration:l});case"custom":return x||t.jsx(E,{size:d,color:u,duration:l});case"spinner":default:return t.jsx(V.Spinner,{size:r,color:n})}},C=()=>!s||!i?null:t.jsx("span",{className:`${N[r]} text-${n}-600 dark:text-${n}-400 font-medium`,children:i}),_=()=>{const d=L(),u=C();if(!s)return d;const T={top:"flex-col-reverse",bottom:"flex-col",left:"flex-row-reverse",right:"flex-row"},z={top:"gap-2",bottom:"gap-2",left:"gap-3",right:"gap-3"};return t.jsxs("div",{className:`flex items-center justify-center ${T[a]} ${z[a]}`,children:[d,u]})},j=t.jsx("div",{className:`
      ${o?"flex items-center justify-center":""}
      ${m}
    `,children:_()});return c?t.jsxs("div",{className:"fixed inset-0 z-50 flex items-center justify-center",children:[f&&t.jsx(g.motion.div,{initial:{opacity:0},animate:{opacity:h},exit:{opacity:0},className:"absolute inset-0 bg-background/80 backdrop-blur-sm"}),t.jsx(g.motion.div,{initial:{opacity:0,scale:.8},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.8},className:"relative z-10",children:j})]}):j}function F({isLoading:e=!1,loadingText:r="Loading...",spinnerProps:n={},variant:i="solid",color:s="primary",size:a="md",children:o,disabled:c,className:m="",...x}){const{components:l}=w.useConfig(),f=l.LoadingButton;if(f)return t.jsx(f,{isLoading:e,loadingText:r,spinnerProps:n,variant:i,color:s,size:a,children:o,disabled:c,className:m,...x});const h={sm:"sm",md:"sm",lg:"md"};return t.jsxs("button",{...x,disabled:c||e,className:`
        relative inline-flex items-center justify-center gap-2 px-4 py-2 
        text-sm font-medium rounded-md transition-colors
        ${i==="solid"?`bg-${s}-600 text-white hover:bg-${s}-700`:""}
        ${i==="bordered"?`border border-${s}-600 text-${s}-600 hover:bg-${s}-50`:""}
        ${i==="light"?`text-${s}-600 hover:bg-${s}-50`:""}
        disabled:opacity-50 disabled:cursor-not-allowed
        ${m}
      `,children:[e&&t.jsx(b,{variant:"spinner",size:h[a],color:i==="solid"?"default":s,...n}),t.jsx("span",{className:e?"opacity-70":"",children:e?r:o})]})}const M={signIn:{text:"Signing in...",variant:"spinner"},signUp:{text:"Creating account...",variant:"spinner"},signOut:{text:"Signing out...",variant:"dots"},verifying:{text:"Verifying...",variant:"pulse"},processing:{text:"Processing...",variant:"bars"},loading:{text:"Loading...",variant:"spinner"},sending:{text:"Sending...",variant:"dots"},redirecting:{text:"Redirecting...",variant:"pulse"}},$=p.default.createContext(null);function R({children:e}){const[r,n]=p.default.useState(!1),[i,s]=p.default.useState("Loading..."),a=p.default.useCallback((o,c="Loading...")=>{n(o),s(c)},[]);return t.jsxs($.Provider,{value:{isLoading:r,loadingText:i,setLoading:a},children:[e,r&&t.jsx(b,{overlay:!0,backdrop:!0,showText:!0,text:i,variant:"spinner",size:"lg",color:"primary"})]})}function D(){const e=p.default.useContext($);if(!e)throw new Error("useLoading must be used within a LoadingProvider");return e}var H=b;exports.LoadingButton=F;exports.LoadingProvider=R;exports.LoadingSpinner=b;exports.LoadingStates=M;exports.default=H;exports.useLoading=D;
//# sourceMappingURL=loading-spinner.cjs.map