@particle-academy/react-fancy 5.12.0 → 5.14.0

package/dist/chunk-HBFVOHQC.cjs

@@ -0,0 +1,102 @@
+'use strict';
+
+var chunk3Z6ALUWP_cjs = require('./chunk-3Z6ALUWP.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var DOT_COLORS = ["bg-rose-300", "bg-amber-300", "bg-green-300"];
+var FauxClient = react.forwardRef(
+  ({
+    variant = "browser",
+    url,
+    meta,
+    dots = true,
+    width,
+    scale = "fit",
+    className,
+    barClassName,
+    bodyClassName,
+    children,
+    ...rest
+  }, ref) => {
+    const scaled = typeof width === "number";
+    const viewportRef = react.useRef(null);
+    const stageRef = react.useRef(null);
+    const [s, setS] = react.useState(typeof scale === "number" ? scale : 1);
+    const [contentHeight, setContentHeight] = react.useState(void 0);
+    react.useLayoutEffect(() => {
+      if (!scaled) return;
+      const viewport = viewportRef.current;
+      const stage = stageRef.current;
+      if (!viewport || !stage) return;
+      if (typeof ResizeObserver === "undefined") return;
+      const measure = () => {
+        const avail = viewport.clientWidth;
+        const next = scale === "fit" ? width && width > 0 ? avail / width : 1 : scale;
+        const naturalHeight = stage.offsetHeight;
+        setS(next);
+        setContentHeight(naturalHeight * next);
+      };
+      measure();
+      const ro = new ResizeObserver(measure);
+      ro.observe(viewport);
+      ro.observe(stage);
+      return () => ro.disconnect();
+    }, [scaled, scale, width]);
+    const isBrowser = variant === "browser";
+    const isDevice = variant === "device";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        "data-react-fancy-faux-client": "",
+        className: chunk3Z6ALUWP_cjs.cn(
+          "overflow-hidden bg-white dark:bg-zinc-900",
+          isBrowser && "rounded-2xl border border-zinc-200 shadow-xl dark:border-zinc-800",
+          isDevice && "rounded-[2rem] border-[10px] border-zinc-800 shadow-2xl dark:border-zinc-700",
+          variant === "bare" && "rounded-lg border border-zinc-200 dark:border-zinc-800",
+          className
+        ),
+        ...rest,
+        children: [
+          isBrowser && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: chunk3Z6ALUWP_cjs.cn(
+                "flex items-center gap-2 border-b border-zinc-200 bg-zinc-50 px-3.5 py-2.5 font-mono text-[11.5px] text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-400",
+                barClassName
+              ),
+              children: [
+                dots && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-1.5 flex gap-[5px]", children: DOT_COLORS.map((color, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunk3Z6ALUWP_cjs.cn("h-[9px] w-[9px] rounded-full", color) }, i)) }),
+                url != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: url }),
+                meta != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-zinc-400 dark:text-zinc-500", children: meta })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: viewportRef,
+              className: chunk3Z6ALUWP_cjs.cn("relative overflow-hidden", bodyClassName),
+              style: scaled ? { height: contentHeight } : void 0,
+              children: scaled ? /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  ref: stageRef,
+                  className: "absolute left-0 top-0 origin-top-left",
+                  style: { width, transform: `scale(${s})` },
+                  children
+                }
+              ) : children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+FauxClient.displayName = "FauxClient";
+
+exports.FauxClient = FauxClient;
+//# sourceMappingURL=chunk-HBFVOHQC.cjs.map
+//# sourceMappingURL=chunk-HBFVOHQC.cjs.map

package/dist/chunk-HBFVOHQC.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/FauxClient/FauxClient.tsx"],"names":["forwardRef","useRef","useState","useLayoutEffect","jsxs","cn","jsx"],"mappings":"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","file":"chunk-HBFVOHQC.cjs","sourcesContent":["import { forwardRef, useLayoutEffect, useRef, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { FauxClientProps } from \"./FauxClient.types\";\n\nconst DOT_COLORS = [\"bg-rose-300\", \"bg-amber-300\", \"bg-green-300\"];\n\n/**\n * A frame that mimics a browser window or device, rendering **real UI** inside.\n * With a logical `width` + `scale=\"fit\"` it renders a full-size page/app and\n * scales it down to fit any container (live thumbnails, device mockups) — the\n * content is real and interactive, just zoomed.\n *\n * Omit `width` for chrome around natural-size content (e.g. a code/preview card).\n */\nexport const FauxClient = forwardRef<HTMLDivElement, FauxClientProps>(\n  (\n    {\n      variant = \"browser\",\n      url,\n      meta,\n      dots = true,\n      width,\n      scale = \"fit\",\n      className,\n      barClassName,\n      bodyClassName,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const scaled = typeof width === \"number\";\n    const viewportRef = useRef<HTMLDivElement>(null);\n    const stageRef = useRef<HTMLDivElement>(null);\n    const [s, setS] = useState(typeof scale === \"number\" ? scale : 1);\n    const [contentHeight, setContentHeight] = useState<number | undefined>(undefined);\n\n    useLayoutEffect(() => {\n      if (!scaled) return;\n      const viewport = viewportRef.current;\n      const stage = stageRef.current;\n      if (!viewport || !stage) return;\n      if (typeof ResizeObserver === \"undefined\") return;\n\n      const measure = () => {\n        const avail = viewport.clientWidth;\n        const next = scale === \"fit\" ? (width && width > 0 ? avail / width : 1) : scale;\n        // offsetHeight is the pre-transform layout height (CSS transforms don't affect it).\n        const naturalHeight = stage.offsetHeight;\n        setS(next);\n        setContentHeight(naturalHeight * next);\n      };\n\n      measure();\n      const ro = new ResizeObserver(measure);\n      ro.observe(viewport);\n      ro.observe(stage);\n      return () => ro.disconnect();\n    }, [scaled, scale, width]);\n\n    const isBrowser = variant === \"browser\";\n    const isDevice = variant === \"device\";\n\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-faux-client=\"\"\n        className={cn(\n          \"overflow-hidden bg-white dark:bg-zinc-900\",\n          isBrowser && \"rounded-2xl border border-zinc-200 shadow-xl dark:border-zinc-800\",\n          isDevice && \"rounded-[2rem] border-[10px] border-zinc-800 shadow-2xl dark:border-zinc-700\",\n          variant === \"bare\" && \"rounded-lg border border-zinc-200 dark:border-zinc-800\",\n          className,\n        )}\n        {...rest}\n      >\n        {isBrowser && (\n          <div\n            className={cn(\n              \"flex items-center gap-2 border-b border-zinc-200 bg-zinc-50 px-3.5 py-2.5 font-mono text-[11.5px] text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-400\",\n              barClassName,\n            )}\n          >\n            {dots && (\n              <div className=\"mr-1.5 flex gap-[5px]\">\n                {DOT_COLORS.map((color, i) => (\n                  <span key={i} className={cn(\"h-[9px] w-[9px] rounded-full\", color)} />\n                ))}\n              </div>\n            )}\n            {url != null && <span className=\"min-w-0 flex-1 truncate\">{url}</span>}\n            {meta != null && <span className=\"shrink-0 text-zinc-400 dark:text-zinc-500\">{meta}</span>}\n          </div>\n        )}\n\n        <div\n          ref={viewportRef}\n          className={cn(\"relative overflow-hidden\", bodyClassName)}\n          style={scaled ? { height: contentHeight } : undefined}\n        >\n          {scaled ? (\n            <div\n              ref={stageRef}\n              className=\"absolute left-0 top-0 origin-top-left\"\n              style={{ width, transform: `scale(${s})` }}\n            >\n              {children}\n            </div>\n          ) : (\n            children\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n\nFauxClient.displayName = \"FauxClient\";\n"]}

