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

Flexible and customizable React UI components for Frank Authentication

'use client';
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=require("react/jsx-runtime"),S=require("../../../theme/context.cjs"),n=require("../../../theme/styled.cjs"),o=require("@emotion/react"),V=require("@emotion/styled"),R=require("react"),b=r=>r&&r.__esModule?r:{default:r},h=b(V),z=b(R),B=r=>{const{theme:t,variant:i="solid",color:e="primary",isDisabled:c}=r,s=n.getColorVariant(t,e,500),l=n.getColorVariant(t,e,600),d=n.getColorVariant(t,e,50),u=n.getColorVariant(t,e,700),a=o.css`
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  `;switch(i){case"solid":return o.css`
        background-color: ${s};
        color: ${t.colors.text.inverse};
        border: 2px solid ${s};

        &:hover:not(:disabled) {
          background-color: ${l};
          border-color: ${l};
        }

        &:active:not(:disabled) {
          background-color: ${u};
          border-color: ${u};
        }

        ${c&&a}
      `;case"outlined":return o.css`
        background-color: transparent;
        color: ${s};
        border: 2px solid ${s};

        &:hover:not(:disabled) {
          background-color: ${d};
        }

        &:active:not(:disabled) {
          background-color: ${n.getColorVariant(t,e,100)};
        }

        ${c&&a}
      `;case"light":return o.css`
        background-color: ${d};
        color: ${u};
        border: 2px solid transparent;

        &:hover:not(:disabled) {
          background-color: ${n.getColorVariant(t,e,100)};
        }

        &:active:not(:disabled) {
          background-color: ${n.getColorVariant(t,e,200)};
        }

        ${c&&a}
      `;case"flat":return o.css`
        background-color: ${n.getColorVariant(t,e,100)};
        color: ${s};
        border: 2px solid transparent;

        &:hover:not(:disabled) {
          background-color: ${n.getColorVariant(t,e,200)};
        }

        &:active:not(:disabled) {
          background-color: ${n.getColorVariant(t,e,300)};
        }

        ${c&&a}
      `;case"ghost":return o.css`
        background-color: transparent;
        color: ${s};
        border: 2px solid transparent;

        &:hover:not(:disabled) {
          background-color: ${d};
        }

        &:active:not(:disabled) {
          background-color: ${n.getColorVariant(t,e,100)};
        }

        ${c&&a}
      `;default:return o.css`
        background-color: transparent;
        color: ${s};
        border: 2px solid ${s};

        &:hover:not(:disabled) {
          background-color: ${d};
        }

        &:active:not(:disabled) {
          background-color: ${n.getColorVariant(t,e,100)};
        }

        ${c&&a}
			`}},_=r=>{const{theme:t,size:i="md",isIconOnly:e}=r;if(e)switch(i){case"sm":return o.css`
          min-width: ${t.spacing[8]} !important;
          height: ${t.spacing[8]} !important;
          padding: 0 !important;
        `;case"md":return o.css`
          min-width: ${t.spacing[10]} !important;
          height: ${t.spacing[10]} !important;
          padding: 0 !important;
        `;case"lg":return o.css`
          min-width: ${t.spacing[12]} !important;
          height: ${t.spacing[12]} !important;
          padding: 0 !important;
        `;default:return o.css``}switch(i){case"sm":return o.css`
        height: ${t.spacing[8]} !important;
        padding: 0 ${t.spacing[3]} !important;
        font-size: ${t.fontSizes.sm} !important;
        min-width: ${t.spacing[16]} !important;
      `;case"md":return o.css`
        height: ${t.spacing[10]} !important;
        padding: 0 ${t.spacing[4]} !important;
        font-size: ${t.fontSizes.base} !important;
        min-width: ${t.spacing[20]} !important;
      `;case"lg":return o.css`
        height: ${t.spacing[12]} !important;
        padding: 0 ${t.spacing[6]} !important;
        font-size: ${t.fontSizes.lg} !important;
        min-width: ${t.spacing[24]} !important;
      `;default:return o.css``}},q=r=>{const{theme:t,radius:i="md"}=r;switch(i){case"none":return o.css`border-radius: ${t.borderRadius.none} !important;`;case"sm":return o.css`border-radius: ${t.borderRadius.sm} !important;`;case"md":return o.css`border-radius: ${t.borderRadius.md} !important;`;case"lg":return o.css`border-radius: ${t.borderRadius.lg} !important;`;case"full":return o.css`border-radius: ${t.borderRadius.full} !important;`;default:return o.css`border-radius: ${t.borderRadius.md} !important;`}},j=h.default.button`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: ${r=>r.theme.spacing[2]};
  font-family: inherit;
  font-weight: ${r=>r.theme.fontWeights.medium};
  line-height: ${r=>r.theme.lineHeights.tight};
  text-decoration: none;
  cursor: pointer;
  transition: all ${r=>r.theme.transitions.normal};
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
  outline: none;

  /* Apply base styles first */
  ${B}
  ${_}

    /* Apply radius styles last to ensure they take precedence */
  ${q}

  ${r=>r.fullWidth&&o.css`
      width: 100%;
    `}

  &:focus-visible {
    outline: 2px solid ${r=>r.theme.colors.border.focus};
    outline-offset: 2px;
  }

  /* Custom CSS prop - applied last */
  ${r=>r.css}
`,A=h.default.div`
  width: ${r=>{switch(r.size){case"sm":return"12px";case"lg":return"20px";default:return"16px"}}};
  height: ${r=>{switch(r.size){case"sm":return"12px";case"lg":return"20px";default:return"16px"}}};
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 1s linear infinite;

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
`,f=z.default.forwardRef(({children:r,variant:t="solid",color:i="primary",size:e="md",radius:c="md",isLoading:s=!1,isDisabled:l=!1,fullWidth:d=!1,isIconOnly:u=!1,startContent:a,endContent:p,className:y,css:k,onPress:g,...x},v)=>{const{theme:w}=S.useTheme(),m={};g&&(m.onClick=g);const C={...m,...x,variant:t,color:i,size:e,radius:c,isDisabled:l||s,fullWidth:d,isIconOnly:u,className:y,disabled:l||s,css:k};return $.jsxs(j,{theme:w,ref:v,...C,children:[s&&$.jsx(A,{size:e}),!s&&a&&a,r,!s&&p&&p]})});f.displayName="Button";exports.Button=f;
//# sourceMappingURL=button.cjs.map