@frank-auth/react/dist/cjs/components/ui/spinner/spinner.cjs

Flexible and customizable React UI components for Frank Authentication

'use client';
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),b=require("../../../theme/context.cjs"),l=require("../../../theme/styled.cjs"),t=require("@emotion/react"),S=require("@emotion/styled"),w=require("react"),h=e=>e&&e.__esModule?e:{default:e},a=h(S),u=h(w),y=t.keyframes`
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
`,$=e=>{const{theme:r,color:n="primary"}=e;if(n==="current")return t.css`
      border-color: currentColor;
      border-top-color: transparent;
    `;const s=l.getColorVariant(r,n,500),o=l.getColorVariant(r,n,200);return t.css`
    border-color: ${o};
    border-top-color: ${s};
  `},C=e=>{const{size:r="md"}=e;if(typeof r=="number")return t.css`
      width: ${r}px;
      height: ${r}px;
      border-width: ${Math.max(2,r/8)}px;
    `;switch(r){case"sm":return t.css`
        width: 16px;
        height: 16px;
        border-width: 2px;
      `;case"md":return t.css`
        width: 24px;
        height: 24px;
        border-width: 2px;
      `;case"lg":return t.css`
        width: 32px;
        height: 32px;
        border-width: 3px;
      `;default:return t.css`
        width: 24px;
        height: 24px;
        border-width: 2px;
      `}},z=a.default.div`
  border-style: solid;
  border-radius: 50%;
  animation: ${y} 1s linear infinite;

  ${$}
  ${C}

  /* Custom CSS prop */
  ${e=>e.css}
`,_=a.default.div`
  display: inline-flex;
  align-items: center;
  gap: ${e=>e.theme.spacing[2]};

  ${e=>{switch(e.labelPlacement){case"top":return t.css`
          flex-direction: column-reverse;
        `;case"bottom":return t.css`
          flex-direction: column;
        `;case"start":return t.css`
          flex-direction: row-reverse;
        `;default:return t.css`
          flex-direction: row;
        `}}}
`,q=a.default.span`
  color: ${e=>e.theme.colors.text.secondary};
  font-size: ${e=>{if(typeof e.size=="number")return`${Math.max(12,e.size*.6)}px`;switch(e.size){case"sm":return e.theme.fontSizes.sm;case"lg":return e.theme.fontSizes.lg;default:return e.theme.fontSizes.base}}};
  font-weight: ${e=>e.theme.fontWeights.medium};
`,m=u.default.forwardRef(({color:e="primary",size:r="md",label:n,labelPlacement:s="end",className:o,css:f,...p},x)=>{const{theme:i}=b.useTheme(),g={...p,color:e,size:r,className:o,css:f},d=c.jsx(z,{theme:i,...g});return n?c.jsxs(_,{theme:i,labelPlacement:s,children:[d,c.jsx(q,{theme:i,size:r,children:n})]}):u.default.cloneElement(d,{ref:x})});m.displayName="Spinner";exports.Spinner=m;
//# sourceMappingURL=spinner.cjs.map