@vite-mf-monorepo/ui 0.4.5 → 0.4.7

package/dist/Carousel/Carousel.js

@@ -0,0 +1,268 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import CarouselCounter from "./CarouselCounter";
+import CarouselError from "./CarouselError";
+import CarouselNavigation from "./CarouselNavigation";
+import CarouselPagination from "./CarouselPagination";
+function Carousel({
+  children,
+  variant = "standard",
+  showPagination = true,
+  showArrows = true,
+  arrowPosition = "sides",
+  gap = 16,
+  className,
+  heroControlsClassName,
+  errorMessage,
+  rounded = true,
+  initialIndex,
+  onPrev,
+  onNext,
+  disableAnimation = false,
+  disableScroll = false
+}) {
+  const scrollRef = useRef(null);
+  const [totalPositions, setTotalPositions] = useState(1);
+  const [scrollIndex, setScrollIndex] = useState(initialIndex ?? 0);
+  const currentIndex = disableScroll ? initialIndex ?? 0 : scrollIndex;
+  const isHero = variant === "hero";
+  const isLightbox = variant === "lightbox";
+  const isFullWidth = isHero || isLightbox;
+  const calculatePositions = useCallback(() => {
+    const container = scrollRef.current;
+    if (!container) return;
+    const items = container.children;
+    if (isFullWidth) {
+      setTotalPositions(items.length);
+      return;
+    }
+    const firstItem = items[0];
+    if (!firstItem) {
+      setTotalPositions(1);
+      return;
+    }
+    const itemWidth = firstItem.offsetWidth;
+    const maxScrollLeft = container.scrollWidth - container.offsetWidth;
+    if (maxScrollLeft <= 0) {
+      setTotalPositions(1);
+    } else if (itemWidth > 0) {
+      const positions = Math.round(maxScrollLeft / (itemWidth + gap)) + 1;
+      setTotalPositions(Math.max(1, positions));
+    }
+  }, [gap, isFullWidth]);
+  useEffect(() => {
+    calculatePositions();
+  }, [children, calculatePositions]);
+  useEffect(() => {
+    const container = scrollRef.current;
+    if (!container) return;
+    const resizeObserver = new ResizeObserver(() => {
+      calculatePositions();
+    });
+    resizeObserver.observe(container);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [calculatePositions]);
+  const initialScrollRef = useRef({
+    index: initialIndex ?? 0,
+    isFullWidth,
+    gap
+  });
+  useLayoutEffect(() => {
+    const { index, isFullWidth: fw, gap: g } = initialScrollRef.current;
+    if (index <= 0) return;
+    const container = scrollRef.current;
+    if (!container) return;
+    const firstItem = container.children[0];
+    const itemWidth = fw ? container.offsetWidth : firstItem?.offsetWidth ?? 0;
+    container.style.scrollBehavior = "auto";
+    container.scrollLeft = index * (itemWidth + (fw ? 0 : g));
+    container.style.scrollBehavior = "";
+  }, []);
+  const handleScroll = useCallback(() => {
+    const container = scrollRef.current;
+    if (!container) return;
+    const scrollLeft = container.scrollLeft;
+    const firstItem = container.children[0];
+    const itemWidth = isFullWidth ? container.offsetWidth : firstItem?.offsetWidth ?? 0;
+    if (itemWidth > 0) {
+      const index = Math.round(scrollLeft / (itemWidth + gap));
+      setScrollIndex(Math.min(index, totalPositions - 1));
+    }
+  }, [gap, isFullWidth, totalPositions]);
+  useEffect(() => {
+    if (disableScroll) return;
+    const container = scrollRef.current;
+    if (!container) return;
+    container.addEventListener("scroll", handleScroll);
+    return () => {
+      container.removeEventListener("scroll", handleScroll);
+    };
+  }, [disableScroll, handleScroll]);
+  useEffect(() => {
+    if (!disableScroll) return;
+    const container = scrollRef.current;
+    if (!container) return;
+    const preventScroll = (e) => {
+      e.preventDefault();
+    };
+    container.addEventListener("wheel", preventScroll, { passive: false });
+    return () => {
+      container.removeEventListener("wheel", preventScroll);
+    };
+  }, [disableScroll]);
+  const scrollTo = useCallback(
+    (index) => {
+      const container = scrollRef.current;
+      if (!container) return;
+      const firstItem = container.children[0];
+      const itemWidth = isFullWidth ? container.offsetWidth : firstItem?.offsetWidth ?? 0;
+      const isLastPosition = index === totalPositions - 1;
+      const scrollLeft = isLastPosition ? container.scrollWidth - container.offsetWidth : index * (itemWidth + gap);
+      container.scrollTo({
+        left: scrollLeft,
+        behavior: disableAnimation ? "auto" : "smooth"
+      });
+    },
+    [gap, isFullWidth, totalPositions, disableAnimation]
+  );
+  const scrollPrev = useCallback(() => {
+    if (currentIndex > 0) {
+      scrollTo(currentIndex - 1);
+    }
+  }, [currentIndex, scrollTo]);
+  const scrollNext = useCallback(() => {
+    if (currentIndex < totalPositions - 1) {
+      scrollTo(currentIndex + 1);
+    }
+  }, [currentIndex, totalPositions, scrollTo]);
+  const handlePrev = onPrev ?? scrollPrev;
+  const handleNext = onNext ?? scrollNext;
+  const handlePrevRef = useRef(handlePrev);
+  const handleNextRef = useRef(handleNext);
+  useEffect(() => {
+    handlePrevRef.current = handlePrev;
+    handleNextRef.current = handleNext;
+  });
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "ArrowLeft") handlePrevRef.current();
+      if (e.key === "ArrowRight") handleNextRef.current();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+  if (errorMessage) {
+    return /* @__PURE__ */ jsx(CarouselError, { message: errorMessage });
+  }
+  const canScrollPrev = currentIndex > 0;
+  const canScrollNext = currentIndex < totalPositions - 1;
+  const showControls = totalPositions > 1;
+  return /* @__PURE__ */ jsxs("div", { className: clsx("ui:relative", isLightbox && "ui:h-full", className), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scrollRef,
+        className: clsx(
+          "ui:flex ui:overflow-x-auto ui:scroll-smooth ui:scrollbar-none",
+          isFullWidth && "ui:snap-x ui:snap-mandatory",
+          isLightbox && "ui:h-full",
+          rounded && "ui:rounded-lg ui:overflow-hidden"
+        ),
+        style: { gap: `${String(gap)}px` },
+        children
+      }
+    ),
+    showControls && showArrows && arrowPosition === "sides" && !isHero && !isLightbox && /* @__PURE__ */ jsx(
+      CarouselNavigation,
+      {
+        onPrev: handlePrev,
+        onNext: handleNext,
+        canPrev: canScrollPrev,
+        canNext: canScrollNext,
+        size: "md",
+        position: "sides"
+      }
+    ),
+    showControls && isHero && (showPagination || showArrows) && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(
+          "ui:absolute ui:bottom-4 ui:left-1/2 ui:-translate-x-1/2 ui:w-full ui:z-10 ui:flex ui:items-end",
+          heroControlsClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "ui:flex-1" }),
+          showPagination && /* @__PURE__ */ jsx(
+            CarouselPagination,
+            {
+              total: totalPositions,
+              current: currentIndex,
+              light: true
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "ui:flex-1 ui:flex ui:justify-end", children: showArrows && /* @__PURE__ */ jsx(
+            CarouselNavigation,
+            {
+              onPrev: handlePrev,
+              onNext: handleNext,
+              canPrev: canScrollPrev,
+              canNext: canScrollNext,
+              size: "sm"
+            }
+          ) })
+        ]
+      }
+    ),
+    showControls && !isHero && !isLightbox && (showArrows && arrowPosition === "bottom-right" || showPagination) ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(
+          "ui:mt-4 ui:flex ui:items-center",
+          arrowPosition === "bottom-right" ? "ui:justify-end ui:gap-4" : "ui:justify-center"
+        ),
+        children: [
+          showPagination && /* @__PURE__ */ jsx(CarouselPagination, { total: totalPositions, current: currentIndex }),
+          showArrows && arrowPosition === "bottom-right" && /* @__PURE__ */ jsx(
+            CarouselNavigation,
+            {
+              onPrev: handlePrev,
+              onNext: handleNext,
+              canPrev: canScrollPrev,
+              canNext: canScrollNext,
+              size: "sm"
+            }
+          )
+        ]
+      }
+    ) : null,
+    showControls && isLightbox && /* @__PURE__ */ jsx("div", { className: "ui:absolute ui:top-4 ui:right-4 ui:z-10", children: /* @__PURE__ */ jsx(CarouselCounter, { current: currentIndex, total: totalPositions }) }),
+    showControls && isLightbox && showArrows && /* @__PURE__ */ jsx(
+      CarouselNavigation,
+      {
+        onPrev: handlePrev,
+        onNext: handleNext,
+        canPrev: canScrollPrev,
+        canNext: canScrollNext,
+        size: "md",
+        position: "sides-inset",
+        iconVariant: "ghost"
+      }
+    )
+  ] });
+}
+var Carousel_default = Carousel;
+export {
+  Carousel_default as default
+};
+//# sourceMappingURL=Carousel.js.map

