welcome-ui
Version:
Customizable design system with react, typescript, tailwindcss and ariakit.
120 lines (119 loc) • 4.23 kB
JavaScript
"use client";
import './Alert.css';
import { jsx as a, jsxs as l } from "react/jsx-runtime";
import m, { forwardRef as V, Children as u, cloneElement as d } from "react";
import { CloseButton as I } from "./CloseButton.js";
import { Icon as O } from "./Icon.js";
import { Text as x } from "./Text.js";
import { c as f } from "./index-B6iGEm-i.js";
import { Button as h } from "./Button.js";
import { f as B } from "./forwardRefWithAs-8eP3ZN15.js";
const z = "_root_s4so0_2", F = "_content_s4so0_21", w = {
root: z,
"size-md": "_size-md_s4so0_18",
"content-actions": "_content-actions_s4so0_21",
"without-title": "_without-title_s4so0_24",
"icon-wrapper": "_icon-wrapper_s4so0_24",
"size-lg": "_size-lg_s4so0_27",
"variant-ai": "_variant-ai_s4so0_34",
"variant-danger": "_variant-danger_s4so0_39",
"variant-info": "_variant-info_s4so0_44",
"variant-success": "_variant-success_s4so0_49",
"variant-warning": "_variant-warning_s4so0_54",
"full-width": "_full-width_s4so0_59",
content: F,
"content-text": "_content-text_s4so0_71",
"title-close-button": "_title-close-button_s4so0_88",
"title-with-icon": "_title-with-icon_s4so0_91",
"close-button": "_close-button_s4so0_97",
"icon-wrapper-success": "_icon-wrapper-success_s4so0_111",
"icon-wrapper-danger": "_icon-wrapper-danger_s4so0_115",
"icon-wrapper-info": "_icon-wrapper-info_s4so0_119",
"icon-wrapper-warning": "_icon-wrapper-warning_s4so0_123",
"icon-wrapper-ai": "_icon-wrapper-ai_s4so0_127",
"alert-buttons": "_alert-buttons_s4so0_132"
}, $ = f(w), y = B(
({ variant: o = "primary", ...e }, n) => /* @__PURE__ */ a(h, { className: $("alert-buttons"), ref: n, variant: o, ...e })
), g = B(
({ variant: o = "secondary", ...e }, n) => /* @__PURE__ */ a(h, { className: $("alert-buttons"), ref: n, variant: o, ...e })
);
y.displayName = "Alert.Button";
g.displayName = "Alert.SecondaryButton";
const M = f(w), _ = ({ children: o, hasCloseButton: e, ...n }) => /* @__PURE__ */ a(x, { as: "span", className: M(e && "title-close-button"), ...n, children: o });
_.displayName = "Alert.Title";
const r = f(w), W = {
ai: "sparkles",
brand: "lightbulb-alt",
danger: "exclamation-octagon",
info: "info-circle",
success: "check-circle",
warning: "exclamation-triangle"
}, C = V(
({
children: o,
className: e,
cta: n,
handleClose: p,
icon: T,
isFullWidth: E,
size: i = "md",
variant: c = "brand",
...S
}, j) => {
const k = c === "ai", b = u.toArray(o).some((s) => m.isValidElement(s) ? s.type === _ : !1), v = /* @__PURE__ */ a("div", { className: r("icon-wrapper", `icon-wrapper-${c}`), children: /* @__PURE__ */ a(O, { name: T || W[c] }) }), R = u.toArray(o).map((s, t) => s.type === _ ? /* @__PURE__ */ l("div", { className: r("title-with-icon"), children: [
v,
d(s, {
hasCloseButton: !!p,
variant: `body-${i}-strong`
})
] }, `alert-title-${t}`) : s), N = (s) => u.toArray(s).flatMap((t) => m.isValidElement(t) && t.type === m.Fragment ? N(t.props.children) : t.type === y ? d(t, {
size: i,
variant: k ? "primary-ai" : void 0
}) : t.type === g ? d(t, {
size: i
}) : t), A = !!n && N(n);
return /* @__PURE__ */ l(
"div",
{
className: r(
"root",
E && "full-width",
`size-${i}`,
c && `variant-${c}`,
e
),
ref: j,
...S,
children: [
!!p && /* @__PURE__ */ a(I, { className: r("close-button"), onClick: p }),
/* @__PURE__ */ l("div", { className: r("content"), children: [
/* @__PURE__ */ l(
x,
{
as: "div",
className: r("content-text", !b && "without-title"),
variant: `body-${i}`,
children: [
!b && v,
R
]
}
),
!!A && /* @__PURE__ */ a("div", { className: r("content-actions"), children: A })
] })
]
}
);
}
);
C.displayName = "Alert";
const Q = Object.assign(C, {
Button: y,
SecondaryButton: g,
Title: _
});
export {
Q as Alert,
W as ICON,
w as alertClasses
};