@czxingyu/xycomponents 0.1.0

package/dist/core/motion/index.js

@@ -0,0 +1,173 @@
+//#region components/core/motion/index.ts
+var e = /* @__PURE__ */ new WeakMap();
+function t(e) {
+	return e;
+}
+function n(e) {
+	return typeof window > "u" ? e.style : window.getComputedStyle(e);
+}
+function r(e) {
+	let t = Number.parseFloat(e);
+	return Number.isFinite(t) ? t : 0;
+}
+function i(e) {
+	let t = e.trim();
+	return t.endsWith("ms") ? r(t) : t.endsWith("s") ? r(t) * 1e3 : 0;
+}
+function a(e, t) {
+	let r = n(e), a = r.transitionDuration.split(",").map(i), o = r.transitionDelay.split(",").map(i), s = Math.max(a.length, o.length), c = Math.max(0, ...Array.from({ length: s }, (e, t) => a[t % a.length] + o[t % o.length]));
+	return Math.max(t, Math.ceil(c) + 50);
+}
+function o(e, t, n) {
+	return !n || e.boxSizing === "border-box" ? `${t}px` : `${Math.max(0, t - r(e.paddingTop) - r(e.paddingBottom))}px`;
+}
+function s(e, t, i) {
+	if (t.expandedHeight !== "0px") return t.expandedHeight;
+	if (!i) return `${e.scrollHeight}px`;
+	let a = n(e), o = r(a.paddingTop) + r(a.paddingBottom), s = r(t.paddingTop) + r(t.paddingBottom), c = Math.max(0, e.scrollHeight - o);
+	return a.boxSizing === "border-box" ? `${c + s}px` : `${c}px`;
+}
+function c(e) {
+	if (typeof window < "u" && window.requestAnimationFrame) {
+		window.requestAnimationFrame(() => e());
+		return;
+	}
+	setTimeout(e);
+}
+function l(e) {
+	let n = t(e);
+	n.style.height = "", n.style.opacity = "", n.style.overflow = "", n.style.transition = "", n.style.transform = "", n.style.transformOrigin = "", n.style.willChange = "";
+}
+function u(r, i) {
+	let a = t(r), s = n(a), c = {
+		expandedHeight: o(s, a.scrollHeight, i),
+		inlinePaddingBottom: a.style.paddingBottom,
+		inlinePaddingTop: a.style.paddingTop,
+		paddingBottom: s.paddingBottom,
+		paddingTop: s.paddingTop
+	};
+	return e.set(a, c), c;
+}
+function d(n, r) {
+	return e.get(t(n)) ?? u(n, r);
+}
+function f(n, r) {
+	let i = t(n), a = e.get(i);
+	l(i), r && a && (i.style.paddingTop = a.inlinePaddingTop, i.style.paddingBottom = a.inlinePaddingBottom), e.delete(i);
+}
+function p(e, t = {}) {
+	return {
+		appear: !0,
+		name: e,
+		...t
+	};
+}
+function m(e = {}) {
+	return p(e.name ?? "xy-motion-fade", { appear: e.appear ?? !0 });
+}
+function h(e = {}) {
+	return p(e.name ?? "xy-motion-collapse", {
+		appear: e.appear ?? !0,
+		css: !0,
+		onAfterEnter: l,
+		onAfterLeave: l,
+		onBeforeEnter(e) {
+			let n = t(e);
+			n.style.height = "0px", n.style.opacity = "0", n.style.overflow = "hidden";
+		},
+		onBeforeLeave(e) {
+			let n = t(e);
+			n.style.height = `${n.offsetHeight}px`, n.style.opacity = "1", n.style.overflow = "hidden";
+		},
+		onEnter(e) {
+			let n = t(e);
+			n.style.height = `${n.scrollHeight}px`, n.style.opacity = "1";
+		},
+		onLeave(e) {
+			let n = t(e);
+			n.style.height = "0px", n.style.opacity = "0", n.style.overflow = "hidden";
+		}
+	});
+}
+function g(e = {}) {
+	let r = e.name ?? "xy-motion-inline-collapse", i = e.includePadding ?? !1, l = e.collapsedTransform !== void 0 || e.expandedTransform !== void 0, m = e.collapsedTransform ?? "none", h = e.expandedTransform ?? "none", g = e.transformOrigin ?? "top", _ = e.willChange ?? [
+		"height",
+		"opacity",
+		l ? "transform" : "",
+		i ? "padding" : ""
+	].filter(Boolean).join(", "), v = e.transition ?? "height var(--xy-motion-duration-mid) var(--xy-motion-ease-in-out), opacity var(--xy-motion-duration-mid) var(--xy-motion-ease-in-out)", y = e.fallbackDuration ?? 500;
+	function b(e) {
+		let n = t(e);
+		n.style.overflow = "hidden", n.style.transition = v, l && (n.style.transformOrigin = g), _ && (n.style.willChange = _);
+	}
+	function x(e, n) {
+		let r = t(e), i = !1, o, s = () => {
+			i || (i = !0, clearTimeout(o), r.removeEventListener("transitionend", c), n());
+		}, c = (e) => {
+			e.target === r && e.propertyName === "height" && s();
+		};
+		o = setTimeout(s, a(r, y)), r.addEventListener("transitionend", c);
+	}
+	return p(r, {
+		appear: e.appear ?? !0,
+		css: !1,
+		onAfterEnter: (e) => f(e, i),
+		onAfterLeave: (e) => f(e, i),
+		onBeforeEnter(e) {
+			let n = t(e);
+			u(n, i), n.style.height = "0px", n.style.opacity = "0", n.style.overflow = "hidden", i && (n.style.paddingTop = "0px", n.style.paddingBottom = "0px"), l && (n.style.transform = m, n.style.transformOrigin = g), _ && (n.style.willChange = _);
+		},
+		onBeforeLeave(e) {
+			let r = t(e), a = u(r, i);
+			r.style.height = o(n(r), r.offsetHeight, i), r.style.opacity = "1", r.style.overflow = "hidden", i && (r.style.paddingTop = a.paddingTop, r.style.paddingBottom = a.paddingBottom), l && (r.style.transform = h, r.style.transformOrigin = g), _ && (r.style.willChange = _);
+		},
+		onEnter(e, n) {
+			let r = t(e), a = d(r, i);
+			b(r), c(() => {
+				r.style.height = s(r, a, i), r.style.opacity = "1", i && (r.style.paddingTop = a.paddingTop, r.style.paddingBottom = a.paddingBottom), l && (r.style.transform = h);
+			}), x(r, n);
+		},
+		onLeave(e, n) {
+			let r = t(e);
+			b(r), r.offsetHeight, c(() => {
+				r.style.height = "0px", r.style.opacity = "0", i && (r.style.paddingTop = "0px", r.style.paddingBottom = "0px"), l && (r.style.transform = m);
+			}), x(r, n);
+		}
+	});
+}
+function _(e = {}) {
+	return g({
+		...e,
+		collapsedTransform: e.collapsedTransform ?? "scaleY(0.96)",
+		expandedTransform: e.expandedTransform ?? "scaleY(1)",
+		includePadding: e.includePadding ?? !0,
+		name: e.name ?? "xy-menu-inline-motion",
+		transformOrigin: e.transformOrigin ?? "top",
+		transition: e.transition ?? [
+			"height var(--xy-menu-motion-duration) var(--xy-menu-motion-easing)",
+			"opacity var(--xy-menu-motion-duration) var(--xy-menu-motion-easing)",
+			"transform var(--xy-menu-motion-duration) var(--xy-menu-motion-easing)",
+			"padding-top var(--xy-menu-motion-duration) var(--xy-menu-motion-easing)",
+			"padding-bottom var(--xy-menu-motion-duration) var(--xy-menu-motion-easing)"
+		].join(", "),
+		willChange: e.willChange ?? "height, opacity, transform, padding"
+	});
+}
+function v(e = {}) {
+	return g({
+		...e,
+		appear: e.appear ?? !1,
+		includePadding: e.includePadding ?? !1,
+		name: e.name ?? "xy-collapse-panel-motion",
+		transition: e.transition ?? ["height var(--xy-collapse-motion-duration, var(--xy-motion-duration-mid)) var(--xy-motion-ease-in-out)", "opacity var(--xy-collapse-motion-duration, var(--xy-motion-duration-mid)) var(--xy-motion-ease-in-out)"].join(", "),
+		willChange: e.willChange ?? "height, opacity"
+	});
+}
+function y(e = {}) {
+	return p(e.name ?? "xy-menu-popup-motion", {
+		appear: e.appear ?? !0,
+		css: !0
+	});
+}
+//#endregion
+export { l as clearMotionStyles, h as createCollapseMotion, v as createCollapsePanelMotion, m as createFadeMotion, g as createInlineCollapseMotion, _ as createMenuInlineMotion, y as createMenuPopupMotion, p as getTransitionProps, c as nextFrame };

