@vela-ui/react/dist/components/card.js

Vela UI React components

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/card.tsx
var card_exports = {};
__export(card_exports, {
  Card: () => Card,
  CardAction: () => CardAction,
  CardContent: () => CardContent,
  CardDescription: () => CardDescription,
  CardFooter: () => CardFooter,
  CardHeader: () => CardHeader,
  CardTitle: () => CardTitle
});
module.exports = __toCommonJS(card_exports);
var import_tailwind_variants = require("tailwind-variants");
var import_jsx_runtime = require("react/jsx-runtime");
var cardVariants = (0, import_tailwind_variants.tv)({
  slots: {
    root: "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
    header: "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
    title: "leading-none font-semibold",
    description: "text-muted-foreground text-sm",
    action: "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
    content: "px-6",
    footer: "flex items-center px-6 [.border-t]:pt-6"
  }
});
var { root, header, title, description, action, content, footer } = cardVariants();
function Card({ className, ...props }) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-slot": "card", className: root({ className }), ...props });
}
function CardHeader({ className, ...props }) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-slot": "card-header", className: header({ className }), ...props });
}
function CardTitle({ className, ...props }) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-slot": "card-title", className: title({ className }), ...props });
}
function CardDescription({ className, ...props }) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-slot": "card-description", className: description({ className }), ...props });
}
function CardAction({ className, ...props }) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-slot": "card-action", className: action({ className }), ...props });
}
function CardContent({ className, ...props }) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-slot": "card-content", className: content({ className }), ...props });
}
function CardFooter({ className, ...props }) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-slot": "card-footer", className: footer({ className }), ...props });
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle
});