@frank-auth/react/dist/esm/components/ui/card/card.js

Flexible and customizable React UI components for Frank Authentication

'use client';
import { jsx as g } from "react/jsx-runtime";
import { useTheme as h } from "../../../theme/context.js";
import { css as o } from "@emotion/react";
import d from "@emotion/styled";
import f from "react";
const x = (r) => {
  const { theme: e, variant: s = "elevated", shadow: a = "sm" } = r;
  switch (s) {
    case "elevated":
      return o`
        background-color: ${e.colors.background.primary};
        border: 1px solid transparent;
        box-shadow: ${e.shadows[a]};
      `;
    case "bordered":
      return o`
        background-color: ${e.colors.background.primary};
        border: 1px solid ${e.colors.border.primary};
        box-shadow: none;
      `;
    case "shadow":
      return o`
        background-color: ${e.colors.background.primary};
        border: 1px solid transparent;
        box-shadow: ${e.shadows[a]};
      `;
    case "flat":
      return o`
        background-color: ${e.colors.background.secondary};
        border: 1px solid transparent;
        box-shadow: none;
      `;
    default:
      return o``;
  }
}, w = (r) => {
  const { theme: e, radius: s = "lg" } = r;
  switch (s) {
    case "none":
      return o`border-radius: ${e.borderRadius.none};`;
    case "sm":
      return o`border-radius: ${e.borderRadius.sm};`;
    case "md":
      return o`border-radius: ${e.borderRadius.md};`;
    case "lg":
      return o`border-radius: ${e.borderRadius.lg};`;
    case "xl":
      return o`border-radius: ${e.borderRadius.xl};`;
    default:
      return o`border-radius: ${e.borderRadius.lg};`;
  }
}, y = d.div`
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  width: ${(r) => r.fullWidth ? "100%" : "auto"};
  transition: all ${(r) => r.theme.transitions.normal};

  ${x}
  ${w}

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

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

  ${(r) => r.isDisabled && o`
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  `}

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

  ${(r) => r.css}
`, j = d.div`
  display: flex;
  padding: ${(r) => r.theme.spacing[6]};
  flex-direction: column;
  gap: ${(r) => r.theme.spacing[4]};
  flex: 1;

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

  ${(r) => r.css}
`;
export {
  v as Card,
  j as CardBody,
  B as CardFooter,
  P as CardHeader
};
//# sourceMappingURL=card.js.map