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

Flexible and customizable React UI components for Frank Authentication

'use client';
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),x=require("../../../theme/context.cjs"),s=require("@emotion/react"),y=require("@emotion/styled"),w=require("react"),t=e=>e&&e.__esModule?e:{default:e},d=t(y),v=t(w),C=e=>{const{theme:r,variant:o="elevated",shadow:a="sm"}=e;switch(o){case"elevated":return s.css`
        background-color: ${r.colors.background.primary};
        border: 1px solid transparent;
        box-shadow: ${r.shadows[a]};
      `;case"bordered":return s.css`
        background-color: ${r.colors.background.primary};
        border: 1px solid ${r.colors.border.primary};
        box-shadow: none;
      `;case"shadow":return s.css`
        background-color: ${r.colors.background.primary};
        border: 1px solid transparent;
        box-shadow: ${r.shadows[a]};
      `;case"flat":return s.css`
        background-color: ${r.colors.background.secondary};
        border: 1px solid transparent;
        box-shadow: none;
      `;default:return s.css``}},R=e=>{const{theme:r,radius:o="lg"}=e;switch(o){case"none":return s.css`border-radius: ${r.borderRadius.none};`;case"sm":return s.css`border-radius: ${r.borderRadius.sm};`;case"md":return s.css`border-radius: ${r.borderRadius.md};`;case"lg":return s.css`border-radius: ${r.borderRadius.lg};`;case"xl":return s.css`border-radius: ${r.borderRadius.xl};`;default:return s.css`border-radius: ${r.borderRadius.lg};`}},k=d.default.div`
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  width: ${e=>e.fullWidth?"100%":"auto"};
  transition: all ${e=>e.theme.transitions.normal};

  ${C}
  ${R}

  ${e=>e.isHoverable&&s.css`
    cursor: pointer;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: ${e.theme.shadows.lg};
    }
  `}

  ${e=>e.isPressable&&s.css`
    cursor: pointer;
    user-select: none;
    
    &:hover {
      opacity: 0.9;
    }
    
    &:active {
      transform: scale(0.98);
    }
  `}

  ${e=>e.isDisabled&&s.css`
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  `}

  /* Custom CSS prop */
  ${e=>e.css}
`,n=v.default.forwardRef(({children:e,variant:r="elevated",radius:o="lg",shadow:a="sm",fullWidth:c=!1,isHoverable:i=!1,isPressable:l=!1,isDisabled:u=!1,className:p,css:b,...m},g)=>{const{theme:$}=x.useTheme(),f={...m,variant:r,radius:o,shadow:a,fullWidth:c,isHoverable:i,isPressable:l,isDisabled:u,className:p,css:b};return h.jsx(k,{theme:$,ref:g,...f,children:e})});n.displayName="Card";const S=d.default.div`
  display: flex;
  padding: ${e=>e.theme.spacing[6]} ${e=>e.theme.spacing[6]} 0;
  flex-direction: column;
  gap: ${e=>e.theme.spacing[2]};

  ${e=>e.css}
`,_=d.default.div`
  display: flex;
  padding: ${e=>e.theme.spacing[6]};
  flex-direction: column;
  gap: ${e=>e.theme.spacing[4]};
  flex: 1;

  ${e=>e.css}
`,q=d.default.div`
  display: flex;
  padding: 0 ${e=>e.theme.spacing[6]} ${e=>e.theme.spacing[6]};
  flex-direction: row;
  align-items: center;
  gap: ${e=>e.theme.spacing[3]};

  ${e=>e.css}
`;exports.Card=n;exports.CardBody=_;exports.CardFooter=q;exports.CardHeader=S;
//# sourceMappingURL=card.cjs.map