@vizejs/composable 0.426.2 → 0.427.0

package/dist/abort-signal.d.mts

@@ -1,4 +1,4 @@
-import { TimeoutScheduler } from "./timeout-scheduler.mjs";
+import { t as TimeoutScheduler } from "./timeout-scheduler-CI8RVLZs.mjs";
 
 //#region src/abort-signal.d.ts
 /**

package/dist/active-element.d.mts

@@ -0,0 +1,37 @@
+import { MaybeRefOrGetter, ShallowRef } from "vue";
+
+//#region src/active-element.d.ts
+/** Document-like capability observed by {@link useActiveElement}. */
+interface ActiveElementHost extends EventTarget {
+  /** Currently focused element. */
+  readonly activeElement: Element | null;
+}
+/** Options for {@link useActiveElement}. */
+interface UseActiveElementOptions {
+  /**
+   * Descend into open shadow roots to report the innermost focused element.
+   *
+   * @default true
+   */
+  readonly deep?: boolean;
+  /**
+   * Reactive document capability for alternate runtimes and tests.
+   *
+   * @default globalThis.document when available
+   */
+  readonly host?: MaybeRefOrGetter<ActiveElementHost | null | undefined>;
+}
+/**
+ * Track the focused element of a document.
+ *
+ * Listens for capturing `focus`/`blur` events on the document, so focus
+ * changes anywhere (including inside shadow trees) update the ref.
+ * Server renders expose `null`. Listeners are removed with the owning scope.
+ *
+ * @param options Shadow-DOM traversal and document capability.
+ * @default options {}
+ * @returns Readonly shallow ref of the active element.
+ */
+declare function useActiveElement(options?: UseActiveElementOptions): Readonly<ShallowRef<Element | null>>;
+//#endregion
+export { ActiveElementHost, UseActiveElementOptions, useActiveElement };

package/dist/active-element.mjs

@@ -0,0 +1,56 @@
+import { tryOnScopeDispose } from "./scope.mjs";
+import { hasInjectionContext, onMounted, shallowRef, toValue, watch } from "vue";
+//#region src/active-element.ts
+/**
+* Track the focused element of a document.
+*
+* Listens for capturing `focus`/`blur` events on the document, so focus
+* changes anywhere (including inside shadow trees) update the ref.
+* Server renders expose `null`. Listeners are removed with the owning scope.
+*
+* @param options Shadow-DOM traversal and document capability.
+* @default options {}
+* @returns Readonly shallow ref of the active element.
+*/
+function useActiveElement(options = {}) {
+	const deep = options.deep ?? true;
+	const active = shallowRef(null);
+	const mounted = shallowRef(!hasInjectionContext());
+	if (!mounted.value) onMounted(() => {
+		mounted.value = true;
+	});
+	const stop = watch(() => !mounted.value ? void 0 : options.host === void 0 ? browserActiveElementHost() : toValue(options.host), (host, _previous, onCleanup) => {
+		if (!host) {
+			active.value = null;
+			return;
+		}
+		const update = () => {
+			active.value = readActive(host.activeElement, deep);
+		};
+		update();
+		host.addEventListener("focus", update, {
+			capture: true,
+			passive: true
+		});
+		host.addEventListener("blur", update, {
+			capture: true,
+			passive: true
+		});
+		onCleanup(() => {
+			host.removeEventListener("focus", update, { capture: true });
+			host.removeEventListener("blur", update, { capture: true });
+		});
+	}, { immediate: true });
+	tryOnScopeDispose(() => stop.stop());
+	return active;
+}
+function readActive(element, deep) {
+	let current = element;
+	while (deep && current?.shadowRoot?.activeElement) current = current.shadowRoot.activeElement;
+	return current;
+}
+function browserActiveElementHost() {
+	return typeof document !== "undefined" ? document : void 0;
+}
+//#endregion
+export { useActiveElement };

package/dist/animate.d.mts

