one/dist/cjs/platform/effects/EdgeFade.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 EdgeFade_exports = {};
__export(EdgeFade_exports, { EdgeFade: () => EdgeFade });
module.exports = __toCommonJS(EdgeFade_exports);
var import_curves = require("./curves.cjs");
var import_DomView = require("../web/DomView.cjs");
var import_normalize = require("./normalize.cjs");
var import_jsx_runtime = require("react/jsx-runtime");
const EDGES = [
	"top",
	"bottom",
	"left",
	"right"
];
const DIRECTIONS = {
	top: "to bottom",
	bottom: "to top",
	left: "to right",
	right: "to left"
};
function curveStops(edge, paint) {
	const alphas = (0, import_curves.sampleCurve)(edge.curve);
	const last = alphas.length - 1;
	return alphas.map((_, index) => {
		const visible = alphas[last - index] ?? 0;
		return `${paint(visible)} ${(index / last * edge.size).toFixed(2)}px`;
	});
}
function edgeMask(name, edge) {
	const stops = curveStops(edge, (visible) => `rgba(0,0,0,${visible})`);
	return `linear-gradient(${DIRECTIONS[name]}, ${stops.join(", ")}, black ${edge.size}px)`;
}
function stripLayout(name, size) {
	const depth = Math.max(0, size);
	const base = {
		position: "absolute",
		pointerEvents: "none"
	};
	switch (name) {
		case "top": return {
			...base,
			top: 0,
			left: 0,
			right: 0,
			height: depth
		};
		case "bottom": return {
			...base,
			bottom: 0,
			left: 0,
			right: 0,
			height: depth
		};
		case "left": return {
			...base,
			top: 0,
			bottom: 0,
			left: 0,
			width: depth
		};
		case "right": return {
			...base,
			top: 0,
			bottom: 0,
			right: 0,
			width: depth
		};
	}
}
function stripGradient(name, edge, paint) {
	const alphas = (0, import_curves.sampleCurve)(edge.curve);
	const last = alphas.length - 1;
	const stops = alphas.map((_, index) => {
		const visible = alphas[last - index] ?? 0;
		return `${paint(visible)} ${(index / last * 100).toFixed(2)}%`;
	});
	return `linear-gradient(${DIRECTIONS[name]}, ${stops.join(", ")})`;
}
function colorPaint(color) {
	return (visible) => `color-mix(in srgb, ${String(color)} ${((1 - visible) * 100).toFixed(2)}%, transparent)`;
}
function documentIsRTL() {
	return typeof document !== "undefined" && document.documentElement.dir === "rtl";
}
function EdgeFade(props) {
	const resolved = (0, import_normalize.resolveEdges)(props, documentIsRTL());
	const { top: _top, bottom: _bottom, left: _left, right: _right, start: _start, end: _end, size: _size, curve: _curve, mode: _mode, color: _color, blurRadius: _blurRadius, frostProgression: _frostProgression, radius, style, children, testID, nativeID } = props;
	const { borderRadius: styleRadius, ...cleanStyle } = (0, import_DomView.domStyle)(style);
	const resolvedRadius = (0, import_normalize.resolveRadius)(radius, styleRadius);
	const box = {
		...import_DomView.VIEW_BASE,
		...cleanStyle,
		...resolvedRadius != null && {
			borderRadius: resolvedRadius,
			overflow: "hidden"
		}
	};
	const hostProps = {
		"data-testid": testID,
		id: nativeID
	};
	const edges = EDGES.flatMap((name) => {
		const edge = resolved[name];
		return edge ? [{
			name,
			edge
		}] : [];
	});
	if (resolved.mode === "mask") {
		const maskImage = edges.map(({ name, edge }) => edgeMask(name, edge)).join(", ");
		const maskStyle = edges.length ? {
			maskImage,
			maskComposite: "intersect",
			maskRepeat: "no-repeat"
		} : {};
		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
			...hostProps,
			style: {
				...box,
				...maskStyle
			},
			children
		});
	}
	if (resolved.mode === "overlay") {
		const fallback = resolved.color ?? "black";
		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
			...hostProps,
			style: box,
			children: [children, edges.map(({ name, edge }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
				...stripLayout(name, edge.size),
				backgroundImage: stripGradient(name, edge, colorPaint(edge.color ?? fallback))
			} }, name))]
		});
	}
	const veil = resolved.color;
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
		...hostProps,
		style: box,
		children: [children, edges.map(({ name, edge }) => {
			const reach = resolved.frostProgression;
			const blurMask = stripGradient(name, edge, (visible) => {
				const strength = Math.min(1, (1 - visible) / reach);
				return `rgba(0,0,0,${strength.toFixed(4)})`;
			});
			return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
				...stripLayout(name, edge.size),
				backdropFilter: `blur(${resolved.blurRadius}px)`,
				maskImage: blurMask,
				backgroundImage: veil ? stripGradient(name, edge, colorPaint(veil)) : void 0
			} }, name);
		})]
	});
}