package/dist/core/options/index.d.ts

@@ -0,0 +1,15 @@
+export type XyOptionValue = boolean | number | string;
+export interface XyBaseOption<T extends XyOptionValue = XyOptionValue> {
+    children?: XyBaseOption<T>[];
+    disabled?: boolean;
+    group?: string;
+    label: string;
+    value: T;
+}
+export interface XyFlatOption<T extends XyOptionValue = XyOptionValue> extends Omit<XyBaseOption<T>, "children"> {
+    depth: number;
+    path: XyBaseOption<T>[];
+}
+export declare function flattenOptions<T extends XyOptionValue>(options: readonly XyBaseOption<T>[], parentPath?: XyBaseOption<T>[]): XyFlatOption<T>[];
+export declare function filterOptions<T extends XyOptionValue>(options: readonly XyBaseOption<T>[], search: string): XyBaseOption<T>[];
+export declare function toggleOptionValue<T extends XyOptionValue>(values: readonly T[], value: T): T[];

package/dist/core/options/index.js

@@ -0,0 +1,23 @@
+//#region components/core/options/index.ts
+function e(t, n = []) {
+	return t.flatMap((t) => {
+		let r = [...n, t];
+		return [{
+			depth: n.length,
+			disabled: t.disabled,
+			group: t.group,
+			label: t.label,
+			path: r,
+			value: t.value
+		}, ...e(t.children ?? [], r)];
+	});
+}
+function t(e, t) {
+	let n = t.trim().toLocaleLowerCase();
+	return n ? e.filter((e) => e.label.toLocaleLowerCase().includes(n)) : [...e];
+}
+function n(e, t) {
+	return e.includes(t) ? e.filter((e) => e !== t) : [...e, t];
+}
+//#endregion
+export { t as filterOptions, e as flattenOptions, n as toggleOptionValue };