package/dist/chunk-HG6XUJOT.js

@@ -0,0 +1,328 @@
+import { useControllableState } from './chunk-6FQGMVF2.js';
+import { cn } from './chunk-DSUHZO6T.js';
+import { createContext, forwardRef, Children, useRef, useState, useEffect, isValidElement, useCallback, useMemo, useContext } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var CarouselContext = createContext(null);
+CarouselContext.displayName = "CarouselContext";
+function useCarousel() {
+  const ctx = useContext(CarouselContext);
+  if (!ctx) {
+    throw new Error("Carousel compound components must be used within <Carousel>");
+  }
+  return ctx;
+}
+var CarouselPanels = forwardRef(
+  ({ children, className, transition = "none" }, ref) => {
+    const { activeIndex, registerSlides, registerSlideNames } = useCarousel();
+    const slides = Children.toArray(children);
+    const prevIndexRef = useRef(activeIndex);
+    const [transitionState, setTransitionState] = useState("idle");
+    useEffect(() => {
+      registerSlides(slides.length);
+    }, [slides.length, registerSlides]);
+    useEffect(() => {
+      const names = slides.map((slide) => {
+        if (isValidElement(slide) && slide.props.name) {
+          return slide.props.name;
+        }
+        return "";
+      });
+      registerSlideNames(names);
+    }, [slides.length, registerSlideNames]);
+    useEffect(() => {
+      if (transition !== "fade") {
+        return;
+      }
+      if (prevIndexRef.current !== activeIndex) {
+        setTransitionState("enter");
+        const timer = setTimeout(() => {
+          setTransitionState("idle");
+        }, 300);
+        prevIndexRef.current = activeIndex;
+        return () => clearTimeout(timer);
+      }
+    }, [activeIndex, transition]);
+    if (transition === "fade") {
+      return /* @__PURE__ */ jsx("div", { ref, "data-react-fancy-carousel-panels": "", className: cn("relative overflow-hidden", className), children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            transitionState === "enter" && "fancy-fade-in"
+          ),
+          style: {
+            animationDuration: transitionState === "enter" ? "300ms" : void 0
+          },
+          children: slides[activeIndex]
+        },
+        activeIndex
+      ) });
+    }
+    return /* @__PURE__ */ jsx("div", { ref, "data-react-fancy-carousel-panels": "", className: cn("relative overflow-hidden", className), children: slides[activeIndex] });
+  }
+);
+CarouselPanels.displayName = "CarouselPanels";
+var CarouselSlide = forwardRef(
+  ({ children, className, name: _name }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, "data-react-fancy-carousel-slide": "", className: cn("w-full", className), children });
+  }
+);
+CarouselSlide.displayName = "CarouselSlide";
+var CarouselControls = forwardRef(
+  ({
+    className,
+    prevLabel,
+    nextLabel,
+    finishLabel
+  }, ref) => {
+    const { prev, next, activeIndex, totalSlides, variant, loop, onFinish, headless } = useCarousel();
+    if (headless) {
+      return null;
+    }
+    const isFirst = activeIndex === 0;
+    const isLast = activeIndex === totalSlides - 1;
+    if (variant === "wizard") {
+      return /* @__PURE__ */ jsxs("div", { ref, "data-react-fancy-carousel-controls": "", className: cn("flex items-center gap-2", className), children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: prev,
+            disabled: isFirst,
+            className: "rounded-lg border px-3 py-1 text-sm disabled:opacity-50 dark:border-zinc-600",
+            children: prevLabel ?? "Back"
+          }
+        ),
+        isLast ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onFinish,
+            className: "rounded-lg border border-blue-500 bg-blue-500 px-3 py-1 text-sm text-white hover:bg-blue-600",
+            children: finishLabel ?? "Finish"
+          }
+        ) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: next,
+            className: "rounded-lg border px-3 py-1 text-sm disabled:opacity-50 dark:border-zinc-600",
+            children: nextLabel ?? "Next"
+          }
+        )
+      ] });
+    }
+    const prevDisabled = !loop && isFirst;
+    const nextDisabled = !loop && isLast;
+    return /* @__PURE__ */ jsxs("div", { ref, "data-react-fancy-carousel-controls": "", className: cn("flex items-center gap-2", className), children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: prev,
+          disabled: prevDisabled,
+          className: "rounded-lg border px-3 py-1 text-sm disabled:opacity-50 dark:border-zinc-600",
+          children: prevLabel ?? "\u2190"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: next,
+          disabled: nextDisabled,
+          className: "rounded-lg border px-3 py-1 text-sm disabled:opacity-50 dark:border-zinc-600",
+          children: nextLabel ?? "\u2192"
+        }
+      )
+    ] });
+  }
+);
+CarouselControls.displayName = "CarouselControls";
+var CarouselSteps = forwardRef(
+  ({ className }, ref) => {
+    const { activeIndex, totalSlides, goTo, variant, slideNames, headless } = useCarousel();
+    if (headless) {
+      return null;
+    }
+    if (variant === "wizard") {
+      return /* @__PURE__ */ jsx("div", { ref, "data-react-fancy-carousel-steps": "", className: cn("flex items-center gap-3", className), children: Array.from({ length: totalSlides }, (_, i) => {
+        const isActive = i === activeIndex;
+        const isCompleted = i < activeIndex;
+        const name = slideNames[i];
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => goTo(i),
+            className: cn(
+              "flex items-center gap-1.5 text-sm font-medium transition-colors",
+              isActive && "text-blue-600 dark:text-blue-400",
+              isCompleted && "text-green-600 dark:text-green-400",
+              !isActive && !isCompleted && "text-zinc-400 dark:text-zinc-500"
+            ),
+            "aria-label": name || `Step ${i + 1}`,
+            "aria-current": isActive ? "step" : void 0,
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "flex h-6 w-6 items-center justify-center rounded-full text-xs",
+                    isActive && "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300",
+                    isCompleted && "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300",
+                    !isActive && !isCompleted && "bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-500"
+                  ),
+                  children: isCompleted ? "\u2713" : i + 1
+                }
+              ),
+              name && /* @__PURE__ */ jsx("span", { children: name })
+            ]
+          },
+          i
+        );
+      }) });
+    }
+    return /* @__PURE__ */ jsx("div", { ref, "data-react-fancy-carousel-steps": "", className: cn("flex items-center gap-1.5", className), children: Array.from({ length: totalSlides }, (_, i) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => goTo(i),
+        className: cn(
+          "h-2 w-2 rounded-full transition-colors",
+          i === activeIndex ? "bg-zinc-800 dark:bg-white" : "bg-zinc-300 dark:bg-zinc-600"
+        ),
+        "aria-label": `Go to slide ${i + 1}`
+      },
+      i
+    )) });
+  }
+);
+CarouselSteps.displayName = "CarouselSteps";
+var CarouselRoot = forwardRef(
+  ({
+    children,
+    defaultIndex = 0,
+    activeIndex: controlledIndex,
+    onIndexChange,
+    className,
+    autoPlay = false,
+    interval = 5e3,
+    loop = false,
+    variant = "directional",
+    headless = false,
+    onFinish
+  }, ref) => {
+    const [activeIndex, setActiveIndex] = useControllableState(
+      controlledIndex,
+      defaultIndex,
+      onIndexChange
+    );
+    const [totalSlides, setTotalSlides] = useState(0);
+    const [slideNames, setSlideNames] = useState([]);
+    const [isPaused, setIsPaused] = useState(false);
+    const onFinishRef = useRef(onFinish);
+    onFinishRef.current = onFinish;
+    const registerSlides = useCallback((count) => {
+      setTotalSlides(count);
+    }, []);
+    const registerSlideNames = useCallback((names) => {
+      setSlideNames(names);
+    }, []);
+    const next = useCallback(() => {
+      setActiveIndex((i) => {
+        if (i >= totalSlides - 1) {
+          return loop ? 0 : i;
+        }
+        return i + 1;
+      });
+    }, [totalSlides, loop, setActiveIndex]);
+    const prev = useCallback(() => {
+      setActiveIndex((i) => {
+        if (i <= 0) {
+          return loop ? totalSlides - 1 : i;
+        }
+        return i - 1;
+      });
+    }, [totalSlides, loop, setActiveIndex]);
+    const goTo = useCallback(
+      (index) => setActiveIndex(index),
+      [setActiveIndex]
+    );
+    useEffect(() => {
+      if (!autoPlay || isPaused || totalSlides <= 1) {
+        return;
+      }
+      const id = setInterval(() => {
+        setActiveIndex((i) => {
+          if (i >= totalSlides - 1) {
+            return loop ? 0 : i;
+          }
+          return i + 1;
+        });
+      }, interval);
+      return () => clearInterval(id);
+    }, [autoPlay, interval, isPaused, totalSlides, loop, setActiveIndex]);
+    const ctx = useMemo(
+      () => ({
+        activeIndex,
+        totalSlides,
+        next,
+        prev,
+        goTo,
+        registerSlides,
+        variant,
+        loop,
+        slideNames,
+        registerSlideNames,
+        onFinish: onFinishRef.current,
+        headless
+      }),
+      [
+        activeIndex,
+        totalSlides,
+        next,
+        prev,
+        goTo,
+        registerSlides,
+        variant,
+        loop,
+        slideNames,
+        registerSlideNames,
+        headless
+      ]
+    );
+    const handleMouseEnter = useCallback(() => {
+      if (autoPlay) {
+        setIsPaused(true);
+      }
+    }, [autoPlay]);
+    const handleMouseLeave = useCallback(() => {
+      if (autoPlay) {
+        setIsPaused(false);
+      }
+    }, [autoPlay]);
+    return /* @__PURE__ */ jsx(CarouselContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-react-fancy-carousel": "",
+        ref,
+        className: cn("relative", className),
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children
+      }
+    ) });
+  }
+);
+CarouselRoot.displayName = "Carousel";
+var Carousel = Object.assign(CarouselRoot, {
+  Panels: CarouselPanels,
+  Slide: CarouselSlide,
+  Controls: CarouselControls,
+  Steps: CarouselSteps
+});
+
+export { Carousel, CarouselControls, CarouselPanels, CarouselSlide, CarouselSteps, useCarousel };
+//# sourceMappingURL=chunk-HG6XUJOT.js.map
+//# sourceMappingURL=chunk-HG6XUJOT.js.map

