@payfit/unity-components
Version:
33 lines (32 loc) • 962 B
JavaScript
import { useResizeObserver as e } from "usehooks-ts";
import t from "@payfit/unity-themes/tokens/common/sizes.json";
//#region src/hooks/use-container-query-level.ts
var n = () => {
let e = t.container, n = {
section: parseInt(e.section.$value.replace("px", ""), 10),
page: parseInt(e.page.$value.replace("px", ""), 10),
app: parseInt(e.app.$value.replace("px", ""), 10)
};
if (typeof window > "u") return n;
let r = getComputedStyle(document.documentElement), i = (e) => {
let t = r.getPropertyValue(`--uy-container-${e}`), i = parseInt(t.replace("px", ""), 10);
return isNaN(i) ? n[e] : i;
};
return {
section: i("section"),
page: i("page"),
app: i("app")
};
};
function r(t) {
let { ref: r } = t, i = e({
ref: r,
box: "border-box"
}).width ?? 0, a = n();
return {
level: i >= a.app ? "app" : i >= a.page ? "page" : i >= a.section ? "section" : "component",
width: i
};
}
//#endregion
export { r as useContainerQueryLevel };