@scrolia/vanilla/dist/components/thumb/x.js

A headless scrollbar component

const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.js');
const require_contexts_scrollcore = require('../../contexts/scrollcore.js');
const require_hooks_props = require('../../hooks/props.js');
const require_hooks_thumb = require('../../hooks/thumb.js');
const atomico = require_rolldown_runtime.__toESM(require("atomico"));
const atomico_jsx_runtime = require_rolldown_runtime.__toESM(require("atomico/jsx-runtime"));

const _ThumbX = () => {
	const elRef = atomico.useHost();
	const { options: { disabled }, x: { setHvThumb, scrollbarLength, scrollbarOffset } } = require_contexts_scrollcore.useScrollCore();
	atomico.useEffect(() => {
		setHvThumb(true);
	});
	const { onPointerDown } = require_hooks_thumb.useThumbXHandler();
	atomico.useEffect(() => {
		elRef.current.addEventListener("pointerdown", onPointerDown);
		return () => {
			elRef.current.removeEventListener("pointerdown", onPointerDown);
		};
	}, [onPointerDown]);
	require_hooks_props.useComponentPropsSetter("thumbX");
	atomico.useEffect(() => {
		if (disabled) return void 0;
		const length = Number.isNaN(scrollbarLength) ? 0 : scrollbarLength;
		const offset = Number.isNaN(scrollbarOffset) ? 0 : scrollbarOffset;
		elRef.current.style.width = `${length}px`;
		elRef.current.style.left = `${offset}px`;
	}, [
		disabled,
		scrollbarLength,
		scrollbarOffset
	]);
	return /* @__PURE__ */ (0, atomico_jsx_runtime.jsx)("host", {
		shadowDom: true,
		children: /* @__PURE__ */ (0, atomico_jsx_runtime.jsx)("slot", {})
	});
};
const ThumbX = atomico.c(_ThumbX);

exports.ThumbX = ThumbX;
//# sourceMappingURL=x.js.map