@yamada-ui/card/dist/chunk-RIQL43SS.mjs

Yamada UI card component

"use client"

// src/card.tsx
import {
  forwardRef,
  omitThemeProps,
  ui,
  useComponentMultiStyle
} from "@yamada-ui/core";
import { createContext, cx } from "@yamada-ui/utils";
import { jsx } from "react/jsx-runtime";
var [CardProvider, useCard] = createContext({
  name: `CardContext`,
  errorMessage: `useCard returned is 'undefined'. Seems you forgot to wrap the components in "<Card />" `
});
var Card = forwardRef((props, ref) => {
  const [styles, mergedProps] = useComponentMultiStyle("Card", props);
  const {
    className,
    align: alignItems,
    direction = "column",
    flexDirection = direction,
    justify: justifyContent,
    ...rest
  } = omitThemeProps(mergedProps);
  const css = {
    alignItems,
    display: "flex",
    flexDirection,
    justifyContent,
    wordWrap: "break-word",
    ...styles.container
  };
  return /* @__PURE__ */ jsx(CardProvider, { value: styles, children: /* @__PURE__ */ jsx(
    ui.article,
    {
      ref,
      className: cx("ui-card", className),
      __css: css,
      ...rest
    }
  ) });
});
Card.displayName = "Card";
Card.__ui__ = "Card";
var CardHeader = forwardRef(
  ({ className, ...rest }, ref) => {
    const styles = useCard();
    const css = {
      alignItems: "center",
      display: "flex",
      justifyContent: "flex-start",
      ...styles.header
    };
    return /* @__PURE__ */ jsx(
      ui.header,
      {
        ref,
        className: cx("ui-card__header", className),
        __css: css,
        ...rest
      }
    );
  }
);
CardHeader.displayName = "CardHeader";
CardHeader.__ui__ = "CardHeader";
var CardBody = forwardRef(
  ({ className, ...rest }, ref) => {
    const styles = useCard();
    const css = {
      alignItems: "flex-start",
      display: "flex",
      flexDirection: "column",
      ...styles.body
    };
    return /* @__PURE__ */ jsx(
      ui.div,
      {
        ref,
        className: cx("ui-card__body", className),
        __css: css,
        ...rest
      }
    );
  }
);
CardBody.displayName = "CardBody";
CardBody.__ui__ = "CardBody";
var CardFooter = forwardRef(
  ({ className, ...rest }, ref) => {
    const styles = useCard();
    const css = {
      alignItems: "center",
      display: "flex",
      justifyContent: "flex-start",
      ...styles.footer
    };
    return /* @__PURE__ */ jsx(
      ui.footer,
      {
        ref,
        className: cx("ui-card__footer", className),
        __css: css,
        ...rest
      }
    );
  }
);
CardFooter.displayName = "CardFooter";
CardFooter.__ui__ = "CardFooter";

export {
  Card,
  CardHeader,
  CardBody,
  CardFooter
};
//# sourceMappingURL=chunk-RIQL43SS.mjs.map