@arolariu/components
Version:
🎨 60+ beautiful, accessible React components built on Radix UI. TypeScript-first, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
43 lines (42 loc) • 1.76 kB
JavaScript
"use client";
import { jsx } from "react/jsx-runtime";
import "react";
import { cva } from "class-variance-authority";
import { cn } from "../../lib/utils.js";
const alertVariants = cva("relative w-full rounded-lg border border-neutral-200 px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current dark:border-neutral-800", {
variants: {
variant: {
default: "bg-white text-neutral-950 dark:bg-neutral-950 dark:text-neutral-50",
destructive: "text-red-500 bg-white [&>svg]:text-current *:data-[slot=alert-description]:text-red-500/90 dark:text-red-900 dark:bg-neutral-950 dark:*:data-[slot=alert-description]:text-red-900/90"
}
},
defaultVariants: {
variant: "default"
}
});
function Alert({ className, variant, ...props }) {
return /*#__PURE__*/ jsx("div", {
"data-slot": "alert",
role: "alert",
className: cn(alertVariants({
variant
}), className),
...props
});
}
function AlertTitle({ className, ...props }) {
return /*#__PURE__*/ jsx("div", {
"data-slot": "alert-title",
className: cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className),
...props
});
}
function AlertDescription({ className, ...props }) {
return /*#__PURE__*/ jsx("div", {
"data-slot": "alert-description",
className: cn("text-neutral-500 col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed dark:text-neutral-400", className),
...props
});
}
export { Alert, AlertDescription, AlertTitle };
//# sourceMappingURL=alert.js.map