@@ -0,0 +1,114 @@
+import { n as MaybeElementTarget } from "./element-target-Crpxl4D9.mjs";
+import { MaybeRefOrGetter, Ref, ShallowRef, WritableComputedRef } from "vue";
+
+//#region src/animate.d.ts
+/** CSS property names (camelCase) that accept string values on `CSSStyleDeclaration`. */
+type AnimatableCssProperty = { [Key in keyof CSSStyleDeclaration]: Key extends string ? CSSStyleDeclaration[Key] extends string ? Key : never : never }[keyof CSSStyleDeclaration];
+type KeyframeProperty = Exclude<AnimatableCssProperty, "offset" | "cssText">;
+/** Keyframe whose property names are checked against `CSSStyleDeclaration`. */
+type TypedKeyframe = { readonly [Key in KeyframeProperty]?: string | number | null } & {
+  /** Position of the keyframe in `[0, 1]`. */readonly offset?: number | null; /** Easing applied from this keyframe to the next. */
+  readonly easing?: string; /** Composite operation for this keyframe. */
+  readonly composite?: CompositeOperationOrAuto; /** CSS `offset` shorthand (motion path); WAAPI names it `cssOffset` to avoid the keyframe offset. */
+  readonly cssOffset?: string;
+};
+/** Value list of one property in property-indexed keyframes. */
+type IndexedKeyframeValue = string | number | null | readonly string[] | readonly (number | null)[];
+/** Property-indexed keyframes with checked property names. */
+type TypedPropertyIndexedKeyframes = { readonly [Key in KeyframeProperty]?: IndexedKeyframeValue } & {
+  /** Keyframe positions. */readonly offset?: number | null | readonly (number | null)[]; /** Easings. */
+  readonly easing?: string | readonly string[]; /** Composite operations. */
+  readonly composite?: CompositeOperationOrAuto | readonly CompositeOperationOrAuto[];
+};
+/** Keyframes accepted by {@link useAnimate}. */
+type AnimationKeyframes = readonly TypedKeyframe[] | TypedPropertyIndexedKeyframes;
+/** Frame scheduler used to keep `currentTime` in sync while running. */
+interface AnimateFrameHost {
+  /** Schedule a callback before the next repaint. */
+  readonly requestAnimationFrame: (callback: FrameRequestCallback) => number;
+  /** Cancel a scheduled frame. */
+  readonly cancelAnimationFrame: (handle: number) => void;
+}
+/** Options for {@link useAnimate}. */
+interface UseAnimateOptions extends KeyframeAnimationOptions {
+  /**
+   * Start playing as soon as the element resolves.
+   *
+   * @default true
+   */
+  readonly immediate?: boolean;
+  /**
+   * Commit the final computed styles to the element's `style` on finish.
+   *
+   * @default false
+   */
+  readonly commitStyles?: boolean;
+  /**
+   * Keep the animation from being auto-removed by the browser when it is
+   * replaced by another filling animation.
+   *
+   * @default false
+   */
+  readonly persist?: boolean;
+  /**
+   * Called once the animation object is created.
+   *
+   * @default undefined
+   */
+  readonly onReady?: (animation: Animation) => void;
+  /**
+   * Called when creating the animation throws (e.g. invalid keyframes).
+   *
+   * @default undefined
+   */
+  readonly onError?: (error: unknown) => void;
+  /**
+   * Frame scheduler used to sync `currentTime` while running.
+   *
+   * @default globalThis.window when available
+   */
+  readonly frameHost?: MaybeRefOrGetter<AnimateFrameHost | null | undefined>;
+}
+/** Reactive animation state returned by {@link useAnimate}. */
+interface AnimateControls {
+  /** Whether the resolved element supports `animate()`. `false` during server rendering. */
+  readonly isSupported: Readonly<Ref<boolean>>;
+  /** Underlying `Animation`, once created. */
+  readonly animation: Readonly<ShallowRef<Animation | null>>;
+  /** Playback state. */
+  readonly playState: Readonly<Ref<AnimationPlayState>>;
+  /** Whether a play/pause is pending. */
+  readonly pending: Readonly<Ref<boolean>>;
+  /** Current time in milliseconds (writable to seek). */
+  readonly currentTime: WritableComputedRef<number | null>;
+  /** Playback rate (writable). */
+  readonly playbackRate: WritableComputedRef<number>;
+  /** Play (creating the animation if needed). */
+  readonly play: () => void;
+  /** Pause. */
+  readonly pause: () => void;
+  /** Reverse the playback direction. */
+  readonly reverse: () => void;
+  /** Jump to the end. */
+  readonly finish: () => void;
+  /** Cancel and clear effects. */
+  readonly cancel: () => void;
+}
+/**
+ * Drive the Web Animations API reactively with typed keyframes.
+ *
+ * Keyframe property names are checked against `CSSStyleDeclaration`, so typos
+ * are compile errors. Changing keyframes updates the running effect in place.
+ * Playback state is synced after every control call, on `finish`/`cancel`/
+ * `remove`, and every animation frame while running. The animation is
+ * cancelled when the owning reactive scope stops. Nothing runs during server
+ * rendering (`playState` is `"idle"`).
+ *
+ * @param target Reactive element target.
+ * @param keyframes Reactive typed keyframes (`null` to pause creation).
+ * @param options Duration in milliseconds, or timing plus lifecycle options.
+ * @returns Reactive playback state and controls.
+ */
+declare function useAnimate(target: MaybeElementTarget, keyframes: MaybeRefOrGetter<AnimationKeyframes | null>, options: number | UseAnimateOptions): AnimateControls;
+//#endregion
+export { AnimatableCssProperty, AnimateControls, AnimateFrameHost, AnimationKeyframes, IndexedKeyframeValue, TypedKeyframe, TypedPropertyIndexedKeyframes, UseAnimateOptions, useAnimate };

