@vite-mf-monorepo/ui 0.0.2

package/dist/index.js

@@ -0,0 +1,1514 @@
+import { Button_default } from './chunk-IXEILQNO.js';
+export { Button_default as Button } from './chunk-IXEILQNO.js';
+import { Card_default } from './chunk-YKNVY2QQ.js';
+export { Card_default as Card } from './chunk-YKNVY2QQ.js';
+import { Icon_default } from './chunk-Z3E2P4JR.js';
+export { Icon_default as Icon } from './chunk-Z3E2P4JR.js';
+import clsx15 from 'clsx';
+import { createContext, useState, useRef, useEffect, useCallback, createElement, useLayoutEffect, useContext } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { getBlurDataUrl, getOptimizedImageUrl } from '@vite-mf-monorepo/shared';
+import { Link } from 'react-router-dom';
+
+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" }
+};
+var 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: clsx15(
+        "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: clsx15("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 }
+};
+var Badge = ({
+  children,
+  variant = "default",
+  size = "md",
+  icon,
+  textClassName,
+  className
+}) => {
+  const { padding, text, iconSize } = sizeMap2[size];
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: clsx15(
+        "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 }
+};
+var IconButton = ({
+  className,
+  icon,
+  variant = "ghost",
+  size = "md",
+  disabled,
+  ...rest
+}) => {
+  const { button: buttonSize, icon: iconSize } = sizeMap3[size];
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: clsx15(
+        "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;
+var Image = ({
+  src,
+  alt,
+  blurDataUrl,
+  autoBlur = false,
+  blurSize = 16,
+  blurQuality = 0.3,
+  aspectRatio = "2/3",
+  fallback,
+  className,
+  onLoad,
+  onError,
+  loading = "eager",
+  ...rest
+}) => {
+  const imgRef = useRef(null);
+  const containerRef = useRef(null);
+  const [state, setState] = useState("loading");
+  const [generatedBlur, setGeneratedBlur] = useState(
+    void 0
+  );
+  const [blurReady, setBlurReady] = useState(!autoBlur || !!blurDataUrl);
+  const [isVisible, setIsVisible] = useState(loading === "eager");
+  const effectiveBlur = blurDataUrl ?? generatedBlur;
+  useEffect(() => {
+    if (loading === "eager" || !containerRef.current) {
+      return;
+    }
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.unobserve(entry.target);
+        }
+      },
+      { rootMargin: "50px" }
+    );
+    observer.observe(containerRef.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [loading]);
+  useEffect(() => {
+    if (!autoBlur || blurDataUrl) {
+      setBlurReady(true);
+      return;
+    }
+    setBlurReady(false);
+    getBlurDataUrl(src, blurSize, blurQuality).then((base64) => {
+      setGeneratedBlur(base64);
+      setBlurReady(true);
+    }).catch(() => {
+      setBlurReady(true);
+    });
+  }, [autoBlur, src, blurDataUrl, blurSize, blurQuality]);
+  useEffect(() => {
+    setState("loading");
+    setGeneratedBlur(void 0);
+    if (imgRef.current?.complete && imgRef.current.naturalHeight !== 0) {
+      setState("loaded");
+    }
+  }, [src]);
+  const handleLoad = useCallback(() => {
+    setState("loaded");
+    onLoad?.();
+  }, [onLoad]);
+  const handleError = useCallback(() => {
+    setState("error");
+    onError?.();
+  }, [onError]);
+  const defaultFallback = /* @__PURE__ */ jsx("div", { className: "ui:flex ui:h-full ui:w-full ui:items-center ui:justify-center ui:bg-muted", children: /* @__PURE__ */ jsx(
+    Icon_default,
+    {
+      name: "Photo",
+      size: 48,
+      className: "ui:text-muted-foreground",
+      "aria-hidden": "true"
+    }
+  ) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: clsx15("ui:relative ui:overflow-hidden ui:bg-muted", className),
+      style: aspectRatio ? { aspectRatio } : void 0,
+      "data-state": state,
+      children: state === "error" ? fallback ?? defaultFallback : /* @__PURE__ */ jsxs(Fragment, { children: [
+        effectiveBlur && state === "loading" && /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: effectiveBlur,
+            alt: "",
+            "aria-hidden": "true",
+            className: "ui:absolute ui:inset-0 ui:h-full ui:w-full ui:scale-105 ui:object-cover"
+          }
+        ),
+        blurReady && isVisible && /* @__PURE__ */ jsx(
+          "img",
+          {
+            ref: imgRef,
+            src,
+            alt,
+            onLoad: handleLoad,
+            onError: handleError,
+            className: clsx15(
+              "ui:absolute ui:inset-0 ui:h-full ui:w-full ui:object-cover ui:transition-opacity ui:duration-300",
+              state === "loaded" ? "ui:opacity-100" : "ui:opacity-0"
+            ),
+            ...rest
+          }
+        )
+      ] })
+    }
+  );
+};
+var Image_default = Image;
+var Skeleton = ({
+  variant = "rectangle",
+  width,
+  height,
+  aspectRatio,
+  rounded = true,
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx15(
+        "ui:relative ui:overflow-hidden ui:bg-muted",
+        "ui-skeleton-shimmer",
+        {
+          "ui:rounded-lg": variant === "rectangle" && rounded,
+          "ui:rounded-full": variant === "circle",
+          "ui:rounded": variant === "line" && rounded
+        },
+        width,
+        height,
+        className
+      ),
+      style: aspectRatio ? { aspectRatio } : void 0,
+      ...rest
+    }
+  );
+};
+var Skeleton_default = Skeleton;
+var 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;
+var 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: clsx15(
+        "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;
+var circleSizeMap = {
+  sm: { size: 32, stroke: 3, fontSize: "ui:text-xs" },
+  md: { size: 48, stroke: 4, fontSize: "ui:text-sm" },
+  lg: { size: 64, stroke: 5, fontSize: "ui:text-base" }
+};
+var getColorClass = (percent) => {
+  if (percent >= 70) return "ui:text-green-600";
+  if (percent >= 40) return "ui:text-amber-600";
+  return "ui:text-red-500";
+};
+var CircleRating = ({
+  percent,
+  size,
+  showValue,
+  value,
+  max,
+  trackClassName
+}) => {
+  const { size: svgSize, stroke, fontSize } = circleSizeMap[size];
+  const radius = (svgSize - stroke) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - percent / 100 * circumference;
+  return /* @__PURE__ */ jsxs("div", { className: "ui:relative ui:inline-flex ui:items-center ui:justify-center", children: [
+    /* @__PURE__ */ jsxs("svg", { width: svgSize, height: svgSize, className: "ui:-rotate-90", children: [
+      /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: svgSize / 2,
+          cy: svgSize / 2,
+          r: radius,
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: stroke,
+          className: trackClassName ?? "ui:text-gray-200"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: svgSize / 2,
+          cy: svgSize / 2,
+          r: radius,
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: stroke,
+          strokeLinecap: "round",
+          strokeDasharray: circumference,
+          strokeDashoffset: offset,
+          className: clsx15(
+            "ui:transition-all ui:duration-500",
+            getColorClass(percent)
+          )
+        }
+      )
+    ] }),
+    showValue && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: clsx15(
+          "ui:absolute ui:font-bold",
+          fontSize,
+          getColorClass(percent)
+        ),
+        children: max === 100 ? Math.round(percent) : value.toFixed(1)
+      }
+    )
+  ] });
+};
+var CircleRating_default = CircleRating;
+var starsSizeMap = {
+  sm: 16,
+  md: 20,
+  lg: 24
+};
+var StarsRating = ({
+  percent,
+  size,
+  showValue,
+  value,
+  max
+}) => {
+  const iconSize = starsSizeMap[size];
+  return /* @__PURE__ */ jsxs("div", { className: "ui:inline-flex ui:items-center ui:gap-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "ui:relative", children: [
+      /* @__PURE__ */ jsx("div", { className: "ui:flex ui:text-gray-300", children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsx(Icon_default, { name: "Star", size: iconSize }, i)) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "ui:absolute ui:inset-0 ui:flex ui:text-yellow-400",
+          style: { clipPath: `inset(0 ${String(100 - percent)}% 0 0)` },
+          children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsx(Icon_default, { name: "Star", size: iconSize }, i))
+        }
+      )
+    ] }),
+    showValue && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: clsx15(
+          "ui:font-medium ui:text-muted-foreground",
+          size === "sm" && "ui:text-xs",
+          size === "md" && "ui:text-sm",
+          size === "lg" && "ui:text-base"
+        ),
+        children: max === 100 ? (value / 10).toFixed(1) : value.toFixed(1)
+      }
+    )
+  ] });
+};
+var StarsRating_default = StarsRating;
+var Rating = ({
+  value,
+  max = 10,
+  variant = "circle",
+  size = "md",
+  showValue = true,
+  trackClassName,
+  className
+}) => {
+  const clampedValue = Math.max(0, Math.min(value, max));
+  const percent = clampedValue / max * 100;
+  return /* @__PURE__ */ jsx("div", { className: clsx15("ui:inline-flex", className), children: variant === "circle" ? /* @__PURE__ */ jsx(
+    CircleRating_default,
+    {
+      percent,
+      size,
+      showValue,
+      value: clampedValue,
+      max,
+      trackClassName
+    }
+  ) : /* @__PURE__ */ jsx(
+    StarsRating_default,
+    {
+      percent,
+      size,
+      showValue,
+      value: clampedValue,
+      max
+    }
+  ) });
+};
+var Rating_default = Rating;
+var variantStyles = {
+  h1: "ui:font-roboto ui:text-xl ui:sm:text-2xl ui:md:text-3xl ui:lg:text-4xl ui:font-bold ui:leading-tight ui:text-foreground",
+  h2: "ui:font-roboto ui:text-lg ui:sm:text-xl ui:md:text-2xl ui:lg:text-3xl ui:font-bold ui:leading-tight ui:text-foreground",
+  h3: "ui:font-roboto ui:text-base ui:sm:text-lg ui:md:text-xl ui:lg:text-2xl ui:font-semibold ui:leading-snug ui:text-foreground",
+  h4: "ui:font-roboto ui:text-sm ui:sm:text-base ui:md:text-lg ui:lg:text-xl ui:font-semibold ui:leading-snug ui:text-foreground",
+  h5: "ui:font-roboto ui:text-sm ui:sm:text-base ui:md:text-lg ui:font-medium ui:leading-normal ui:text-foreground",
+  h6: "ui:font-roboto ui:text-xs ui:sm:text-sm ui:md:text-base ui:font-medium ui:leading-normal ui:text-foreground",
+  body: "ui:font-inter ui:text-xs ui:sm:text-sm ui:md:text-base ui:leading-relaxed ui:text-foreground",
+  "body-sm": "ui:font-inter ui:text-xs ui:sm:text-sm ui:leading-relaxed ui:text-foreground",
+  "body-lg": "ui:font-inter ui:text-sm ui:sm:text-base ui:md:text-lg ui:leading-relaxed ui:text-foreground",
+  lead: "ui:font-inter ui:text-sm ui:sm:text-base ui:md:text-lg ui:lg:text-xl ui:leading-relaxed ui:text-muted-foreground",
+  caption: "ui:font-inter ui:text-xs ui:sm:text-sm ui:text-muted-foreground",
+  "caption-xs": "ui:font-inter ui:text-xs ui:text-muted-foreground",
+  label: "ui:font-inter ui:text-xs ui:sm:text-sm ui:font-medium ui:text-foreground",
+  muted: "ui:font-inter ui:text-xs ui:sm:text-sm ui:text-muted-foreground",
+  blockquote: "ui:font-inter ui:text-xs ui:sm:text-sm ui:md:text-base ui:border-l-4 ui:border-border ui:pl-4 ui:italic ui:text-muted-foreground"
+};
+var variantToTag = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  body: "p",
+  "body-sm": "p",
+  "body-lg": "p",
+  lead: "p",
+  caption: "span",
+  "caption-xs": "span",
+  label: "label",
+  muted: "p",
+  blockquote: "blockquote"
+};
+var Typography = ({
+  variant,
+  as,
+  className,
+  children,
+  ...rest
+}) => {
+  const Component = as ?? variantToTag[variant];
+  return createElement(
+    Component,
+    { className: clsx15(variantStyles[variant], className), ...rest },
+    children
+  );
+};
+var Typography_default = Typography;
+var MovieCard = ({
+  id,
+  title,
+  posterUrl,
+  voteAverage,
+  year,
+  className,
+  imageLoading = "lazy",
+  as = "card",
+  ...rest
+}) => {
+  const to = "to" in rest ? rest.to : void 0;
+  const onClick = "onClick" in rest ? rest.onClick : void 0;
+  const isInteractive = as === "link" || as === "button";
+  const cardContent = /* @__PURE__ */ jsxs(
+    Card_default,
+    {
+      variant: "ghost",
+      className: clsx15(
+        "ui:group ui:relative ui:flex ui:flex-col ui:overflow-hidden",
+        isInteractive && [
+          "ui:cursor-pointer",
+          "ui:transition-transform ui:duration-200",
+          "hover:ui:scale-[1.02]"
+        ],
+        className
+      ),
+      onClick: as === "button" ? onClick : void 0,
+      "data-testid": `movie-card-${String(id)}`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "ui:relative ui:aspect-[2/3] ui:w-full ui:overflow-hidden ui:rounded-md ui:bg-gray-200", children: [
+          /* @__PURE__ */ jsx(
+            Image_default,
+            {
+              src: posterUrl,
+              alt: title,
+              loading: imageLoading,
+              aspectRatio: void 0,
+              className: "ui:h-full ui:w-full ui:object-cover"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "ui:absolute ui:bottom-2 ui:right-2 ui:flex ui:items-center ui:justify-center ui:rounded-full ui:bg-white/80 ui:p-1", children: /* @__PURE__ */ jsx(
+            Rating_default,
+            {
+              value: voteAverage,
+              size: "sm",
+              variant: "circle",
+              trackClassName: "ui:text-gray-200",
+              className: "ui:drop-shadow"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "ui:mt-2 ui:flex ui:flex-col ui:gap-0.5 ui:px-1", children: [
+          /* @__PURE__ */ jsx(
+            Typography_default,
+            {
+              variant: "label",
+              as: "h3",
+              className: "ui:line-clamp-2",
+              title,
+              children: title
+            }
+          ),
+          year && /* @__PURE__ */ jsx(
+            Typography_default,
+            {
+              variant: "caption-xs",
+              className: "ui:[.media-section:nth-of-type(odd)_&]:text-badge-foreground",
+              children: year
+            }
+          )
+        ] })
+      ]
+    }
+  );
+  if (as === "link" && to) {
+    return /* @__PURE__ */ jsx(Link, { to, className: "ui:block ui:no-underline ui:text-inherit", children: cardContent });
+  }
+  return cardContent;
+};
+var MovieCard_default = MovieCard;
+var 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: clsx15(
+          "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;
+var CarouselCounter = ({
+  current,
+  total,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx15(
+        "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;
+var 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;
+var 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: clsx15("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;
+var CarouselPagination = ({
+  total,
+  current,
+  light = false,
+  className
+}) => {
+  if (total === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: clsx15("ui:flex ui:items-center ui:gap-2", className), children: Array.from({ length: total }).map((_, index) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: clsx15(
+        "ui:rounded-full ui:transition-all ui:duration-300",
+        index === current ? clsx15("ui:h-2 ui:w-6", light ? "ui:bg-white" : "ui:bg-primary") : clsx15(
+          "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;
+var 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: clsx15("ui:relative", isLightbox && "ui:h-full", className), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scrollRef,
+        className: clsx15(
+          "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: clsx15(
+          "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: clsx15(
+          "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;
+var CarouselItem = ({
+  children,
+  isHero = false,
+  isLightbox = false,
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx15(
+        "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;
+var 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;
+};
+var 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: clsx15(
+            "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;
+var 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: clsx15("ui:mt-4", rest.className),
+      children
+    }
+  );
+};
+var TabsPanel_default = TabsPanel;
+var 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: clsx15(
+        "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;
+var 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: clsx15("ui:w-full", className), ...rest, children })
+    }
+  );
+};
+Tabs.List = TabsList_default;
+Tabs.Trigger = TabsTrigger_default;
+Tabs.Panel = TabsPanel_default;
+var Tabs_default = Tabs;
+var Talent = ({
+  name,
+  role,
+  imageSrc,
+  variant = "vertical",
+  size = "lg",
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx15(
+        "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: clsx15({ "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;
+var Spinner = ({ className }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "status",
+      "aria-label": "Loading",
+      className: clsx15(
+        "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, Image_default as Image, Modal_default as Modal, MovieCard_default as MovieCard, Rating_default as Rating, Skeleton_default as Skeleton, Spinner_default as Spinner, Tabs_default as Tabs, Talent_default as Talent, TrailerCard_default as TrailerCard, Typography_default as Typography };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map