@playbooks/ui/dist/cards.es.js

An interface library for Playbooks.

import { jsx } from "react/jsx-runtime";
import { useUI } from "./context.es.js";
import { P, Font } from "./fonts.es.js";
import { Div, Img } from "./html.es.js";
import { Icon } from "./icons.es.js";
const Card = ({ name = "Card", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.card();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children });
};
const CardHeader = ({ name = "CardHeader", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.cardHeader();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children });
};
const CardIcon = ({
  name = "CardIcon",
  type = "fad",
  icon = "code",
  tailwind,
  className,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.cardIcon();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Icon, { type, icon, ...computed });
};
const CardImg = ({
  name = "CardImg",
  alt = "thumbnail",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.cardImg();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Img, { alt, ...computed });
};
const CardBody = ({ name = "CardBody", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.cardBody();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children });
};
const CardPretitle = ({
  name = "CardPretitle",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.cardPretitle();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(P, { ...computed, children });
};
const CardTitle = ({
  name = "CardTitle",
  size = "h6",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.cardTitle();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Font, { size, ...computed, children });
};
const CardSubtitle = ({
  name = "CardSubtitle",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.cardSubtitle();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(P, { ...computed, children });
};
const CardText = ({ name = "CardText", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.cardText();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(P, { ...computed, children });
};
const CardFooter = ({ name = "CardFooter", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.cardFooter();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children });
};
const CardActions = ({
  name = "CardActions",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.cardActions();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children });
};
export {
  Card,
  CardActions,
  CardBody,
  CardFooter,
  CardHeader,
  CardIcon,
  CardImg,
  CardPretitle,
  CardSubtitle,
  CardText,
  CardTitle
};