erp-pro-ui 0.1.0 → 0.1.2

package/dist/chunks/carousel-DJdqBVRK.mjs

@@ -0,0 +1,307 @@
+import { n as mergeClassNames } from "./utils-ati1KkDb.mjs";
+import { M as ChevronLeftIcon, j as ChevronRightIcon } from "./icons-DuumN7z-.mjs";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "framer-motion";
+//#region src/components/navigation/carousel/Carousel.tsx
+var variantStyles = {
+	default: "ui:bg-white ui:dark:bg-neutral-900 ui:shadow-xl",
+	glass: "ui:bg-white/60 ui:dark:bg-neutral-900/50 ui:backdrop-blur-2xl ui:border ui:border-white/40 ui:dark:border-white/10",
+	minimal: "ui:bg-transparent"
+};
+var getAnimationVariants = (animation) => {
+	return {
+		slide: {
+			enter: (direction) => ({
+				x: direction > 0 ? "100%" : "-100%",
+				opacity: 0
+			}),
+			center: {
+				x: 0,
+				opacity: 1
+			},
+			exit: (direction) => ({
+				x: direction < 0 ? "100%" : "-100%",
+				opacity: 0
+			})
+		},
+		fade: {
+			enter: () => ({ opacity: 0 }),
+			center: { opacity: 1 },
+			exit: () => ({ opacity: 0 })
+		},
+		scale: {
+			enter: (direction) => ({
+				scale: .8,
+				opacity: 0,
+				x: direction > 0 ? 50 : -50
+			}),
+			center: {
+				scale: 1,
+				opacity: 1,
+				x: 0
+			},
+			exit: (direction) => ({
+				scale: .8,
+				opacity: 0,
+				x: direction < 0 ? 50 : -50
+			})
+		},
+		flip: {
+			enter: (direction) => ({
+				rotateY: direction > 0 ? 90 : -90,
+				opacity: 0
+			}),
+			center: {
+				rotateY: 0,
+				opacity: 1
+			},
+			exit: (direction) => ({
+				rotateY: direction < 0 ? 90 : -90,
+				opacity: 0
+			})
+		},
+		cube: {
+			enter: (direction) => ({
+				rotateY: direction > 0 ? 90 : -90,
+				x: direction > 0 ? "50%" : "-50%",
+				opacity: 0,
+				scale: .8
+			}),
+			center: {
+				rotateY: 0,
+				x: 0,
+				opacity: 1,
+				scale: 1
+			},
+			exit: (direction) => ({
+				rotateY: direction < 0 ? 90 : -90,
+				x: direction < 0 ? "50%" : "-50%",
+				opacity: 0,
+				scale: .8
+			})
+		},
+		cards: {
+			enter: (direction) => ({
+				scale: .9,
+				opacity: 0,
+				y: direction > 0 ? 100 : -100,
+				rotateZ: direction > 0 ? 5 : -5
+			}),
+			center: {
+				scale: 1,
+				opacity: 1,
+				y: 0,
+				rotateZ: 0
+			},
+			exit: (direction) => ({
+				scale: .9,
+				opacity: 0,
+				y: direction < 0 ? 100 : -100,
+				rotateZ: direction < 0 ? 5 : -5
+			})
+		}
+	}[animation];
+};
+var getTransitionConfig = (animation, duration) => {
+	const durationSec = duration / 1e3;
+	return {
+		slide: {
+			x: {
+				type: "spring",
+				stiffness: 300,
+				damping: 30
+			},
+			opacity: { duration: durationSec }
+		},
+		fade: { opacity: {
+			duration: durationSec,
+			ease: "easeInOut"
+		} },
+		scale: {
+			type: "spring",
+			stiffness: 200,
+			damping: 25,
+			opacity: { duration: durationSec }
+		},
+		flip: {
+			type: "spring",
+			stiffness: 100,
+			damping: 20,
+			opacity: { duration: durationSec * .5 }
+		},
+		cube: {
+			type: "spring",
+			stiffness: 100,
+			damping: 20,
+			opacity: { duration: durationSec * .5 }
+		},
+		cards: {
+			type: "spring",
+			stiffness: 150,
+			damping: 20,
+			opacity: { duration: durationSec }
+		}
+	}[animation];
+};
+var Carousel = ({ items, className, autoPlay = 0, showArrows = true, showDots = true, infinite = true, pauseOnHover = true, animationDuration = 500, gap: _gap = 0, slidesPerView: _slidesPerView = 1, renderArrow, renderDot, onSlideChange, variant = "glass", height = 400, style, initialSlide = 0, draggable = true, animation = "slide" }) => {
+	const animationVariants = getAnimationVariants(animation);
+	const transitionConfig = getTransitionConfig(animation, animationDuration);
+	const [[currentIndex, direction], setSlide] = useState([initialSlide, 0]);
+	const [isPaused, setIsPaused] = useState(false);
+	const intervalRef = useRef(null);
+	const totalSlides = items.length;
+	const goToSlide = useCallback((index, dir) => {
+		let newIndex = index;
+		if (infinite) {
+			if (index < 0) newIndex = totalSlides - 1;
+			else if (index >= totalSlides) newIndex = 0;
+		} else if (index < 0) newIndex = 0;
+		else if (index >= totalSlides) newIndex = totalSlides - 1;
+		setSlide([newIndex, dir ?? (newIndex > currentIndex ? 1 : -1)]);
+		onSlideChange?.(newIndex);
+	}, [
+		currentIndex,
+		infinite,
+		totalSlides,
+		onSlideChange
+	]);
+	const goNext = useCallback(() => goToSlide(currentIndex + 1, 1), [currentIndex, goToSlide]);
+	const goPrev = useCallback(() => goToSlide(currentIndex - 1, -1), [currentIndex, goToSlide]);
+	useEffect(() => {
+		if (autoPlay > 0 && !isPaused) intervalRef.current = setInterval(goNext, autoPlay);
+		return () => {
+			if (intervalRef.current) clearInterval(intervalRef.current);
+		};
+	}, [
+		autoPlay,
+		isPaused,
+		goNext
+	]);
+	useEffect(() => {
+		const handleKeyDown = (e) => {
+			if (e.key === "ArrowLeft") goPrev();
+			if (e.key === "ArrowRight") goNext();
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [goNext, goPrev]);
+	const handleDragEnd = (_event, info) => {
+		const threshold = 50;
+		if (info.offset.x < -threshold) goNext();
+		else if (info.offset.x > threshold) goPrev();
+	};
+	const currentItem = items[currentIndex];
+	return /* @__PURE__ */ jsxs("div", {
+		className: mergeClassNames("ui:relative ui:overflow-hidden ui:rounded-2xl ui:w-full", variantStyles[variant], className),
+		style: {
+			height: typeof height === "number" ? `${height}px` : height,
+			...style
+		},
+		onMouseEnter: () => pauseOnHover && setIsPaused(true),
+		onMouseLeave: () => pauseOnHover && setIsPaused(false),
+		children: [
+			/* @__PURE__ */ jsx(AnimatePresence, {
+				initial: false,
+				custom: direction,
+				mode: "wait",
+				children: /* @__PURE__ */ jsx(motion.div, {
+					custom: direction,
+					variants: animationVariants,
+					initial: "enter",
+					animate: "center",
+					exit: "exit",
+					transition: transitionConfig,
+					drag: draggable ? "x" : false,
+					dragConstraints: {
+						left: 0,
+						right: 0
+					},
+					dragElastic: .2,
+					onDragEnd: handleDragEnd,
+					className: "ui:absolute ui:inset-0 ui:flex ui:items-center ui:justify-center ui:cursor-grab active:ui:cursor-grabbing",
+					style: { perspective: animation === "flip" || animation === "cube" ? 1e3 : void 0 },
+					children: currentItem.image ? /* @__PURE__ */ jsxs("div", {
+						className: "ui:relative ui:w-full ui:h-full",
+						children: [/* @__PURE__ */ jsx("img", {
+							src: currentItem.image,
+							alt: currentItem.alt || currentItem.title || "Carousel slide",
+							className: "ui:w-full ui:h-full ui:object-cover"
+						}), (currentItem.title || currentItem.description) && /* @__PURE__ */ jsxs("div", {
+							className: "ui:absolute ui:bottom-0 ui:left-0 ui:right-0 ui:p-6 ui:bg-gradient-to-t ui:from-black/70 ui:to-transparent",
+							children: [currentItem.title && /* @__PURE__ */ jsx("h3", {
+								className: "ui:text-2xl ui:font-bold ui:text-white ui:mb-2",
+								children: currentItem.title
+							}), currentItem.description && /* @__PURE__ */ jsx("p", {
+								className: "ui:text-white/80",
+								children: currentItem.description
+							})]
+						})]
+					}) : /* @__PURE__ */ jsx("div", {
+						className: "ui:w-full ui:h-full ui:flex ui:items-center ui:justify-center ui:p-6",
+						children: currentItem.content
+					})
+				}, currentIndex)
+			}),
+			showArrows && totalSlides > 1 && /* @__PURE__ */ jsx(Fragment, { children: renderArrow ? /* @__PURE__ */ jsxs(Fragment, { children: [renderArrow({
+				direction: "prev",
+				onClick: goPrev
+			}), renderArrow({
+				direction: "next",
+				onClick: goNext
+			})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(motion.button, {
+				type: "button",
+				onClick: goPrev,
+				className: "ui:absolute ui:left-4 ui:top-1/2 ui:-translate-y-1/2 ui:z-20 ui:p-2 ui:rounded-full ui:bg-white/80 ui:dark:bg-neutral-800/80 ui:backdrop-blur-sm ui:text-neutral-800 ui:dark:text-white ui:shadow-lg ui:transition-all hover:ui:bg-white ui:dark:hover:bg-neutral-700",
+				whileHover: { scale: 1.1 },
+				whileTap: { scale: .9 },
+				"aria-label": "Previous slide",
+				children: /* @__PURE__ */ jsx(ChevronLeftIcon, {
+					className: "ui:w-6 ui:h-6",
+					"aria-hidden": "true"
+				})
+			}), /* @__PURE__ */ jsx(motion.button, {
+				type: "button",
+				onClick: goNext,
+				className: "ui:absolute ui:right-4 ui:top-1/2 ui:-translate-y-1/2 ui:z-20 ui:p-2 ui:rounded-full ui:bg-white/80 ui:dark:bg-neutral-800/80 ui:backdrop-blur-sm ui:text-neutral-800 ui:dark:text-white ui:shadow-lg ui:transition-all hover:ui:bg-white ui:dark:hover:bg-neutral-700",
+				whileHover: { scale: 1.1 },
+				whileTap: { scale: .9 },
+				"aria-label": "Next slide",
+				children: /* @__PURE__ */ jsx(ChevronRightIcon, {
+					className: "ui:w-6 ui:h-6",
+					"aria-hidden": "true"
+				})
+			})] }) }),
+			showDots && totalSlides > 1 && /* @__PURE__ */ jsx("div", {
+				className: "ui:absolute ui:bottom-4 ui:left-1/2 ui:-translate-x-1/2 ui:z-20 ui:flex ui:gap-2 ui:p-2 ui:rounded-full ui:bg-black/20 ui:dark:bg-white/10 ui:backdrop-blur-sm",
+				children: items.map((_, index) => renderDot ? renderDot({
+					index,
+					active: index === currentIndex,
+					onClick: () => goToSlide(index)
+				}) : /* @__PURE__ */ jsx(motion.button, {
+					type: "button",
+					onClick: () => goToSlide(index),
+					className: mergeClassNames("ui:rounded-full ui:transition-all ui:duration-300", index === currentIndex ? "ui:w-8 ui:h-2.5 ui:bg-white ui:shadow-lg" : "ui:w-2.5 ui:h-2.5 ui:bg-white/60 hover:ui:bg-white/90"),
+					whileHover: { scale: 1.2 },
+					whileTap: { scale: .9 },
+					"aria-label": `Go to slide ${index + 1}`,
+					"aria-current": index === currentIndex ? "true" : void 0
+				}, index))
+			}),
+			autoPlay > 0 && !isPaused && /* @__PURE__ */ jsx(motion.div, {
+				className: "ui:absolute ui:bottom-0 ui:left-0 ui:h-1 ui:bg-accent/80 ui:rounded-full",
+				initial: { width: "0%" },
+				animate: { width: "100%" },
+				transition: {
+					duration: autoPlay / 1e3,
+					ease: "linear"
+				}
+			}, currentIndex)
+		]
+	});
+};
+Carousel.displayName = "Carousel";
+//#endregion
+export { Carousel as t };
+
+//# sourceMappingURL=carousel-DJdqBVRK.mjs.map

package/dist/chunks/carousel-DJdqBVRK.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-DJdqBVRK.mjs","names":[],"sources":["../../src/components/navigation/carousel/Carousel.tsx"],"sourcesContent":["import { useState, useEffect, useCallback, useRef } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\n\nimport { ChevronLeftIcon, ChevronRightIcon } from \"../../icons\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { CarouselProps, CarouselAnimation } from \"./types\";\n\nconst variantStyles = {\n  default: \"ui:bg-white ui:dark:bg-neutral-900 ui:shadow-xl\",\n  glass:\n    \"ui:bg-white/60 ui:dark:bg-neutral-900/50 ui:backdrop-blur-2xl ui:border ui:border-white/40 ui:dark:border-white/10\",\n  minimal: \"ui:bg-transparent\",\n};\n\n// Animation variants for different carousel transitions\nconst getAnimationVariants = (animation: CarouselAnimation) => {\n  const variants = {\n    slide: {\n      enter: (direction: number) => ({\n        x: direction > 0 ? \"100%\" : \"-100%\",\n        opacity: 0,\n      }),\n      center: { x: 0, opacity: 1 },\n      exit: (direction: number) => ({\n        x: direction < 0 ? \"100%\" : \"-100%\",\n        opacity: 0,\n      }),\n    },\n    fade: {\n      enter: () => ({ opacity: 0 }),\n      center: { opacity: 1 },\n      exit: () => ({ opacity: 0 }),\n    },\n    scale: {\n      enter: (direction: number) => ({\n        scale: 0.8,\n        opacity: 0,\n        x: direction > 0 ? 50 : -50,\n      }),\n      center: { scale: 1, opacity: 1, x: 0 },\n      exit: (direction: number) => ({\n        scale: 0.8,\n        opacity: 0,\n        x: direction < 0 ? 50 : -50,\n      }),\n    },\n    flip: {\n      enter: (direction: number) => ({\n        rotateY: direction > 0 ? 90 : -90,\n        opacity: 0,\n      }),\n      center: { rotateY: 0, opacity: 1 },\n      exit: (direction: number) => ({\n        rotateY: direction < 0 ? 90 : -90,\n        opacity: 0,\n      }),\n    },\n    cube: {\n      enter: (direction: number) => ({\n        rotateY: direction > 0 ? 90 : -90,\n        x: direction > 0 ? \"50%\" : \"-50%\",\n        opacity: 0,\n        scale: 0.8,\n      }),\n      center: { rotateY: 0, x: 0, opacity: 1, scale: 1 },\n      exit: (direction: number) => ({\n        rotateY: direction < 0 ? 90 : -90,\n        x: direction < 0 ? \"50%\" : \"-50%\",\n        opacity: 0,\n        scale: 0.8,\n      }),\n    },\n    cards: {\n      enter: (direction: number) => ({\n        scale: 0.9,\n        opacity: 0,\n        y: direction > 0 ? 100 : -100,\n        rotateZ: direction > 0 ? 5 : -5,\n      }),\n      center: { scale: 1, opacity: 1, y: 0, rotateZ: 0 },\n      exit: (direction: number) => ({\n        scale: 0.9,\n        opacity: 0,\n        y: direction < 0 ? 100 : -100,\n        rotateZ: direction < 0 ? 5 : -5,\n      }),\n    },\n  };\n  return variants[animation];\n};\n\n// Transition configs for each animation\nconst getTransitionConfig = (\n  animation: CarouselAnimation,\n  duration: number,\n) => {\n  const durationSec = duration / 1000;\n  const configs: Record<CarouselAnimation, object> = {\n    slide: {\n      x: { type: \"spring\", stiffness: 300, damping: 30 },\n      opacity: { duration: durationSec },\n    },\n    fade: {\n      opacity: { duration: durationSec, ease: \"easeInOut\" },\n    },\n    scale: {\n      type: \"spring\",\n      stiffness: 200,\n      damping: 25,\n      opacity: { duration: durationSec },\n    },\n    flip: {\n      type: \"spring\",\n      stiffness: 100,\n      damping: 20,\n      opacity: { duration: durationSec * 0.5 },\n    },\n    cube: {\n      type: \"spring\",\n      stiffness: 100,\n      damping: 20,\n      opacity: { duration: durationSec * 0.5 },\n    },\n    cards: {\n      type: \"spring\",\n      stiffness: 150,\n      damping: 20,\n      opacity: { duration: durationSec },\n    },\n  };\n  return configs[animation];\n};\n\nexport const Carousel = ({\n  items,\n  className,\n  autoPlay = 0,\n  showArrows = true,\n  showDots = true,\n  infinite = true,\n  pauseOnHover = true,\n  animationDuration = 500,\n  // gap and slidesPerView reserved for future multi-slide support\n  gap: _gap = 0,\n  slidesPerView: _slidesPerView = 1,\n  renderArrow,\n  renderDot,\n  onSlideChange,\n  variant = \"glass\",\n  height = 400,\n  style,\n  initialSlide = 0,\n  draggable = true,\n  animation = \"slide\",\n}: CarouselProps) => {\n  const animationVariants = getAnimationVariants(animation);\n  const transitionConfig = getTransitionConfig(animation, animationDuration);\n  const [[currentIndex, direction], setSlide] = useState([initialSlide, 0]);\n  const [isPaused, setIsPaused] = useState(false);\n  const intervalRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const totalSlides = items.length;\n\n  const goToSlide = useCallback(\n    (index: number, dir?: number) => {\n      let newIndex = index;\n      if (infinite) {\n        if (index < 0) newIndex = totalSlides - 1;\n        else if (index >= totalSlides) newIndex = 0;\n      } else {\n        if (index < 0) newIndex = 0;\n        else if (index >= totalSlides) newIndex = totalSlides - 1;\n      }\n      const newDirection = dir ?? (newIndex > currentIndex ? 1 : -1);\n      setSlide([newIndex, newDirection]);\n      onSlideChange?.(newIndex);\n    },\n    [currentIndex, infinite, totalSlides, onSlideChange],\n  );\n\n  const goNext = useCallback(\n    () => goToSlide(currentIndex + 1, 1),\n    [currentIndex, goToSlide],\n  );\n  const goPrev = useCallback(\n    () => goToSlide(currentIndex - 1, -1),\n    [currentIndex, goToSlide],\n  );\n\n  // Auto-play\n  useEffect(() => {\n    if (autoPlay > 0 && !isPaused) {\n      intervalRef.current = setInterval(goNext, autoPlay);\n    }\n    return () => {\n      if (intervalRef.current) clearInterval(intervalRef.current);\n    };\n  }, [autoPlay, isPaused, goNext]);\n\n  // Keyboard navigation\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"ArrowLeft\") goPrev();\n      if (e.key === \"ArrowRight\") goNext();\n    };\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [goNext, goPrev]);\n\n  // Drag handling\n  const handleDragEnd = (\n    _event: MouseEvent | TouchEvent | PointerEvent,\n    info: {\n      offset: { x: number; y: number };\n      velocity: { x: number; y: number };\n    },\n  ) => {\n    const threshold = 50;\n    if (info.offset.x < -threshold) goNext();\n    else if (info.offset.x > threshold) goPrev();\n  };\n\n  const currentItem = items[currentIndex];\n\n  return (\n    <div\n      className={mergeClassNames(\n        \"ui:relative ui:overflow-hidden ui:rounded-2xl ui:w-full\",\n        variantStyles[variant],\n        className,\n      )}\n      style={{\n        height: typeof height === \"number\" ? `${height}px` : height,\n        ...style,\n      }}\n      onMouseEnter={() => pauseOnHover && setIsPaused(true)}\n      onMouseLeave={() => pauseOnHover && setIsPaused(false)}\n    >\n      {/* Slides */}\n      <AnimatePresence initial={false} custom={direction} mode=\"wait\">\n        <motion.div\n          key={currentIndex}\n          custom={direction}\n          variants={animationVariants}\n          initial=\"enter\"\n          animate=\"center\"\n          exit=\"exit\"\n          transition={transitionConfig}\n          drag={draggable ? \"x\" : false}\n          dragConstraints={{ left: 0, right: 0 }}\n          dragElastic={0.2}\n          onDragEnd={handleDragEnd}\n          className=\"ui:absolute ui:inset-0 ui:flex ui:items-center ui:justify-center ui:cursor-grab active:ui:cursor-grabbing\"\n          style={{\n            perspective:\n              animation === \"flip\" || animation === \"cube\" ? 1000 : undefined,\n          }}\n        >\n          {currentItem.image ? (\n            <div className=\"ui:relative ui:w-full ui:h-full\">\n              <img\n                src={currentItem.image}\n                alt={currentItem.alt || currentItem.title || \"Carousel slide\"}\n                className=\"ui:w-full ui:h-full ui:object-cover\"\n              />\n              {(currentItem.title || currentItem.description) && (\n                <div className=\"ui:absolute ui:bottom-0 ui:left-0 ui:right-0 ui:p-6 ui:bg-gradient-to-t ui:from-black/70 ui:to-transparent\">\n                  {currentItem.title && (\n                    <h3 className=\"ui:text-2xl ui:font-bold ui:text-white ui:mb-2\">\n                      {currentItem.title}\n                    </h3>\n                  )}\n                  {currentItem.description && (\n                    <p className=\"ui:text-white/80\">\n                      {currentItem.description}\n                    </p>\n                  )}\n                </div>\n              )}\n            </div>\n          ) : (\n            <div className=\"ui:w-full ui:h-full ui:flex ui:items-center ui:justify-center ui:p-6\">\n              {currentItem.content}\n            </div>\n          )}\n        </motion.div>\n      </AnimatePresence>\n\n      {/* Navigation Arrows */}\n      {showArrows && totalSlides > 1 && (\n        <>\n          {renderArrow ? (\n            <>\n              {renderArrow({ direction: \"prev\", onClick: goPrev })}\n              {renderArrow({ direction: \"next\", onClick: goNext })}\n            </>\n          ) : (\n            <>\n              <motion.button\n                type=\"button\"\n                onClick={goPrev}\n                className=\"ui:absolute ui:left-4 ui:top-1/2 ui:-translate-y-1/2 ui:z-20 ui:p-2 ui:rounded-full ui:bg-white/80 ui:dark:bg-neutral-800/80 ui:backdrop-blur-sm ui:text-neutral-800 ui:dark:text-white ui:shadow-lg ui:transition-all hover:ui:bg-white ui:dark:hover:bg-neutral-700\"\n                whileHover={{ scale: 1.1 }}\n                whileTap={{ scale: 0.9 }}\n                aria-label=\"Previous slide\"\n              >\n                <ChevronLeftIcon className=\"ui:w-6 ui:h-6\" aria-hidden=\"true\" />\n              </motion.button>\n              <motion.button\n                type=\"button\"\n                onClick={goNext}\n                className=\"ui:absolute ui:right-4 ui:top-1/2 ui:-translate-y-1/2 ui:z-20 ui:p-2 ui:rounded-full ui:bg-white/80 ui:dark:bg-neutral-800/80 ui:backdrop-blur-sm ui:text-neutral-800 ui:dark:text-white ui:shadow-lg ui:transition-all hover:ui:bg-white ui:dark:hover:bg-neutral-700\"\n                whileHover={{ scale: 1.1 }}\n                whileTap={{ scale: 0.9 }}\n                aria-label=\"Next slide\"\n              >\n                <ChevronRightIcon\n                  className=\"ui:w-6 ui:h-6\"\n                  aria-hidden=\"true\"\n                />\n              </motion.button>\n            </>\n          )}\n        </>\n      )}\n\n      {/* Dot Indicators */}\n      {showDots && totalSlides > 1 && (\n        <div className=\"ui:absolute ui:bottom-4 ui:left-1/2 ui:-translate-x-1/2 ui:z-20 ui:flex ui:gap-2 ui:p-2 ui:rounded-full ui:bg-black/20 ui:dark:bg-white/10 ui:backdrop-blur-sm\">\n          {items.map((_, index) =>\n            renderDot ? (\n              renderDot({\n                index,\n                active: index === currentIndex,\n                onClick: () => goToSlide(index),\n              })\n            ) : (\n              <motion.button\n                key={index}\n                type=\"button\"\n                onClick={() => goToSlide(index)}\n                className={mergeClassNames(\n                  \"ui:rounded-full ui:transition-all ui:duration-300\",\n                  index === currentIndex\n                    ? \"ui:w-8 ui:h-2.5 ui:bg-white ui:shadow-lg\"\n                    : \"ui:w-2.5 ui:h-2.5 ui:bg-white/60 hover:ui:bg-white/90\",\n                )}\n                whileHover={{ scale: 1.2 }}\n                whileTap={{ scale: 0.9 }}\n                aria-label={`Go to slide ${index + 1}`}\n                aria-current={index === currentIndex ? \"true\" : undefined}\n              />\n            ),\n          )}\n        </div>\n      )}\n\n      {/* Progress indicator */}\n      {autoPlay > 0 && !isPaused && (\n        <motion.div\n          className=\"ui:absolute ui:bottom-0 ui:left-0 ui:h-1 ui:bg-accent/80 ui:rounded-full\"\n          initial={{ width: \"0%\" }}\n          animate={{ width: \"100%\" }}\n          transition={{ duration: autoPlay / 1000, ease: \"linear\" }}\n          key={currentIndex}\n        />\n      )}\n    </div>\n  );\n};\n\nCarousel.displayName = \"Carousel\";\n\nexport default Carousel;\n"],"mappings":"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"}