@veracity/vui/dist/core/media.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { th as th$1, useTheme } from "./theme.js";
import { Fragment, jsx } from "react/jsx-runtime";
import { useViewportWidth } from "@xstyled/styled-components";

//#region src/core/media.tsx
/** Returns CSS media string with appropriate min-width and max-width values. */
const mediaBetween = (minWidth, maxWidth) => (props) => `@media (min-width: ${th$1.screen(minWidth)(props)}) and (max-width: ${th$1.screen(maxWidth)(props)})`;
/** Returns CSS media string with appropriate max-width value */
const mediaDown = (width) => (props) => {
	return `@media (max-width: ${th$1.screen(width)(props)})`;
};
/** Returns CSS media string with appropriate min-width value. */
const mediaUp = (width) => (props) => `@media (min-width: ${th$1.screen(width)(props)})`;
/**
* Renders its content when viewport width is at or above a provided breakpoint.
* Optionally, direction can be set to down, or below, the breakpoint.
*/
const RenderOnScreen = ({ children, maxWidth, minWidth }) => {
	if (minWidth && maxWidth) return /* @__PURE__ */ jsx(RenderBetween, {
		maxWidth,
		minWidth,
		children
	});
	if (minWidth) return /* @__PURE__ */ jsx(RenderOver, {
		width: minWidth,
		children
	});
	if (maxWidth) return /* @__PURE__ */ jsx(RenderUnder, {
		width: maxWidth,
		children
	});
	return /* @__PURE__ */ jsx(Fragment, { children });
};
const RenderBetween = ({ children, maxWidth, minWidth }) => {
	return useBetween(minWidth, maxWidth) ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
};
const RenderOver = ({ children, width }) => {
	return useUp(width) ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
};
const RenderUnder = ({ children, width }) => {
	return useDown(width) ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
};
/** /!\ No need to export it, keep it internal */
/** Returns viewport width and provided screen width as a number. */
function useMedia(width) {
	const theme = useTheme();
	const viewportWidth = useViewportWidth();
	const valueString = th$1.screen(width)({ theme });
	return {
		value: Number(valueString.replace("px", "")),
		viewportWidth
	};
}
/** Returns true if current viewport width is smaller than provided width. */
function useDown(width) {
	const { value, viewportWidth } = useMedia(width);
	return viewportWidth !== null && value !== null && viewportWidth < value;
}
/** Returns true if current viewport width is larger than or equal to provided width. */
function useUp(width) {
	const { value, viewportWidth } = useMedia(width);
	return viewportWidth !== null && value !== null && viewportWidth >= value;
}
/** Returns true if current viewport width is between provided min and max widths. */
function useBetween(minWidth, maxWidth) {
	const isDown = useDown(maxWidth);
	const isUp = useUp(minWidth);
	return isDown && isUp;
}

//#endregion
export { RenderOnScreen, mediaBetween, mediaDown, mediaUp, useBetween, useDown, useUp, useViewportWidth };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=media.js.map