package/dist/Carousel/Carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Carousel/Carousel.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react'\n\nimport CarouselCounter from './CarouselCounter'\nimport CarouselError from './CarouselError'\nimport CarouselNavigation from './CarouselNavigation'\nimport CarouselPagination from './CarouselPagination'\n\nimport type { ReactNode } from 'react'\n\n/** Carousel visual variant */\nexport type CarouselVariant = 'standard' | 'hero' | 'lightbox'\n\n/** Arrow position for navigation buttons */\nexport type CarouselArrowPosition = 'sides' | 'bottom-right'\n\nexport interface CarouselProps {\n  /** Carousel items */\n  children?: ReactNode\n  /** Visual variant */\n  variant?: CarouselVariant\n  /** Show pagination dots (ignored for lightbox — counter is shown instead) */\n  showPagination?: boolean\n  /** Show navigation arrows */\n  showArrows?: boolean\n  /** Arrow position */\n  arrowPosition?: CarouselArrowPosition\n  /** Gap between items in pixels */\n  gap?: number\n  /** Additional class name */\n  className?: string\n  /** Class name for the hero controls container (pagination + arrows) — use to constrain width/padding */\n  heroControlsClassName?: string\n  /** Error message to display instead of carousel content */\n  errorMessage?: string\n  /** Apply rounded corners to viewport */\n  rounded?: boolean\n  /**\n   * Initial scroll index — jumps to this item on mount without animation.\n   * Use with key={index} on Carousel for URL-based navigation (lightbox).\n   */\n  initialIndex?: number\n  /**\n   * Override internal prev navigation (e.g. navigate to previous URL in lightbox).\n   * When provided, replaces internal scrollPrev.\n   */\n  onPrev?: () => void\n  /**\n   * Override internal next navigation (e.g. navigate to next URL in lightbox).\n   * When provided, replaces internal scrollNext.\n   */\n  onNext?: () => void\n  /**\n   * When true, all internal scroll transitions are instant (no smooth animation).\n   * Use for lightbox with URL-based navigation where the Carousel remounts each time.\n   */\n  disableAnimation?: boolean\n  /**\n   * When true, user-initiated wheel/trackpad scroll is blocked on the container,\n   * and currentIndex is driven entirely by initialIndex (no scroll tracking).\n   * Use for URL-driven carousels (lightbox) to avoid scroll/resize desync.\n   */\n  disableScroll?: boolean\n}\n\n/**\n * Carousel component with horizontal scroll, pagination, and navigation.\n * Supports three variants:\n * - standard: multi-items horizontal scroll\n * - hero: single panoramic item with snap\n * - lightbox: single item per view, ghost arrows, counter (for PhotoViewer)\n */\nfunction Carousel({\n  children,\n  variant = 'standard',\n  showPagination = true,\n  showArrows = true,\n  arrowPosition = 'sides',\n  gap = 16,\n  className,\n  heroControlsClassName,\n  errorMessage,\n  rounded = true,\n  initialIndex,\n  onPrev,\n  onNext,\n  disableAnimation = false,\n  disableScroll = false,\n}: Readonly<CarouselProps>) {\n  const scrollRef = useRef<HTMLDivElement>(null)\n  const [totalPositions, setTotalPositions] = useState(1)\n\n  /**\n   * Internal scroll-tracked index — updated by handleScroll on every scroll event.\n   * Only used when disableScroll=false (scroll-driven mode).\n   */\n  const [scrollIndex, setScrollIndex] = useState(initialIndex ?? 0)\n\n  /**\n   * Effective current index.\n   * - disableScroll=true  → driven by initialIndex prop (URL-driven, no scroll tracking)\n   * - disableScroll=false → driven by scroll events via scrollIndex state\n   * This separation prevents ResizeObserver/snap drift from corrupting the index\n   * in URL-driven carousels (lightbox).\n   */\n  const currentIndex = disableScroll ? (initialIndex ?? 0) : scrollIndex\n\n  const isHero = variant === 'hero'\n  const isLightbox = variant === 'lightbox'\n  /** Hero and lightbox both use container width for per-item scroll calculation */\n  const isFullWidth = isHero || isLightbox\n\n  /**\n   * Calculates the total number of scroll positions based on container and item dimensions.\n   * For hero/lightbox: positions = number of items (one per slide).\n   * For standard: positions = ceil(maxScrollLeft / itemWidth) + 1.\n   */\n  const calculatePositions = useCallback(() => {\n    const container = scrollRef.current\n    if (!container) return\n\n    const items = container.children\n\n    if (isFullWidth) {\n      setTotalPositions(items.length)\n      return\n    }\n\n    const firstItem = items[0] as HTMLElement | undefined\n    if (!firstItem) {\n      setTotalPositions(1)\n      return\n    }\n\n    const itemWidth = firstItem.offsetWidth\n    const maxScrollLeft = container.scrollWidth - container.offsetWidth\n\n    if (maxScrollLeft <= 0) {\n      setTotalPositions(1)\n    } else if (itemWidth > 0) {\n      const positions = Math.round(maxScrollLeft / (itemWidth + gap)) + 1\n      setTotalPositions(Math.max(1, positions))\n    }\n  }, [gap, isFullWidth])\n\n  /**\n   * Effect: Recalculates positions when children or calculatePositions function changes.\n   */\n  useEffect(() => {\n    calculatePositions()\n  }, [children, calculatePositions])\n\n  /**\n   * Effect: Sets up ResizeObserver to recalculate positions on viewport/container resize.\n   */\n  useEffect(() => {\n    const container = scrollRef.current\n    if (!container) return\n\n    const resizeObserver = new ResizeObserver(() => {\n      calculatePositions()\n    })\n\n    resizeObserver.observe(container)\n    return () => {\n      resizeObserver.disconnect()\n    }\n  }, [calculatePositions])\n\n  /**\n   * Effect: Jumps to initialIndex on mount (no animation).\n   * Consumed by lightbox via key={index} remounting — refs avoid stale closure.\n   */\n  const initialScrollRef = useRef({\n    index: initialIndex ?? 0,\n    isFullWidth,\n    gap,\n  })\n\n  useLayoutEffect(() => {\n    const { index, isFullWidth: fw, gap: g } = initialScrollRef.current\n    if (index <= 0) return\n    const container = scrollRef.current\n    if (!container) return\n    const firstItem = container.children[0] as HTMLElement | undefined\n    const itemWidth = fw ? container.offsetWidth : (firstItem?.offsetWidth ?? 0)\n    // Override CSS scroll-behavior: smooth — jump must be instant before first paint\n    container.style.scrollBehavior = 'auto'\n    container.scrollLeft = index * (itemWidth + (fw ? 0 : g))\n    container.style.scrollBehavior = ''\n  }, [])\n\n  /**\n   * Effect: Tracks scroll position to update currentIndex.\n   * Skipped entirely when disableScroll=true (currentIndex comes from initialIndex).\n   */\n  const handleScroll = useCallback(() => {\n    const container = scrollRef.current\n    if (!container) return\n\n    const scrollLeft = container.scrollLeft\n    const firstItem = container.children[0] as HTMLElement | undefined\n    const itemWidth = isFullWidth\n      ? container.offsetWidth\n      : (firstItem?.offsetWidth ?? 0)\n\n    if (itemWidth > 0) {\n      const index = Math.round(scrollLeft / (itemWidth + gap))\n      setScrollIndex(Math.min(index, totalPositions - 1))\n    }\n  }, [gap, isFullWidth, totalPositions])\n\n  /**\n   * Effect: Attaches scroll listener to update scrollIndex.\n   * Skipped when disableScroll=true — currentIndex is driven by initialIndex prop instead.\n   */\n  useEffect(() => {\n    if (disableScroll) return\n    const container = scrollRef.current\n    if (!container) return\n\n    container.addEventListener('scroll', handleScroll)\n    return () => {\n      container.removeEventListener('scroll', handleScroll)\n    }\n  }, [disableScroll, handleScroll])\n\n  /**\n   * Effect: Blocks wheel/trackpad scroll when disableScroll=true.\n   * Uses preventDefault on wheel events — must be non-passive to work.\n   */\n  useEffect(() => {\n    if (!disableScroll) return\n    const container = scrollRef.current\n    if (!container) return\n\n    const preventScroll = (e: WheelEvent) => {\n      e.preventDefault()\n    }\n\n    container.addEventListener('wheel', preventScroll, { passive: false })\n    return () => {\n      container.removeEventListener('wheel', preventScroll)\n    }\n  }, [disableScroll])\n\n  /**\n   * Scrolls to a specific position index with smooth animation.\n   */\n  const scrollTo = useCallback(\n    (index: number) => {\n      const container = scrollRef.current\n      if (!container) return\n\n      const firstItem = container.children[0] as HTMLElement | undefined\n      const itemWidth = isFullWidth\n        ? container.offsetWidth\n        : (firstItem?.offsetWidth ?? 0)\n\n      const isLastPosition = index === totalPositions - 1\n      const scrollLeft = isLastPosition\n        ? container.scrollWidth - container.offsetWidth\n        : index * (itemWidth + gap)\n\n      container.scrollTo({\n        left: scrollLeft,\n        behavior: disableAnimation ? 'auto' : 'smooth',\n      })\n    },\n    [gap, isFullWidth, totalPositions, disableAnimation]\n  )\n\n  /** Scrolls to the previous position (internal fallback when onPrev is not provided) */\n  const scrollPrev = useCallback(() => {\n    if (currentIndex > 0) {\n      scrollTo(currentIndex - 1)\n    }\n  }, [currentIndex, scrollTo])\n\n  /** Scrolls to the next position (internal fallback when onNext is not provided) */\n  const scrollNext = useCallback(() => {\n    if (currentIndex < totalPositions - 1) {\n      scrollTo(currentIndex + 1)\n    }\n  }, [currentIndex, totalPositions, scrollTo])\n\n  /** Effective prev handler: external callback takes priority over internal scroll */\n  const handlePrev = onPrev ?? scrollPrev\n  /** Effective next handler: external callback takes priority over internal scroll */\n  const handleNext = onNext ?? scrollNext\n\n  /**\n   * Refs that always point to the latest handlePrev/handleNext.\n   * Allows the keyboard effect to use a stable listener (empty deps) without stale closures.\n   */\n  const handlePrevRef = useRef(handlePrev)\n  const handleNextRef = useRef(handleNext)\n  useEffect(() => {\n    handlePrevRef.current = handlePrev\n    handleNextRef.current = handleNext\n  })\n\n  /**\n   * Effect: Keyboard navigation — ArrowLeft/ArrowRight trigger prev/next.\n   * Listens on document so it works in lightbox (fullscreen) without requiring focus.\n   */\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'ArrowLeft') handlePrevRef.current()\n      if (e.key === 'ArrowRight') handleNextRef.current()\n    }\n    document.addEventListener('keydown', handleKeyDown)\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown)\n    }\n  }, [])\n\n  if (errorMessage) {\n    return <CarouselError message={errorMessage} />\n  }\n\n  const canScrollPrev = currentIndex > 0\n  const canScrollNext = currentIndex < totalPositions - 1\n  const showControls = totalPositions > 1\n\n  return (\n    <div className={clsx('ui:relative', isLightbox && 'ui:h-full', className)}>\n      {/* Scroll container */}\n      <div\n        ref={scrollRef}\n        className={clsx(\n          'ui:flex ui:overflow-x-auto ui:scroll-smooth ui:scrollbar-none',\n          isFullWidth && 'ui:snap-x ui:snap-mandatory',\n          isLightbox && 'ui:h-full',\n          rounded && 'ui:rounded-lg ui:overflow-hidden'\n        )}\n        style={{ gap: `${String(gap)}px` }}\n      >\n        {children}\n      </div>\n\n      {/* Standard: Arrows on sides */}\n      {showControls &&\n        showArrows &&\n        arrowPosition === 'sides' &&\n        !isHero &&\n        !isLightbox && (\n          <CarouselNavigation\n            onPrev={handlePrev}\n            onNext={handleNext}\n            canPrev={canScrollPrev}\n            canNext={canScrollNext}\n            size=\"md\"\n            position=\"sides\"\n          />\n        )}\n\n      {/* Hero: single container — pagination centered, arrows right-aligned */}\n      {showControls && isHero && (showPagination || showArrows) && (\n        <div\n          className={clsx(\n            'ui:absolute ui:bottom-4 ui:left-1/2 ui:-translate-x-1/2 ui:w-full ui:z-10 ui:flex ui:items-end',\n            heroControlsClassName\n          )}\n        >\n          <div className=\"ui:flex-1\" />\n          {showPagination && (\n            <CarouselPagination\n              total={totalPositions}\n              current={currentIndex}\n              light\n            />\n          )}\n          <div className=\"ui:flex-1 ui:flex ui:justify-end\">\n            {showArrows && (\n              <CarouselNavigation\n                onPrev={handlePrev}\n                onNext={handleNext}\n                canPrev={canScrollPrev}\n                canNext={canScrollNext}\n                size=\"sm\"\n              />\n            )}\n          </div>\n        </div>\n      )}\n\n      {/* Standard: Pagination + Arrows below */}\n      {showControls &&\n      !isHero &&\n      !isLightbox &&\n      ((showArrows && arrowPosition === 'bottom-right') || showPagination) ? (\n        <div\n          className={clsx(\n            'ui:mt-4 ui:flex ui:items-center',\n            arrowPosition === 'bottom-right'\n              ? 'ui:justify-end ui:gap-4'\n              : 'ui:justify-center'\n          )}\n        >\n          {showPagination && (\n            <CarouselPagination total={totalPositions} current={currentIndex} />\n          )}\n          {showArrows && arrowPosition === 'bottom-right' && (\n            <CarouselNavigation\n              onPrev={handlePrev}\n              onNext={handleNext}\n              canPrev={canScrollPrev}\n              canNext={canScrollNext}\n              size=\"sm\"\n            />\n          )}\n        </div>\n      ) : null}\n\n      {/* Lightbox: Counter top-right, ghost arrows on sides */}\n      {showControls && isLightbox && (\n        <div className=\"ui:absolute ui:top-4 ui:right-4 ui:z-10\">\n          <CarouselCounter current={currentIndex} total={totalPositions} />\n        </div>\n      )}\n      {showControls && isLightbox && showArrows && (\n        <CarouselNavigation\n          onPrev={handlePrev}\n          onNext={handleNext}\n          canPrev={canScrollPrev}\n          canNext={canScrollNext}\n          size=\"md\"\n          position=\"sides-inset\"\n          iconVariant=\"ghost\"\n        />\n      )}\n    </div>\n  )\n}\n\nexport default Carousel\n"],"mappings":"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","names":[]}

