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

Flexible and customizable React UI components for Frank Authentication

'use client';
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),v=require("../../../theme/context.cjs"),c=require("../../../theme/styled.cjs"),s=require("@emotion/react"),R=require("@emotion/styled"),S=require("react"),p=r=>r&&r.__esModule?r:{default:r},g=p(R),j=p(S),z=r=>{const{theme:e,variant:n="solid",color:t="primary",isDisabled:i}=r,o=c.getColorVariant(e,t,500),d=c.getColorVariant(e,t,50),l=c.getColorVariant(e,t,700);if(i)return s.css`
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    `;switch(n){case"solid":return s.css`
        background-color: ${o};
        color: ${e.colors.text.inverse};
        border: 1px solid transparent;
      `;case"bordered":return s.css`
        background-color: transparent;
        color: ${o};
        border: 1px solid ${o};
      `;case"light":return s.css`
        background-color: ${d};
        color: ${l};
        border: 1px solid transparent;
      `;case"flat":return s.css`
        background-color: ${c.getColorVariant(e,t,100)};
        color: ${o};
        border: 1px solid transparent;
      `;case"faded":return s.css`
        background-color: ${e.colors.neutral[100]};
        color: ${o};
        border: 1px solid ${e.colors.neutral[200]};
      `;case"shadow":return s.css`
        background-color: ${o};
        color: ${e.colors.text.inverse};
        border: 1px solid transparent;
        box-shadow: ${e.shadows.md};
      `;case"dot":return s.css`
        background-color: ${e.colors.background.secondary};
        color: ${e.colors.text.primary};
        border: 1px solid ${e.colors.border.primary};
        position: relative;

        &::before {
          content: '';
          position: absolute;
          left: 8px;
          top: 50%;
          transform: translateY(-50%);
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: ${o};
        }
      `;default:return s.css``}},_=r=>{const{theme:e,size:n="md",variant:t}=r,i=t==="dot"?e.spacing[5]:e.spacing[3];switch(n){case"sm":return s.css`
        height: ${e.spacing[6]};
        padding: 0 ${t==="dot"?e.spacing[4]:e.spacing[2]};
        padding-left: ${t==="dot"?e.spacing[4]:e.spacing[2]};
        font-size: ${e.fontSizes.xs};
        gap: ${e.spacing[1]};
      `;case"md":return s.css`
        height: ${e.spacing[8]};
        padding: 0 ${t==="dot"?i:e.spacing[3]};
        padding-left: ${t==="dot"?i:e.spacing[3]};
        font-size: ${e.fontSizes.sm};
        gap: ${e.spacing[2]};
      `;case"lg":return s.css`
        height: ${e.spacing[10]};
        padding: 0 ${t==="dot"?e.spacing[6]:e.spacing[4]};
        padding-left: ${t==="dot"?e.spacing[6]:e.spacing[4]};
        font-size: ${e.fontSizes.base};
        gap: ${e.spacing[2]};
      `;default:return s.css``}},q=r=>{const{theme:e,radius:n="full"}=r;switch(n){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};`}},V=g.default.div`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: ${r=>r.theme.fontWeights.medium};
  line-height: ${r=>r.theme.lineHeights.tight};
  white-space: nowrap;
  user-select: none;
  position: relative;
  transition: all ${r=>r.theme.transitions.normal};

  ${z}
  ${_}
  ${q}

  /* Custom CSS prop */
  ${r=>r.css}
`,P=g.default.button`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  color: inherit;
  opacity: 0.7;
  transition: opacity ${r=>r.theme.transitions.fast};
  width: ${r=>{switch(r.size){case"sm":return"14px";case"lg":return"18px";default:return"16px"}}};
  height: ${r=>{switch(r.size){case"sm":return"14px";case"lg":return"18px";default:return"16px"}}};

  &:hover {
    opacity: 1;
  }

  &:focus {
    outline: none;
  }
`,B=({size:r})=>a.jsxs("svg",{width:"100%",height:"100%",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[a.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),a.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),h=j.default.forwardRef(({children:r,variant:e="solid",color:n="primary",size:t="md",radius:i="full",isDisabled:o=!1,isClosable:d=!1,onClose:l,startContent:$,endContent:f,className:b,css:m,...x},y)=>{const{theme:u}=v.useTheme(),C={...x,variant:e,color:n,size:t,radius:i,isDisabled:o,className:b,css:m},w=k=>{k.stopPropagation(),l?.()};return a.jsxs(V,{theme:u,ref:y,...C,children:[$,r,f,d&&!o&&a.jsx(P,{theme:u,size:t,onClick:w,"aria-label":"Remove",children:a.jsx(B,{size:t})})]})});h.displayName="Chip";exports.Chip=h;
//# sourceMappingURL=chip.cjs.map