@factorialco/f0-react 12.11.0 → 12.12.0

package/dist/F0Alert-Ca8sBfXN.js

@@ -0,0 +1,102 @@
+import { a as e, r as t } from "./i18n-provider-Bdgo-LeP.js";
+import { L as n } from "./tooltip-BX4dSfeL.js";
+import { t as r } from "./F0Button-d91IgOnc.js";
+import { Ls as i, Oo as a, Xr as o, ya as s } from "./F0CanvasPanel-BOo_mxBl.js";
+import { o as c } from "./F0Icon-DmCBV0gK.js";
+import { g as l } from "./useData-BYkiGUHX.js";
+import { useRef as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/elements/F0Alert/F0Alert.tsx
+var p = c({
+	base: "w-full rounded-md p-2 pr-3 text-f1-foreground",
+	variants: { variant: {
+		info: "bg-f1-background-info",
+		warning: "bg-f1-background-warning",
+		critical: "bg-f1-background-critical",
+		neutral: "bg-f1-background-tertiary",
+		positive: "bg-f1-background-positive",
+		transparent: "bg-transparent"
+	} },
+	defaultVariants: { variant: "neutral" }
+}), m = c({
+	base: "font-medium",
+	variants: { variant: {
+		info: "text-f1-foreground-info",
+		warning: "text-f1-foreground-warning",
+		critical: "text-f1-foreground-critical",
+		neutral: "text-f1-foreground",
+		positive: "text-f1-foreground-positive",
+		transparent: "text-f1-foreground"
+	} },
+	defaultVariants: { variant: "info" }
+}), h = ({ onClose: e }) => {
+	let { actions: n } = t();
+	return /* @__PURE__ */ d(r, {
+		icon: i,
+		label: n.close,
+		hideLabel: !0,
+		variant: "outline",
+		size: "sm",
+		onClick: e,
+		type: "button"
+	});
+}, g = e(({ title: e, description: t, action: i, link: c, icon: g, variant: _ = "neutral", onClose: v }) => {
+	let y = u(null);
+	return /* @__PURE__ */ d("div", {
+		ref: y,
+		className: "@container",
+		children: /* @__PURE__ */ d("div", {
+			role: _ === "critical" || _ === "warning" ? "alert" : "status",
+			className: n(p({ variant: _ }), v && "pr-2"),
+			children: /* @__PURE__ */ f("div", {
+				className: "flex flex-row gap-2",
+				children: [/* @__PURE__ */ f("div", {
+					className: "flex flex-1 flex-col items-start gap-3 @xs:flex-row @xs:items-center @xs:justify-between",
+					children: [/* @__PURE__ */ f("div", {
+						className: n("flex flex-row gap-2", !t && "items-center"),
+						children: [/* @__PURE__ */ d("div", {
+							className: "h-6 w-6 flex-shrink-0",
+							children: _ === "neutral" || _ === "transparent" ? /* @__PURE__ */ d(l, {
+								icon: g || a,
+								size: "sm"
+							}) : /* @__PURE__ */ d(s, {
+								type: _,
+								size: "sm"
+							})
+						}), /* @__PURE__ */ f("div", {
+							className: "flex flex-col gap-0.5",
+							children: [/* @__PURE__ */ d("p", {
+								className: m({ variant: _ }),
+								children: e
+							}), t ? /* @__PURE__ */ d("p", {
+								className: "text-base text-f1-foreground-secondary",
+								children: t
+							}) : null]
+						})]
+					}), i || c ? /* @__PURE__ */ f("div", {
+						className: "flex flex-shrink-0 flex-row items-center gap-3 pl-8 @xs:pl-0",
+						children: [c ? /* @__PURE__ */ d(o, {
+							href: c.href,
+							target: "_blank",
+							variant: "link",
+							size: "sm",
+							children: c.label
+						}) : null, i ? /* @__PURE__ */ d(r, {
+							label: i.label,
+							variant: "outline",
+							onClick: i.onClick,
+							size: "sm",
+							disabled: i.disabled,
+							type: "button"
+						}) : null]
+					}) : null]
+				}), v ? /* @__PURE__ */ d("div", {
+					className: "flex-shrink-0 self-start @xs:self-center",
+					children: /* @__PURE__ */ d(h, { onClose: v })
+				}) : null]
+			})
+		})
+	});
+});
+//#endregion
+export { g as t };