package/dist/Carousel/CarouselCounter.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface CarouselCounterProps {
+    /** Current index (0-based) — displayed as 1-based */
+    current: number;
+    /** Total number of items */
+    total: number;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Counter for Carousel lightbox variant.
+ * Displays current position as "3 / 20" (1-indexed).
+ */
+declare function CarouselCounter({ current, total, className, }: Readonly<CarouselCounterProps>): react_jsx_runtime.JSX.Element;
+
+export { type CarouselCounterProps, CarouselCounter as default };

package/dist/Carousel/CarouselCounter.js

@@ -0,0 +1,28 @@
+import { jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+function CarouselCounter({
+  current,
+  total,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "ui:bg-black/50 ui:rounded-full ui:px-3 ui:py-1",
+        "ui:text-white/90 ui:text-sm ui:font-medium ui:tabular-nums",
+        className
+      ),
+      children: [
+        current + 1,
+        " / ",
+        total
+      ]
+    }
+  );
+}
+var CarouselCounter_default = CarouselCounter;
+export {
+  CarouselCounter_default as default
+};
+//# sourceMappingURL=CarouselCounter.js.map

package/dist/Carousel/CarouselCounter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Carousel/CarouselCounter.tsx"],"sourcesContent":["import clsx from 'clsx'\n\nexport interface CarouselCounterProps {\n  /** Current index (0-based) — displayed as 1-based */\n  current: number\n  /** Total number of items */\n  total: number\n  /** Additional class name */\n  className?: string\n}\n\n/**\n * Counter for Carousel lightbox variant.\n * Displays current position as \"3 / 20\" (1-indexed).\n */\nfunction CarouselCounter({\n  current,\n  total,\n  className,\n}: Readonly<CarouselCounterProps>) {\n  return (\n    <div\n      className={clsx(\n        'ui:bg-black/50 ui:rounded-full ui:px-3 ui:py-1',\n        'ui:text-white/90 ui:text-sm ui:font-medium ui:tabular-nums',\n        className\n      )}\n    >\n      {current + 1} / {total}\n    </div>\n  )\n}\n\nexport default CarouselCounter\n"],"mappings":"AAqBI;AArBJ,OAAO,UAAU;AAejB,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,GAAmC;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA,kBAAU;AAAA,QAAE;AAAA,QAAI;AAAA;AAAA;AAAA,EACnB;AAEJ;AAEA,IAAO,0BAAQ;","names":[]}

