@loke/design-system
Version:
A design system with individually importable components
2 lines (1 loc) • 1.11 kB
JavaScript
import{cn}from"@loke/design-system/cn";import{cva}from"class-variance-authority";import{forwardRef}from"react";import{jsx}from"react/jsx-runtime";var alertVariants=cva("relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",{defaultVariants:{variant:"default"},variants:{variant:{default:"bg-background text-foreground",destructive:"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"}}}),Alert=forwardRef(({className,variant,...props},ref)=>jsx("div",{className:cn(alertVariants({variant}),className),ref,role:"alert",...props}));Alert.displayName="Alert";var AlertTitle=forwardRef(({className,...props},ref)=>jsx("h5",{className:cn("mb-1 font-medium leading-none tracking-tight",className),ref,...props}));AlertTitle.displayName="AlertTitle";var AlertDescription=forwardRef(({className,...props},ref)=>jsx("div",{className:cn("text-sm [&_p]:leading-relaxed",className),ref,...props}));AlertDescription.displayName="AlertDescription";export{AlertTitle,AlertDescription,Alert};