package/dist/core/overflow/index.d.ts

@@ -0,0 +1,34 @@
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
+export type XyOverflowCollapseFrom = "end" | "start";
+export interface XyOverflowItem {
+    key: string;
+    width: number;
+}
+export interface XyOverflowOptions {
+    availableWidth?: number;
+    collapseFrom?: XyOverflowCollapseFrom;
+    minVisibleCount?: number;
+    overflowIndicatorWidth?: number;
+    preserveKeys?: readonly string[];
+}
+export interface XyOverflowResult<T extends XyOverflowItem> {
+    hiddenItems: T[];
+    hiddenKeys: string[];
+    isOverflowing: boolean;
+    overflowIndicatorWidth: number;
+    totalWidth: number;
+    usedWidth: number;
+    visibleItems: T[];
+    visibleKeys: string[];
+    visibleWidth: number;
+}
+export interface XyUseOverflowApi<T extends XyOverflowItem> {
+    hiddenItems: ComputedRef<T[]>;
+    hiddenKeys: ComputedRef<string[]>;
+    isOverflowing: ComputedRef<boolean>;
+    result: ComputedRef<XyOverflowResult<T>>;
+    visibleItems: ComputedRef<T[]>;
+    visibleKeys: ComputedRef<string[]>;
+}
+export declare function calculateOverflow<T extends XyOverflowItem>(items: readonly T[], options?: XyOverflowOptions): XyOverflowResult<T>;
+export declare function useOverflow<T extends XyOverflowItem>(items: MaybeRefOrGetter<readonly T[]>, options?: MaybeRefOrGetter<XyOverflowOptions>): XyUseOverflowApi<T>;

