@achs/webkit
Version:
Conjunto de componentes de UI con el estilo del Sistema de Diseño ACHS (Asociación Chilena de Seguridad), para reutilizar de forma transversal en las aplicaciones web de ACHS. Construido con **React 19**, **TypeScript** y **Vite**, con soporte para las
73 lines (72 loc) • 2.27 kB
JavaScript
import { jsxs as s, jsx as e, Fragment as N } from "react/jsx-runtime";
import r from "./Alert.module.scss.mjs";
import '../../../assets/node_modules/.pnpm/bootstrap-icons@1.13.1/node_modules/bootstrap-icons/font/bootstrap-icons.css';/* empty css */
const w = ({
title: l,
description: a,
type: t = "info",
onClose: c,
customIcon: i,
bgColor: n,
borderColor: o,
textColor: u,
iconColor: f,
className: m,
style: d,
...h
}) => {
const b = (() => {
switch (t) {
case "success":
return r.alertSuccess;
case "error":
return r.alertError;
case "warning":
return r.alertWarning;
case "info":
default:
return r.alertInfo;
}
})();
return (
// `{...rest}` va primero para no pisar className/style calculados; y solo se esparcen
// props válidas de DOM (las custom ya se destructuraron arriba).
/* @__PURE__ */ s(
"div",
{
...h,
role: "alert",
className: `${r.alert} ${b} ${m ?? ""}`.trim(),
style: {
backgroundColor: n,
borderColor: o,
color: u,
...d
},
children: [
/* @__PURE__ */ e("div", { className: r.alertIcon, style: { color: f }, children: /* @__PURE__ */ e(g, { customIcon: i, type: t }) }),
/* @__PURE__ */ s("div", { className: r.alertContent, children: [
/* @__PURE__ */ e("h4", { className: r.alertTitle, children: l }),
a && /* @__PURE__ */ e("p", { className: r.alertDescription, children: a })
] }),
c && /* @__PURE__ */ e("button", { onClick: c, className: r.alertCloseButton, "aria-label": "Close alert", children: "×" })
]
}
)
);
}, g = ({ customIcon: l, type: a }) => l ? /* @__PURE__ */ e(N, { children: l }) : /* @__PURE__ */ e("i", { className: `bi ${(() => {
switch (a) {
case "success":
return "bi-check-circle-fill";
case "error":
return "bi-x-circle-fill";
case "warning":
return "bi-exclamation-triangle-fill";
case "info":
default:
return "bi-info-circle-fill";
}
})()}` });
export {
w as Alert
};