package/dist/Carousel/CarouselError.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface CarouselErrorProps {
+    message?: string;
+}
+declare function CarouselError({ message, }: Readonly<CarouselErrorProps>): react_jsx_runtime.JSX.Element;
+
+export { type CarouselErrorProps, CarouselError as default };

package/dist/Carousel/CarouselError.js

@@ -0,0 +1,18 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Icon } from "../Icon";
+function CarouselError({
+  message = "Failed to load data"
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "ui:flex ui:flex-col ui:items-center ui:justify-center ui:gap-3 ui:rounded-lg ui:border ui:border-red-200 ui:bg-red-50 ui:p-8 ui:text-center", children: [
+    /* @__PURE__ */ jsx(Icon, { name: "ExclamationTriangle", size: 48, className: "ui:text-red-500" }),
+    /* @__PURE__ */ jsxs("div", { className: "ui:flex ui:flex-col ui:gap-1", children: [
+      /* @__PURE__ */ jsx("p", { className: "ui:text-sm ui:font-semibold ui:text-red-900", children: "Failed to fetch data" }),
+      /* @__PURE__ */ jsx("p", { className: "ui:text-sm ui:text-red-700", children: message })
+    ] })
+  ] });
+}
+var CarouselError_default = CarouselError;
+export {
+  CarouselError_default as default
+};
+//# sourceMappingURL=CarouselError.js.map

