@yamada-ui/react/dist/esm/components/picture/picture.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";
import { useSystem } from "../../core/system/system-provider.js";
import { styled } from "../../core/system/factory.js";
import { tokenToValue } from "../../core/css/utils.js";
import { Image } from "../image/image.js";
import { useCallback, useMemo } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

//#region src/components/picture/picture.tsx
const createQuery = (minW, maxW) => {
	let media = "";
	if (minW) {
		media = `(min-width: ${minW}px)`;
		if (maxW) media += ` and (max-width: ${maxW}px)`;
	} else media = `(max-width: ${maxW}px)`;
	return media;
};
/**
* `Picture` is a component that uses the `picture` element to provide alternative images for different display or device scenarios.
*
* @see https://yamada-ui.com/docs/components/picture
*/
const Picture = ({ children, enableSorting = true, sources: sourcesProp = [], pictureProps,...rest }) => {
	const system = useSystem();
	const { queriesObj } = system.breakpoints;
	const { direction = "down", identifier = "@media screen" } = system.config.breakpoint ?? {};
	const searchValue = identifier === "@media screen" ? "@media screen and " : `${identifier} `;
	const compareSources = useCallback((a, b) => {
		const k = direction === "down" ? "maxW" : "minW";
		if ((0, utils_exports.isUndefined)(a[k]) && !(0, utils_exports.isUndefined)(b[k])) return -1;
		if (!(0, utils_exports.isUndefined)(a[k]) && (0, utils_exports.isUndefined)(b[k])) return 1;
		return direction === "down" ? Number(a.maxW) - Number(b.maxW) : Number(b.minW) - Number(a.minW);
	}, [direction]);
	const sources = useMemo(() => {
		const computedSources = sourcesProp.map(({ maxW, media, minW,...rest$1 }) => {
			if (!media) {
				if (minW) minW = (0, utils_exports.getPx)(tokenToValue(system)("sizes", minW));
				if (maxW) maxW = (0, utils_exports.getPx)(tokenToValue(system)("sizes", maxW));
				media = createQuery(minW, maxW);
				return {
					...rest$1,
					maxW,
					media,
					minW
				};
			} else {
				const { maxW: maxW$1, minW: minW$1, query } = queriesObj[media] ?? {};
				if (query) media = query.replace(searchValue, "");
				return {
					...rest$1,
					maxW: maxW$1,
					media,
					minW: minW$1
				};
			}
		});
		if (enableSorting) return computedSources.sort(compareSources);
		else return computedSources;
	}, [
		sourcesProp,
		enableSorting,
		system,
		queriesObj,
		searchValue,
		compareSources
	]);
	const sourceElements = useMemo(() => sources.map(({ maxW: _maxW, minW: _minW,...rest$1 }, index) => /* @__PURE__ */ jsx(styled.source, { ...rest$1 }, index)), [sources]);
	return /* @__PURE__ */ jsx(styled.picture, {
		...pictureProps,
		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [sourceElements, /* @__PURE__ */ jsx(Image, { ...rest })] })
	});
};
const Source = ({ media,...rest }) => {
	const { breakpoints, config } = useSystem();
	const { queriesObj } = breakpoints;
	const { identifier = "@media screen" } = config.breakpoint ?? {};
	const searchValue = identifier === "@media screen" ? "@media screen and " : `${identifier} `;
	const { query } = media ? queriesObj[media] ?? {} : {};
	if (query) media = query.replace(searchValue, "");
	return /* @__PURE__ */ jsx(styled.source, {
		media,
		...rest
	});
};

//#endregion
export { Picture, Source };
//# sourceMappingURL=picture.js.map