koval-ui/dist/src/lib/Card/Card.js

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";
import { jsxs as x, jsx as r } from "react/jsx-runtime";
import { forwardRef as R, useMemo as v } from "react";
import h from "classnames";
import { useLocalTheme as L } from "css-vars-hook";
import { useInternalId as j } from "../../internal/hooks/useInternalId.js";
import { useLinkRefs as w } from "../../internal/hooks/useLinkRefs.js";
/* empty css                */
import { ActionsTree as z } from "../../internal/Actions/ActionsTree.js";
import o from "./Card.module.css.js";
import { Picture as A } from "../Picture/Picture.js";
const C = R(
  ({
    children: m,
    className: c,
    headerImageUrl: a,
    actions: i = [],
    id: n,
    layout: t = "vertical",
    width: e,
    height: s,
    ...l
  }, f) => {
    const p = j(n), { LocalRoot: d, ref: u } = L();
    w(f, u);
    const N = v(
      () => ({ width: e ? `${e}px` : "auto", height: s ? `${s}px` : "auto" }),
      [s, e]
    );
    return /* @__PURE__ */ x(
      d,
      {
        ...l,
        theme: N,
        id: p,
        className: h(
          o.card,
          {
            [o.vertical]: t === "vertical",
            [o.horizontal]: t === "horizontal"
            /* horizontal */
          },
          c
        ),
        children: [
          a && /* @__PURE__ */ r(A, { className: o.headerImage, src: a }),
          /* @__PURE__ */ r("div", { className: o.body, children: m }),
          /* @__PURE__ */ r("footer", { className: o.actions, children: /* @__PURE__ */ r(
            z,
            {
              actions: i,
              classNameAction: o.actionButton,
              classNameRow: o.row
            }
          ) })
        ]
      }
    );
  }
);
C.displayName = "Card";
export {
  C as Card
};
//# sourceMappingURL=Card.js.map