@vite-mf-monorepo/ui 0.4.4 → 0.4.6

package/dist/index.js

@@ -1,1101 +1,52 @@
-import './chunk-DGJI4VNO.js';
-import { Skeleton_default } from './chunk-FJZK3PY6.js';
-export { Skeleton_default as Skeleton } from './chunk-FJZK3PY6.js';
-export { Image_default as Image, MovieCard_default as MovieCard } from './chunk-7IAJQE27.js';
-import { Button_default } from './chunk-ZTQU4GMY.js';
-export { Button_default as Button } from './chunk-ZTQU4GMY.js';
-import { Typography_default } from './chunk-6DP3KZQG.js';
-export { Rating_default as Rating, Typography_default as Typography } from './chunk-6DP3KZQG.js';
-import './chunk-IUGKH376.js';
-export { Card_default as Card } from './chunk-RZU2FFBW.js';
-import { Icon_default } from './chunk-6FBMTGXQ.js';
-export { Icon_default as Icon } from './chunk-6FBMTGXQ.js';
-import clsx8 from 'clsx';
-import { createContext, useState, useRef, useEffect, useCallback, useLayoutEffect, useContext } from 'react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { getOptimizedImageUrl } from '@vite-mf-monorepo/shared';
-
-var sizeMap = {
-  xs: { container: "ui:h-6 ui:w-6", icon: 12, text: "ui:text-xs" },
-  sm: { container: "ui:h-8 ui:w-8", icon: 16, text: "ui:text-sm" },
-  md: { container: "ui:h-10 ui:w-10", icon: 20, text: "ui:text-base" },
-  lg: { container: "ui:h-12 ui:w-12", icon: 24, text: "ui:text-lg" },
-  xl: { container: "ui:h-16 ui:w-16", icon: 32, text: "ui:text-xl" },
-  "2xl": { container: "ui:h-24 ui:w-24", icon: 48, text: "ui:text-2xl" },
-  "3xl": { container: "ui:h-32 ui:w-32", icon: 64, text: "ui:text-3xl" }
+import "./styles.css";
+import { Avatar } from "./Avatar";
+import { Badge } from "./Badge";
+import { Button } from "./Button";
+import { Card } from "./Card";
+import { Icon } from "./Icon";
+import { IconButton } from "./IconButton";
+import { Image } from "./Image";
+import { HeroImage } from "./HeroImage";
+import { Modal } from "./Modal";
+import { Rating } from "./Rating";
+import { MovieCard } from "./MovieCard";
+import { TrailerCard } from "./TrailerCard";
+import {
+  Carousel,
+  CarouselCounter,
+  CarouselItem,
+  CarouselLoading,
+  CarouselNavigation,
+  CarouselPagination
+} from "./Carousel";
+import { Tabs } from "./Tabs";
+import { Skeleton } from "./Skeleton";
+import { Talent } from "./Talent";
+import { Typography } from "./Typography";
+import { Spinner } from "./Spinner";
+export {
+  Avatar,
+  Badge,
+  Button,
+  Card,
+  Carousel,
+  CarouselCounter,
+  CarouselItem,
+  CarouselLoading,
+  CarouselNavigation,
+  CarouselPagination,
+  HeroImage,
+  Icon,
+  IconButton,
+  Image,
+  Modal,
+  MovieCard,
+  Rating,
+  Skeleton,
+  Spinner,
+  Tabs,
+  Talent,
+  TrailerCard,
+  Typography
 };
-function Avatar({
-  className,
-  src,
-  alt,
-  size = "md",
-  initials,
-  testId,
-  ...rest
-}) {
-  const [hasError, setHasError] = useState(false);
-  const { container, icon, text } = sizeMap[size];
-  const showImage = src && !hasError;
-  const showInitials = !showImage && initials;
-  const showFallback = !showImage && !initials;
-  const handleError = () => {
-    setHasError(true);
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clsx8(
-        "ui:relative ui:inline-flex ui:items-center ui:justify-center ui:overflow-hidden ui:rounded-full",
-        "ui:bg-muted ui:text-muted-foreground",
-        container,
-        className
-      ),
-      children: [
-        showImage && /* @__PURE__ */ jsx(
-          "img",
-          {
-            src,
-            alt,
-            onError: handleError,
-            className: "ui:h-full ui:w-full ui:object-cover",
-            "data-testid": testId,
-            ...rest
-          }
-        ),
-        showInitials && /* @__PURE__ */ jsx("span", { className: clsx8("ui:font-medium ui:uppercase", text), children: initials.slice(0, 2) }),
-        showFallback && /* @__PURE__ */ jsx(Icon_default, { name: "User", size: icon })
-      ]
-    }
-  );
-}
-var Avatar_default = Avatar;
-var sizeMap2 = {
-  sm: { padding: "ui:px-2 ui:py-0.5", text: "ui:text-xs", iconSize: 16 },
-  md: { padding: "ui:px-2.5 ui:py-0.5", text: "ui:text-sm", iconSize: 16 },
-  lg: { padding: "ui:px-3 ui:py-1", text: "ui:text-sm", iconSize: 16 }
-};
-function Badge({
-  children,
-  variant = "default",
-  size = "md",
-  icon,
-  textClassName,
-  className
-}) {
-  const { padding, text, iconSize } = sizeMap2[size];
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      className: clsx8(
-        "ui:inline-flex ui:items-center ui:gap-1 ui:rounded-full ui:font-medium",
-        padding,
-        text,
-        {
-          "ui:bg-primary": variant === "default",
-          "ui:text-primary-foreground": variant === "default" && !textClassName,
-          "ui:bg-secondary": variant === "secondary",
-          "ui:text-secondary-foreground": variant === "secondary" && !textClassName,
-          "ui:border ui:border-input ui:bg-transparent": variant === "outline",
-          "ui:bg-destructive": variant === "destructive",
-          "ui:text-destructive-foreground": variant === "destructive" && !textClassName
-        },
-        textClassName,
-        className
-      ),
-      children: [
-        icon && /* @__PURE__ */ jsx(Icon_default, { name: icon, size: iconSize }),
-        children
-      ]
-    }
-  );
-}
-var Badge_default = Badge;
-var sizeMap3 = {
-  sm: { button: "ui:h-8 ui:w-8", icon: 16 },
-  md: { button: "ui:h-10 ui:w-10", icon: 20 },
-  lg: { button: "ui:h-12 ui:w-12", icon: 24 }
-};
-function IconButton({
-  className,
-  icon,
-  variant = "ghost",
-  size = "md",
-  disabled,
-  ...rest
-}) {
-  const { button: buttonSize, icon: iconSize } = sizeMap3[size];
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      className: clsx8(
-        "ui:inline-flex ui:items-center ui:justify-center ui:cursor-pointer ui:rounded-full ui:transition-colors",
-        "ui:focus:outline-none ui:focus:ring-2 ui:focus:ring-ring ui:focus:ring-offset-2",
-        "ui:disabled:pointer-events-none ui:disabled:opacity-50",
-        {
-          "ui:bg-primary ui:text-primary-foreground ui:hover:bg-primary/90": variant === "primary",
-          "ui:bg-secondary ui:text-secondary-foreground ui:hover:bg-secondary/80": variant === "secondary",
-          "ui:hover:bg-accent ui:hover:text-accent-foreground": variant === "ghost",
-          "ui:border ui:border-input ui:bg-background ui:hover:bg-accent ui:hover:text-accent-foreground": variant === "outline"
-        },
-        buttonSize,
-        className
-      ),
-      disabled,
-      ...rest,
-      children: /* @__PURE__ */ jsx(Icon_default, { name: icon, size: iconSize })
-    }
-  );
-}
-var IconButton_default = IconButton;
-function HeroImage({ backdropPath, title }) {
-  const [loading, setLoading] = useState(true);
-  const backdropPathMobile = backdropPath ? getOptimizedImageUrl(backdropPath, "w300", 60) : void 0;
-  const backdropPathTablet = backdropPath ? getOptimizedImageUrl(backdropPath, "w300", 60) : void 0;
-  const backdropPathDesktop = backdropPath ? getOptimizedImageUrl(backdropPath, "w780", 60) : void 0;
-  const backdropPathUltraWide = backdropPath ? getOptimizedImageUrl(backdropPath, "w1280", 60) : void 0;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    loading && /* @__PURE__ */ jsx(
-      Skeleton_default,
-      {
-        "data-testid": "hero-image-skeleton",
-        variant: "rectangle",
-        width: "ui:relative ui:w-full ui:h-full ui:hero-height ui:z-0",
-        aspectRatio: "21/9",
-        rounded: false
-      }
-    ),
-    /* @__PURE__ */ jsxs("picture", { children: [
-      backdropPathMobile && /* @__PURE__ */ jsx("source", { media: "(max-width: 639px)", srcSet: backdropPathMobile }),
-      backdropPathTablet && /* @__PURE__ */ jsx("source", { media: "(max-width: 1023px)", srcSet: backdropPathTablet }),
-      backdropPathDesktop && /* @__PURE__ */ jsx("source", { media: "(max-width: 1535px)", srcSet: backdropPathDesktop }),
-      backdropPathUltraWide && /* @__PURE__ */ jsx("source", { media: "(min-width: 1536px)", srcSet: backdropPathUltraWide }),
-      backdropPathMobile && /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: backdropPathMobile,
-          fetchPriority: "high",
-          onLoad: () => {
-            setLoading(false);
-          },
-          alt: title ?? "Unknown",
-          className: "ui:relative ui:h-full ui:w-full ui:object-cover ui:object-center ui:z-0"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "ui:absolute ui:inset-0 ui:bg-gradient-to-t ui:from-black/80 ui:via-black/40 ui:to-transparent ui:z-1 ui:top-0 ui:left-0 ui:right-0 ui:bottom-0" })
-  ] });
-}
-var HeroImage_default = HeroImage;
-function Modal({
-  isOpen,
-  onClose,
-  children,
-  "aria-label": ariaLabel,
-  className,
-  onOverlayClick
-}) {
-  const ref = useRef(null);
-  useEffect(() => {
-    const dialog = ref.current;
-    if (!dialog) return;
-    if (isOpen) {
-      dialog.showModal();
-      document.body.style.overflow = "hidden";
-    } else {
-      dialog.close();
-      document.body.style.overflow = "";
-    }
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, [isOpen]);
-  const handleClick = (e) => {
-    if (e.target === ref.current) (onOverlayClick ?? onClose)();
-  };
-  const handleClose = () => {
-    onClose();
-  };
-  return /* @__PURE__ */ jsx(
-    "dialog",
-    {
-      ref,
-      "aria-label": ariaLabel,
-      "aria-modal": "true",
-      onClick: handleClick,
-      onClose: handleClose,
-      className: clsx8(
-        "ui:backdrop:bg-black/80",
-        "ui:bg-transparent ui:border-0 ui:p-0",
-        "ui:max-w-none ui:max-h-none ui:w-full ui:h-full",
-        className
-      ),
-      children
-    }
-  );
-}
-var Modal_default = Modal;
-function TrailerCard({
-  videoKey,
-  title,
-  type = "Trailer",
-  className
-}) {
-  const [isPlaying, setIsPlaying] = useState(false);
-  const thumbnailUrl = `https://img.youtube.com/vi/${videoKey}/hqdefault.jpg`;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        className: clsx8(
-          "ui:group ui:relative ui:flex ui:aspect-video ui:w-full ui:cursor-pointer ui:overflow-hidden ui:rounded-lg ui:bg-gray-200",
-          "ui:transition-transform ui:duration-200 hover:ui:scale-[1.02]",
-          className
-        ),
-        onClick: () => {
-          setIsPlaying(true);
-        },
-        tabIndex: 0,
-        "aria-label": `Play ${title}`,
-        children: [
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: thumbnailUrl,
-              alt: title,
-              className: "ui:h-full ui:w-full ui:object-cover",
-              loading: "lazy"
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "ui:absolute ui:inset-0 ui:flex ui:items-center ui:justify-center ui:bg-black/30 ui:opacity-0 ui:transition-opacity ui:duration-200 group-hover:ui:opacity-100", children: /* @__PURE__ */ jsx("div", { className: "ui:flex ui:items-center ui:justify-center ui:h-16 ui:w-16 ui:rounded-full ui:bg-white/90", children: /* @__PURE__ */ jsx("span", { className: "ui:text-2xl ui:ml-1", children: "\u25B6" }) }) }),
-          type && /* @__PURE__ */ jsx("div", { className: "ui:absolute ui:bottom-2 ui:left-2 ui:rounded ui:bg-black/80 ui:px-2 ui:py-1 ui:text-xs ui:font-semibold ui:text-white", children: type })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Modal_default,
-      {
-        isOpen: isPlaying,
-        onClose: () => {
-          setIsPlaying(false);
-        },
-        "aria-label": `Play ${title}`,
-        children: /* @__PURE__ */ jsxs("div", { className: "ui:flex ui:h-full ui:w-full ui:items-center ui:justify-center ui:p-4", children: [
-          /* @__PURE__ */ jsx(
-            Button_default,
-            {
-              icon: "XMark",
-              size: "sm",
-              variant: "ghost",
-              iconPosition: "left",
-              onClick: () => {
-                setIsPlaying(false);
-              },
-              className: "ui:absolute ui:top-4 ui:right-4 ui:text-white hover:ui:bg-white/10 ui:z-10 ui:focus:border-none",
-              "aria-label": "Close video",
-              children: "Close video"
-            }
-          ),
-          isPlaying && /* @__PURE__ */ jsx(
-            "iframe",
-            {
-              className: "ui:w-full ui:max-w-4xl ui:aspect-video ui:rounded-lg",
-              src: `https://www.youtube.com/embed/${videoKey}`,
-              title,
-              allow: "accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
-              allowFullScreen: true
-            }
-          )
-        ] })
-      }
-    )
-  ] });
-}
-var TrailerCard_default = TrailerCard;
-function CarouselCounter({
-  current,
-  total,
-  className
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clsx8(
-        "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;
-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_default, { 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;
-function CarouselNavigation({
-  onPrev,
-  onNext,
-  canPrev,
-  canNext,
-  size = "sm",
-  position = "inline",
-  iconVariant = "secondary",
-  className
-}) {
-  if (position === "sides") {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: "ui:absolute ui:left-0 ui:top-1/2 ui:-translate-x-1/2 ui:-translate-y-1/2", children: /* @__PURE__ */ jsx(
-        IconButton_default,
-        {
-          icon: "ChevronLeft",
-          variant: iconVariant,
-          size,
-          onClick: onPrev,
-          disabled: !canPrev,
-          "aria-label": "Previous"
-        }
-      ) }),
-      /* @__PURE__ */ jsx("div", { className: "ui:absolute ui:right-0 ui:top-1/2 ui:-translate-y-1/2 ui:translate-x-1/2", children: /* @__PURE__ */ jsx(
-        IconButton_default,
-        {
-          icon: "ChevronRight",
-          variant: iconVariant,
-          size,
-          onClick: onNext,
-          disabled: !canNext,
-          "aria-label": "Next"
-        }
-      ) })
-    ] });
-  }
-  if (position === "sides-inset") {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: "ui:absolute ui:left-4 ui:top-1/2 ui:-translate-y-1/2 ui:z-10 ui:text-white", children: /* @__PURE__ */ jsx(
-        IconButton_default,
-        {
-          icon: "ChevronLeft",
-          variant: iconVariant,
-          size,
-          onClick: onPrev,
-          disabled: !canPrev,
-          "aria-label": "Previous",
-          className: "ui:bg-white/20 ui:hover:bg-white/55"
-        }
-      ) }),
-      /* @__PURE__ */ jsx("div", { className: "ui:absolute ui:right-4 ui:top-1/2 ui:-translate-y-1/2 ui:z-10 ui:text-white", children: /* @__PURE__ */ jsx(
-        IconButton_default,
-        {
-          icon: "ChevronRight",
-          variant: iconVariant,
-          size,
-          onClick: onNext,
-          disabled: !canNext,
-          "aria-label": "Next",
-          className: "ui:bg-white/20 ui:hover:bg-white/55"
-        }
-      ) })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: clsx8("ui:flex ui:gap-2", className), children: [
-    /* @__PURE__ */ jsx(
-      IconButton_default,
-      {
-        icon: "ChevronLeft",
-        variant: iconVariant,
-        size,
-        onClick: onPrev,
-        disabled: !canPrev,
-        "aria-label": "Previous"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      IconButton_default,
-      {
-        icon: "ChevronRight",
-        variant: iconVariant,
-        size,
-        onClick: onNext,
-        disabled: !canNext,
-        "aria-label": "Next"
-      }
-    )
-  ] });
-}
-var CarouselNavigation_default = CarouselNavigation;
-function CarouselPagination({
-  total,
-  current,
-  light = false,
-  className
-}) {
-  if (total === 0) return null;
-  return /* @__PURE__ */ jsx("div", { className: clsx8("ui:flex ui:items-center ui:gap-2", className), children: Array.from({ length: total }).map((_, index) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      "aria-hidden": "true",
-      className: clsx8(
-        "ui:rounded-full ui:transition-all ui:duration-300",
-        index === current ? clsx8("ui:h-2 ui:w-6", light ? "ui:bg-white" : "ui:bg-primary") : clsx8(
-          "ui:h-2 ui:w-2",
-          light ? "ui:bg-white/50 hover:ui:bg-white/70" : "ui:bg-gray-400 hover:ui:bg-gray-500"
-        )
-      )
-    },
-    index
-  )) });
-}
-var CarouselPagination_default = 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_default, { message: errorMessage });
-  }
-  const canScrollPrev = currentIndex > 0;
-  const canScrollNext = currentIndex < totalPositions - 1;
-  const showControls = totalPositions > 1;
-  return /* @__PURE__ */ jsxs("div", { className: clsx8("ui:relative", isLightbox && "ui:h-full", className), children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: scrollRef,
-        className: clsx8(
-          "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_default,
-      {
-        onPrev: handlePrev,
-        onNext: handleNext,
-        canPrev: canScrollPrev,
-        canNext: canScrollNext,
-        size: "md",
-        position: "sides"
-      }
-    ),
-    showControls && isHero && (showPagination || showArrows) && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: clsx8(
-          "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_default,
-            {
-              total: totalPositions,
-              current: currentIndex,
-              light: true
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "ui:flex-1 ui:flex ui:justify-end", children: showArrows && /* @__PURE__ */ jsx(
-            CarouselNavigation_default,
-            {
-              onPrev: handlePrev,
-              onNext: handleNext,
-              canPrev: canScrollPrev,
-              canNext: canScrollNext,
-              size: "sm"
-            }
-          ) })
-        ]
-      }
-    ),
-    showControls && !isHero && !isLightbox && (showArrows && arrowPosition === "bottom-right" || showPagination) ? /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: clsx8(
-          "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_default, { total: totalPositions, current: currentIndex }),
-          showArrows && arrowPosition === "bottom-right" && /* @__PURE__ */ jsx(
-            CarouselNavigation_default,
-            {
-              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_default, { current: currentIndex, total: totalPositions }) }),
-    showControls && isLightbox && showArrows && /* @__PURE__ */ jsx(
-      CarouselNavigation_default,
-      {
-        onPrev: handlePrev,
-        onNext: handleNext,
-        canPrev: canScrollPrev,
-        canNext: canScrollNext,
-        size: "md",
-        position: "sides-inset",
-        iconVariant: "ghost"
-      }
-    )
-  ] });
-}
-var Carousel_default = Carousel;
-function CarouselItem({
-  children,
-  isHero = false,
-  isLightbox = false,
-  className,
-  ...rest
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx8(
-        "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;
-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_default,
-          {
-            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_default,
-                {
-                  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_default,
-                {
-                  variant: "line",
-                  width: "ui:w-full",
-                  height: "ui:h-full"
-                }
-              ) })
-            ]
-          }
-        )
-      ]
-    },
-    i
-  )) });
-}
-var CarouselLoading_default = CarouselLoading;
-var TabsContext = createContext(
-  void 0
-);
-var useTabsContext = () => {
-  const context = useContext(TabsContext);
-  if (!context) {
-    throw new Error("Tabs compound components must be used within <Tabs>");
-  }
-  return context;
-};
-var TabsListContext = createContext(
-  void 0
-);
-var useTabsListContext = () => {
-  const context = useContext(TabsListContext);
-  if (!context) {
-    throw new Error("TabsTrigger must be used within <Tabs.List>");
-  }
-  return context;
-};
-function TabsList({ className, children, ...rest }) {
-  const { variant } = useTabsContext();
-  const triggersRef = useRef([]);
-  const disabledRef = useRef(/* @__PURE__ */ new Set());
-  const registerTrigger = (value, disabled) => {
-    if (!triggersRef.current.includes(value)) {
-      triggersRef.current.push(value);
-    }
-    if (disabled) {
-      disabledRef.current.add(value);
-    } else {
-      disabledRef.current.delete(value);
-    }
-  };
-  const unregisterTrigger = (value) => {
-    triggersRef.current = triggersRef.current.filter((v) => v !== value);
-    disabledRef.current.delete(value);
-  };
-  const getTriggers = () => triggersRef.current;
-  const isDisabled = (value) => disabledRef.current.has(value);
-  return /* @__PURE__ */ jsx(
-    TabsListContext.Provider,
-    {
-      value: { registerTrigger, unregisterTrigger, getTriggers, isDisabled },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: clsx8(
-            "ui:flex ui:gap-1",
-            variant === "underline" && "ui:border-b ui:border-border",
-            variant === "pills" && "ui:[.media-section:nth-of-type(odd)_&]:bg-white ui:bg-muted ui:p-1 ui:rounded-lg ui:w-fit",
-            className
-          ),
-          role: "tablist",
-          ...rest,
-          children
-        }
-      )
-    }
-  );
-}
-var TabsList_default = TabsList;
-function TabsPanel({ value, children, ...rest }) {
-  const { value: activeValue, prefix } = useTabsContext();
-  const isActive = value === activeValue;
-  const getTabId = (val) => prefix ? `tab-${prefix}-${val}` : `tab-${val}`;
-  const getTabPanelId = (val) => prefix ? `tabpanel-${prefix}-${val}` : `tabpanel-${val}`;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      role: "tabpanel",
-      id: getTabPanelId(value),
-      "aria-labelledby": getTabId(value),
-      hidden: !isActive,
-      ...rest,
-      className: clsx8("ui:mt-4", rest.className),
-      children
-    }
-  );
-}
-var TabsPanel_default = TabsPanel;
-function TabsTrigger({
-  value,
-  icon,
-  disabled,
-  className,
-  children,
-  ...rest
-}) {
-  const {
-    value: activeValue,
-    onValueChange,
-    variant,
-    prefix
-  } = useTabsContext();
-  const { registerTrigger, unregisterTrigger, getTriggers, isDisabled } = useTabsListContext();
-  const isActive = value === activeValue;
-  const getTabId = (val) => prefix ? `tab-${prefix}-${val}` : `tab-${val}`;
-  const getTabPanelId = (val) => prefix ? `tabpanel-${prefix}-${val}` : `tabpanel-${val}`;
-  useEffect(() => {
-    registerTrigger(value, disabled);
-    return () => {
-      unregisterTrigger(value);
-    };
-  }, [value, disabled, registerTrigger, unregisterTrigger]);
-  const handleClick = () => {
-    if (!disabled) {
-      onValueChange(value);
-    }
-  };
-  const findNextEnabledTab = (triggers, startIndex, direction) => {
-    const length = triggers.length;
-    let index = startIndex;
-    for (let i = 0; i < length; i++) {
-      index = (index + direction + length) % length;
-      if (!isDisabled(triggers[index])) {
-        return index;
-      }
-    }
-    return startIndex;
-  };
-  const handleKeyDown = (event) => {
-    if (disabled) return;
-    const triggers = getTriggers();
-    const currentIndex = triggers.indexOf(value);
-    let newIndex = currentIndex;
-    switch (event.key) {
-      case "ArrowLeft":
-        event.preventDefault();
-        newIndex = findNextEnabledTab(triggers, currentIndex, -1);
-        break;
-      case "ArrowRight":
-        event.preventDefault();
-        newIndex = findNextEnabledTab(triggers, currentIndex, 1);
-        break;
-      case "Home":
-        event.preventDefault();
-        newIndex = 0;
-        while (newIndex < triggers.length && isDisabled(triggers[newIndex])) {
-          newIndex++;
-        }
-        break;
-      case "End":
-        event.preventDefault();
-        newIndex = triggers.length - 1;
-        while (newIndex >= 0 && isDisabled(triggers[newIndex])) {
-          newIndex--;
-        }
-        break;
-      default:
-        return;
-    }
-    const newValue = triggers[newIndex];
-    if (newValue && newValue !== value) {
-      onValueChange(newValue);
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      role: "tab",
-      "aria-selected": isActive ? "true" : "false",
-      "aria-controls": getTabPanelId(value),
-      id: getTabId(value),
-      tabIndex: isActive ? 0 : -1,
-      disabled,
-      className: clsx8(
-        "ui:px-4 ui:py-2 ui:font-roboto ui:text-sm ui:font-medium",
-        "ui:flex ui:items-center ui:gap-2",
-        "ui:transition-colors ui:duration-200",
-        "focus-visible:ui:outline-none focus-visible:ui:ring-2 focus-visible:ui:ring-ring focus-visible:ui:ring-offset-2",
-        !disabled && "ui:cursor-pointer",
-        variant === "underline" && [
-          "ui:relative ui:border-b-2 ui:border-transparent ui:-mb-px",
-          isActive ? "ui:text-primary ui:border-primary" : "ui:text-foreground hover:ui:text-foreground",
-          disabled && "ui:text-muted-foreground/50 ui:cursor-not-allowed hover:ui:text-muted-foreground/50"
-        ],
-        variant === "pills" && [
-          "ui:rounded-md",
-          isActive ? "ui:bg-primary ui:shadow-sm" : "ui:text-foreground hover:ui:text-foreground",
-          disabled && "ui:text-muted-foreground/50 ui:cursor-not-allowed hover:ui:text-muted-foreground/50"
-        ],
-        className
-      ),
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      ...rest,
-      children: [
-        icon && icon,
-        children
-      ]
-    }
-  );
-}
-var TabsTrigger_default = TabsTrigger;
-function Tabs({
-  defaultValue = "",
-  value,
-  onValueChange,
-  variant = "underline",
-  prefix,
-  className,
-  children,
-  ...rest
-}) {
-  const [internalValue, setInternalValue] = useState(defaultValue);
-  const activeValue = value ?? internalValue;
-  const isControlled = value !== void 0;
-  const handleValueChange = (newValue) => {
-    if (!isControlled) {
-      setInternalValue(newValue);
-    }
-    onValueChange?.(newValue);
-  };
-  return /* @__PURE__ */ jsx(
-    TabsContext.Provider,
-    {
-      value: {
-        value: activeValue,
-        onValueChange: handleValueChange,
-        variant,
-        prefix
-      },
-      children: /* @__PURE__ */ jsx("div", { className: clsx8("ui:w-full", className), ...rest, children })
-    }
-  );
-}
-Tabs.List = TabsList_default;
-Tabs.Trigger = TabsTrigger_default;
-Tabs.Panel = TabsPanel_default;
-var Tabs_default = Tabs;
-function Talent({
-  name,
-  role,
-  imageSrc,
-  variant = "vertical",
-  size = "lg",
-  className,
-  ...rest
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clsx8(
-        "ui:flex ui:items-center",
-        {
-          "ui:flex-col ui:text-center ui:gap-3": variant === "vertical",
-          "ui:flex-row ui:gap-4": variant === "horizontal"
-        },
-        className
-      ),
-      "data-testid": "talent",
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsx(
-          Avatar_default,
-          {
-            testId: "avatar",
-            src: imageSrc,
-            alt: name ?? "Unknown",
-            size
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: clsx8({ "ui:flex ui:flex-col": variant === "horizontal" }),
-            children: [
-              /* @__PURE__ */ jsx(
-                Typography_default,
-                {
-                  variant: "body",
-                  className: "ui:font-semibold ui:text-foreground",
-                  children: name ?? "Unknown"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Typography_default,
-                {
-                  variant: "caption",
-                  className: "ui:text-muted-foreground ui:[.media-section:nth-of-type(odd)_&]:text-badge-foreground",
-                  children: role ?? "N/A"
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-var Talent_default = Talent;
-function Spinner({ className }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      role: "status",
-      "aria-label": "Loading",
-      className: clsx8(
-        "ui:size-12 ui:rounded-full ui:border-4 ui:border-white/20 ui:border-t-white ui:animate-spin",
-        className
-      )
-    }
-  );
-}
-var Spinner_default = Spinner;
-
-export { Avatar_default as Avatar, Badge_default as Badge, Carousel_default as Carousel, CarouselCounter_default as CarouselCounter, CarouselItem_default as CarouselItem, CarouselLoading_default as CarouselLoading, CarouselNavigation_default as CarouselNavigation, CarouselPagination_default as CarouselPagination, HeroImage_default as HeroImage, IconButton_default as IconButton, Modal_default as Modal, Spinner_default as Spinner, Tabs_default as Tabs, Talent_default as Talent, TrailerCard_default as TrailerCard };
-//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map