one/dist/esm/platform/effects/Blur.mjs

One is a React framework for web, iOS, and Android apps.

import { DomView } from "../web/DomView.mjs";
import { jsx, jsxs } from "react/jsx-runtime";

function material(tint) {
	const dark = tint === "dark" || tint.endsWith("Dark");
	const color = dark ? "0,0,0" : "255,255,255";
	const opacity = tint.includes("UltraThin") ? .12 : tint.includes("Thin") ? .2 : tint.includes("Thick") ? .5 : tint.includes("Chrome") ? .6 : tint === "extraLight" ? .15 : tint === "prominent" ? .45 : .3;
	return {
		color,
		opacity
	};
}
function Blur({ intensity = 50, tint = "default", children, ...props }) {
	const strength = Math.max(0, Math.min(1, intensity / 100));
	const { color, opacity } = material(tint);
	const adaptive = ![
		"light",
		"dark",
		"extraLight"
	].includes(tint) && !tint.endsWith("Light") && !tint.endsWith("Dark");
	const veil = adaptive ? `light-dark(rgba(255,255,255,${strength * opacity}),rgba(0,0,0,${strength * opacity}))` : `rgba(${color},${strength * opacity})`;
	const background = {
		position: "absolute",
		inset: 0,
		pointerEvents: "none",
		borderRadius: "inherit",
		backdropFilter: `blur(${strength * 20}px)`,
		WebkitBackdropFilter: `blur(${strength * 20}px)`,
		colorScheme: "light dark",
		backgroundColor: veil
	};
	return /* @__PURE__ */ jsxs(DomView, {
		...props,
		children: [/* @__PURE__ */ jsx("div", {
			"aria-hidden": true,
			style: background
		}), /* @__PURE__ */ jsx("div", {
			style: {
				position: "relative",
				display: "flex",
				flexDirection: "column",
				flex: 1
			},
			children
		})]
	});
}

export { Blur };
//# sourceMappingURL=Blur.mjs.map