@vela-ui/react
Version:
Vela UI React components
32 lines (30 loc) • 1.25 kB
JavaScript
// src/components/alert.tsx
import { tv } from "tailwind-variants";
import { jsx } from "react/jsx-runtime";
var alertVariants = tv({
slots: {
root: "bg-card text-card-foreground relative flex w-full items-start gap-3 rounded-lg border p-4 text-sm [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5 [&>svg]:text-current",
content: "flex flex-1 flex-col gap-1",
title: "font-medium",
description: "text-muted-foreground"
}
});
var { root, content, title, description } = alertVariants();
function Alert({ className, ...props }) {
return /* @__PURE__ */ jsx("div", { "data-slot": "alert", role: "alert", className: root({ className }), ...props });
}
function AlertContent({ className, ...props }) {
return /* @__PURE__ */ jsx("div", { "data-slot": "alert-content", className: content({ className }), ...props });
}
function AlertTitle({ className, ...props }) {
return /* @__PURE__ */ jsx("div", { "data-slot": "alert-title", className: title({ className }), ...props });
}
function AlertDescription({ className, ...props }) {
return /* @__PURE__ */ jsx("div", { "data-slot": "alert-description", className: description({ className }), ...props });
}
export {
Alert,
AlertContent,
AlertTitle,
AlertDescription
};