nextuiq
Version:
NextUIQ is a modern, lightweight, and developer-friendly UI component library for React and Next.js. Built with TypeScript and Tailwind CSS, it offers customizable, accessible, and performance-optimized components with built-in dark mode, theme customizat
2 lines (1 loc) • 3.13 kB
JavaScript
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index46.js"),t=require("./index47.js"),r=require("./index8.js");exports.Alert=({variant:s,title:o,message:i,showLink:n=!1,linkHref:a="#",linkText:l="Learn more",onClose:c,className:h="",id:x=`alert-${Math.random().toString(36).substr(2,9)}`})=>{const m={success:{container:"bg-[oklch(var(--theme-success)/0.1)] border-[oklch(var(--theme-success)/0.2)]",icon:"text-[oklch(var(--theme-success))]",title:"text-[oklch(var(--theme-success)/0.9)]",text:"text-[oklch(var(--theme-success)/0.8)]",link:"text-[oklch(var(--theme-success))] hover:text-[oklch(var(--theme-success)/0.8)] underline"},error:{container:"bg-[oklch(var(--theme-error)/0.1)] border-[oklch(var(--theme-error)/0.2)]",icon:"text-[oklch(var(--theme-error))]",title:"text-[oklch(var(--theme-error)/0.9)]",text:"text-[oklch(var(--theme-error)/0.8)]",link:"text-[oklch(var(--theme-error))] hover:text-[oklch(var(--theme-error)/0.8)] underline"},warning:{container:"bg-[oklch(var(--theme-warning)/0.1)] border-[oklch(var(--theme-warning)/0.2)]",icon:"text-[oklch(var(--theme-warning))]",title:"text-[oklch(var(--theme-warning)/0.9)]",text:"text-[oklch(var(--theme-warning)/0.8)]",link:"text-[oklch(var(--theme-warning))] hover:text-[oklch(var(--theme-warning)/0.8)] underline"},info:{container:"bg-[oklch(var(--theme-info)/0.1)] border-[oklch(var(--theme-info)/0.2)]",icon:"text-[oklch(var(--theme-info))]",title:"text-[oklch(var(--theme-info)/0.9)]",text:"text-[oklch(var(--theme-info)/0.8)]",link:"text-[oklch(var(--theme-info))] hover:text-[oklch(var(--theme-info)/0.8)] underline"}};return e.jsxRuntimeExports.jsx("div",{className:`rounded-lg border p-4 ${m[s].container} ${h}`,role:"alert","aria-labelledby":`${x}-title`,"aria-describedby":`${x}-message`,children:e.jsxRuntimeExports.jsxs("div",{className:"flex items-start gap-3",children:[e.jsxRuntimeExports.jsx("div",{className:m[s].icon,"aria-hidden":"true",children:{success:e.jsxRuntimeExports.jsx(t.FiCheckCircle,{className:"w-5 h-5"}),error:e.jsxRuntimeExports.jsx(t.FiXCircle,{className:"w-5 h-5"}),warning:e.jsxRuntimeExports.jsx(t.FiAlertCircle,{className:"w-5 h-5"}),info:e.jsxRuntimeExports.jsx(t.FiInfo,{className:"w-5 h-5"})}[s]}),e.jsxRuntimeExports.jsxs("div",{className:"flex-1",children:[e.jsxRuntimeExports.jsx("h4",{id:`${x}-title`,className:`text-sm font-semibold ${m[s].title}`,children:o}),e.jsxRuntimeExports.jsx("p",{id:`${x}-message`,className:`mt-1 text-sm ${m[s].text}`,children:i}),n&&e.jsxRuntimeExports.jsx(r.Button,{tag:"a",href:a,variant:"ghost",size:"sm",className:"mt-2 p-0 hover:underline",endIcon:e.jsxRuntimeExports.jsx(t.FiArrowRight,{className:"ml-1"}),children:l})]}),c&&e.jsxRuntimeExports.jsx("button",{onClick:c,className:`${m[s].text} hover:opacity-70 p-1 rounded-lg`,"aria-label":`Close ${o} alert`,children:e.jsxRuntimeExports.jsx("svg",{className:"h-5 w-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor","aria-hidden":"true",children:e.jsxRuntimeExports.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 18L18 6M6 6l12 12"})})})]})})};