@arolariu/components
Version:
🎨 70+ 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! ⚡
40 lines (39 loc) • 1.75 kB
JavaScript
"use client";
import { jsx } from "react/jsx-runtime";
import { cva } from "class-variance-authority";
import { forwardRef } from "react";
import { cn } from "../../lib/utilities.js";
const alertVariants = cva("relative w-full rounded-lg border border-neutral-200 px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-neutral-950 [&>svg~*]:pl-7 dark:border-neutral-800 dark:[&>svg]:text-neutral-50", {
variants: {
variant: {
default: "bg-white text-neutral-950 dark:bg-neutral-950 dark:text-neutral-50",
destructive: "border-red-500/50 text-red-500 dark:border-red-500 [&>svg]:text-red-500 dark:border-red-900/50 dark:text-red-900 dark:dark:border-red-900 dark:[&>svg]:text-red-900"
}
},
defaultVariants: {
variant: "default"
}
});
const Alert = /*#__PURE__*/ forwardRef(({ className, variant, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
ref: ref,
role: "alert",
className: cn(alertVariants({
variant
}), className),
...props
}));
Alert.displayName = "Alert";
const AlertTitle = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("h5", {
ref: ref,
className: cn("mb-1 leading-none font-medium tracking-tight", className),
...props
}));
AlertTitle.displayName = "AlertTitle";
const AlertDescription = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
ref: ref,
className: cn("text-sm [&_p]:leading-relaxed", className),
...props
}));
AlertDescription.displayName = "AlertDescription";
export { Alert, AlertDescription, AlertTitle };
//# sourceMappingURL=alert.js.map