package/dist/core/overflow/index.js

@@ -0,0 +1,63 @@
+import { computed as e, toValue as t } from "vue";
+//#region components/core/overflow/index.ts
+function n(e) {
+	return e === void 0 || !Number.isFinite(e) ? 0 : Math.max(0, e);
+}
+function r(e) {
+	return e.reduce((e, t) => e + n(t.width), 0);
+}
+function i(e, t = {}) {
+	let i = r(e), a = t.availableWidth, o = n(t.overflowIndicatorWidth);
+	if (a === void 0 || !Number.isFinite(a) || i <= a) return {
+		hiddenItems: [],
+		hiddenKeys: [],
+		isOverflowing: !1,
+		overflowIndicatorWidth: 0,
+		totalWidth: i,
+		usedWidth: i,
+		visibleItems: [...e],
+		visibleKeys: e.map((e) => e.key),
+		visibleWidth: i
+	};
+	let s = Math.max(0, a), c = t.collapseFrom ?? "end", l = new Set(t.preserveKeys ?? []), u = Math.min(Math.max(0, t.minVisibleCount ?? 0), e.length), d = /* @__PURE__ */ new Set(), f = c === "start" ? [...e] : [...e].reverse();
+	function p() {
+		return e.filter((e) => !d.has(e.key));
+	}
+	function m() {
+		return r(p()) + (d.size > 0 ? o : 0);
+	}
+	function h() {
+		for (let e of f) if (!d.has(e.key) && !l.has(e.key)) return e;
+		for (let e of f) if (!d.has(e.key)) return e;
+	}
+	for (; m() > s && e.length - d.size > u;) {
+		let e = h();
+		if (!e) break;
+		d.add(e.key);
+	}
+	let g = p(), _ = e.filter((e) => d.has(e.key)), v = r(g), y = _.length > 0 ? o : 0, b = v + y;
+	return {
+		hiddenItems: _,
+		hiddenKeys: _.map((e) => e.key),
+		isOverflowing: _.length > 0 || i > s,
+		overflowIndicatorWidth: y,
+		totalWidth: i,
+		usedWidth: b,
+		visibleItems: g,
+		visibleKeys: g.map((e) => e.key),
+		visibleWidth: v
+	};
+}
+function a(n, r = {}) {
+	let a = e(() => i(t(n), t(r)));
+	return {
+		hiddenItems: e(() => a.value.hiddenItems),
+		hiddenKeys: e(() => a.value.hiddenKeys),
+		isOverflowing: e(() => a.value.isOverflowing),
+		result: a,
+		visibleItems: e(() => a.value.visibleItems),
+		visibleKeys: e(() => a.value.visibleKeys)
+	};
+}
+//#endregion
+export { i as calculateOverflow, a as useOverflow };

package/dist/core/overlay/index.d.ts

