@voilajsx/uikit
Version:
Cross-platform React components with beautiful themes and OKLCH color science
53 lines (52 loc) • 1.45 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { cva } from "class-variance-authority";
import { cn } from "./utils.js";
const alertVariants = cva(
"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
{
variants: {
variant: {
default: " bg-background text-foreground",
destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
}
},
defaultVariants: {
variant: "default"
}
}
);
const Alert = forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
"div",
{
ref,
role: "alert",
className: cn(alertVariants({ variant }), className),
...props
}
));
Alert.displayName = "Alert";
const AlertTitle = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
"h5",
{
ref,
className: cn("mb-1 font-medium leading-none tracking-tight", className),
...props
}
));
AlertTitle.displayName = "AlertTitle";
const AlertDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn("text-sm [&_p]:leading-relaxed", className),
...props
}
));
AlertDescription.displayName = "AlertDescription";
export {
Alert,
AlertDescription,
AlertTitle
};
//# sourceMappingURL=alert.js.map