@undp/design-system-react/dist/modal-ByWaGtKz.js

React based design system for UNDP

import { t as e } from "./utils-ca9as9Ye.js";
import { t } from "./x-CXpb8l-i.js";
import { t as n } from "./dist-X_NWu4il.js";
import { a as r, i, o as a, r as o, s, t as c } from "./dist-CnD55hFX.js";
import l from "react";
import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
//#region src/components/ui/dialog.tsx
var p = c, m = a, h = l.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ d(r, {
	...n,
	ref: i,
	className: e("data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-surface/90 backdrop-blur-[18px] data-[state=closed]:animate-out data-[state=open]:animate-in", t)
}));
h.displayName = r.displayName;
var g = l.forwardRef(({ className: t, children: n, onOpenChange: r, inPortal: i = !1, overlayClassName: a, ...s }, c) => {
	let l = /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(h, {
		onClick: () => r?.(!1),
		className: a
	}), /* @__PURE__ */ d(o, {
		...s,
		ref: c,
		className: e("data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid max-h-[90vh] w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 overflow-auto border border-stroke-xs bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in", t),
		children: n
	})] });
	return i ? /* @__PURE__ */ d(m, {
		"data-slot": "drawer-portal",
		children: l
	}) : l;
});
g.displayName = o.displayName;
function _({ className: t, ...n }) {
	return /* @__PURE__ */ d("div", {
		...n,
		className: e("flex flex-col gap-1.5 text-center sm:text-left", t)
	});
}
_.displayName = "DialogHeader";
function v({ className: e, children: t, ...n }) {
	return /* @__PURE__ */ d("div", {
		...n,
		className: e,
		children: t
	});
}
v.displayName = "DialogFooter";
var y = l.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ d(s, {
	...n,
	ref: r,
	className: e("mb-0 p-0 font-normal text-content-primary text-h4-xs md:text-h4-sm lg:text-h4", t)
}));
y.displayName = s.displayName;
var b = l.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ d(i, {
	...n,
	ref: r,
	className: e("m-0 text-content-secondary text-sm", t)
}));
b.displayName = i.displayName;
//#endregion
//#region src/components/ui/modal.tsx
function x(r) {
	let { title: i, description: a, children: o, footer: s, open: c, onClose: u, className: m, titleClassName: h, footerClassName: x, descriptionClassName: S, overlayClassName: C, closeButtonClassName: w, showCloseButton: T = !0, inPortal: E = !1 } = r, D = l.useId(), O = l.useId();
	return /* @__PURE__ */ d(p, {
		open: c,
		onOpenChange: (e) => {
			e || u?.();
		},
		children: /* @__PURE__ */ f(g, {
			inPortal: E,
			className: e("undp-scrollbar max-w-(--breakpoint-xl) p-16", "data-[state=closed]:animate-out data-[state=open]:animate-in", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[state=closed]:slide-out-to-top-[2%] data-[state=open]:slide-in-from-top-[2%]", m),
			overlayClassName: C,
			onOpenChange: (e) => {
				e || u?.();
			},
			"aria-describedby": a ? D : void 0,
			"aria-labelledby": i ? O : void 0,
			children: [
				T && /* @__PURE__ */ d("button", {
					type: "button",
					onClick: () => {
						u?.();
					},
					className: e("absolute top-6 right-6 rounded-full border border-stroke bg-surface p-2 ring-offset-background transition-opacity hover:bg-surface-hover disabled:pointer-events-none data-[state=open]:bg-surface data-[state=open]:text-content-primary", w),
					children: /* @__PURE__ */ d(t, { className: "h-6 w-6" })
				}),
				i || a ? /* @__PURE__ */ f(_, { children: [i && /* @__PURE__ */ d(y, {
					id: O,
					className: h,
					children: i
				}), a && /* @__PURE__ */ d(b, {
					className: S,
					id: D,
					children: a
				})] }) : /* @__PURE__ */ d(n, { children: /* @__PURE__ */ d(y, { children: "This a modal" }) }),
				o,
				s && /* @__PURE__ */ d(v, {
					className: x,
					children: s
				})
			]
		})
	});
}
//#endregion
export { x as t };

//# sourceMappingURL=modal-ByWaGtKz.js.map