@@ -0,0 +1,60 @@
+import type { CSSProperties, MaybeRefOrGetter, Ref } from "vue";
+export type XyOverlayPlacement = "bottom" | "bottomLeft" | "bottomRight" | "left" | "leftBottom" | "leftTop" | "right" | "rightBottom" | "rightTop" | "top" | "topLeft" | "topRight";
+export type XyOverlayStrategy = "absolute" | "fixed";
+export interface XyOverlayRect {
+    bottom: number;
+    height: number;
+    left: number;
+    right: number;
+    top: number;
+    width: number;
+}
+export interface XyOverlayBoundary {
+    height: number;
+    width: number;
+}
+export interface XyOverlayPositionOptions {
+    boundary?: XyOverlayBoundary;
+    offset?: number;
+    placement?: XyOverlayPlacement;
+    strategy?: XyOverlayStrategy;
+    viewportPadding?: number;
+}
+export interface XyOverlayPosition {
+    left: number;
+    placement: XyOverlayPlacement;
+    strategy: XyOverlayStrategy;
+    top: number;
+    transformOrigin: string;
+}
+export interface XyUseOverlayPositionOptions {
+    anchorRect?: MaybeRefOrGetter<XyOverlayRect | undefined>;
+    autoAdjust?: MaybeRefOrGetter<boolean | undefined>;
+    boundary?: MaybeRefOrGetter<XyOverlayBoundary | undefined>;
+    offset?: MaybeRefOrGetter<number | undefined>;
+    open?: MaybeRefOrGetter<boolean | undefined>;
+    overlayRef: Ref<HTMLElement | undefined>;
+    placement?: MaybeRefOrGetter<XyOverlayPlacement | undefined>;
+    strategy?: MaybeRefOrGetter<XyOverlayStrategy | undefined>;
+    triggerRef: Ref<HTMLElement | undefined>;
+    viewportPadding?: MaybeRefOrGetter<number | undefined>;
+}
+export declare function createOverlayStack(base?: number): {
+    current(): number;
+    next(): number;
+    reset(nextBase?: number): void;
+};
+export declare const xyOverlayStack: {
+    current(): number;
+    next(): number;
+    reset(nextBase?: number): void;
+};
+export declare function getOverlayTransformOrigin(placement: XyOverlayPlacement): "bottom center" | "top center" | "right center" | "left center";
+export declare function getOverlayPosition(triggerRect: XyOverlayRect, overlayRect: Pick<XyOverlayRect, "height" | "width">, options?: XyOverlayPositionOptions): XyOverlayPosition;
+export declare function useOverlayPosition(options: XyUseOverlayPositionOptions): {
+    cleanup: () => void;
+    overlayStyle: import("vue").ComputedRef<CSSProperties>;
+    position: Ref<XyOverlayPosition | undefined, XyOverlayPosition | undefined>;
+    updatePosition: () => void;
+    updatePositionAfterRender: () => Promise<void>;
+};

package/dist/core/overlay/index.js