package/dist/Carousel/CarouselError.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Carousel/CarouselError.tsx"],"sourcesContent":["import { Icon } from '../Icon'\n\nexport interface CarouselErrorProps {\n  message?: string\n}\n\nfunction CarouselError({\n  message = 'Failed to load data',\n}: Readonly<CarouselErrorProps>) {\n  return (\n    <div className=\"ui:flex ui:flex-col ui:items-center ui:justify-center ui:gap-3 ui:rounded-lg ui:border ui:border-red-200 ui:bg-red-50 ui:p-8 ui:text-center\">\n      <Icon name=\"ExclamationTriangle\" size={48} className=\"ui:text-red-500\" />\n      <div className=\"ui:flex ui:flex-col ui:gap-1\">\n        <p className=\"ui:text-sm ui:font-semibold ui:text-red-900\">\n          Failed to fetch data\n        </p>\n        <p className=\"ui:text-sm ui:text-red-700\">{message}</p>\n      </div>\n    </div>\n  )\n}\n\nexport default CarouselError\n"],"mappings":"AAWM,cACA,YADA;AAXN,SAAS,YAAY;AAMrB,SAAS,cAAc;AAAA,EACrB,UAAU;AACZ,GAAiC;AAC/B,SACE,qBAAC,SAAI,WAAU,+IACb;AAAA,wBAAC,QAAK,MAAK,uBAAsB,MAAM,IAAI,WAAU,mBAAkB;AAAA,IACvE,qBAAC,SAAI,WAAU,gCACb;AAAA,0BAAC,OAAE,WAAU,+CAA8C,kCAE3D;AAAA,MACA,oBAAC,OAAE,WAAU,8BAA8B,mBAAQ;AAAA,OACrD;AAAA,KACF;AAEJ;AAEA,IAAO,wBAAQ;","names":[]}

