@vela-ui/react
Version:
Vela UI React components
47 lines (45 loc) • 1.99 kB
JavaScript
// src/components/card.tsx
import { tv } from "tailwind-variants";
import { jsx } from "react/jsx-runtime";
var cardVariants = 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__ */ jsx("div", { "data-slot": "card", className: root({ className }), ...props });
}
function CardHeader({ className, ...props }) {
return /* @__PURE__ */ jsx("div", { "data-slot": "card-header", className: header({ className }), ...props });
}
function CardTitle({ className, ...props }) {
return /* @__PURE__ */ jsx("div", { "data-slot": "card-title", className: title({ className }), ...props });
}
function CardDescription({ className, ...props }) {
return /* @__PURE__ */ jsx("div", { "data-slot": "card-description", className: description({ className }), ...props });
}
function CardAction({ className, ...props }) {
return /* @__PURE__ */ jsx("div", { "data-slot": "card-action", className: action({ className }), ...props });
}
function CardContent({ className, ...props }) {
return /* @__PURE__ */ jsx("div", { "data-slot": "card-content", className: content({ className }), ...props });
}
function CardFooter({ className, ...props }) {
return /* @__PURE__ */ jsx("div", { "data-slot": "card-footer", className: footer({ className }), ...props });
}
export {
Card,
CardHeader,
CardTitle,
CardDescription,
CardAction,
CardContent,
CardFooter
};