@@ -0,0 +1,100 @@
+import { addDomEvent as e, canUseDom as t } from "../shared/index.js";
+import { computed as n, nextTick as r, onBeforeUnmount as i, onMounted as a, ref as o, toValue as s, watch as c } from "vue";
+//#region components/core/overlay/index.ts
+function l(e = 1e3) {
+	let t = e;
+	return {
+		current() {
+			return t;
+		},
+		next() {
+			return t += 1, t;
+		},
+		reset(n = e) {
+			t = n;
+		}
+	};
+}
+var u = l();
+function d(e) {
+	let t = m(e);
+	return t === "top" ? "bottom center" : t === "bottom" ? "top center" : t === "left" ? "right center" : "left center";
+}
+function f(e, t, n = {}) {
+	let r = n.placement ?? "top", i = n.strategy ?? "fixed", a = n.offset ?? 8, o = h(r), s = m(r), c = 0, l = 0;
+	if (s === "top" || s === "bottom" ? (c = s === "top" ? e.top - t.height - a : e.bottom + a, l = g(e.left, e.width, t.width, o)) : (l = s === "left" ? e.left - t.width - a : e.right + a, c = g(e.top, e.height, t.height, o)), n.boundary) {
+		let e = n.viewportPadding ?? 8;
+		l = _(l, e, n.boundary.width - t.width - e), c = _(c, e, n.boundary.height - t.height - e);
+	}
+	return {
+		left: Math.round(l),
+		placement: r,
+		strategy: i,
+		top: Math.round(c),
+		transformOrigin: d(r)
+	};
+}
+function p(l) {
+	let u = o(), d = [], p = n(() => u.value ? {
+		left: `${u.value.left}px`,
+		position: u.value.strategy,
+		top: `${u.value.top}px`,
+		transformOrigin: u.value.transformOrigin
+	} : {
+		position: s(l.strategy) ?? "fixed",
+		visibility: "hidden"
+	});
+	function m() {
+		let e = l.triggerRef.value, t = l.overlayRef.value, n = s(l.anchorRect);
+		if (!e && !n || !t || s(l.open) === !1) return;
+		let r = n ?? e.getBoundingClientRect(), i = t.getBoundingClientRect(), a = s(l.autoAdjust) !== !1;
+		u.value = f(r, i, {
+			boundary: a ? s(l.boundary) ?? v() : void 0,
+			offset: s(l.offset),
+			placement: s(l.placement),
+			strategy: s(l.strategy),
+			viewportPadding: s(l.viewportPadding)
+		});
+	}
+	async function h() {
+		await r(), m();
+	}
+	function g() {
+		d.forEach((e) => e()), d = [];
+	}
+	return a(() => {
+		h(), t() && (d = [e(window, "resize", m), e(window, "scroll", m, { capture: !0 })]);
+	}), i(g), c([
+		() => s(l.open),
+		() => s(l.anchorRect),
+		() => s(l.placement),
+		() => s(l.offset),
+		() => s(l.strategy)
+	], () => h()), {
+		cleanup: g,
+		overlayStyle: p,
+		position: u,
+		updatePosition: m,
+		updatePositionAfterRender: h
+	};
+}
+function m(e) {
+	return e.startsWith("top") ? "top" : e.startsWith("bottom") ? "bottom" : e.startsWith("left") ? "left" : "right";
+}
+function h(e) {
+	return e.endsWith("Left") || e.endsWith("Top") ? "start" : e.endsWith("Right") || e.endsWith("Bottom") ? "end" : "center";
+}
+function g(e, t, n, r) {
+	return r === "start" ? e : r === "end" ? e + t - n : e + (t - n) / 2;
+}
+function _(e, t, n) {
+	return n < t ? t : Math.min(Math.max(e, t), n);
+}
+function v() {
+	if (t()) return {
+		height: window.innerHeight,
+		width: window.innerWidth
+	};
+}
+//#endregion
+export { l as createOverlayStack, f as getOverlayPosition, d as getOverlayTransformOrigin, p as useOverlayPosition, u as xyOverlayStack };

package/dist/core/portal/index.d.ts

@@ -0,0 +1,26 @@
+import type { ComputedRef, MaybeRefOrGetter, Ref } from "vue";
+import type { XyCleanup } from "../shared";
+export type XyPortalContainer = Element | string | (() => Element | null | string | undefined) | null | undefined;
+export interface XyPortalContainerOptions {
+    className?: string;
+    id?: string;
+    parent?: Element;
+}
+export interface XyPortalContainerResult {
+    cleanup: XyCleanup;
+    element: HTMLElement | undefined;
+}
+export interface XyUsePortalContainerOptions {
+    defaultContainer?: MaybeRefOrGetter<Element | string | undefined>;
+    disabled?: MaybeRefOrGetter<boolean | undefined>;
+    getContainer?: MaybeRefOrGetter<XyPortalContainer>;
+}
+export interface XyPortalContainerApi {
+    cleanup: XyCleanup;
+    disabled: ComputedRef<boolean>;
+    refresh: () => void;
+    target: Ref<Element | undefined>;
+}
+export declare function resolvePortalContainer(container?: XyPortalContainer): Element | undefined;
+export declare function createPortalContainer(options?: XyPortalContainerOptions): XyPortalContainerResult;
+export declare function usePortalContainer(options?: XyUsePortalContainerOptions): XyPortalContainerApi;

package/dist/core/portal/index.js