package/dist/Carousel/CarouselItem.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes } from 'react';
+
+interface CarouselItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** Whether this is a hero item (full width with snap) */
+    isHero?: boolean;
+    /** Whether this is a lightbox item (full width with snap, same layout as hero) */
+    isLightbox?: boolean;
+}
+/**
+ * Wrapper for individual carousel items.
+ * For hero and lightbox variants, items take full width and snap to center.
+ */
+declare function CarouselItem({ children, isHero, isLightbox, className, ...rest }: Readonly<CarouselItemProps>): react_jsx_runtime.JSX.Element;
+
+export { type CarouselItemProps, CarouselItem as default };

package/dist/Carousel/CarouselItem.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+function CarouselItem({
+  children,
+  isHero = false,
+  isLightbox = false,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        "ui:flex-shrink-0",
+        (isHero || isLightbox) && "ui:w-full ui:snap-center",
+        isLightbox && "ui:flex ui:items-center ui:justify-center ui:h-full",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+var CarouselItem_default = CarouselItem;
+export {
+  CarouselItem_default as default
+};
+//# sourceMappingURL=CarouselItem.js.map

package/dist/Carousel/CarouselItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Carousel/CarouselItem.tsx"],"sourcesContent":["import clsx from 'clsx'\n\nimport type { HTMLAttributes } from 'react'\n\nexport interface CarouselItemProps extends HTMLAttributes<HTMLDivElement> {\n  /** Whether this is a hero item (full width with snap) */\n  isHero?: boolean\n  /** Whether this is a lightbox item (full width with snap, same layout as hero) */\n  isLightbox?: boolean\n}\n\n/**\n * Wrapper for individual carousel items.\n * For hero and lightbox variants, items take full width and snap to center.\n */\nfunction CarouselItem({\n  children,\n  isHero = false,\n  isLightbox = false,\n  className,\n  ...rest\n}: Readonly<CarouselItemProps>) {\n  return (\n    <div\n      className={clsx(\n        'ui:flex-shrink-0',\n        (isHero || isLightbox) && 'ui:w-full ui:snap-center',\n        isLightbox && 'ui:flex ui:items-center ui:justify-center ui:h-full',\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport default CarouselItem\n"],"mappings":"AAuBI;AAvBJ,OAAO,UAAU;AAejB,SAAS,aAAa;AAAA,EACpB;AAAA,EACA,SAAS;AAAA,EACT,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,GAAgC;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,SACC,UAAU,eAAe;AAAA,QAC1B,cAAc;AAAA,QACd;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,uBAAQ;","names":[]}

package/dist/Carousel/CarouselLoading.d.ts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface CarouselLoadingProps {
+    /** Number of skeleton cards to display */
+    count?: number;
+    /** Width of each card in pixels */
+    cardWidth?: number;
+    /** Height of each card in pixels */
+    cardHeight?: number;
+    /** Show skeleton for title */
+    showTitle?: boolean;
+    /** Show skeleton for subtitle/date */
+    showSubtitle?: boolean;
+    /** Apply rounded corners to skeleton */
+    rounded?: boolean;
+}
+/**
+ * CarouselLoading - Loading state for carousel with skeleton cards
+ *
+ * Displays a horizontal scrollable list of skeleton placeholders
+ * matching the structure of MovieCard components.
+ */
+declare function CarouselLoading({ count, cardWidth, cardHeight, showTitle, showSubtitle, rounded, }: Readonly<CarouselLoadingProps>): react_jsx_runtime.JSX.Element;
+
+export { type CarouselLoadingProps, CarouselLoading as default };

package/dist/Carousel/CarouselLoading.js

@@ -0,0 +1,63 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Skeleton from "../Skeleton/Skeleton";
+function CarouselLoading({
+  count = 6,
+  cardWidth = 150,
+  cardHeight = 225,
+  showTitle = true,
+  showSubtitle = true,
+  rounded = true
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "ui:overflow-x-auto ui:flex ui:gap-4", children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: { width: cardWidth, minWidth: cardWidth, maxWidth: cardWidth },
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { width: cardWidth, height: cardHeight }, children: /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            variant: "rectangle",
+            width: "ui:w-full",
+            height: "ui:h-full",
+            rounded
+          }
+        ) }),
+        (showTitle || showSubtitle) && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              marginTop: 8,
+              display: "flex",
+              flexDirection: "column",
+              gap: 8
+            },
+            children: [
+              showTitle && /* @__PURE__ */ jsx("div", { style: { width: cardWidth, height: 16 }, children: /* @__PURE__ */ jsx(
+                Skeleton,
+                {
+                  variant: "line",
+                  width: "ui:w-full",
+                  height: "ui:h-full"
+                }
+              ) }),
+              showSubtitle && /* @__PURE__ */ jsx("div", { style: { width: cardWidth * 0.75, height: 12 }, children: /* @__PURE__ */ jsx(
+                Skeleton,
+                {
+                  variant: "line",
+                  width: "ui:w-full",
+                  height: "ui:h-full"
+                }
+              ) })
+            ]
+          }
+        )
+      ]
+    },
+    i
+  )) });
+}
+var CarouselLoading_default = CarouselLoading;
+export {
+  CarouselLoading_default as default
+};
+//# sourceMappingURL=CarouselLoading.js.map

