welcome-ui/dist/Card.js

Customizable design system with react, typescript, tailwindcss and ariakit.

"use client";
import './Card.css';
import { jsxs as _, jsx as r } from "react/jsx-runtime";
import { forwardRef as t } from "react";
import { c } from "./index-B6iGEm-i.js";
import { Button as h } from "./Button.js";
import { Icon as b } from "./Icon.js";
import { f as q } from "./forwardRefWithAs-8eP3ZN15.js";
const u = "_root_13dyq_2", v = "_header_13dyq_33", z = "_close_13dyq_46", x = "_body_13dyq_74", g = "_metadata_13dyq_83", $ = "_footer_13dyq_91", i = {
  root: u,
  header: v,
  close: z,
  body: x,
  metadata: g,
  footer: $,
  "size-sm": "_size-sm_13dyq_104",
  "size-md": "_size-md_13dyq_118",
  "size-lg": "_size-lg_13dyq_132"
}, l = c(i), y = t(
  ({ children: a, className: o, metadata: e, ...s }, d) => /* @__PURE__ */ _("div", { className: l("body", o), ref: d, ...s, children: [
    a,
    e ? /* @__PURE__ */ r("div", { className: l("metadata"), children: e }) : null
  ] })
);
y.displayName = "Card.Body";
const f = t(({ alt: a, src: o, ...e }, s) => /* @__PURE__ */ r("div", { ref: s, ...e, children: /* @__PURE__ */ r("img", { alt: a, src: o }) }));
f.displayName = "Card.Cover";
const j = c(i), p = t(
  ({ children: a, className: o, ...e }, s) => /* @__PURE__ */ r("div", { className: j("footer", o), ref: s, ...e, children: a })
);
p.displayName = "Card.Footer";
const m = c(i), C = t(
  ({ children: a, className: o, disabled: e, onClose: s, ...d }, n) => /* @__PURE__ */ _("div", { className: m("header", o), ref: n, ...d, children: [
    a,
    s ? /* @__PURE__ */ r(
      h,
      {
        accessibleWhenDisabled: !1,
        "aria-label": "Close",
        className: m("close"),
        disabled: e,
        onClick: () => s(),
        size: "sm",
        variant: "tertiary",
        children: /* @__PURE__ */ r(b, { name: "times" })
      }
    ) : null
  ] })
);
C.displayName = "Card.Header";
const B = c(i), N = q(
  ({ as: a = "div", className: o, disabled: e, size: s = "md", ...d }, n) => /* @__PURE__ */ r(
    a,
    {
      "aria-disabled": e,
      ...d,
      className: B("root", `size-${s}`, o),
      ref: n
    }
  )
);
N.displayName = "Card";
const A = Object.assign(N, {
  Body: y,
  Cover: f,
  Footer: p,
  Header: C
});
export {
  A as Card,
  N as CardComponent,
  i as cardClasses
};