@@ -0,0 +1,39 @@
+import { canUseDom as e } from "../shared/index.js";
+import { computed as t, onMounted as n, ref as r, toValue as i, watch as a } from "vue";
+//#region components/core/portal/index.ts
+function o(t) {
+	if (!e()) return;
+	let n = typeof t == "function" ? t() : t;
+	return n == null ? document.body : typeof n == "string" ? document.querySelector(n) ?? void 0 : n;
+}
+function s(t = {}) {
+	if (!e()) return {
+		cleanup: () => {},
+		element: void 0
+	};
+	let n = document.createElement("div");
+	return t.id && (n.id = t.id), t.className && (n.className = t.className), (t.parent ?? document.body).append(n), {
+		cleanup: () => n.remove(),
+		element: n
+	};
+}
+function c(e = {}) {
+	let s = r();
+	function c() {
+		return i(e.getContainer) ?? i(e.defaultContainer);
+	}
+	function l() {
+		s.value = o(c());
+	}
+	let u = t(() => !!i(e.disabled));
+	return n(l), a([() => i(e.getContainer), () => i(e.defaultContainer)], () => l()), l(), {
+		cleanup: () => {
+			s.value = void 0;
+		},
+		disabled: u,
+		refresh: l,
+		target: s
+	};
+}
+//#endregion
+export { s as createPortalContainer, o as resolvePortalContainer, c as usePortalContainer };

package/dist/core/resize/index.d.ts

@@ -0,0 +1,28 @@
+import type { MaybeRefOrGetter, Ref } from "vue";
+import type { XyCleanup } from "../shared";
+export type XyResponsiveBreakpoint = "lg" | "md" | "sm" | "xl" | "xs" | "xxl" | "xxxl";
+export interface XyElementSize {
+    height: number;
+    width: number;
+}
+export type XyResizeHandler = (size: XyElementSize, entry?: ResizeObserverEntry) => void;
+export type XyMediaQueryHandler = (matches: boolean, event: MediaQueryList | MediaQueryListEvent) => void;
+export interface XyUseElementSizeApi {
+    height: Ref<number>;
+    stop: XyCleanup;
+    update: () => void;
+    width: Ref<number>;
+}
+export interface XyUseMediaQueryApi {
+    matches: Ref<boolean>;
+    media: Ref<string>;
+    refresh: () => void;
+    stop: XyCleanup;
+}
+export declare const xyResponsiveBreakpointWidths: Record<XyResponsiveBreakpoint, number>;
+export declare function getResponsiveBreakpointQuery(breakpoint: XyResponsiveBreakpoint): string;
+export declare function getElementSize(element?: Element | null | undefined): XyElementSize;
+export declare function observeElementResize(element: Element | null | undefined, handler: XyResizeHandler): XyCleanup;
+export declare function observeMediaQuery(query: string | undefined, handler: XyMediaQueryHandler): XyCleanup;
+export declare function useElementSize(target: MaybeRefOrGetter<Element | null | undefined>): XyUseElementSizeApi;
+export declare function useMediaQuery(query: MaybeRefOrGetter<string | undefined>): XyUseMediaQueryApi;

package/dist/core/resize/index.js

