@yamada-ui/react/dist/esm/core/system/breakpoint.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { utils_exports } from "../../utils/index.js";

//#region src/core/system/breakpoint.ts
function createQuery(min, max, identifier = "@media screen") {
	const query = [identifier];
	if (min) query.push("and", `(min-width: ${min}px)`);
	if (max) query.push("and", `(max-width: ${max}px)`);
	return query.length > 1 ? query.join(" ").replace(/^@container(\s+\w*)?\s+and/, `@container$1`) : void 0;
}
function createQueries(breakpoints, config) {
	const { direction, identifier } = config;
	const down = direction !== "up";
	const queryEntries = Object.entries(breakpoints).map(([breakpoint, width], i, entry) => {
		const [, relatedWidth] = entry[i + 1] ?? [];
		let minW = down ? relatedWidth : width;
		let maxW = down ? width : relatedWidth;
		if (breakpoint === "base") if (down) maxW = void 0;
		else minW = void 0;
		if (down) {
			if (minW) minW += 1;
		} else if (maxW) maxW -= 1;
		const maxWQuery = createQuery(void 0, maxW, identifier);
		const minWQuery = createQuery(minW, void 0, identifier);
		const minMaxQuery = createQuery(minW, maxW, identifier);
		return [breakpoint, {
			breakpoint,
			maxW,
			maxWQuery,
			minMaxQuery,
			minW,
			minWQuery,
			query: down ? maxWQuery : minWQuery
		}];
	}).sort((a, b) => down ? (b[1].maxW ?? Infinity) - (a[1].maxW ?? Infinity) : (a[1].minW ?? 0) - (b[1].minW ?? 0));
	return {
		queries: queryEntries.map(([_, query]) => query),
		queriesObj: Object.fromEntries(queryEntries)
	};
}
function transformBreakpoints(breakpoints, config) {
	return Object.fromEntries(Object.entries(breakpoints).map(([name, value]) => [name, (0, utils_exports.getPx)(value)]).sort((a, b) => {
		if (config.direction !== "up") return b[1] - a[1];
		else return a[1] - b[1];
	}));
}
function createBreakpoints(breakpoints = {}, config = {}) {
	config.base ??= "9999px";
	config.direction ??= "down";
	breakpoints.base = config.direction !== "up" ? config.base : "0px";
	const { queries, queriesObj } = createQueries(transformBreakpoints(breakpoints, config), config);
	const keys = Object.keys(queriesObj);
	function isResponsive(obj, strict = false) {
		if (!(0, utils_exports.isObject)(obj)) return false;
		const providedKeys = Object.keys(obj);
		if (!providedKeys.length) return false;
		if (strict && !providedKeys.includes("base")) return false;
		return providedKeys.every((key) => keys.includes(key));
	}
	function isResponsiveKey(key) {
		return key in queriesObj;
	}
	function getQuery(key) {
		return key in queriesObj ? queriesObj[key]?.query : void 0;
	}
	return {
		getQuery,
		isResponsive,
		isResponsiveKey,
		keys,
		queries,
		queriesObj
	};
}

//#endregion
export { createBreakpoints };
//# sourceMappingURL=breakpoint.js.map