package/dist/Carousel/CarouselLoading.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Carousel/CarouselLoading.tsx"],"sourcesContent":["import Skeleton from '../Skeleton/Skeleton'\n\nexport interface CarouselLoadingProps {\n  /** Number of skeleton cards to display */\n  count?: number\n  /** Width of each card in pixels */\n  cardWidth?: number\n  /** Height of each card in pixels */\n  cardHeight?: number\n  /** Show skeleton for title */\n  showTitle?: boolean\n  /** Show skeleton for subtitle/date */\n  showSubtitle?: boolean\n  /** Apply rounded corners to skeleton */\n  rounded?: boolean\n}\n\n/**\n * CarouselLoading - Loading state for carousel with skeleton cards\n *\n * Displays a horizontal scrollable list of skeleton placeholders\n * matching the structure of MovieCard components.\n */\nfunction CarouselLoading({\n  count = 6,\n  cardWidth = 150,\n  cardHeight = 225,\n  showTitle = true,\n  showSubtitle = true,\n  rounded = true,\n}: Readonly<CarouselLoadingProps>) {\n  return (\n    <div className=\"ui:overflow-x-auto ui:flex ui:gap-4\">\n      {Array.from({ length: count }).map((_, i) => (\n        <div\n          key={i}\n          style={{ width: cardWidth, minWidth: cardWidth, maxWidth: cardWidth }}\n        >\n          <div style={{ width: cardWidth, height: cardHeight }}>\n            <Skeleton\n              variant=\"rectangle\"\n              width=\"ui:w-full\"\n              height=\"ui:h-full\"\n              rounded={rounded}\n            />\n          </div>\n          {(showTitle || showSubtitle) && (\n            <div\n              style={{\n                marginTop: 8,\n                display: 'flex',\n                flexDirection: 'column',\n                gap: 8,\n              }}\n            >\n              {showTitle && (\n                <div style={{ width: cardWidth, height: 16 }}>\n                  <Skeleton\n                    variant=\"line\"\n                    width=\"ui:w-full\"\n                    height=\"ui:h-full\"\n                  />\n                </div>\n              )}\n              {showSubtitle && (\n                <div style={{ width: cardWidth * 0.75, height: 12 }}>\n                  <Skeleton\n                    variant=\"line\"\n                    width=\"ui:w-full\"\n                    height=\"ui:h-full\"\n                  />\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport default CarouselLoading\n"],"mappings":"AAuCY,cAQA,YARA;AAvCZ,OAAO,cAAc;AAuBrB,SAAS,gBAAgB;AAAA,EACvB,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,UAAU;AACZ,GAAmC;AACjC,SACE,oBAAC,SAAI,WAAU,uCACZ,gBAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,MACrC;AAAA,IAAC;AAAA;AAAA,MAEC,OAAO,EAAE,OAAO,WAAW,UAAU,WAAW,UAAU,UAAU;AAAA,MAEpE;AAAA,4BAAC,SAAI,OAAO,EAAE,OAAO,WAAW,QAAQ,WAAW,GACjD;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,QAAO;AAAA,YACP;AAAA;AAAA,QACF,GACF;AAAA,SACE,aAAa,iBACb;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,WAAW;AAAA,cACX,SAAS;AAAA,cACT,eAAe;AAAA,cACf,KAAK;AAAA,YACP;AAAA,YAEC;AAAA,2BACC,oBAAC,SAAI,OAAO,EAAE,OAAO,WAAW,QAAQ,GAAG,GACzC;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,OAAM;AAAA,kBACN,QAAO;AAAA;AAAA,cACT,GACF;AAAA,cAED,gBACC,oBAAC,SAAI,OAAO,EAAE,OAAO,YAAY,MAAM,QAAQ,GAAG,GAChD;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,OAAM;AAAA,kBACN,QAAO;AAAA;AAAA,cACT,GACF;AAAA;AAAA;AAAA,QAEJ;AAAA;AAAA;AAAA,IAtCG;AAAA,EAwCP,CACD,GACH;AAEJ;AAEA,IAAO,0BAAQ;","names":[]}

