one/dist/cjs/platform/effects/Blur.cjs

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

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
	for (var name in all) __defProp(target, name, {
		get: all[name],
		enumerable: true
	});
};
var __copyProps = (to, from, except, desc) => {
	if (from && typeof from === "object" || typeof from === "function") {
		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
			get: () => from[key],
			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
		});
	}
	return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Blur_exports = {};
__export(Blur_exports, { Blur: () => Blur });
module.exports = __toCommonJS(Blur_exports);
var import_DomView = require("../web/DomView.cjs");
var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsxs)(import_DomView.DomView, {
		...props,
		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
			"aria-hidden": true,
			style: background
		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
			style: {
				position: "relative",
				display: "flex",
				flexDirection: "column",
				flex: 1
			},
			children
		})]
	});
}