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

Flexible and customizable React UI components for Frank Authentication

'use client';
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),C=require("../../../theme/context.cjs"),$=require("../../../theme/styled.cjs"),s=require("@emotion/react"),D=require("@emotion/styled"),x=require("react"),R=t=>t&&t.__esModule?t:{default:t},n=R(D),u=R(x),T=t=>{const{theme:e,size:r="md"}=t;switch(r){case"xs":return s.css`
        width: ${e.spacing[6]};
        height: ${e.spacing[6]};
        font-size: ${e.fontSizes.xs};
      `;case"sm":return s.css`
        width: ${e.spacing[8]};
        height: ${e.spacing[8]};
        font-size: ${e.fontSizes.sm};
      `;case"md":return s.css`
        width: ${e.spacing[10]};
        height: ${e.spacing[10]};
        font-size: ${e.fontSizes.base};
      `;case"lg":return s.css`
        width: ${e.spacing[12]};
        height: ${e.spacing[12]};
        font-size: ${e.fontSizes.lg};
      `;case"xl":return s.css`
        width: ${e.spacing[16]};
        height: ${e.spacing[16]};
        font-size: ${e.fontSizes.xl};
      `;default:return s.css``}},I=t=>{const{theme:e,radius:r="full"}=t;switch(r){case"none":return s.css`border-radius: ${e.borderRadius.none};`;case"sm":return s.css`border-radius: ${e.borderRadius.sm};`;case"md":return s.css`border-radius: ${e.borderRadius.md};`;case"lg":return s.css`border-radius: ${e.borderRadius.lg};`;case"full":return s.css`border-radius: ${e.borderRadius.full};`;default:return s.css`border-radius: ${e.borderRadius.full};`}},W=t=>{const{theme:e,color:r="primary",isDisabled:i}=t;$.getColorVariant(e,r,500);const c=$.getColorVariant(e,r,100),l=$.getColorVariant(e,r,700);return i?s.css`
      opacity: 0.5;
      cursor: not-allowed;
    `:s.css`
    background-color: ${c};
    color: ${l};
  `},k=n.default.div`
  position: relative;
  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};
  user-select: none;
  overflow: hidden;
  flex-shrink: 0;
  transition: all ${t=>t.theme.transitions.normal};

  ${T}
  ${I}
  ${W}

  ${t=>t.isBordered&&s.css`
      border: 2px solid ${t.theme.colors.border.primary};
    `}

  /* Custom CSS prop */
  ${t=>t.css}
`,F=n.default.img`
  width: 100%;
  height: 100%;
  object-fit: cover;
  ${I}
`,N=n.default.span`
  font-weight: ${t=>t.theme.fontWeights.semibold};
  text-transform: uppercase;
`,B=n.default.div`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: ${t=>t.theme.colors.text.tertiary};
`,H=n.default.div`
  position: absolute;
  border: 2px solid ${t=>t.theme.colors.background.primary};
  border-radius: ${t=>t.theme.borderRadius.full};
  background-color: ${t=>{const e=t.statusColor||"success";return $.getColorVariant(t.theme,e,500)}};

  ${t=>{const r={xs:"8px",sm:"10px",md:"12px",lg:"14px",xl:"16px"}[t.size]||"12px";return s.css`
      width: ${r};
      height: ${r};
    `}}

  ${t=>{switch(t.statusPlacement){case"top-right":return s.css`
          top: 0;
          right: 0;
          transform: translate(25%, -25%);
        `;case"top-left":return s.css`
          top: 0;
          left: 0;
          transform: translate(-25%, -25%);
        `;case"bottom-right":return s.css`
          bottom: 0;
          right: 0;
          transform: translate(25%, 25%);
        `;case"bottom-left":return s.css`
          bottom: 0;
          left: 0;
          transform: translate(-25%, 25%);
        `;default:return s.css`
          bottom: 0;
          right: 0;
          transform: translate(25%, 25%);
        `}}}
`,O=()=>o.jsx("svg",{width:"60%",height:"60%",viewBox:"0 0 24 24",fill:"currentColor",children:o.jsx("path",{d:"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"})}),U=t=>t.split(" ").map(e=>e.charAt(0)).join("").slice(0,2).toUpperCase(),E=u.default.forwardRef(({src:t,alt:e,name:r,size:i="md",color:c="primary",radius:l="full",isBordered:b=!1,isDisabled:v=!1,fallback:y,showStatus:w=!1,statusColor:h="success",statusPlacement:f="bottom-right",className:m,css:g,onError:A,...d},p)=>{const{theme:a}=C.useTheme(),[q,j]=x.useState(!1),[M,S]=x.useState(!1);x.useEffect(()=>{j(!1),S(!1)},[t]);const G=()=>{j(!0),A?.()},P=()=>{S(!0)},V={...d,size:i,color:c,radius:l,isBordered:b,isDisabled:v,className:m,css:g},L=()=>t&&!q?o.jsx(F,{theme:a,src:t,alt:e||r,radius:l,onError:G,onLoad:P,style:{opacity:M?1:0,transition:a.transitions.normal}}):r?o.jsx(N,{theme:a,children:U(r)}):o.jsx(B,{theme:a,children:y||o.jsx(O,{})});return o.jsxs(k,{theme:a,ref:p,...V,children:[L(),w&&o.jsx(H,{theme:a,statusColor:h,statusPlacement:f,size:i})]})});E.displayName="Avatar";const J=n.default.div`
  display: flex;
  align-items: center;

  ${t=>t.css}
`,z=n.default.div`
  position: relative;
  margin-left: ${t=>t.index>0?`${t.spacing}px`:"0"};

  &:hover {
    z-index: 1;
  }
`,K=n.default(k)`
  background-color: ${t=>t.theme.colors.neutral[200]};
  color: ${t=>t.theme.colors.text.secondary};
  font-weight: ${t=>t.theme.fontWeights.semibold};
`,_=u.default.forwardRef(({children:t,max:e=5,size:r="md",spacing:i=-8,isBordered:c=!1,radius:l="full",className:b,css:v,...y},w)=>{const{theme:h}=C.useTheme(),f=u.default.Children.toArray(t),m=f.slice(0,e),g=Math.max(0,f.length-e),A={...y,className:b,css:v};return o.jsxs(J,{theme:h,ref:w,...A,children:[m.map((d,p)=>{if(u.default.isValidElement(d)){const a={size:r,isBordered:c,radius:l,...d.props};return o.jsx(z,{spacing:i,index:p,children:u.default.cloneElement(d,a)},p)}return d}),g>0&&o.jsx(z,{spacing:i,index:m.length,children:o.jsxs(K,{theme:h,size:r,radius:l,isBordered:c,children:["+",g]})})]})});_.displayName="AvatarGroup";exports.Avatar=E;exports.AvatarGroup=_;
//# sourceMappingURL=avatar.cjs.map