package/dist/Carousel/CarouselNavigation.d.ts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/** Position mode for navigation buttons */
+type CarouselNavigationPosition = 'inline' | 'sides' | 'sides-inset';
+interface CarouselNavigationProps {
+    /** Callback for previous button */
+    onPrev: () => void;
+    /** Callback for next button */
+    onNext: () => void;
+    /** Whether previous is disabled */
+    canPrev: boolean;
+    /** Whether next is disabled */
+    canNext: boolean;
+    /** Button size */
+    size?: 'sm' | 'md';
+    /** Position mode */
+    position?: CarouselNavigationPosition;
+    /** Icon button visual variant — ghost for lightbox (white arrows on dark bg) */
+    iconVariant?: 'secondary' | 'ghost';
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Navigation buttons for Carousel (previous/next).
+ * - inline: side by side (for bottom-right layout)
+ * - sides: absolute, centered on the carousel edges (overhangs container — standard carousel)
+ * - sides-inset: absolute, inside the container with padding (lightbox, fullscreen contexts)
+ */
+declare function CarouselNavigation({ onPrev, onNext, canPrev, canNext, size, position, iconVariant, className, }: Readonly<CarouselNavigationProps>): react_jsx_runtime.JSX.Element;
+
+export { type CarouselNavigationPosition, type CarouselNavigationProps, CarouselNavigation as default };