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 h } from "react";
import v 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 y } from "../../internal/Actions/ActionsTree.js";
import o from "./Card.module.css.js";
import { Picture as z } from "../Picture/Picture.js";
const A = R(
  ({
    children: m,
    className: c,
    headerImageUrl: t,
    actions: i = [],
    id: l,
    variant: a = "vertical",
    width: e,
    height: s,
    ...n
  }, f) => {
    const p = j(l), { LocalRoot: d, ref: u } = L();
    w(f, u);
    const N = h(
      () => ({ width: e ? `${e}px` : "auto", height: s ? `${s}px` : "auto" }),
      [s, e]
    );
    return /* @__PURE__ */ x(
      d,
      {
        ...n,
        theme: N,
        id: p,
        className: v(
          o.card,
          {
            [o.vertical]: a === "vertical",
            [o.horizontal]: a === "horizontal"
            /* horizontal */
          },
          c
        ),
        children: [
          t && /* @__PURE__ */ r(z, { className: o.headerImage, src: t }),
          /* @__PURE__ */ r("div", { className: o.body, children: m }),
          /* @__PURE__ */ r("footer", { className: o.actions, children: /* @__PURE__ */ r(
            y,
            {
              actions: i,
              classNameAction: o.actionButton,
              classNameRow: o.row
            }
          ) })
        ]
      }
    );
  }
);
A.displayName = "Card";
export {
  A as Card
};
//# sourceMappingURL=Card.js.map