package/dist/animate.mjs

@@ -0,0 +1,157 @@
+import { tryOnScopeDispose } from "./scope.mjs";
+import { resolveElement } from "./element-target.mjs";
+import { computed, readonly, ref, shallowRef, toValue, watch } from "vue";
+//#region src/animate.ts
+/**
+* Drive the Web Animations API reactively with typed keyframes.
+*
+* Keyframe property names are checked against `CSSStyleDeclaration`, so typos
+* are compile errors. Changing keyframes updates the running effect in place.
+* Playback state is synced after every control call, on `finish`/`cancel`/
+* `remove`, and every animation frame while running. The animation is
+* cancelled when the owning reactive scope stops. Nothing runs during server
+* rendering (`playState` is `"idle"`).
+*
+* @param target Reactive element target.
+* @param keyframes Reactive typed keyframes (`null` to pause creation).
+* @param options Duration in milliseconds, or timing plus lifecycle options.
+* @returns Reactive playback state and controls.
+*/
+function useAnimate(target, keyframes, options) {
+	const { immediate = true, commitStyles = false, persist = false, onReady, onError, frameHost, ...timing } = typeof options === "number" ? { duration: options } : options;
+	const animation = shallowRef(null);
+	const isSupported = ref(false);
+	const playState = ref("idle");
+	const pending = ref(false);
+	const time = ref(null);
+	const rate = ref(timing.playbackRate ?? 1);
+	let stopFrames = () => void 0;
+	const readTime = (value) => typeof value === "number" ? value : null;
+	const sync = () => {
+		const current = animation.value;
+		if (!current) return;
+		playState.value = current.playState;
+		pending.value = current.pending;
+		time.value = readTime(current.currentTime);
+		rate.value = current.playbackRate;
+		if (current.playState === "running") startFrames();
+		else stopFrames();
+	};
+	const startFrames = () => {
+		const frames = frameHost === void 0 ? browserFrameHost() : toValue(frameHost);
+		if (!frames) return;
+		stopFrames();
+		let handle = frames.requestAnimationFrame(function tick() {
+			sync();
+			if (animation.value?.playState === "running") handle = frames.requestAnimationFrame(tick);
+		});
+		stopFrames = () => {
+			frames.cancelAnimationFrame(handle);
+			stopFrames = () => void 0;
+		};
+	};
+	const create = () => {
+		const element = resolveElement(target);
+		const frames = toValue(keyframes);
+		isSupported.value = element !== null && typeof element.animate === "function";
+		if (!element || !frames || !isSupported.value) return null;
+		try {
+			const created = element.animate(toPlatformKeyframes(frames), timing);
+			if (persist) created.persist();
+			if (commitStyles) created.addEventListener("finish", () => {
+				try {
+					created.commitStyles();
+				} catch {}
+			});
+			for (const type of [
+				"finish",
+				"cancel",
+				"remove"
+			]) created.addEventListener(type, sync);
+			animation.value = created;
+			onReady?.(created);
+			return created;
+		} catch (error) {
+			onError?.(error);
+			return null;
+		}
+	};
+	const stopTarget = watch(() => resolveElement(target), (element, _previous, onCleanup) => {
+		if (!element) return;
+		const created = create();
+		if (created && !immediate) created.pause();
+		sync();
+		onCleanup(() => {
+			stopFrames();
+			created?.cancel();
+			if (animation.value === created) animation.value = null;
+			playState.value = "idle";
+		});
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	const stopKeyframes = watch(() => toValue(keyframes), (frames) => {
+		const effect = animation.value?.effect;
+		if (frames && effect && isKeyframeEffect(effect)) effect.setKeyframes(toPlatformKeyframes(frames));
+	}, { deep: true });
+	tryOnScopeDispose(() => {
+		stopTarget.stop();
+		stopKeyframes.stop();
+		stopFrames();
+	});
+	const control = (action) => () => {
+		const current = animation.value ?? create();
+		if (!current) return;
+		action(current);
+		sync();
+	};
+	return {
+		isSupported: readonly(isSupported),
+		animation,
+		playState: readonly(playState),
+		pending: readonly(pending),
+		currentTime: computed({
+			get: () => time.value,
+			set: (value) => {
+				if (!animation.value) return;
+				animation.value.currentTime = value;
+				sync();
+			}
+		}),
+		playbackRate: computed({
+			get: () => rate.value,
+			set: (value) => {
+				rate.value = value;
+				if (!animation.value) return;
+				animation.value.playbackRate = value;
+				sync();
+			}
+		}),
+		play: control((current) => current.play()),
+		pause: control((current) => current.pause()),
+		reverse: control((current) => current.reverse()),
+		finish: control((current) => current.finish()),
+		cancel: control((current) => current.cancel())
+	};
+}
+function toPlatformKeyframes(frames) {
+	if (isKeyframeList(frames)) return frames.map((frame) => ({ ...frame }));
+	const indexed = {};
+	for (const [key, value] of Object.entries(frames)) if (value !== void 0) indexed[key] = copyIndexedValue(value);
+	return indexed;
+}
+function copyIndexedValue(value) {
+	return typeof value === "object" && value !== null ? value.slice() : value;
+}
+function isKeyframeList(frames) {
+	return Array.isArray(frames);
+}
+function isKeyframeEffect(effect) {
+	return "setKeyframes" in effect && typeof effect.setKeyframes === "function";
+}
+function browserFrameHost() {
+	return typeof window !== "undefined" ? window : void 0;
+}
+//#endregion
+export { useAnimate };

package/dist/battery.d.mts

@@ -0,0 +1,61 @@
+import { MaybeRefOrGetter, Ref, ShallowRef } from "vue";
+
+//#region src/battery.d.ts
+/** Subset of the Battery Status API `BatteryManager`. */
+interface BatteryManagerLike extends EventTarget {
+  /** Whether the battery is charging. */
+  readonly charging: boolean;
+  /** Seconds until fully charged (`Infinity` when discharging). */
+  readonly chargingTime: number;
+  /** Seconds until empty (`Infinity` when charging). */
+  readonly dischargingTime: number;
+  /** Charge level in `[0, 1]`. */
+  readonly level: number;
+}
+/** Navigator-like capability used by {@link useBattery}. */
+interface BatteryHost {
+  /** Resolve the battery manager, where supported. */
+  readonly getBattery?: () => Promise<BatteryManagerLike>;
+}
+/** Options for {@link useBattery}. */
+interface UseBatteryOptions {
+  /**
+   * Reactive navigator capability for alternate runtimes and tests.
+   *
+   * @default globalThis.window.navigator when available
+   */
+  readonly host?: MaybeRefOrGetter<BatteryHost | null | undefined>;
+}
+/** Reactive battery state returned by {@link useBattery}. */
+interface BatteryControls {
+  /** Whether the host exposes `getBattery`. `false` during server rendering. */
+  readonly isSupported: Readonly<Ref<boolean>>;
+  /** Whether the battery manager has resolved. */
+  readonly isReady: Readonly<Ref<boolean>>;
+  /** Whether the battery is charging. */
+  readonly charging: Readonly<Ref<boolean>>;
+  /** Seconds until fully charged. */
+  readonly chargingTime: Readonly<Ref<number>>;
+  /** Seconds until empty. */
+  readonly dischargingTime: Readonly<Ref<number>>;
+  /** Charge level in `[0, 1]`. */
+  readonly level: Readonly<Ref<number>>;
+  /** Rejection from `getBattery`, if any (for example a permissions policy). */
+  readonly error: Readonly<ShallowRef<unknown>>;
+}
+/**
+ * Track the device battery with the Battery Status API.
+ *
+ * Server renders (and unsupported browsers) expose a full, charging battery
+ * (`level: 1`, `charging: true`, times `0`/`Infinity`), which is the
+ * least alarming deterministic default. Late resolutions after the host
+ * changed or the scope stopped are ignored, and listeners are removed with
+ * the owning reactive scope.
+ *
+ * @param options Navigator capability.
+ * @default options {}
+ * @returns Reactive battery state.
+ */
+declare function useBattery(options?: UseBatteryOptions): BatteryControls;
+//#endregion
+export { BatteryControls, BatteryHost, BatteryManagerLike, UseBatteryOptions, useBattery };

package/dist/battery.mjs

@@ -0,0 +1,90 @@
+import { tryOnScopeDispose } from "./scope.mjs";
+import { hasInjectionContext, onMounted, readonly, ref, shallowRef, toValue, watch } from "vue";
+//#region src/battery.ts
+const batteryEvents = [
+	"chargingchange",
+	"chargingtimechange",
+	"dischargingtimechange",
+	"levelchange"
+];
+/**
+* Track the device battery with the Battery Status API.
+*
+* Server renders (and unsupported browsers) expose a full, charging battery
+* (`level: 1`, `charging: true`, times `0`/`Infinity`), which is the
+* least alarming deterministic default. Late resolutions after the host
+* changed or the scope stopped are ignored, and listeners are removed with
+* the owning reactive scope.
+*
+* @param options Navigator capability.
+* @default options {}
+* @returns Reactive battery state.
+*/
+function useBattery(options = {}) {
+	const isSupported = ref(false);
+	const isReady = ref(false);
+	const charging = ref(true);
+	const chargingTime = ref(0);
+	const dischargingTime = ref(Number.POSITIVE_INFINITY);
+	const level = ref(1);
+	const error = shallowRef(void 0);
+	const mounted = shallowRef(!hasInjectionContext());
+	if (!mounted.value) onMounted(() => {
+		mounted.value = true;
+	});
+	const stop = watch(() => !mounted.value ? void 0 : options.host === void 0 ? browserBatteryHost() : toValue(options.host), (host, _previous, onCleanup) => {
+		const getBattery = host?.getBattery;
+		isSupported.value = typeof getBattery === "function";
+		isReady.value = false;
+		if (!host || typeof getBattery !== "function") return;
+		let cancelled = false;
+		let release = () => void 0;
+		onCleanup(() => {
+			cancelled = true;
+			release();
+		});
+		getBattery.call(host).then((battery) => {
+			if (cancelled) return;
+			const update = () => {
+				charging.value = battery.charging;
+				chargingTime.value = battery.chargingTime;
+				dischargingTime.value = battery.dischargingTime;
+				level.value = battery.level;
+			};
+			update();
+			isReady.value = true;
+			for (const type of batteryEvents) battery.addEventListener(type, update);
+			release = () => {
+				for (const type of batteryEvents) battery.removeEventListener(type, update);
+			};
+		}, (cause) => {
+			if (!cancelled) error.value = cause;
+		});
+	}, { immediate: true });
+	tryOnScopeDispose(() => stop.stop());
+	return {
+		isSupported: readonly(isSupported),
+		isReady: readonly(isReady),
+		charging: readonly(charging),
+		chargingTime: readonly(chargingTime),
+		dischargingTime: readonly(dischargingTime),
+		level: readonly(level),
+		error
+	};
+}
+function browserBatteryHost() {
+	if (typeof window === "undefined") return void 0;
+	const navigator = window.navigator;
+	if (!("getBattery" in navigator) || typeof navigator.getBattery !== "function") return {};
+	const request = navigator.getBattery;
+	return { getBattery: async () => {
+		const battery = await Reflect.apply(request, navigator, []);
+		if (isBatteryManager(battery)) return battery;
+		throw new TypeError("navigator.getBattery() resolved to an unexpected value.");
+	} };
+}
+function isBatteryManager(value) {
+	return typeof value === "object" && value !== null && "level" in value && "charging" in value && "addEventListener" in value;
+}
+//#endregion
+export { useBattery };

package/dist/breakpoints.d.mts

@@ -0,0 +1,82 @@
+import { UseMediaQueryOptions } from "./media-query.mjs";
+import { ComputedRef, Ref } from "vue";
+
+//#region src/breakpoints.d.ts
+/** Breakpoint width: pixels as a number, or a CSS length in `px`, `rem`, or `em`. */
+type BreakpointValue = number | `${number}px` | `${number}rem` | `${number}em`;
+/** Named breakpoint map. */
+type Breakpoints<Name extends string = string> = Readonly<Record<Name, BreakpointValue>>;
+/** Tailwind CSS default breakpoints. */
+declare const breakpointsTailwind: {
+  readonly sm: 640;
+  readonly md: 768;
+  readonly lg: 1024;
+  readonly xl: 1280;
+  readonly "2xl": 1536;
+};
+/** Bootstrap 5 default breakpoints. */
+declare const breakpointsBootstrapV5: {
+  readonly xs: 0;
+  readonly sm: 576;
+  readonly md: 768;
+  readonly lg: 992;
+  readonly xl: 1200;
+  readonly xxl: 1400;
+};
+/** Names reserved for the helper methods returned by {@link useBreakpoints}. */
+type ReservedBreakpointName = "greaterOrEqual" | "greater" | "smaller" | "smallerOrEqual" | "between" | "current" | "active";
+/** Options for {@link useBreakpoints}. */
+interface UseBreakpointsOptions extends Omit<UseMediaQueryOptions, "ssrValue"> {
+  /**
+   * Viewport width assumed during server rendering (and whenever no media
+   * capability exists). Queries are evaluated against it arithmetically, so
+   * the server output matches a client of that width.
+   *
+   * @default undefined (every query is `false` on the server)
+   */
+  readonly ssrWidth?: number;
+  /**
+   * Root font size used to convert `rem`/`em` values for `ssrWidth`.
+   *
+   * @default 16
+   */
+  readonly rootFontSize?: number;
+}
+/** Reactive breakpoint helpers returned by {@link useBreakpoints}. */
+type BreakpointsControls<Name extends string> = {
+  /** `true` when the viewport is at least this breakpoint (mobile-first). */
+readonly [Key in Name]: Readonly<Ref<boolean>> } & {
+  /** Viewport width ≥ breakpoint. */readonly greaterOrEqual: (name: Name) => Readonly<Ref<boolean>>; /** Viewport width > breakpoint. */
+  readonly greater: (name: Name) => Readonly<Ref<boolean>>; /** Viewport width < breakpoint. */
+  readonly smaller: (name: Name) => Readonly<Ref<boolean>>; /** Viewport width ≤ breakpoint. */
+  readonly smallerOrEqual: (name: Name) => Readonly<Ref<boolean>>; /** `lower` ≤ width < `upper`. */
+  readonly between: (lower: Name, upper: Name) => ComputedRef<boolean>; /** Every breakpoint currently matched (mobile-first), in ascending order. */
+  readonly current: ComputedRef<readonly Name[]>; /** Largest matched breakpoint, or `null` below the smallest one. */
+  readonly active: ComputedRef<Name | null>;
+};
+/**
+ * Reactive, typed breakpoint helpers built on media queries.
+ *
+ * Breakpoint names are inferred from the map, so typos are compile errors.
+ * `greater` and `smaller` use fractional offsets (`width > 767.98px`) so
+ * adjacent breakpoints never overlap. With `ssrWidth`, the server evaluates
+ * each query arithmetically for deterministic, hydration-stable output.
+ * Subscriptions are released with the owning reactive scope.
+ *
+ * @param breakpoints Named breakpoint map, e.g. {@link breakpointsTailwind}.
+ * @param options SSR width, font size, and media capability.
+ * @default options {}
+ * @returns Per-breakpoint refs plus comparison helpers.
+ */
+declare function useBreakpoints<const Name extends string>(breakpoints: Breakpoints<Name> & { readonly [Reserved in ReservedBreakpointName]?: never }, options?: UseBreakpointsOptions): BreakpointsControls<Name>;
+/**
+ * Convert a {@link BreakpointValue} to CSS pixels.
+ *
+ * @param value Number of pixels or a `px`/`rem`/`em` length.
+ * @param rootFontSize Pixels per `rem`/`em`.
+ * @default rootFontSize 16
+ * @returns Width in CSS pixels.
+ */
+declare function toPixels(value: BreakpointValue, rootFontSize?: number): number;
+//#endregion
+export { BreakpointValue, Breakpoints, BreakpointsControls, ReservedBreakpointName, UseBreakpointsOptions, breakpointsBootstrapV5, breakpointsTailwind, toPixels, useBreakpoints };