xiod-ui 1.0.0

package/dist/components/card.js

@@ -0,0 +1,139 @@
+"use client";
+import { cn } from "cn";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/card.tsx
+function Card({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("relative flex flex-col rounded-2xl border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", className),
+		"data-slot": "card"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function CardFrame({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("[--clip-top:-1rem] [--clip-bottom:-1rem] *:data-[slot=card]:first:[--clip-top:1px] *:data-[slot=card]:last:[--clip-bottom:1px] flex flex-col relative rounded-2xl border bg-card before:bg-muted/72 not-dark:bg-clip-padding text-card-foreground shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] *:data-[slot=card]:-m-px *:not-last:data-[slot=card]:rounded-b-xl *:not-last:data-[slot=card]:before:rounded-b-[calc(var(--radius-xl)-1px)] *:not-first:data-[slot=card]:rounded-t-xl *:not-first:data-[slot=card]:before:rounded-t-[calc(var(--radius-xl)-1px)] *:data-[slot=card]:[clip-path:inset(var(--clip-top)_1px_var(--clip-bottom)_1px_round_calc(var(--radius-2xl)-1px))] *:data-[slot=card]:shadow-none *:data-[slot=card]:before:hidden *:data-[slot=card]:bg-clip-padding", className),
+		"data-slot": "card-frame"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function CardFrameHeader({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("relative flex flex-col px-6 py-4", className),
+		"data-slot": "card-frame-header"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function CardFrameTitle({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("font-semibold text-sm", className),
+		"data-slot": "card-frame-title"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function CardFrameDescription({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("text-muted-foreground text-sm", className),
+		"data-slot": "card-frame-description"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function CardFrameFooter({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("px-6 py-4", className),
+		"data-slot": "card-frame-footer"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function CardHeader({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pb-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]", className),
+		"data-slot": "card-header"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function CardTitle({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("font-semibold text-lg leading-none", className),
+		"data-slot": "card-title"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function CardDescription({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("text-muted-foreground text-sm", className),
+		"data-slot": "card-description"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function CardAction({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end inline-flex", className),
+		"data-slot": "card-action"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function CardPanel({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("flex-1 p-6 in-[[data-slot=card]:has(>[data-slot=card-header]:not(.border-b))]:pt-0 in-[[data-slot=card]:has(>[data-slot=card-footer]:not(.border-t))]:pb-0", className),
+		"data-slot": "card-panel"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function CardFooter({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("flex items-center p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pt-4", className),
+		"data-slot": "card-footer"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+//#endregion
+export { Card, CardAction, CardPanel as CardContent, CardPanel, CardDescription, CardFooter, CardFrame, CardFrameDescription, CardFrameFooter, CardFrameHeader, CardFrameTitle, CardHeader, CardTitle };

package/dist/components/carousel.d.ts

@@ -0,0 +1,59 @@
+import { Button } from "./button.js";
+import * as React$1 from "react";
+//#region src/components/carousel.d.ts
+export type CarouselApi = {
+  scrollPrev: (jump?: boolean) => void;
+  scrollNext: (jump?: boolean) => void;
+  scrollTo: (index: number, jump?: boolean) => void;
+  canScrollPrev: () => boolean;
+  canScrollNext: () => boolean;
+  selectedScrollSnap: () => number;
+  scrollSnapList: () => number[];
+  on: (event: string, cb: (api: CarouselApi) => void) => void;
+  off: (event: string, cb: (api: CarouselApi) => void) => void;
+  reInit: (options?: CarouselOptions) => void;
+  destroy: () => void;
+};
+export type CarouselOptions = {
+  align?: "start" | "center" | "end";
+  axis?: "x" | "y";
+  containScroll?: boolean;
+  loop?: boolean;
+  dragFree?: boolean;
+  speed?: number;
+};
+export type CarouselPlugin = {
+  name?: string;
+  init?: (api: CarouselApi) => void;
+  destroy?: () => void;
+};
+export type UseEmblaCarouselType = [(node: HTMLElement | null) => void, CarouselApi | undefined];
+export declare function useEmblaCarousel(options?: CarouselOptions, plugins?: CarouselPlugin[]): UseEmblaCarouselType;
+export interface CarouselProps {
+  orientation?: "horizontal" | "vertical";
+  autoplay?: boolean;
+  autoplayInterval?: number;
+  loop?: boolean;
+  activeIndex?: number;
+}
+type CarouselContextProps = {
+  carouselRef: (node: HTMLElement | null) => void;
+  api: CarouselApi | undefined;
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+  orientation: "horizontal" | "vertical";
+} & CarouselProps;
+export declare function useCarousel(): CarouselContextProps;
+export declare function Carousel({ orientation, opts, plugins, autoplay, autoplayInterval, loop, className, children, ...props }: React$1.ComponentProps<"div"> & CarouselProps & {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin[];
+}): React$1.JSX.Element;
+export declare function CarouselContent({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+export declare function CarouselItem({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+export declare function CarouselPrevious({ className, variant, size, ...props }: React$1.ComponentProps<typeof Button>): React$1.JSX.Element;
+export declare function CarouselNext({ className, variant, size, ...props }: React$1.ComponentProps<typeof Button>): React$1.JSX.Element;
+export declare function CarouselDots({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element | null;
+//#endregion
+export type { CarouselApi as EmblaCarouselType, CarouselOptions as EmblaOptionsType };

package/dist/components/carousel.js

@@ -0,0 +1,503 @@
+"use client";
+import { Button } from "./button.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { ChevronRight } from "xiod-icons/icons/ChevronRight";
+import { ChevronLeft } from "xiod-icons/icons/ChevronLeft";
+//#region src/components/carousel.tsx
+function useEmblaCarousel(options = {}, plugins = []) {
+	const [viewportNode, setViewportNode] = React$1.useState(null);
+	const [api, setApi] = React$1.useState();
+	const optionsRef = React$1.useRef(options);
+	optionsRef.current = options;
+	const apiRef = React$1.useRef(null);
+	const viewportNodeRef = React$1.useRef(null);
+	const containerRef = React$1.useRef(null);
+	const activeIndexRef = React$1.useRef(0);
+	const [_activeIndexState, setActiveIndexState] = React$1.useState(0);
+	const snapOffsetsRef = React$1.useRef([]);
+	const listenersRef = React$1.useRef({});
+	const isDraggingRef = React$1.useRef(false);
+	const dragStartPosRef = React$1.useRef(0);
+	const dragStartTimeRef = React$1.useRef(0);
+	const baseTranslationRef = React$1.useRef(0);
+	const currentTranslationRef = React$1.useRef(0);
+	const draggedDistanceRef = React$1.useRef(0);
+	React$1.useCallback(() => {
+		return optionsRef.current.axis === "y" ? "y" : "x";
+	}, []);
+	const emit = React$1.useCallback((event) => {
+		if (!apiRef.current) return;
+		const list = listenersRef.current[event] || [];
+		for (const cb of list) cb(apiRef.current);
+	}, []);
+	const translateTrack = React$1.useCallback((value, animate = true) => {
+		const container = containerRef.current;
+		if (!container) return;
+		if (animate) {
+			container.style.transition = "transform 400ms cubic-bezier(0.25, 1, 0.5, 1)";
+			container.offsetHeight;
+		} else container.style.transition = "none";
+		const isY = optionsRef.current.axis === "y";
+		container.style.transform = isY ? `translate3d(0, ${value}px, 0)` : `translate3d(${value}px, 0, 0)`;
+		currentTranslationRef.current = value;
+	}, []);
+	const calculateSnaps = React$1.useCallback(() => {
+		const viewport = viewportNodeRef.current;
+		const container = containerRef.current;
+		if (!viewport || !container) return;
+		const isY = optionsRef.current.axis === "y";
+		const children = Array.from(container.children);
+		if (children.length === 0) {
+			snapOffsetsRef.current = [];
+			return;
+		}
+		const viewportSize = isY ? viewport.clientHeight : viewport.clientWidth;
+		const containerSize = isY ? container.scrollHeight : container.scrollWidth;
+		const align = optionsRef.current.align || "center";
+		const snaps = [];
+		for (let i = 0; i < children.length; i++) {
+			const child = children[i];
+			const childSize = isY ? child.clientHeight : child.clientWidth;
+			const childOffset = isY ? child.offsetTop : child.offsetLeft;
+			let alignOffset = 0;
+			if (align === "start") alignOffset = 0;
+			else if (align === "end") alignOffset = viewportSize - childSize;
+			else alignOffset = (viewportSize - childSize) / 2;
+			let snapTarget = childOffset - alignOffset;
+			if (optionsRef.current.containScroll !== false) {
+				const maxLimit = containerSize - viewportSize;
+				snapTarget = Math.max(0, Math.min(maxLimit, snapTarget));
+			}
+			snaps.push(-snapTarget);
+		}
+		snapOffsetsRef.current = snaps.filter((val, index, self) => self.indexOf(val) === index);
+		emit("reInit");
+	}, [emit]);
+	const scrollTo = React$1.useCallback((index, jump = false) => {
+		if (snapOffsetsRef.current.length === 0) return;
+		const loop = optionsRef.current.loop;
+		let targetIndex = index;
+		if (loop) {
+			const len = snapOffsetsRef.current.length;
+			targetIndex = (index % len + len) % len;
+		} else targetIndex = Math.max(0, Math.min(snapOffsetsRef.current.length - 1, index));
+		activeIndexRef.current = targetIndex;
+		setActiveIndexState(targetIndex);
+		const targetTranslation = snapOffsetsRef.current[targetIndex];
+		translateTrack(targetTranslation, !jump);
+		baseTranslationRef.current = targetTranslation;
+		emit("select");
+	}, [translateTrack, emit]);
+	const scrollPrev = React$1.useCallback((jump) => {
+		scrollTo(activeIndexRef.current - 1, jump === true);
+	}, [scrollTo]);
+	const scrollNext = React$1.useCallback((jump) => {
+		scrollTo(activeIndexRef.current + 1, jump === true);
+	}, [scrollTo]);
+	const canScrollPrev = React$1.useCallback(() => {
+		return optionsRef.current.loop || activeIndexRef.current > 0;
+	}, []);
+	const canScrollNext = React$1.useCallback(() => {
+		return optionsRef.current.loop || activeIndexRef.current < snapOffsetsRef.current.length - 1;
+	}, []);
+	const selectedScrollSnap = React$1.useCallback(() => {
+		return activeIndexRef.current;
+	}, []);
+	const scrollSnapList = React$1.useCallback(() => {
+		return snapOffsetsRef.current.map((_, i) => i);
+	}, []);
+	const handlePointerDown = React$1.useCallback((e) => {
+		const container = containerRef.current;
+		const viewport = viewportNodeRef.current;
+		if (!container || !viewport) return;
+		if (e.button !== 0 && e.pointerType !== "touch") return;
+		if (e.pointerType === "mouse") e.preventDefault();
+		isDraggingRef.current = true;
+		draggedDistanceRef.current = 0;
+		dragStartTimeRef.current = Date.now();
+		const isY = optionsRef.current.axis === "y";
+		dragStartPosRef.current = isY ? e.pageY : e.pageX;
+		container.style.transition = "none";
+		baseTranslationRef.current = currentTranslationRef.current;
+		try {
+			viewport.setPointerCapture(e.pointerId);
+		} catch {}
+	}, []);
+	const handlePointerMove = React$1.useCallback((e) => {
+		if (!isDraggingRef.current) return;
+		const viewport = viewportNodeRef.current;
+		const container = containerRef.current;
+		if (!viewport || !container) return;
+		const delta = (optionsRef.current.axis === "y" ? e.pageY : e.pageX) - dragStartPosRef.current;
+		draggedDistanceRef.current = Math.abs(delta);
+		if (draggedDistanceRef.current > 4) {
+			e.preventDefault();
+			container.style.userSelect = "none";
+			container.style.webkitUserSelect = "none";
+			viewport.style.cursor = "grabbing";
+			let translation = baseTranslationRef.current + delta;
+			if (!optionsRef.current.loop) {
+				const snaps = snapOffsetsRef.current;
+				if (snaps.length > 0) {
+					const maxBound = snaps[0];
+					const minBound = snaps[snaps.length - 1];
+					if (translation > maxBound) translation = maxBound + (translation - maxBound) * .35;
+					else if (translation < minBound) translation = minBound + (translation - minBound) * .35;
+				}
+			}
+			translateTrack(translation, false);
+		}
+	}, [translateTrack]);
+	const handlePointerUp = React$1.useCallback((e) => {
+		if (!isDraggingRef.current) return;
+		isDraggingRef.current = false;
+		const viewport = viewportNodeRef.current;
+		const container = containerRef.current;
+		if (!viewport || !container) return;
+		try {
+			viewport.releasePointerCapture(e.pointerId);
+		} catch {}
+		container.style.userSelect = "";
+		container.style.webkitUserSelect = "";
+		viewport.style.cursor = "";
+		const snaps = snapOffsetsRef.current;
+		if (snaps.length === 0) return;
+		optionsRef.current.axis;
+		const delta = currentTranslationRef.current - baseTranslationRef.current;
+		const velocity = delta / (Date.now() - dragStartTimeRef.current || 1);
+		let targetIndex = activeIndexRef.current;
+		if (Math.abs(delta) > 30) {
+			if (Math.abs(velocity) > .25) targetIndex = velocity > 0 ? activeIndexRef.current - 1 : activeIndexRef.current + 1;
+			else {
+				let minDiff = Number.POSITIVE_INFINITY;
+				for (let i = 0; i < snaps.length; i++) {
+					const diff = Math.abs(currentTranslationRef.current - snaps[i]);
+					if (diff < minDiff) {
+						minDiff = diff;
+						targetIndex = i;
+					}
+				}
+			}
+		}
+		scrollTo(targetIndex, false);
+	}, [scrollTo]);
+	const handleClickCapture = React$1.useCallback((e) => {
+		if (draggedDistanceRef.current > 6) {
+			e.preventDefault();
+			e.stopPropagation();
+			draggedDistanceRef.current = 0;
+		}
+	}, []);
+	const on = React$1.useCallback((event, cb) => {
+		listenersRef.current[event] = listenersRef.current[event] || [];
+		listenersRef.current[event].push(cb);
+	}, []);
+	const off = React$1.useCallback((event, cb) => {
+		if (!listenersRef.current[event]) return;
+		listenersRef.current[event] = listenersRef.current[event].filter((item) => item !== cb);
+	}, []);
+	const reInit = React$1.useCallback((newOptions) => {
+		if (newOptions) optionsRef.current = {
+			...optionsRef.current,
+			...newOptions
+		};
+		calculateSnaps();
+		scrollTo(activeIndexRef.current, true);
+	}, [calculateSnaps, scrollTo]);
+	const destroy = React$1.useCallback(() => {
+		listenersRef.current = {};
+	}, []);
+	React$1.useEffect(() => {
+		const apiObject = {
+			scrollPrev,
+			scrollNext,
+			scrollTo,
+			canScrollPrev,
+			canScrollNext,
+			selectedScrollSnap,
+			scrollSnapList,
+			on,
+			off,
+			reInit,
+			destroy
+		};
+		apiRef.current = apiObject;
+		setApi(apiObject);
+	}, [
+		scrollPrev,
+		scrollNext,
+		scrollTo,
+		canScrollPrev,
+		canScrollNext,
+		selectedScrollSnap,
+		scrollSnapList,
+		on,
+		off,
+		reInit,
+		destroy
+	]);
+	React$1.useEffect(() => {
+		const viewport = viewportNode;
+		if (!viewport) return;
+		viewportNodeRef.current = viewport;
+		const container = viewport.firstElementChild;
+		containerRef.current = container;
+		calculateSnaps();
+		const observer = new ResizeObserver(() => calculateSnaps());
+		observer.observe(viewport);
+		if (container) observer.observe(container);
+		scrollTo(activeIndexRef.current, true);
+		viewport.addEventListener("pointerdown", handlePointerDown);
+		viewport.addEventListener("pointermove", handlePointerMove);
+		window.addEventListener("pointerup", handlePointerUp);
+		window.addEventListener("pointercancel", handlePointerUp);
+		viewport.addEventListener("click", handleClickCapture, true);
+		return () => {
+			observer.disconnect();
+			viewport.removeEventListener("pointerdown", handlePointerDown);
+			viewport.removeEventListener("pointermove", handlePointerMove);
+			window.removeEventListener("pointerup", handlePointerUp);
+			window.removeEventListener("pointercancel", handlePointerUp);
+			viewport.removeEventListener("click", handleClickCapture, true);
+		};
+	}, [
+		viewportNode,
+		calculateSnaps,
+		scrollTo,
+		handlePointerDown,
+		handlePointerMove,
+		handlePointerUp,
+		handleClickCapture
+	]);
+	React$1.useEffect(() => {
+		if (!api || plugins.length === 0) return;
+		for (const plugin of plugins) if (plugin && typeof plugin.init === "function") plugin.init(api);
+	}, [api, plugins]);
+	return [React$1.useCallback((node) => {
+		setViewportNode(node);
+	}, []), api];
+}
+const CarouselContext = React$1.createContext(null);
+function useCarousel() {
+	const context = React$1.useContext(CarouselContext);
+	if (!context) throw new Error("useCarousel must be used within a <Carousel />");
+	return context;
+}
+function Carousel({ orientation = "horizontal", opts, plugins, autoplay = false, autoplayInterval = 5e3, loop = true, className, children, ...props }) {
+	const [carouselRef, api] = useEmblaCarousel(React$1.useMemo(() => ({
+		axis: orientation === "horizontal" ? "x" : "y",
+		loop,
+		...opts
+	}), [
+		orientation,
+		loop,
+		opts
+	]), plugins);
+	const [canScrollPrev, setCanScrollPrev] = React$1.useState(false);
+	const [canScrollNext, setCanScrollNext] = React$1.useState(false);
+	const [activeIndex, setActiveIndex] = React$1.useState(0);
+	const autoplayTimerRef = React$1.useRef(null);
+	const isHoveredRef = React$1.useRef(false);
+	const isFocusedRef = React$1.useRef(false);
+	const onSelect = React$1.useCallback((emblaApi) => {
+		if (!emblaApi) return;
+		setCanScrollPrev(emblaApi.canScrollPrev());
+		setCanScrollNext(emblaApi.canScrollNext());
+		setActiveIndex(emblaApi.selectedScrollSnap());
+	}, []);
+	const scrollPrev = React$1.useCallback(() => {
+		api?.scrollPrev();
+	}, [api]);
+	const scrollNext = React$1.useCallback(() => {
+		api?.scrollNext();
+	}, [api]);
+	const stopAutoplay = React$1.useCallback(() => {
+		if (autoplayTimerRef.current) {
+			clearInterval(autoplayTimerRef.current);
+			autoplayTimerRef.current = null;
+		}
+	}, []);
+	const startAutoplay = React$1.useCallback(() => {
+		if (!autoplay || !api) return;
+		stopAutoplay();
+		autoplayTimerRef.current = setInterval(() => {
+			if (!isHoveredRef.current && !isFocusedRef.current) api.scrollNext();
+		}, autoplayInterval);
+	}, [
+		autoplay,
+		autoplayInterval,
+		api,
+		stopAutoplay
+	]);
+	React$1.useEffect(() => {
+		if (!api) return;
+		onSelect(api);
+		api.on("select", onSelect);
+		api.on("reInit", onSelect);
+		startAutoplay();
+		return () => {
+			api.off("select", onSelect);
+			api.off("reInit", onSelect);
+			stopAutoplay();
+		};
+	}, [
+		api,
+		onSelect,
+		startAutoplay,
+		stopAutoplay
+	]);
+	const handleKeyDown = React$1.useCallback((event) => {
+		if (orientation === "horizontal") {
+			if (event.key === "ArrowLeft") {
+				event.preventDefault();
+				scrollPrev();
+			} else if (event.key === "ArrowRight") {
+				event.preventDefault();
+				scrollNext();
+			}
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault();
+			scrollPrev();
+		} else if (event.key === "ArrowDown") {
+			event.preventDefault();
+			scrollNext();
+		}
+	}, [
+		scrollPrev,
+		scrollNext,
+		orientation
+	]);
+	const contextValue = React$1.useMemo(() => ({
+		carouselRef,
+		api,
+		orientation,
+		scrollPrev,
+		scrollNext,
+		canScrollPrev,
+		canScrollNext,
+		autoplay,
+		autoplayInterval,
+		loop,
+		activeIndex
+	}), [
+		carouselRef,
+		api,
+		orientation,
+		scrollPrev,
+		scrollNext,
+		canScrollPrev,
+		canScrollNext,
+		autoplay,
+		autoplayInterval,
+		loop,
+		activeIndex
+	]);
+	return /* @__PURE__ */ jsx(CarouselContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			onKeyDownCapture: handleKeyDown,
+			onMouseEnter: () => {
+				isHoveredRef.current = true;
+				stopAutoplay();
+			},
+			onMouseLeave: () => {
+				isHoveredRef.current = false;
+				startAutoplay();
+			},
+			onFocus: () => {
+				isFocusedRef.current = true;
+				stopAutoplay();
+			},
+			onBlur: () => {
+				isFocusedRef.current = false;
+				startAutoplay();
+			},
+			className: cn("relative outline-none", className),
+			role: "region",
+			"aria-roledescription": "carousel",
+			"data-slot": "carousel",
+			...props,
+			children
+		})
+	});
+}
+function CarouselContent({ className, ...props }) {
+	const { carouselRef, orientation } = useCarousel();
+	return /* @__PURE__ */ jsx("div", {
+		ref: carouselRef,
+		className: "overflow-hidden w-full h-full relative",
+		"data-slot": "carousel-viewport",
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("flex h-full w-full touch-pan-y pointer-events-auto will-change-transform", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className),
+			style: props.style,
+			"data-slot": "carousel-content",
+			...props
+		})
+	});
+}
+function CarouselItem({ className, ...props }) {
+	const { orientation } = useCarousel();
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-roledescription": "slide",
+		className: cn("min-w-0 shrink-0 grow-0 basis-full select-none", orientation === "horizontal" ? "pl-4" : "pt-4", className),
+		"data-slot": "carousel-item",
+		...props
+	});
+}
+function CarouselPrevious({ className, variant = "outline", size = "icon-sm", ...props }) {
+	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+	return /* @__PURE__ */ jsxs(Button, {
+		"data-slot": "carousel-previous",
+		variant,
+		size,
+		className: cn("absolute z-10 rounded-full", orientation === "horizontal" ? "inset-y-0 -left-12 my-auto" : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className),
+		disabled: !canScrollPrev,
+		onClick: scrollPrev,
+		...props,
+		children: [/* @__PURE__ */ jsx(ChevronLeft, { className: "size-4.5 sm:size-4 cn-rtl-flip" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Previous slide"
+		})]
+	});
+}
+function CarouselNext({ className, variant = "outline", size = "icon-sm", ...props }) {
+	const { orientation, scrollNext, canScrollNext } = useCarousel();
+	return /* @__PURE__ */ jsxs(Button, {
+		"data-slot": "carousel-next",
+		variant,
+		size,
+		className: cn("absolute z-10 rounded-full", orientation === "horizontal" ? "inset-y-0 -right-12 my-auto" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className),
+		disabled: !canScrollNext,
+		onClick: scrollNext,
+		...props,
+		children: [/* @__PURE__ */ jsx(ChevronRight, { className: "size-4.5 sm:size-4 cn-rtl-flip" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Next slide"
+		})]
+	});
+}
+function CarouselDots({ className, ...props }) {
+	const { api, activeIndex } = useCarousel();
+	const snaps = api ? api.scrollSnapList() : [];
+	if (snaps.length <= 1) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex justify-center items-center gap-1.5", className),
+		role: "tablist",
+		"aria-label": "Carousel pagination",
+		"data-slot": "carousel-dots",
+		...props,
+		children: snaps.map((_, i) => /* @__PURE__ */ jsx("button", {
+			type: "button",
+			role: "tab",
+			"aria-selected": i === activeIndex,
+			"aria-label": `Go to slide ${i + 1}`,
+			className: cn("h-1.5 rounded-full transition-[width,background-color] duration-300 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none", i === activeIndex ? "bg-foreground w-4" : "bg-muted-foreground/30 hover:bg-muted-foreground/50 w-1.5"),
+			onClick: () => api?.scrollTo(i)
+		}, i))
+	});
+}
+//#endregion
+export { Carousel, CarouselContent, CarouselDots, CarouselItem, CarouselNext, CarouselPrevious, useCarousel, useEmblaCarousel };