@xwadex/fesd-next 0.3.3 → 0.3.4-11

package/dist/components-DMsIAeFi.mjs

@@ -0,0 +1,975 @@
+import { Button, Carousel, CarouselPrevious, cn } from "./shadcns/index.mjs";
+import React, { createContext, memo, use, useCallback, useEffect, useEffectEvent, useLayoutEffect, useMemo, useRef, useState } from "react";
+import Cookies from "js-cookie";
+import { motionValue, useAnimate } from "motion/react";
+import { create } from "zustand";
+import Lenis from "lenis";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import useEmblaCarousel from "embla-carousel-react";
+import { ReactLenis, useLenis } from "lenis/react";
+import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures";
+import Autoplay from "embla-carousel-autoplay";
+import AutoScroll from "embla-carousel-auto-scroll";
+import AutoHeight from "embla-carousel-auto-height";
+import ClassNames from "embla-carousel-class-names";
+import Fade from "embla-carousel-fade";
+//#region src/hooks/useDebounce.tsx
+function useDebounce({ callback, dependency = [], delay = 500, active = true }) {
+	if (!active || !callback) return;
+	const timerRef = useRef(null);
+	useEffect(() => {
+		if (timerRef.current) clearTimeout(timerRef.current);
+		timerRef.current = setTimeout(callback, delay);
+		return () => {
+			if (timerRef.current) clearTimeout(timerRef.current);
+		};
+	}, [...dependency]);
+}
+//#endregion
+//#region src/hooks/useDebounceValue.tsx
+function useDebounceValue(value, delay = 500) {
+	const [debounceValue, setDebounceValue] = useState(value);
+	const timerRef = useRef(void 0);
+	useEffect(() => {
+		if (timerRef.current) clearTimeout(timerRef.current);
+		timerRef.current = setTimeout(() => setDebounceValue(value), delay);
+		return () => {
+			if (timerRef.current) clearTimeout(timerRef.current);
+		};
+	}, [value, delay]);
+	return debounceValue;
+}
+//#endregion
+//#region src/hooks/useCookies.tsx
+function useCookies() {
+	const setCookies = (name, value, days = 7) => {
+		Cookies.set(name, value, {
+			expires: days,
+			path: "/"
+		});
+	};
+	const getCookies = (name) => {
+		return Cookies.get(name) ?? null;
+	};
+	const updateCookies = (name, value, days = 7) => {
+		if (getCookies(name) !== null) setCookies(name, value, days);
+	};
+	const deleteCookies = (name) => {
+		Cookies.remove(name, { path: "/" });
+	};
+	return {
+		setCookies,
+		getCookies,
+		updateCookies,
+		deleteCookies
+	};
+}
+//#endregion
+//#region src/hooks/useDragResize.tsx
+function useDragResize({ active = true, direction = "horizontal", minWidth, maxWidth, minHeight, maxHeight, onInit, onResizeStart, onResizing, onResizeEnd }) {
+	const dragRef = useRef(null);
+	const resizeRef = useRef(null);
+	const [resize, setResize] = useState({
+		width: 0,
+		height: 0
+	});
+	const getResizeSizeValue = () => {
+		if (!resizeRef.current) return;
+		const { width: w, height: h } = resizeRef.current.style;
+		const width = Number(w.replace("px", "")) ?? "inherit";
+		Number(h.replace("px", ""));
+		return { width };
+	};
+	const setResizeValue = (clientX, clientY) => {
+		if (!resizeRef.current) return;
+		const rect = resizeRef.current.getBoundingClientRect();
+		const resizeWidth = clientX - rect.left;
+		const resizeHeight = clientY - rect.top;
+		if (direction == "horizontal" && minWidth && resizeWidth >= minWidth && maxWidth && resizeWidth <= maxWidth) {
+			resizeRef.current.style.width = resizeWidth + "px";
+			return {
+				width: resizeWidth,
+				height: void 0
+			};
+		}
+		if (direction == "vertical" && minHeight && resizeWidth >= minHeight && maxHeight && resizeWidth <= maxHeight) {
+			resizeRef.current.style.height = resizeHeight + "px";
+			return {
+				width: void 0,
+				height: resizeHeight
+			};
+		}
+	};
+	const onInitCallback = () => {
+		const resizeValue = getResizeSizeValue();
+		resizeValue && onInit?.(resizeValue);
+	};
+	const removeEventListeners = () => {
+		document.removeEventListener("mousemove", onMouseMove);
+		document.removeEventListener("mouseup", onMouseUp);
+	};
+	const onMouseMove = (e) => {
+		const resizeValue = setResizeValue(e.clientX, e.clientY);
+		if (!resizeValue) return;
+		setResize(() => ({ ...resizeValue }));
+		onResizing?.(resizeValue);
+	};
+	const onMouseUp = () => {
+		const resizeValue = getResizeSizeValue();
+		resizeValue && onResizeEnd?.(resizeValue);
+		removeEventListeners();
+	};
+	const onDragRefMouseDown = (e) => {
+		e.preventDefault();
+		const resizeValue = getResizeSizeValue();
+		resizeValue && onResizeStart?.(resizeValue);
+		document.addEventListener("mousemove", onMouseMove);
+		document.addEventListener("mouseup", onMouseUp);
+	};
+	useEffect(() => {
+		if (active && dragRef.current && resizeRef.current) {
+			dragRef.current.onmousedown = onDragRefMouseDown;
+			onInit && onInitCallback();
+		}
+		return () => {
+			if (!dragRef?.current) return;
+			dragRef.current.onmousedown = null;
+			removeEventListeners();
+		};
+	}, [active]);
+	return {
+		dragRef,
+		resizeRef,
+		resize
+	};
+}
+//#endregion
+//#region src/hooks/useAsyncFetcher.tsx
+function useAsyncFetcher() {
+	const [isPending, setPending] = useState(false);
+	const controllerRef = useRef(null);
+	const startFetch = useCallback(async ({ url, options }) => {
+		if (isPending || !url) return;
+		const controller = new AbortController();
+		controllerRef.current = controller;
+		setPending(true);
+		try {
+			return await (await fetch(url, {
+				signal: controller.signal,
+				...options
+			})).json();
+		} catch (error) {
+			console.error("useAsyncFetche startFetch error:", error);
+			return {
+				status: false,
+				error
+			};
+		} finally {
+			setPending(false);
+		}
+	}, [isPending]);
+	const cancelFetch = () => {
+		controllerRef.current?.abort();
+		setPending(false);
+	};
+	useEffect(() => {
+		return () => controllerRef.current?.abort();
+	}, []);
+	return {
+		pending: isPending,
+		cancel: cancelFetch,
+		fetcher: startFetch
+	};
+}
+//#endregion
+//#region src/hooks/useMounted.tsx
+function useMounted() {
+	const [isMounded, setMounded] = useState(false);
+	useEffect(() => {
+		setMounded(true);
+	}, []);
+	return { isMounded };
+}
+//#endregion
+//#region src/hooks/useEffectOne.tsx
+function useEffectOne(callback) {
+	const callbackRef = useRef(callback);
+	callbackRef.current = callback;
+	useEffect(() => {
+		callbackRef.current?.();
+		return () => {
+			callbackRef.current = null;
+		};
+	}, []);
+}
+//#endregion
+//#region src/hooks/useEffectLeave.tsx
+function useEffectLeave(callback) {
+	const callbackRef = useRef(callback);
+	callbackRef.current = callback;
+	useEffect(() => {
+		return () => {
+			callbackRef.current?.();
+			callbackRef.current = null;
+		};
+	}, []);
+}
+//#endregion
+//#region src/hooks/useAnchors.tsx
+const ANCHOR_ATTRIBUTE = "data-anchor";
+const OFFSETER_ATTRIBUTE = "data-anchor-offseter";
+function useAnchors() {
+	const [_, animate] = useAnimate();
+	const controllerRef = useRef(/* @__PURE__ */ new Map());
+	const scrollAnimations = useCallback(({ controllerKey, containerDom, anchorScrollValue, containerScrollValue, direction = "y", duration = 1, delay = 0, ease = [
+		0,
+		1,
+		.5,
+		.99
+	], onScroll: onPlay, onScrolled, onScrolling, ...props }) => {
+		if (direction !== "y" && direction !== "x") {
+			console.error(`Scroll Direction isn't 'x' or 'y' `);
+			return;
+		}
+		const { left: scrollLeft, top: scrollTop } = containerScrollValue;
+		const { left: anchorLeft, top: anchorTop } = anchorScrollValue;
+		const isScrollX = direction === "x";
+		const isScrollY = direction === "y";
+		const startValue = isScrollX ? scrollLeft : scrollTop;
+		const endValue = isScrollX ? anchorLeft : anchorTop;
+		if (startValue == endValue) {
+			controllerRef.current.delete(controllerKey);
+			return;
+		}
+		const motionStartValue = motionValue(startValue);
+		const onUpdate = (value) => {
+			const left = isScrollX ? value : void 0;
+			const top = isScrollY ? value : void 0;
+			containerDom.scrollTo({
+				left,
+				top
+			});
+			onScrolling?.(value);
+		};
+		const onComplete = () => {
+			controllerRef.current.delete(controllerKey);
+			onScrolled?.();
+		};
+		const options = {
+			duration,
+			ease,
+			delay,
+			onPlay,
+			onUpdate,
+			onComplete,
+			...props
+		};
+		controllerRef.current.set(controllerKey, animate(motionStartValue, endValue, options));
+	}, []);
+	const scrollToAnchor = useCallback((anchorOptions) => {
+		const { anchor: anchorName, container: containerName, offseters, align, offset = 0, direction = "y", ...options } = anchorOptions;
+		const anchorsStores = getAnchorsStores();
+		const scrollContainersStores = getScrollContainerStores();
+		const isScrolltoAnchor = anchorName !== "#";
+		const isScrollContainer = containerName && containerName !== "window";
+		const controllerKey = containerName ?? "window";
+		if (controllerRef.current.has(controllerKey)) {
+			controllerRef.current.get(controllerKey)?.stop();
+			controllerRef.current.delete(controllerKey);
+		}
+		const anchorDom = isScrolltoAnchor ? anchorsStores.anchors.get(anchorName) : void 0;
+		if (isScrolltoAnchor && !(anchorDom instanceof HTMLElement)) return;
+		const containerDom = isScrollContainer ? scrollContainersStores.containers.get(containerName) : window;
+		if (!containerDom) return;
+		const getOffseterDomClient = (offseters) => {
+			const { clientWidth, clientHeight } = anchorsStores.offseters.get(offseters) || {};
+			return {
+				width: clientWidth ?? 0,
+				height: clientHeight ?? 0
+			};
+		};
+		const offsets = Array.isArray(offseters) ? offseters.reduce((init, offseter) => {
+			const { width, height } = getOffseterDomClient(offseter);
+			return {
+				width: (init.width ?? 0) + width,
+				height: (init.height ?? 0) + height
+			};
+		}, {}) : typeof offseters == "string" ? getOffseterDomClient(offseters) : {
+			width: 0,
+			height: 0
+		};
+		const offsetValue = {
+			width: direction === "x" ? offsets.width + offset : 0,
+			height: direction === "y" ? offsets.height + offset : 0
+		};
+		if (containerDom == window && window.document.documentElement.classList.contains("lenis") || containerDom instanceof Lenis) {
+			const lenis = isScrollContainer ? containerDom : getRootLenis()?.root;
+			if (!lenis) return;
+			const directionOffset = direction === "x" ? offsetValue.width + offset : offsetValue.height + offset;
+			lenis.scrollTo(anchorDom ?? 0, {
+				offset: directionOffset * -1,
+				onStart: (lenis) => options?.onScroll?.(lenis),
+				onComplete: (lenis) => options?.onScrolled?.(lenis)
+			});
+			return;
+		}
+		const containerScrollValue = {
+			top: Math.round(isScrollContainer ? containerDom.scrollTop : containerDom.pageYOffset),
+			left: Math.round(isScrollContainer ? containerDom.scrollLeft : pageXOffset)
+		};
+		const containerRect = isScrollContainer ? containerDom.getBoundingClientRect() : {
+			top: 0,
+			left: 0
+		};
+		const containerOffsetValue = {
+			left: containerScrollValue.left - (isScrollContainer ? containerRect.left : 0),
+			top: containerScrollValue.top - (isScrollContainer ? containerRect.top : 0)
+		};
+		const anchorRect = anchorDom ? anchorDom.getBoundingClientRect() : {
+			left: 0,
+			top: 0
+		};
+		scrollAnimations({
+			controllerKey,
+			containerDom,
+			containerScrollValue,
+			anchorScrollValue: {
+				left: isScrolltoAnchor ? Math.round(anchorRect.left + containerOffsetValue.left - offsetValue.width) : offsetValue.width,
+				top: isScrolltoAnchor ? Math.round(anchorRect.top + containerOffsetValue.top - offsetValue.height) : offsetValue.height
+			},
+			direction,
+			...options
+		});
+	}, []);
+	return useMemo(() => ({
+		registerAnchors,
+		registerOffseters,
+		setStores: setAnchorsStore,
+		getStores: getAnchorsStores,
+		scrollToAnchor
+	}), [scrollToAnchor]);
+}
+function useRegistration({ key, name }) {
+	const ref = useRef(null);
+	const attribute = key == "anchors" ? ANCHOR_ATTRIBUTE : OFFSETER_ATTRIBUTE;
+	useLayoutEffect(() => {
+		setAnchorsStore({
+			key,
+			action: "add",
+			node: ref.current,
+			name
+		});
+		return () => {
+			setAnchorsStore({
+				key,
+				action: "remove",
+				node: ref.current,
+				name
+			});
+		};
+	}, []);
+	return {
+		ref,
+		[attribute]: name
+	};
+}
+function registerAnchors(name) {
+	return useRegistration({
+		key: "anchors",
+		name
+	});
+}
+function registerOffseters(name) {
+	return useRegistration({
+		key: "offseters",
+		name
+	});
+}
+const useAnchorsStores = create()(() => ({
+	anchors: /* @__PURE__ */ new Map(),
+	offseters: /* @__PURE__ */ new Map()
+}));
+const getAnchorsStores = () => useAnchorsStores.getState();
+const setAnchorsStore = (options) => {
+	const { key, action, name, node } = options;
+	useAnchorsStores.setState((stores) => {
+		switch (key) {
+			case "anchors":
+				const anchorDom = stores.anchors?.get(name);
+				if (action == "add" && node instanceof HTMLElement) {
+					if (anchorDom == node) return stores;
+					stores.anchors?.set(name, node);
+				} else if (action == "remove" && anchorDom) stores.anchors?.delete(name);
+				return { anchors: stores.anchors };
+			case "offseters":
+				const offseterDom = stores.offseters?.get(name);
+				if (action == "add" && node instanceof HTMLElement) {
+					if (offseterDom == node) return stores;
+					stores.offseters?.set(name, node);
+				} else if (action == "remove" && offseterDom) stores.offseters?.delete(name);
+				return { offseters: stores.offseters };
+			default: return stores;
+		}
+	});
+};
+//#endregion
+//#region src/hooks/useHash.tsx
+function useHash() {
+	const [hash, setHash] = useState("");
+	const updateHash = () => setHash(window.location.hash);
+	const hashchangeEvent = (e) => {
+		e.preventDefault?.();
+		updateHash();
+	};
+	useEffect(() => {
+		updateHash();
+		window.addEventListener("hashchange", hashchangeEvent);
+		return () => {
+			window.removeEventListener("hashchange", hashchangeEvent);
+		};
+	}, []);
+	return hash;
+}
+//#endregion
+//#region src/components/anchors/anchors.tsx
+const AnchorTarget = ({ name, ...props }) => {
+	const { registerAnchors } = useAnchors();
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		...registerAnchors(name)
+	});
+};
+const AnchorOffseter = ({ name, ...props }) => {
+	const { registerOffseters } = useAnchors();
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		...registerOffseters(name)
+	});
+};
+const AnchorTrigger = ({ children, className, ...options }) => {
+	const { scrollToAnchor } = useAnchors();
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(className),
+		onClick: () => scrollToAnchor(options),
+		children
+	});
+};
+const Anchors = {
+	Trigger: AnchorTrigger,
+	Target: AnchorTarget,
+	Offseter: AnchorOffseter
+};
+//#endregion
+//#region src/components/scroll-containers/lenis-scroll.tsx
+const LenisScroll = memo((props) => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [props?.root == true ? /* @__PURE__ */ jsx(LenisRootScroll, { ...props }) : /* @__PURE__ */ jsx(LenisContainerScroll, { ...props }), "	"] });
+});
+const LenisRootScroll = memo(({ root, options }) => {
+	const lenis = useLenis();
+	const lenisRef = useRef(null);
+	const registerRootLenis = useEffectEvent(() => {
+		if (!root == true || !lenis) return;
+		setRootLenis(lenis);
+	});
+	useEffect(() => {
+		registerRootLenis();
+	}, [lenis]);
+	return /* @__PURE__ */ jsx(ReactLenis, {
+		ref: lenisRef,
+		root,
+		options: {
+			autoRaf: true,
+			lerp: 5e-4,
+			duration: 1.5,
+			smoothWheel: true,
+			...options
+		}
+	});
+});
+const LenisContainerScroll = memo(({ name, className, children, options, ...restProps }) => {
+	const [containerRef, setContainerRef] = useState();
+	const wrapperRef = useRef(null);
+	const contentRef = useRef(null);
+	const initLenis = useEffectEvent(() => {
+		if (!wrapperRef.current || !contentRef.current || !name) return;
+		const lenis = new Lenis({
+			wrapper: wrapperRef.current,
+			content: contentRef.current,
+			autoRaf: true,
+			...options
+		});
+		setContainerRef(contentRef);
+		setScrollContainerStore({
+			name,
+			action: "add",
+			node: lenis
+		});
+		return () => {
+			setScrollContainerStore({
+				name,
+				action: "remove"
+			});
+			lenis?.destroy?.();
+		};
+	});
+	useLayoutEffect(() => {
+		return initLenis();
+	}, [name, options]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: wrapperRef,
+		"data-lenis-scroll": name,
+		className: cn("group overflow-hidden", className),
+		...restProps,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: contentRef,
+			className: cn("h-full", "relative", "will-change-transform overscroll-contain"),
+			children: /* @__PURE__ */ jsx(ScrollContainerContext, {
+				value: { containerRef },
+				children
+			})
+		})
+	});
+});
+const useLenisStores = create()(() => ({ root: null }));
+const setRootLenis = (lenis) => useLenisStores.setState(() => {
+	return { root: lenis };
+});
+const getRootLenis = () => useLenisStores.getState();
+//#endregion
+//#region src/components/scroll-containers/scroll-containers.tsx
+const ScrollContainer = ({ name, lenis = false, ...props }) => {
+	return /* @__PURE__ */ jsx(Fragment, { children: lenis ? /* @__PURE__ */ jsx(LenisScroll, {
+		name,
+		...props
+	}) : /* @__PURE__ */ jsx(NativeScroll, {
+		name,
+		...props
+	}) });
+};
+const ScrollContainerContext = createContext(null);
+const useScrollContainerContext = () => {
+	const context = use(ScrollContainerContext);
+	if (!context) throw new Error("useScrollContainerContext must be used inside ScrollContainerProvider");
+	return context;
+};
+const useScrollContainersStores = create()(() => ({ containers: /* @__PURE__ */ new Map() }));
+const getScrollContainer = (name) => {
+	return useScrollContainersStores.getState().containers?.get(name);
+};
+const getScrollContainerStores = () => useScrollContainersStores.getState();
+const setScrollContainerStore = (options) => {
+	const { action, name, node } = options;
+	useScrollContainersStores.setState((stores) => {
+		const containerDom = stores.containers?.get(name);
+		const isContainerNode = node instanceof Lenis || node instanceof HTMLDivElement;
+		if (action == "add" && isContainerNode) {
+			if (containerDom == node) return stores;
+			stores.containers?.set(name, node);
+		} else if (action == "remove" && containerDom) stores.containers?.delete(name);
+		return { containers: stores.containers };
+	});
+};
+//#endregion
+//#region src/components/scroll-containers/native-scroll.tsx
+const NativeScroll = memo(({ tag: Component = "div", name, className, ...restProps }) => {
+	const componentRef = useRef(null);
+	const [containerRef, setContainerRef] = useState();
+	const nativeEffect = useEffectEvent(() => {
+		if (!componentRef.current) return;
+		setContainerRef(componentRef);
+		setScrollContainerStore({
+			name,
+			action: "add",
+			node: componentRef.current
+		});
+		return () => {
+			setScrollContainerStore({
+				name,
+				action: "remove"
+			});
+		};
+	});
+	useEffect(() => {
+		return nativeEffect();
+	}, [componentRef?.current]);
+	return /* @__PURE__ */ jsx(ScrollContainerContext, {
+		value: { containerRef },
+		children: /* @__PURE__ */ jsx(Component, {
+			ref: componentRef,
+			"data-native-scroll": name,
+			className: cn("overflow-auto", "will-change-transform", className),
+			...restProps
+		})
+	});
+});
+//#endregion
+//#region src/components/embla-carousels/embla-carousels-hooks.tsx
+function emblaCarouselsHooks({ options, autoplay, autoScroll, classNames, autoHeight, fade, wheel, setApi }) {
+	const orientation = options?.axis ?? "x";
+	const [emblaRef, emblaApi] = useEmblaCarousel(options, useMemo(() => [
+		autoplay && Autoplay(typeof autoplay == "boolean" ? void 0 : autoplay),
+		autoScroll && AutoScroll(typeof autoScroll == "boolean" ? void 0 : autoScroll),
+		autoHeight && AutoHeight(typeof autoHeight == "boolean" ? void 0 : autoHeight),
+		classNames && ClassNames(typeof classNames == "boolean" ? void 0 : classNames),
+		fade && Fade(typeof fade == "boolean" ? void 0 : fade),
+		wheel && WheelGesturesPlugin(typeof wheel == "boolean" ? void 0 : wheel)
+	].filter((plugin) => plugin), [
+		autoplay,
+		autoScroll,
+		classNames,
+		fade,
+		wheel,
+		autoHeight
+	]));
+	const [currentIndex, setCurrentIndex] = useState(0);
+	const [isScrollPrev, setIsScrollPrev] = useState(false);
+	const [isScrollNext, setIsScrollNext] = useState(false);
+	const scrollPrev = useCallback(() => {
+		emblaApi?.scrollPrev();
+	}, [emblaApi]);
+	const scrollNext = useCallback(() => {
+		emblaApi?.scrollNext();
+	}, [emblaApi]);
+	const onKeyDownCapture = useCallback((event) => {
+		console.log("key...");
+		if (event.key === "ArrowLeft") {
+			event.preventDefault();
+			scrollPrev();
+		} else if (event.key === "ArrowRight") {
+			event.preventDefault();
+			scrollNext();
+		}
+	}, [scrollPrev, scrollNext]);
+	const onSelect = useCallback((api) => {
+		if (!api) return;
+		setCurrentIndex(api?.selectedScrollSnap());
+		setIsScrollPrev(api.canScrollPrev());
+		setIsScrollNext(api.canScrollNext());
+	}, []);
+	const initalEffect = useEffectEvent(() => {
+		if (!emblaApi || !setApi) return;
+		setApi?.(emblaApi);
+		onSelect(emblaApi);
+		emblaApi.on("reInit", onSelect);
+		emblaApi.on("select", onSelect);
+		return () => {
+			emblaApi?.off("select", onSelect);
+		};
+	});
+	useEffect(() => {
+		const events = initalEffect();
+		return () => {
+			events?.();
+		};
+	}, [emblaApi]);
+	return {
+		emblaRef,
+		emblaApi,
+		orientation,
+		currentIndex,
+		isScrollPrev,
+		isScrollNext,
+		scrollPrev,
+		scrollNext,
+		onKeyDownCapture
+	};
+}
+//#endregion
+//#region src/components/embla-carousels/embla-carousels.tsx
+const CarouselsContext = createContext(null);
+const useCarouselsContext = () => {
+	const context = use(CarouselsContext);
+	if (!context) throw new Error("useCarousel must be used within a <Carousel />");
+	return context;
+};
+const EmblaCarouselsRoots = memo(({ children, className, setApi, options, autoplay, autoScroll, classNames, autoHeight, fade, wheel, ...props }) => {
+	const { emblaRef, emblaApi, orientation, currentIndex, isScrollPrev, isScrollNext, scrollPrev, scrollNext, onKeyDownCapture } = emblaCarouselsHooks({
+		setApi,
+		options,
+		autoplay,
+		autoScroll,
+		classNames,
+		autoHeight,
+		fade,
+		wheel
+	});
+	return /* @__PURE__ */ jsx(CarouselsContext, {
+		value: useMemo(() => ({
+			emblaRef,
+			emblaApi,
+			orientation,
+			currentIndex,
+			isScrollPrev,
+			isScrollNext,
+			scrollPrev,
+			scrollNext
+		}), [
+			emblaRef,
+			emblaApi,
+			orientation,
+			currentIndex,
+			isScrollPrev,
+			isScrollNext,
+			scrollPrev,
+			scrollNext
+		]),
+		children: /* @__PURE__ */ jsx("div", {
+			"data-component": "embla-carousels",
+			onKeyDownCapture,
+			className: cn("relative overflow-hidden", className),
+			"aria-roledescription": "embla-carousels",
+			role: "region",
+			...props,
+			children
+		})
+	});
+});
+const EmblaCarouselsContents = memo(({ className, ...props }) => {
+	const { emblaRef, orientation } = useCarouselsContext();
+	return /* @__PURE__ */ jsx("div", {
+		ref: emblaRef,
+		className: "overflow-hidden",
+		"data-component": "embla-carousels-contents",
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("flex", orientation === "x" ? "flex-row" : "flex-col", className),
+			...props
+		})
+	});
+});
+const EmblaCarouselsSlides = memo(({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-roledescription": "slide",
+		"data-component": "embla-carousels-slides",
+		className: cn("min-w-0 shrink-0 grow-0 basis-full", className),
+		...props
+	});
+});
+const EmblaCarousels = {
+	Roots: EmblaCarouselsRoots,
+	Contents: EmblaCarouselsContents,
+	Slides: EmblaCarouselsSlides
+};
+//#endregion
+//#region src/components/emblas/embla-context.tsx
+const CarouselContext = createContext(null);
+const CarouselContextProvider = (props) => {
+	return /* @__PURE__ */ jsx(CarouselContext, { ...props });
+};
+const useCarouselContext = () => {
+	const context = use(CarouselContext);
+	if (!context) throw new Error("useCMSData must be used inside CMSProvider");
+	return context;
+};
+//#endregion
+//#region src/components/emblas/embla.tsx
+const Embla = ({ children, className, options, datas, autoplayEnabled = true, autoplayOptions, setApi, setMethods, setRef, style, controls, onScrolled }) => {
+	const { loop, duration = 40 } = options || {};
+	const autoplaySetting = useMemo(() => {
+		if (!autoplayEnabled) return;
+		return [Autoplay({
+			playOnInit: true,
+			delay: 5e3,
+			stopOnInteraction: false,
+			...autoplayOptions
+		})];
+	}, [autoplayEnabled, autoplayOptions]);
+	const [emblaRef, emblaApi] = useEmblaCarousel({
+		...options,
+		loop,
+		duration
+	}, autoplaySetting);
+	const [selectIndex, setSelectIndex] = useState(0);
+	const [scrollSnaps, setScrollSnaps] = useState([]);
+	const nextScroll = useCallback(() => {
+		if (!emblaApi) return;
+		const { canScrollNext, scrollNext } = emblaApi;
+		canScrollNext() && scrollNext() && autoPlayReset();
+	}, [emblaApi]);
+	const prevScroll = useCallback(() => {
+		if (!emblaApi) return;
+		const { canScrollPrev, scrollPrev } = emblaApi;
+		canScrollPrev() && scrollPrev() && autoPlayReset();
+	}, [emblaApi]);
+	const scrollToIndex = useCallback((index) => {
+		if (!emblaApi || typeof index !== "number") return;
+		emblaApi.scrollTo(index);
+	}, [emblaApi]);
+	const autoPlayReset = useCallback(() => {
+		if (!emblaApi) return;
+		const autoplay = emblaApi?.plugins()?.autoplay;
+		autoplay && autoplay.reset();
+	}, [emblaApi]);
+	const autoPlayPlay = useCallback(() => {
+		if (!emblaApi) return;
+		if (!emblaApi.canScrollNext()) return;
+		const autoplay = emblaApi?.plugins()?.autoplay;
+		autoplay && autoplay.play();
+	}, [emblaApi]);
+	const autoPlayStop = useCallback(() => {
+		if (!emblaApi) return;
+		const autoplay = emblaApi?.plugins()?.autoplay;
+		autoplay && autoplay.stop();
+	}, [emblaApi]);
+	const contextValue = useMemo(() => ({
+		datas,
+		emblaRef,
+		emblaApi,
+		selectIndex,
+		scrollSnaps,
+		nextScroll,
+		prevScroll,
+		scrollToIndex,
+		autoPlayReset,
+		autoPlayStop,
+		autoPlayPlay
+	}), [
+		datas,
+		emblaRef,
+		emblaApi,
+		selectIndex,
+		scrollSnaps,
+		nextScroll,
+		prevScroll,
+		scrollToIndex,
+		autoPlayReset,
+		autoPlayStop,
+		autoPlayPlay
+	]);
+	const onInit = useCallback((emblaApi) => {
+		setScrollSnaps(emblaApi.scrollSnapList());
+	}, []);
+	const onSelectEvent = (emblaApi) => {
+		emblaApi.on("select", () => {
+			onScrolled?.(emblaApi.selectedScrollSnap());
+			setSelectIndex(emblaApi.selectedScrollSnap());
+		});
+	};
+	useEffect(() => {
+		if (!emblaApi) return;
+		setRef?.(emblaRef);
+		setApi?.(emblaApi);
+		setMethods?.({});
+		onInit(emblaApi);
+		onSelectEvent(emblaApi);
+	}, [emblaApi]);
+	return /* @__PURE__ */ jsx(CarouselContextProvider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-component": "embla-root",
+			className: cn("relative w-full"),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: cn("overflow-hidden", "w-full", className),
+				ref: emblaRef,
+				style,
+				children
+			}), Array.isArray(controls) ? controls.map((ctrl, i) => /* @__PURE__ */ jsx(React.Fragment, { children: ctrl }, i)) : controls]
+		})
+	});
+};
+Embla.displayName = "Embla";
+//#endregion
+//#region src/components/emblas/embla-container.tsx
+const EmblaContainer = ({ slide: SlideComponent, className, children, style, ...props }) => {
+	const { datas, emblaApi } = useCarouselContext();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-component": "embla-container",
+		className: cn("flex", className, !emblaApi?.canScrollNext() && !emblaApi?.canScrollPrev() && ["transform-[unset!important]"]),
+		style: { ...style },
+		children: [SlideComponent && datas?.map((item, index) => /* @__PURE__ */ jsx(SlideComponent, {
+			...item,
+			index,
+			...props
+		}, item?.multipurpose?.key ?? item?.id ?? index)), children]
+	});
+};
+EmblaContainer.displayName = "EmblaContainer";
+//#endregion
+//#region src/components/emblas/emblas-pagination.tsx
+const EmblaPagination = ({ color = "black", align, className, maxDots = 5, dynamic = true, swiperNumber = true }) => {
+	const { selectIndex, scrollToIndex, scrollSnaps, autoPlayReset, emblaApi } = useCarouselContext();
+	const total = scrollSnaps?.length ?? 0;
+	const active = Math.max(0, Math.min(selectIndex ?? 0, Math.max(0, total - 1)));
+	const paginationNumber = `${Number(active + 1) < 10 ? "0" + Number(active + 1) : Number(active + 1)}`;
+	const isWhite = color === "white";
+	const clickEvent = (index) => {
+		scrollToIndex(index);
+		autoPlayReset();
+	};
+	const isSelected = (index) => {
+		return index === selectIndex;
+	};
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	const [slideCount, setSlideCount] = useState(0);
+	useEffect(() => {
+		if (!emblaApi || !dynamic) return;
+		const update = () => {
+			setSelectedIndex(emblaApi.selectedScrollSnap());
+			setSlideCount(emblaApi.scrollSnapList().length);
+		};
+		emblaApi.on("select", update);
+		emblaApi.on("reInit", update);
+		update();
+		return () => {
+			emblaApi.off("select", update);
+			emblaApi.off("reInit", update);
+		};
+	}, [emblaApi, dynamic]);
+	const getVisibleBullets = () => {
+		const total = slideCount ?? 0;
+		if (total === 0) return [];
+		const limit = Math.max(1, Number(maxDots));
+		const windowSize = Math.min(total, limit);
+		const left = Math.floor((windowSize - 1) / 2);
+		const right = windowSize - left - 1;
+		let start = selectedIndex - left;
+		let end = selectedIndex + right;
+		if (start < 0) {
+			end = Math.min(end - start, total - 1);
+			start = 0;
+		}
+		if (end > total - 1) {
+			start = Math.max(0, start - (end - (total - 1)));
+			end = total - 1;
+		}
+		return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+	};
+	const visibleRange = getVisibleBullets();
+	const dots = dynamic ? visibleRange : scrollSnaps?.map((_, i) => i) ?? [];
+	const swiperSnap = [
+		"text-[16px]",
+		"font-semibold",
+		" leading-[1.4]"
+	];
+	const paginationColorStyle2 = { "--pagination-color": {
+		"black": "#000",
+		"white": "#fff"
+	}[color] || `${color}` };
+	return /* @__PURE__ */ jsxs("div", {
+		"data-compoents": "emblas-pagination",
+		className: cn("flex", "items-center", "gap-7.25", align === "center" && ["justify-center"], className),
+		style: paginationColorStyle2,
+		children: [swiperNumber && /* @__PURE__ */ jsx("div", {
+			className: cn(swiperSnap, "relative", "after:absolute", "after:top-1/2", "after:right-[-15px]", "after:-translate-y-1/2", "after:block", "after:bg-(--pagination-color)", "after:w-0.5", "after:h-3.75", "after:opacity-20", isWhite && ["after:bg-white"]),
+			children: paginationNumber
+		}), /* @__PURE__ */ jsx("div", {
+			className: cn("flex", "flex-wrap", "justify-end", "items-center", "gap-y-0", "gap-x-2.5", "**:data-[component='emblas-pagination-dots']:bg-(--pagination-color)", isWhite && ["**:data-[component='emblas-pagination-dots']:bg-white"]),
+			children: dots.map((index) => /* @__PURE__ */ jsx("div", {
+				"data-component": "emblas-pagination-dots",
+				onClick: () => clickEvent(index),
+				className: cn("w-1.5", "h-1.5", "rounded-full", "cursor-pointer", "opacity-30", isSelected(index) && "opacity-100")
+			}, index))
+		})]
+	});
+};
+EmblaPagination.displayName = "EmblaPagination";
+//#endregion
+//#region src/components/tests/tests.tsx
+const Tests = () => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Carousel, { children: /* @__PURE__ */ jsx(CarouselPrevious, {}) }), /* @__PURE__ */ jsx(Button, { children: "test123133232" })] });
+};
+Tests.displayName = "Tests";
+//#endregion
+export { Anchors as A, useEffectOne as B, LenisScroll as C, AnchorOffseter as D, useLenisStores as E, setAnchorsStore as F, useDebounceValue as G, useAsyncFetcher as H, useAnchors as I, useDebounce as K, useAnchorsStores as L, getAnchorsStores as M, registerAnchors as N, AnchorTarget as O, registerOffseters as P, useRegistration as R, LenisRootScroll as S, setRootLenis as T, useDragResize as U, useMounted as V, useCookies as W, getScrollContainerStores as _, CarouselContextProvider as a, useScrollContainersStores as b, EmblaCarouselsContents as c, useCarouselsContext as d, emblaCarouselsHooks as f, getScrollContainer as g, ScrollContainerContext as h, Embla as i, useHash as j, AnchorTrigger as k, EmblaCarouselsRoots as l, ScrollContainer as m, EmblaPagination as n, useCarouselContext as o, NativeScroll as p, EmblaContainer as r, EmblaCarousels as s, Tests as t, EmblaCarouselsSlides as u, setScrollContainerStore as v, getRootLenis as w, LenisContainerScroll as x, useScrollContainerContext as y, useEffectLeave as z };
+
+//# sourceMappingURL=components-DMsIAeFi.mjs.map