@frank-auth/react/dist/cjs/components/auth/magic-link/magic-link.cjs

Flexible and customizable React UI components for Frank Authentication

'use client';
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),v=require("../../../theme/context.cjs"),c=require("../../../theme/styled.cjs"),r=require("@emotion/react"),R=require("@emotion/styled"),_=require("react"),g=t=>t&&t.__esModule?t:{default:t},p=g(R),q=g(_),j=t=>{const{theme:e,variant:o="solid",color:a="primary",isDisabled:n}=t,s=c.getColorVariant(e,a,500);if(c.getColorVariant(e,a,50),c.getColorVariant(e,a,700),n)return r.css`
      opacity: 0.5;
      cursor: not-allowed;
    `;switch(o){case"solid":return r.css`
        background-color: ${s};
        color: ${e.colors.text.inverse};
        border: 1px solid transparent;
      `;case"flat":return r.css`
        background-color: ${c.getColorVariant(e,a,100)};
        color: ${s};
        border: 1px solid transparent;
      `;case"bordered":return r.css`
        background-color: ${e.colors.background.primary};
        color: ${s};
        border: 1px solid ${s};
      `;case"shadow":return r.css`
        background-color: ${s};
        color: ${e.colors.text.inverse};
        border: 1px solid transparent;
        box-shadow: ${e.shadows.sm};
      `;case"dot":return r.css`
        background-color: ${s};
        border: 2px solid ${e.colors.background.primary};
        width: 8px;
        height: 8px;
        padding: 0;
        min-width: 8px;
      `;default:return r.css``}},V=t=>{const{theme:e,size:o="md",variant:a,shape:n="rectangle"}=t;if(a==="dot")switch(o){case"sm":return r.css`
          width: 6px;
          height: 6px;
          min-width: 6px;
        `;case"md":return r.css`
          width: 8px;
          height: 8px;
          min-width: 8px;
        `;case"lg":return r.css`
          width: 10px;
          height: 10px;
          min-width: 10px;
        `}const s=n==="circle";switch(o){case"sm":return r.css`
        min-width: ${e.spacing[4]};
        height: ${e.spacing[4]};
        padding: ${s?"0":`0 ${e.spacing[1]}`};
        font-size: ${e.fontSizes.xs};
      `;case"md":return r.css`
        min-width: ${e.spacing[5]};
        height: ${e.spacing[5]};
        padding: ${s?"0":`0 ${e.spacing[2]}`};
        font-size: ${e.fontSizes.xs};
      `;case"lg":return r.css`
        min-width: ${e.spacing[6]};
        height: ${e.spacing[6]};
        padding: ${s?"0":`0 ${e.spacing[2]}`};
        font-size: ${e.fontSizes.sm};
      `;default:return r.css``}},M=t=>{const{theme:e,shape:o="rectangle",variant:a}=t;if(a==="dot")return r.css`border-radius: ${e.borderRadius.full};`;switch(o){case"circle":return r.css`border-radius: ${e.borderRadius.full};`;case"rectangle":return r.css`border-radius: ${e.borderRadius.sm};`;default:return r.css`border-radius: ${e.borderRadius.sm};`}},h=p.default.span`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: ${t=>t.theme.fontWeights.medium};
  line-height: ${t=>t.theme.lineHeights.tight};
  white-space: nowrap;
  user-select: none;
  transition: all ${t=>t.theme.transitions.normal};
  box-sizing: border-box;

  ${j}
  ${V}
  ${M}

  /* Custom CSS prop */
  ${t=>t.css}
`,P=p.default.span`
  position: relative;
  display: inline-flex;

  ${h} {
    position: absolute;
    z-index: ${t=>t.theme.zIndex.docked};
    
    ${t=>{switch(t.placement){case"top-right":return r.css`
            top: 0;
            right: 0;
            transform: translate(50%, -50%);
          `;case"top-left":return r.css`
            top: 0;
            left: 0;
            transform: translate(-50%, -50%);
          `;case"bottom-right":return r.css`
            bottom: 0;
            right: 0;
            transform: translate(50%, 50%);
          `;case"bottom-left":return r.css`
            bottom: 0;
            left: 0;
            transform: translate(-50%, 50%);
          `;default:return r.css`
            top: 0;
            right: 0;
            transform: translate(50%, -50%);
          `}}}
  }
`,f=q.default.forwardRef(({children:t,content:e,variant:o="solid",color:a="primary",size:n="md",max:s=99,isDot:i=!1,showZero:m=!1,placement:$="top-right",isDisabled:b=!1,shape:x="rectangle",className:w,css:y,...S},z)=>{const{theme:d}=v.useTheme(),B=()=>i?!0:e===0||e==="0"?m:e!=null&&e!=="",C=()=>i||o==="dot"?null:typeof e=="number"?e>s?`${s}+`:e.toString():e,k={...S,variant:i?"dot":o,color:a,size:n,shape:i?"circle":x,isDisabled:b,className:w,css:y},l=B()?u.jsx(h,{theme:d,ref:z,...k,children:C()}):null;return t?u.jsxs(P,{theme:d,placement:$,children:[t,l]}):l});f.displayName="Badge";exports.Badge=f;
//# sourceMappingURL=magic-link.cjs.map