@@ -0,0 +1,91 @@
+import { addDomEvent as e, canUseDom as t } from "../shared/index.js";
+import { onBeforeUnmount as n, onMounted as r, ref as i, toValue as a, watch as o } from "vue";
+//#region components/core/resize/index.ts
+var s = {
+	lg: 992,
+	md: 768,
+	sm: 576,
+	xl: 1200,
+	xs: 480,
+	xxl: 1600,
+	xxxl: 1920
+};
+function c(e) {
+	return `(max-width: ${s[e] - .02}px)`;
+}
+function l(e) {
+	if (!e) return {
+		height: 0,
+		width: 0
+	};
+	let t = e.getBoundingClientRect();
+	return {
+		height: t.height,
+		width: t.width
+	};
+}
+function u(n, r) {
+	if (!n || !t()) return () => {};
+	if (typeof ResizeObserver < "u") {
+		let e = new ResizeObserver((e) => {
+			for (let t of e) r({
+				height: t.contentRect.height,
+				width: t.contentRect.width
+			}, t);
+		});
+		return e.observe(n), () => e.disconnect();
+	}
+	let i = () => r(l(n)), a = e(window, "resize", i);
+	return i(), a;
+}
+function d(e, n) {
+	if (!e || !t() || !window.matchMedia) return () => {};
+	let r = window.matchMedia(e), i = (e) => {
+		n(e.matches, e);
+	};
+	return r.addEventListener ? r.addEventListener("change", i) : r.addListener(i), n(r.matches, r), () => {
+		r.removeEventListener ? r.removeEventListener("change", i) : r.removeListener(i);
+	};
+}
+function f(e) {
+	let t = i(0), s = i(0), c;
+	function d(e) {
+		t.value = e.width, s.value = e.height;
+	}
+	function f() {
+		d(l(a(e)));
+	}
+	function p() {
+		c?.(), c = void 0;
+		let t = a(e);
+		f(), c = u(t, (e) => d(e));
+	}
+	return r(p), n(() => c?.()), o(() => a(e), p), f(), {
+		height: s,
+		stop: () => c?.(),
+		update: f,
+		width: t
+	};
+}
+function p(e) {
+	let t = i(!1), s = i(""), c;
+	function l() {
+		c?.(), c = void 0;
+		let n = a(e);
+		if (s.value = n ?? "", !n) {
+			t.value = !1;
+			return;
+		}
+		c = d(n, (e) => {
+			t.value = e;
+		});
+	}
+	return r(l), n(() => c?.()), o(() => a(e), l), l(), {
+		matches: t,
+		media: s,
+		refresh: l,
+		stop: () => c?.()
+	};
+}
+//#endregion
+export { l as getElementSize, c as getResponsiveBreakpointQuery, u as observeElementResize, d as observeMediaQuery, f as useElementSize, p as useMediaQuery, s as xyResponsiveBreakpointWidths };

package/dist/core/shared/index.d.ts

@@ -0,0 +1,23 @@
+import type { CSSProperties, Ref } from "vue";
+export type XyCleanup = () => void;
+export type XyMaybeArray<T> = T | readonly T[];
+export type XyMaybeRef<T> = T | Ref<T>;
+export type XyEventHandler<E extends Event = Event> = (event: E) => void;
+export type XySemanticResolver<T, Props extends object> = T | ((info: {
+    props: Props;
+}) => T);
+export type XySemanticInput<T, Props extends object> = XyMaybeArray<XySemanticResolver<T, Props> | undefined>;
+export type XySemanticClassNames<Name extends string, Props extends object = Record<string, never>> = XySemanticInput<Partial<Record<Name, string>>, Props>;
+export type XySemanticStyles<Name extends string, Props extends object = Record<string, never>> = XySemanticInput<Partial<Record<Name, CSSProperties>>, Props>;
+export declare function toArray<T>(value: XyMaybeArray<T> | null | undefined): T[];
+export declare function isObjectRecord(value: unknown): value is Record<string, unknown>;
+export declare function omitUndefined<T extends Record<string, unknown>>(value: T): Partial<T>;
+export declare function resolveSemanticClassNames<Name extends string, Props extends object>(value: XySemanticClassNames<Name, Props> | null | undefined, props: Props): Partial<Record<Name, string>>;
+export declare function resolveSemanticStyles<Name extends string, Props extends object>(value: XySemanticStyles<Name, Props> | null | undefined, props: Props): Partial<Record<Name, CSSProperties>>;
+export declare function createEventHandler<E extends Event>(...handlers: Array<XyEventHandler<E> | undefined>): (event: E) => void;
+export declare function canUseDom(): boolean;
+export declare function nextId(prefix?: string): string;
+export declare function containsTarget(container: Element | null | undefined, target: EventTarget | null): boolean;
+export declare function addDomEvent<K extends keyof DocumentEventMap>(target: Document, type: K, handler: (event: DocumentEventMap[K]) => void, options?: AddEventListenerOptions): XyCleanup;
+export declare function addDomEvent<K extends keyof HTMLElementEventMap>(target: HTMLElement, type: K, handler: (event: HTMLElementEventMap[K]) => void, options?: AddEventListenerOptions): XyCleanup;
+export declare function addDomEvent<K extends keyof WindowEventMap>(target: Window, type: K, handler: (event: WindowEventMap[K]) => void, options?: AddEventListenerOptions): XyCleanup;