package/dist/chunk-HG6XUJOT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Carousel/Carousel.context.ts","../src/components/Carousel/CarouselPanels.tsx","../src/components/Carousel/CarouselSlide.tsx","../src/components/Carousel/CarouselControls.tsx","../src/components/Carousel/CarouselSteps.tsx","../src/components/Carousel/Carousel.tsx"],"names":["forwardRef","jsx","jsxs","useState","useRef","useEffect"],"mappings":"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","file":"chunk-HG6XUJOT.js","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { CarouselContextValue } from \"./Carousel.types\";\n\nexport const CarouselContext = createContext<CarouselContextValue | null>(null);\nCarouselContext.displayName = \"CarouselContext\";\n\nexport function useCarousel(): CarouselContextValue {\n  const ctx = useContext(CarouselContext);\n  if (!ctx) {\n    throw new Error(\"Carousel compound components must be used within <Carousel>\");\n  }\n  return ctx;\n}\n","import { Children, forwardRef, isValidElement, useEffect, useRef, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useCarousel } from \"./Carousel.context\";\nimport type { CarouselPanelsProps, CarouselSlideProps } from \"./Carousel.types\";\n\nexport const CarouselPanels = forwardRef<HTMLDivElement, CarouselPanelsProps>(\n  ({ children, className, transition = \"none\" }, ref) => {\n    const { activeIndex, registerSlides, registerSlideNames } = useCarousel();\n    const slides = Children.toArray(children);\n    const prevIndexRef = useRef(activeIndex);\n    const [transitionState, setTransitionState] = useState<\"enter\" | \"idle\">(\"idle\");\n\n    // Register slide count\n    useEffect(() => {\n      registerSlides(slides.length);\n    }, [slides.length, registerSlides]);\n\n    // Register slide names from the `name` prop on each Carousel.Slide\n    useEffect(() => {\n      const names = slides.map((slide) => {\n        if (isValidElement<CarouselSlideProps>(slide) && slide.props.name) {\n          return slide.props.name;\n        }\n        return \"\";\n      });\n      registerSlideNames(names);\n    }, [slides.length, registerSlideNames]); // eslint-disable-line react-hooks/exhaustive-deps\n\n    // Handle fade transition when activeIndex changes\n    useEffect(() => {\n      if (transition !== \"fade\") {\n        return;\n      }\n\n      if (prevIndexRef.current !== activeIndex) {\n        setTransitionState(\"enter\");\n        const timer = setTimeout(() => {\n          setTransitionState(\"idle\");\n        }, 300);\n        prevIndexRef.current = activeIndex;\n        return () => clearTimeout(timer);\n      }\n    }, [activeIndex, transition]);\n\n    if (transition === \"fade\") {\n      return (\n        <div ref={ref} data-react-fancy-carousel-panels=\"\" className={cn(\"relative overflow-hidden\", className)}>\n          <div\n            key={activeIndex}\n            className={cn(\n              transitionState === \"enter\" && \"fancy-fade-in\",\n            )}\n            style={{\n              animationDuration: transitionState === \"enter\" ? \"300ms\" : undefined,\n            }}\n          >\n            {slides[activeIndex]}\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div ref={ref} data-react-fancy-carousel-panels=\"\" className={cn(\"relative overflow-hidden\", className)}>\n        {slides[activeIndex]}\n      </div>\n    );\n  },\n);\n\nCarouselPanels.displayName = \"CarouselPanels\";\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { CarouselSlideProps } from \"./Carousel.types\";\n\nexport const CarouselSlide = forwardRef<HTMLDivElement, CarouselSlideProps>(\n  ({ children, className, name: _name }, ref) => {\n    return (\n      <div ref={ref} data-react-fancy-carousel-slide=\"\" className={cn(\"w-full\", className)}>\n        {children}\n      </div>\n    );\n  },\n);\n\nCarouselSlide.displayName = \"CarouselSlide\";\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useCarousel } from \"./Carousel.context\";\nimport type { CarouselControlsProps } from \"./Carousel.types\";\n\nexport const CarouselControls = forwardRef<HTMLDivElement, CarouselControlsProps>(\n  (\n    {\n      className,\n      prevLabel,\n      nextLabel,\n      finishLabel,\n    },\n    ref,\n  ) => {\n    const { prev, next, activeIndex, totalSlides, variant, loop, onFinish, headless } = useCarousel();\n\n    if (headless) {\n      return null;\n    }\n\n    const isFirst = activeIndex === 0;\n    const isLast = activeIndex === totalSlides - 1;\n\n    if (variant === \"wizard\") {\n      return (\n        <div ref={ref} data-react-fancy-carousel-controls=\"\" className={cn(\"flex items-center gap-2\", className)}>\n          <button\n            type=\"button\"\n            onClick={prev}\n            disabled={isFirst}\n            className=\"rounded-lg border px-3 py-1 text-sm disabled:opacity-50 dark:border-zinc-600\"\n          >\n            {prevLabel ?? \"Back\"}\n          </button>\n          {isLast ? (\n            <button\n              type=\"button\"\n              onClick={onFinish}\n              className=\"rounded-lg border border-blue-500 bg-blue-500 px-3 py-1 text-sm text-white hover:bg-blue-600\"\n            >\n              {finishLabel ?? \"Finish\"}\n            </button>\n          ) : (\n            <button\n              type=\"button\"\n              onClick={next}\n              className=\"rounded-lg border px-3 py-1 text-sm disabled:opacity-50 dark:border-zinc-600\"\n            >\n              {nextLabel ?? \"Next\"}\n            </button>\n          )}\n        </div>\n      );\n    }\n\n    // Directional variant (default)\n    const prevDisabled = !loop && isFirst;\n    const nextDisabled = !loop && isLast;\n\n    return (\n      <div ref={ref} data-react-fancy-carousel-controls=\"\" className={cn(\"flex items-center gap-2\", className)}>\n        <button\n          type=\"button\"\n          onClick={prev}\n          disabled={prevDisabled}\n          className=\"rounded-lg border px-3 py-1 text-sm disabled:opacity-50 dark:border-zinc-600\"\n        >\n          {prevLabel ?? \"\\u2190\"}\n        </button>\n        <button\n          type=\"button\"\n          onClick={next}\n          disabled={nextDisabled}\n          className=\"rounded-lg border px-3 py-1 text-sm disabled:opacity-50 dark:border-zinc-600\"\n        >\n          {nextLabel ?? \"\\u2192\"}\n        </button>\n      </div>\n    );\n  },\n);\n\nCarouselControls.displayName = \"CarouselControls\";\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useCarousel } from \"./Carousel.context\";\nimport type { CarouselStepsProps } from \"./Carousel.types\";\n\nexport const CarouselSteps = forwardRef<HTMLDivElement, CarouselStepsProps>(\n  ({ className }, ref) => {\n    const { activeIndex, totalSlides, goTo, variant, slideNames, headless } = useCarousel();\n\n    if (headless) {\n      return null;\n    }\n\n    if (variant === \"wizard\") {\n      return (\n        <div ref={ref} data-react-fancy-carousel-steps=\"\" className={cn(\"flex items-center gap-3\", className)}>\n          {Array.from({ length: totalSlides }, (_, i) => {\n            const isActive = i === activeIndex;\n            const isCompleted = i < activeIndex;\n            const name = slideNames[i];\n\n            return (\n              <button\n                key={i}\n                type=\"button\"\n                onClick={() => goTo(i)}\n                className={cn(\n                  \"flex items-center gap-1.5 text-sm font-medium transition-colors\",\n                  isActive && \"text-blue-600 dark:text-blue-400\",\n                  isCompleted && \"text-green-600 dark:text-green-400\",\n                  !isActive && !isCompleted && \"text-zinc-400 dark:text-zinc-500\",\n                )}\n                aria-label={name || `Step ${i + 1}`}\n                aria-current={isActive ? \"step\" : undefined}\n              >\n                <span\n                  className={cn(\n                    \"flex h-6 w-6 items-center justify-center rounded-full text-xs\",\n                    isActive && \"bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300\",\n                    isCompleted && \"bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300\",\n                    !isActive && !isCompleted && \"bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-500\",\n                  )}\n                >\n                  {isCompleted ? \"\\u2713\" : i + 1}\n                </span>\n                {name && <span>{name}</span>}\n              </button>\n            );\n          })}\n        </div>\n      );\n    }\n\n    // Directional variant: dot indicators (default)\n    return (\n      <div ref={ref} data-react-fancy-carousel-steps=\"\" className={cn(\"flex items-center gap-1.5\", className)}>\n        {Array.from({ length: totalSlides }, (_, i) => (\n          <button\n            key={i}\n            type=\"button\"\n            onClick={() => goTo(i)}\n            className={cn(\n              \"h-2 w-2 rounded-full transition-colors\",\n              i === activeIndex ? \"bg-zinc-800 dark:bg-white\" : \"bg-zinc-300 dark:bg-zinc-600\",\n            )}\n            aria-label={`Go to slide ${i + 1}`}\n          />\n        ))}\n      </div>\n    );\n  },\n);\n\nCarouselSteps.displayName = \"CarouselSteps\";\n","import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport { CarouselContext } from \"./Carousel.context\";\nimport { CarouselPanels } from \"./CarouselPanels\";\nimport { CarouselSlide } from \"./CarouselSlide\";\nimport { CarouselControls } from \"./CarouselControls\";\nimport { CarouselSteps } from \"./CarouselSteps\";\nimport type { CarouselProps, CarouselContextValue } from \"./Carousel.types\";\n\nconst CarouselRoot = forwardRef<HTMLDivElement, CarouselProps>(\n  (\n    {\n      children,\n      defaultIndex = 0,\n      activeIndex: controlledIndex,\n      onIndexChange,\n      className,\n      autoPlay = false,\n      interval = 5000,\n      loop = false,\n      variant = \"directional\",\n      headless = false,\n      onFinish,\n    },\n    ref,\n  ) => {\n    const [activeIndex, setActiveIndex] = useControllableState<number>(\n      controlledIndex,\n      defaultIndex,\n      onIndexChange,\n    );\n    const [totalSlides, setTotalSlides] = useState(0);\n    const [slideNames, setSlideNames] = useState<string[]>([]);\n    const [isPaused, setIsPaused] = useState(false);\n    const onFinishRef = useRef(onFinish);\n    onFinishRef.current = onFinish;\n\n    const registerSlides = useCallback((count: number) => {\n      setTotalSlides(count);\n    }, []);\n\n    const registerSlideNames = useCallback((names: string[]) => {\n      setSlideNames(names);\n    }, []);\n\n    const next = useCallback(() => {\n      setActiveIndex((i: number) => {\n        if (i >= totalSlides - 1) {\n          return loop ? 0 : i;\n        }\n        return i + 1;\n      });\n    }, [totalSlides, loop, setActiveIndex]);\n\n    const prev = useCallback(() => {\n      setActiveIndex((i: number) => {\n        if (i <= 0) {\n          return loop ? totalSlides - 1 : i;\n        }\n        return i - 1;\n      });\n    }, [totalSlides, loop, setActiveIndex]);\n\n    const goTo = useCallback(\n      (index: number) => setActiveIndex(index),\n      [setActiveIndex],\n    );\n\n    // AutoPlay\n    useEffect(() => {\n      if (!autoPlay || isPaused || totalSlides <= 1) {\n        return;\n      }\n\n      const id = setInterval(() => {\n        setActiveIndex((i: number) => {\n          if (i >= totalSlides - 1) {\n            return loop ? 0 : i;\n          }\n          return i + 1;\n        });\n      }, interval);\n\n      return () => clearInterval(id);\n    }, [autoPlay, interval, isPaused, totalSlides, loop, setActiveIndex]);\n\n    const ctx = useMemo<CarouselContextValue>(\n      () => ({\n        activeIndex,\n        totalSlides,\n        next,\n        prev,\n        goTo,\n        registerSlides,\n        variant,\n        loop,\n        slideNames,\n        registerSlideNames,\n        onFinish: onFinishRef.current,\n        headless,\n      }),\n      [\n        activeIndex,\n        totalSlides,\n        next,\n        prev,\n        goTo,\n        registerSlides,\n        variant,\n        loop,\n        slideNames,\n        registerSlideNames,\n        headless,\n      ],\n    );\n\n    const handleMouseEnter = useCallback(() => {\n      if (autoPlay) {\n        setIsPaused(true);\n      }\n    }, [autoPlay]);\n\n    const handleMouseLeave = useCallback(() => {\n      if (autoPlay) {\n        setIsPaused(false);\n      }\n    }, [autoPlay]);\n\n    return (\n      <CarouselContext.Provider value={ctx}>\n        <div\n          data-react-fancy-carousel=\"\"\n          ref={ref}\n          className={cn(\"relative\", className)}\n          onMouseEnter={handleMouseEnter}\n          onMouseLeave={handleMouseLeave}\n        >\n          {children}\n        </div>\n      </CarouselContext.Provider>\n    );\n  },\n);\n\nCarouselRoot.displayName = \"Carousel\";\n\nexport const Carousel = Object.assign(CarouselRoot, {\n  Panels: CarouselPanels,\n  Slide: CarouselSlide,\n  Controls: CarouselControls,\n  Steps: CarouselSteps,\n});\n"]}