@vite-mf-monorepo/ui 0.3.0 → 0.4.1

package/dist/{MovieCard.utils-CpNUUs8O.d.ts → MovieCard.utils-D8i4d7qA.d.ts}

@@ -45,6 +45,8 @@ interface MovieCardBaseProps {
     className?: string;
     /** Image loading strategy ('lazy' | 'eager'). Default: 'lazy' */
     imageLoading?: ImageLoading;
+    /** Base64 blur data URL for next/image placeholder="blur" */
+    blurDataURL?: string;
 }
 interface MovieCardAsCard extends MovieCardBaseProps {
     as?: 'card' | undefined;

package/dist/{chunk-JDBRVX5O.js → chunk-2EQIYKZF.js}

@@ -1,126 +1,8 @@
-import { Card_default } from './chunk-JI3OVXCK.js';
 import { Icon_default } from './chunk-JHRISQQJ.js';
-import { getBlurDataUrl } from '@vite-mf-monorepo/shared';
 import clsx from 'clsx';
-import { useRef, useState, useEffect, useCallback, createElement } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createElement } from 'react';
 
-function 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: clsx("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: clsx(
-              "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 circleSizeMap = {
   sm: { size: 32, stroke: 3, fontSize: "ui:text-xs" },
   md: { size: 48, stroke: 4, fontSize: "ui:text-sm" },
@@ -326,72 +208,7 @@ function getMovieCardClasses(isInteractive, className) {
 function getMovieCardLinkClasses() {
   return "ui:block ui:no-underline ui:text-inherit";
 }
-function MovieCardContent({
-  id,
-  title,
-  posterUrl,
-  voteAverage,
-  year,
-  className,
-  imageLoading = "lazy",
-  isInteractive,
-  onClick
-}) {
-  return /* @__PURE__ */ jsxs(
-    Card_default,
-    {
-      variant: "ghost",
-      className: getMovieCardClasses(isInteractive, className),
-      onClick,
-      "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
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
 
-export { Image_default, MovieCardContent, Rating_default, Typography_default, getMovieCardLinkClasses };
-//# sourceMappingURL=chunk-JDBRVX5O.js.map
-//# sourceMappingURL=chunk-JDBRVX5O.js.map
+export { Rating_default, Typography_default, getMovieCardClasses, getMovieCardLinkClasses };
+//# sourceMappingURL=chunk-2EQIYKZF.js.map
+//# sourceMappingURL=chunk-2EQIYKZF.js.map

package/dist/chunk-2EQIYKZF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Rating/CircleRating.tsx","../src/Rating/StarsRating.tsx","../src/Rating/Rating.tsx","../src/Typography/Typography.tsx","../src/MovieCard/MovieCard.utils.ts"],"names":["jsxs","jsx","clsx"],"mappings":"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","file":"chunk-2EQIYKZF.js","sourcesContent":["import clsx from 'clsx'\n\nimport type { RatingSize } from './Rating'\n\nconst circleSizeMap: Record<\n  RatingSize,\n  { size: number; stroke: number; fontSize: string }\n> = {\n  sm: { size: 32, stroke: 3, fontSize: 'ui:text-xs' },\n  md: { size: 48, stroke: 4, fontSize: 'ui:text-sm' },\n  lg: { size: 64, stroke: 5, fontSize: 'ui:text-base' },\n}\n\nconst getColorClass = (percent: number): string => {\n  if (percent >= 70) return 'ui:text-green-600'\n  if (percent >= 40) return 'ui:text-amber-600'\n  return 'ui:text-red-500'\n}\n\nexport interface CircleRatingProps {\n  /** Percentage value (0-100) for the progress ring */\n  percent: number\n  /** Size of the rating circle */\n  size: RatingSize\n  /** Whether to display the numeric value in the center */\n  showValue: boolean\n  /** The actual rating value (used for display) */\n  value: number\n  /** Maximum rating value (used for display formatting) */\n  max: number\n  /** Custom class for the background track circle */\n  trackClassName?: string\n}\n\nfunction CircleRating({\n  percent,\n  size,\n  showValue,\n  value,\n  max,\n  trackClassName,\n}: Readonly<CircleRatingProps>) {\n  const { size: svgSize, stroke, fontSize } = circleSizeMap[size]\n  const radius = (svgSize - stroke) / 2\n  const circumference = 2 * Math.PI * radius\n  const offset = circumference - (percent / 100) * circumference\n\n  return (\n    <div className=\"ui:relative ui:inline-flex ui:items-center ui:justify-center\">\n      <svg width={svgSize} height={svgSize} className=\"ui:-rotate-90\">\n        <circle\n          cx={svgSize / 2}\n          cy={svgSize / 2}\n          r={radius}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={stroke}\n          className={trackClassName ?? 'ui:text-gray-200'}\n        />\n        <circle\n          cx={svgSize / 2}\n          cy={svgSize / 2}\n          r={radius}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={stroke}\n          strokeLinecap=\"round\"\n          strokeDasharray={circumference}\n          strokeDashoffset={offset}\n          className={clsx(\n            'ui:transition-all ui:duration-500',\n            getColorClass(percent)\n          )}\n        />\n      </svg>\n      {showValue && (\n        <span\n          className={clsx(\n            'ui:absolute ui:font-bold',\n            fontSize,\n            getColorClass(percent)\n          )}\n        >\n          {max === 100 ? Math.round(percent) : value.toFixed(1)}\n        </span>\n      )}\n    </div>\n  )\n}\n\nexport default CircleRating\n","import clsx from 'clsx'\n\nimport { Icon } from '../Icon'\n\nimport type { IconSize } from '../Icon'\nimport type { RatingSize } from './Rating'\n\nconst starsSizeMap: Record<RatingSize, IconSize> = {\n  sm: 16,\n  md: 20,\n  lg: 24,\n}\n\nexport interface StarsRatingProps {\n  /** Percentage value (0-100) for the star fill */\n  percent: number\n  /** Size of the stars */\n  size: RatingSize\n  /** Whether to display the numeric value next to stars */\n  showValue: boolean\n  /** The actual rating value (used for display) */\n  value: number\n  /** Maximum rating value (used for display formatting) */\n  max: number\n}\n\nfunction StarsRating({\n  percent,\n  size,\n  showValue,\n  value,\n  max,\n}: Readonly<StarsRatingProps>) {\n  const iconSize = starsSizeMap[size]\n\n  return (\n    <div className=\"ui:inline-flex ui:items-center ui:gap-1\">\n      <div className=\"ui:relative\">\n        {/* Empty stars */}\n        <div className=\"ui:flex ui:text-gray-300\">\n          {[1, 2, 3, 4, 5].map((i) => (\n            <Icon key={i} name=\"Star\" size={iconSize} />\n          ))}\n        </div>\n        {/* Filled stars with clip */}\n        <div\n          className=\"ui:absolute ui:inset-0 ui:flex ui:text-yellow-400\"\n          style={{ clipPath: `inset(0 ${String(100 - percent)}% 0 0)` }}\n        >\n          {[1, 2, 3, 4, 5].map((i) => (\n            <Icon key={i} name=\"Star\" size={iconSize} />\n          ))}\n        </div>\n      </div>\n      {showValue && (\n        <span\n          className={clsx(\n            'ui:font-medium ui:text-muted-foreground',\n            size === 'sm' && 'ui:text-xs',\n            size === 'md' && 'ui:text-sm',\n            size === 'lg' && 'ui:text-base'\n          )}\n        >\n          {max === 100 ? (value / 10).toFixed(1) : value.toFixed(1)}\n        </span>\n      )}\n    </div>\n  )\n}\n\nexport default StarsRating\n","import clsx from 'clsx'\n\nimport CircleRating from './CircleRating'\nimport StarsRating from './StarsRating'\n\nexport type RatingVariant = 'circle' | 'stars'\nexport type RatingSize = 'sm' | 'md' | 'lg'\n\nexport interface RatingProps {\n  /** Rating value (0-10 by default, or 0-100 if max=100) */\n  value: number\n  /** Maximum value (default: 10 for TMDB scores) */\n  max?: number\n  /** Visual variant */\n  variant?: RatingVariant\n  /** Size of the rating */\n  size?: RatingSize\n  /** Show the numeric value */\n  showValue?: boolean\n  /** Custom class for the background track circle (circle variant only) */\n  trackClassName?: string\n  /** Additional class name */\n  className?: string\n}\n\nfunction Rating({\n  value,\n  max = 10,\n  variant = 'circle',\n  size = 'md',\n  showValue = true,\n  trackClassName,\n  className,\n}: Readonly<RatingProps>) {\n  const clampedValue = Math.max(0, Math.min(value, max))\n  const percent = (clampedValue / max) * 100\n\n  return (\n    <div className={clsx('ui:inline-flex', className)}>\n      {variant === 'circle' ? (\n        <CircleRating\n          percent={percent}\n          size={size}\n          showValue={showValue}\n          value={clampedValue}\n          max={max}\n          trackClassName={trackClassName}\n        />\n      ) : (\n        <StarsRating\n          percent={percent}\n          size={size}\n          showValue={showValue}\n          value={clampedValue}\n          max={max}\n        />\n      )}\n    </div>\n  )\n}\n\nexport default Rating\n","import clsx from 'clsx'\nimport { createElement } from 'react'\n\nimport type { ElementType, HTMLAttributes, ReactNode } from 'react'\n\nexport type TypographyVariant =\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'body'\n  | 'body-sm'\n  | 'body-lg'\n  | 'lead'\n  | 'caption'\n  | 'caption-xs'\n  | 'label'\n  | 'muted'\n  | 'blockquote'\n\nexport interface TypographyProps extends HTMLAttributes<HTMLElement> {\n  /** Visual style variant */\n  variant: TypographyVariant\n  /** Override semantic HTML tag */\n  as?: ElementType\n  /** Additional CSS classes */\n  className?: string\n  /** Content */\n  children: ReactNode\n}\n\nconst variantStyles: Record<TypographyVariant, string> = {\n  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',\n  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',\n  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',\n  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',\n  h5: 'ui:font-roboto ui:text-sm ui:sm:text-base ui:md:text-lg ui:font-medium ui:leading-normal ui:text-foreground',\n  h6: 'ui:font-roboto ui:text-xs ui:sm:text-sm ui:md:text-base ui:font-medium ui:leading-normal ui:text-foreground',\n  body: 'ui:font-inter ui:text-xs ui:sm:text-sm ui:md:text-base ui:leading-relaxed ui:text-foreground',\n  'body-sm':\n    'ui:font-inter ui:text-xs ui:sm:text-sm ui:leading-relaxed ui:text-foreground',\n  'body-lg':\n    'ui:font-inter ui:text-sm ui:sm:text-base ui:md:text-lg ui:leading-relaxed ui:text-foreground',\n  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',\n  caption: 'ui:font-inter ui:text-xs ui:sm:text-sm ui:text-muted-foreground',\n  'caption-xs': 'ui:font-inter ui:text-xs ui:text-muted-foreground',\n  label:\n    'ui:font-inter ui:text-xs ui:sm:text-sm ui:font-medium ui:text-foreground',\n  muted: 'ui:font-inter ui:text-xs ui:sm:text-sm ui:text-muted-foreground',\n  blockquote:\n    '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',\n}\n\nconst variantToTag: Record<TypographyVariant, ElementType> = {\n  h1: 'h1',\n  h2: 'h2',\n  h3: 'h3',\n  h4: 'h4',\n  h5: 'h5',\n  h6: 'h6',\n  body: 'p',\n  'body-sm': 'p',\n  'body-lg': 'p',\n  lead: 'p',\n  caption: 'span',\n  'caption-xs': 'span',\n  label: 'label',\n  muted: 'p',\n  blockquote: 'blockquote',\n}\n\nfunction Typography({\n  variant,\n  as,\n  className,\n  children,\n  ...rest\n}: Readonly<TypographyProps>) {\n  const Component = as ?? variantToTag[variant]\n\n  return createElement(\n    Component,\n    { className: clsx(variantStyles[variant], className), ...rest },\n    children\n  )\n}\n\nexport default Typography\n","import clsx from 'clsx'\n\nimport type { ImageLoading } from '../Image'\n\nexport interface MovieCardBaseProps {\n  /** Media ID */\n  id: number\n  /** Media title */\n  title: string\n  /** Poster URL (full URL or TMDB path) */\n  posterUrl: string\n  /** Vote average (0-10) */\n  voteAverage: number\n  /** Release year */\n  year?: number | null\n  /** Additional class name */\n  className?: string\n  /** Image loading strategy ('lazy' | 'eager'). Default: 'lazy' */\n  imageLoading?: ImageLoading\n  /** Base64 blur data URL for next/image placeholder=\"blur\" */\n  blurDataURL?: string\n}\n\nexport interface MovieCardAsCard extends MovieCardBaseProps {\n  as?: 'card' | undefined\n  onClick?: never\n}\n\nexport interface MovieCardAsButton extends MovieCardBaseProps {\n  as: 'button'\n  onClick: () => void\n}\n\nexport function getMovieCardClasses(\n  isInteractive: boolean,\n  className?: string\n) {\n  return clsx(\n    'ui:group ui:relative ui:flex ui:flex-col ui:overflow-hidden',\n    isInteractive && [\n      'ui:cursor-pointer',\n      'ui:transition-transform ui:duration-200',\n      'hover:ui:scale-[1.02]',\n    ],\n    className\n  )\n}\n\nexport function getMovieCardLinkClasses() {\n  return 'ui:block ui:no-underline ui:text-inherit'\n}\n"]}

package/dist/chunk-3GCDFSJB.js

@@ -0,0 +1,228 @@
+import { getMovieCardLinkClasses, Rating_default, Typography_default, getMovieCardClasses } from './chunk-2EQIYKZF.js';
+import { Card_default } from './chunk-JI3OVXCK.js';
+import { Icon_default } from './chunk-JHRISQQJ.js';
+import { getBlurDataUrl } from '@vite-mf-monorepo/shared';
+import clsx from 'clsx';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Link } from 'react-router-dom';
+
+function 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: clsx("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: clsx(
+              "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;
+function MovieCardContent({
+  id,
+  title,
+  posterUrl,
+  voteAverage,
+  year,
+  className,
+  imageLoading = "lazy",
+  isInteractive,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs(
+    Card_default,
+    {
+      variant: "ghost",
+      className: getMovieCardClasses(isInteractive, className),
+      onClick,
+      "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
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function 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__ */ jsx(
+    MovieCardContent,
+    {
+      id,
+      title,
+      posterUrl,
+      voteAverage,
+      year,
+      className,
+      imageLoading,
+      isInteractive,
+      onClick: as === "button" ? onClick : void 0
+    }
+  );
+  if (as === "link" && to) {
+    return /* @__PURE__ */ jsx(Link, { to, className: getMovieCardLinkClasses(), children: cardContent });
+  }
+  return cardContent;
+}
+var MovieCard_default = MovieCard;
+
+export { Image_default, MovieCard_default };
+//# sourceMappingURL=chunk-3GCDFSJB.js.map
+//# sourceMappingURL=chunk-3GCDFSJB.js.map

package/dist/chunk-3GCDFSJB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Image/Image.tsx","../src/MovieCard/MovieCardContent.tsx","../src/react-router/MovieCard/MovieCard.tsx"],"names":["jsxs","jsx"],"mappings":"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","file":"chunk-3GCDFSJB.js","sourcesContent":["import { getBlurDataUrl } from '@vite-mf-monorepo/shared'\nimport clsx from 'clsx'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { Icon } from '../Icon'\n\nimport type { ImgHTMLAttributes, ReactNode } from 'react'\n\nexport type ImageState = 'loading' | 'loaded' | 'error'\n\nexport type AspectRatio = '2/3' | '16/9' | '1/1' | '4/3' | '3/2'\n\nexport type ImageLoading = 'lazy' | 'eager'\n\nexport interface ImageProps\n  extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'placeholder'> {\n  /** Image source URL */\n  src: string\n  /** Alt text for accessibility */\n  alt: string\n  /** Pre-generated blur data URL (base64) */\n  blurDataUrl?: string\n  /** Auto-generate blur placeholder from src using Canvas API */\n  autoBlur?: boolean\n  /** Size of blur canvas (smaller = more blur). Default: 16 */\n  blurSize?: number\n  /** JPEG quality for blur (0-1). Default: 0.3 */\n  blurQuality?: number\n  /** Aspect ratio of the image container */\n  aspectRatio?: AspectRatio | (string & {})\n  /** Fallback content when image fails to load */\n  fallback?: ReactNode\n  /** Callback when image loads successfully */\n  onLoad?: () => void\n  /** Callback when image fails to load */\n  onError?: () => void\n  /** Load strategy: 'lazy' waits for viewport visibility, 'eager' loads immediately. Default: 'eager' */\n  loading?: ImageLoading\n}\n\nfunction Image({\n  src,\n  alt,\n  blurDataUrl,\n  autoBlur = false,\n  blurSize = 16,\n  blurQuality = 0.3,\n  aspectRatio = '2/3',\n  fallback,\n  className,\n  onLoad,\n  onError,\n  loading = 'eager',\n  ...rest\n}: Readonly<ImageProps>) {\n  const imgRef = useRef<HTMLImageElement>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [state, setState] = useState<ImageState>('loading')\n  const [generatedBlur, setGeneratedBlur] = useState<string | undefined>(\n    undefined\n  )\n  const [blurReady, setBlurReady] = useState(!autoBlur || !!blurDataUrl)\n  const [isVisible, setIsVisible] = useState(loading === 'eager')\n\n  const effectiveBlur = blurDataUrl ?? generatedBlur\n\n  // Lazy load with IntersectionObserver\n  useEffect(() => {\n    if (loading === 'eager' || !containerRef.current) {\n      return\n    }\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          setIsVisible(true)\n          observer.unobserve(entry.target)\n        }\n      },\n      { rootMargin: '50px' }\n    )\n\n    observer.observe(containerRef.current)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [loading])\n\n  useEffect(() => {\n    if (!autoBlur || blurDataUrl) {\n      setBlurReady(true)\n      return\n    }\n\n    setBlurReady(false)\n\n    getBlurDataUrl(src, blurSize, blurQuality)\n      .then((base64) => {\n        setGeneratedBlur(base64)\n        setBlurReady(true)\n      })\n      .catch(() => {\n        setBlurReady(true)\n      })\n  }, [autoBlur, src, blurDataUrl, blurSize, blurQuality])\n\n  useEffect(() => {\n    setState('loading')\n    setGeneratedBlur(undefined)\n\n    // Check if image is already loaded from cache\n    if (imgRef.current?.complete && imgRef.current.naturalHeight !== 0) {\n      setState('loaded')\n    }\n  }, [src])\n\n  const handleLoad = useCallback(() => {\n    setState('loaded')\n    onLoad?.()\n  }, [onLoad])\n\n  const handleError = useCallback(() => {\n    setState('error')\n    onError?.()\n  }, [onError])\n\n  const defaultFallback = (\n    <div className=\"ui:flex ui:h-full ui:w-full ui:items-center ui:justify-center ui:bg-muted\">\n      <Icon\n        name=\"Photo\"\n        size={48}\n        className=\"ui:text-muted-foreground\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  )\n\n  return (\n    <div\n      ref={containerRef}\n      className={clsx('ui:relative ui:overflow-hidden ui:bg-muted', className)}\n      style={aspectRatio ? { aspectRatio } : undefined}\n      data-state={state}\n    >\n      {state === 'error' ? (\n        (fallback ?? defaultFallback)\n      ) : (\n        <>\n          {effectiveBlur && state === 'loading' && (\n            <img\n              src={effectiveBlur}\n              alt=\"\"\n              aria-hidden=\"true\"\n              className=\"ui:absolute ui:inset-0 ui:h-full ui:w-full ui:scale-105 ui:object-cover\"\n            />\n          )}\n\n          {blurReady && isVisible && (\n            <img\n              ref={imgRef}\n              src={src}\n              alt={alt}\n              onLoad={handleLoad}\n              onError={handleError}\n              className={clsx(\n                'ui:absolute ui:inset-0 ui:h-full ui:w-full ui:object-cover ui:transition-opacity ui:duration-300',\n                state === 'loaded' ? 'ui:opacity-100' : 'ui:opacity-0'\n              )}\n              {...rest}\n            />\n          )}\n        </>\n      )}\n    </div>\n  )\n}\n\nexport default Image\n","import { Card } from '../Card'\nimport { Image } from '../Image'\nimport { Rating } from '../Rating'\nimport { Typography } from '../Typography'\n\nimport { getMovieCardClasses } from './MovieCard.utils'\n\nimport type { ImageLoading } from '../Image'\nimport type { ReactNode } from 'react'\n\ninterface MovieCardContentProps {\n  id: number\n  title: string\n  posterUrl: string\n  voteAverage: number\n  year?: number | null\n  className?: string\n  imageLoading?: ImageLoading\n  isInteractive: boolean\n  onClick?: (() => void) | undefined\n}\n\nexport default function MovieCardContent({\n  id,\n  title,\n  posterUrl,\n  voteAverage,\n  year,\n  className,\n  imageLoading = 'lazy',\n  isInteractive,\n  onClick,\n}: Readonly<MovieCardContentProps>): ReactNode {\n  return (\n    <Card\n      variant=\"ghost\"\n      className={getMovieCardClasses(isInteractive, className)}\n      onClick={onClick}\n      data-testid={`movie-card-${String(id)}`}\n    >\n      <div className=\"ui:relative ui:aspect-[2/3] ui:w-full ui:overflow-hidden ui:rounded-md ui:bg-gray-200\">\n        <Image\n          src={posterUrl}\n          alt={title}\n          loading={imageLoading}\n          aspectRatio={undefined}\n          className=\"ui:h-full ui:w-full ui:object-cover\"\n        />\n        <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\">\n          <Rating\n            value={voteAverage}\n            size=\"sm\"\n            variant=\"circle\"\n            trackClassName=\"ui:text-gray-200\"\n            className=\"ui:drop-shadow\"\n          />\n        </div>\n      </div>\n\n      <div className=\"ui:mt-2 ui:flex ui:flex-col ui:gap-0.5 ui:px-1\">\n        <Typography\n          variant=\"label\"\n          as=\"h3\"\n          className=\"ui:line-clamp-2\"\n          title={title}\n        >\n          {title}\n        </Typography>\n        {year && (\n          <Typography\n            variant=\"caption-xs\"\n            className=\"ui:[.media-section:nth-of-type(odd)_&]:text-badge-foreground\"\n          >\n            {year}\n          </Typography>\n        )}\n      </div>\n    </Card>\n  )\n}\n","import { Link } from 'react-router-dom'\n\nimport { getMovieCardLinkClasses } from '../../MovieCard/MovieCard.utils'\nimport MovieCardContent from '../../MovieCard/MovieCardContent'\n\nimport type { MovieCardProps } from './MovieCard.types'\n\nfunction MovieCard({\n  id,\n  title,\n  posterUrl,\n  voteAverage,\n  year,\n  className,\n  imageLoading = 'lazy',\n  as = 'card',\n  ...rest\n}: Readonly<MovieCardProps>) {\n  const to = 'to' in rest ? rest.to : undefined\n  const onClick = 'onClick' in rest ? rest.onClick : undefined\n\n  const isInteractive = as === 'link' || as === 'button'\n\n  const cardContent = (\n    <MovieCardContent\n      id={id}\n      title={title}\n      posterUrl={posterUrl}\n      voteAverage={voteAverage}\n      year={year}\n      className={className}\n      imageLoading={imageLoading}\n      isInteractive={isInteractive}\n      onClick={as === 'button' ? onClick : undefined}\n    />\n  )\n\n  if (as === 'link' && to) {\n    return (\n      <Link to={to} className={getMovieCardLinkClasses()}>\n        {cardContent}\n      </Link>\n    )\n  }\n\n  return cardContent\n}\n\nexport default MovieCard\n"]}

package/dist/index.d.ts

@@ -5,7 +5,7 @@ import { IconName } from './Icon/index.js';
 export { Icon, IconProps, IconSize } from './Icon/index.js';
 export { Button, ButtonProps } from './Button/index.js';
 export { Card, CardProps, CardVariant } from './Card/index.js';
-export { A as AspectRatio, I as Image, c as ImageProps, d as ImageState } from './MovieCard.utils-CpNUUs8O.js';
+export { A as AspectRatio, I as Image, c as ImageProps, d as ImageState } from './MovieCard.utils-D8i4d7qA.js';
 export { MovieCard, MovieCardProps } from './react-router/index.js';
 import 'react-router-dom';
 

package/dist/index.js

@@ -1,11 +1,11 @@
 import './chunk-Y5GP5OWN.js';
 import { Skeleton_default } from './chunk-JPJYJLAP.js';
 export { Skeleton_default as Skeleton } from './chunk-JPJYJLAP.js';
-export { MovieCard_default as MovieCard } from './chunk-5NW3IDX2.js';
+export { Image_default as Image, MovieCard_default as MovieCard } from './chunk-3GCDFSJB.js';
 import { Button_default } from './chunk-WYIIOTWJ.js';
 export { Button_default as Button } from './chunk-WYIIOTWJ.js';
-import { Typography_default } from './chunk-JDBRVX5O.js';
-export { Image_default as Image, Rating_default as Rating, Typography_default as Typography } from './chunk-JDBRVX5O.js';
+import { Typography_default } from './chunk-2EQIYKZF.js';
+export { Rating_default as Rating, Typography_default as Typography } from './chunk-2EQIYKZF.js';
 import './chunk-FDLKS7BI.js';
 export { Card_default as Card } from './chunk-JI3OVXCK.js';
 import { Icon_default } from './chunk-JHRISQQJ.js';

package/dist/next/index.d.ts

@@ -1,8 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { IconName } from '../Icon/index.js';
 import { LinkProps } from 'next/link';
-import { ButtonHTMLAttributes } from 'react';
-import { M as MovieCardAsCard, a as MovieCardBaseProps, b as MovieCardAsButton } from '../MovieCard.utils-CpNUUs8O.js';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { ImageProps } from 'next/image';
+import { M as MovieCardAsCard, a as MovieCardBaseProps, b as MovieCardAsButton } from '../MovieCard.utils-D8i4d7qA.js';
 
 interface ButtonVisualProps {
     /** Visual variant of the button */
@@ -34,6 +35,17 @@ interface NextHeroImageProps {
 }
 declare function HeroImage({ backdropPath, title }: Readonly<NextHeroImageProps>): react_jsx_runtime.JSX.Element;
 
+interface NextImageProps extends Omit<ImageProps, 'placeholder'> {
+    /** Custom fallback content on error (default: Photo icon) */
+    fallback?: ReactNode;
+    /** Container aspect ratio (e.g. '2/3', '16/9') */
+    aspectRatio?: string;
+    /** Base64 blur data URL — auto-sets placeholder="blur" when provided */
+    blurDataURL?: string;
+}
+
+declare function NextImage({ fallback, aspectRatio, blurDataURL, className, onLoad, onError, style, ...rest }: Readonly<NextImageProps>): react_jsx_runtime.JSX.Element;
+
 interface NextMovieCardAsLink extends MovieCardBaseProps {
     /** Render as Next.js Link */
     as: 'link';
@@ -43,6 +55,6 @@ interface NextMovieCardAsLink extends MovieCardBaseProps {
 }
 type NextMovieCardProps = MovieCardAsCard | NextMovieCardAsLink | MovieCardAsButton;
 
-declare function MovieCard({ id, title, posterUrl, voteAverage, year, className, imageLoading, as, ...rest }: Readonly<NextMovieCardProps>): react_jsx_runtime.JSX.Element;
+declare function MovieCard({ id, title, posterUrl, voteAverage, year, className, imageLoading, blurDataURL, as, ...rest }: Readonly<NextMovieCardProps>): react_jsx_runtime.JSX.Element;
 
-export { Button, HeroImage, MovieCard, MovieCardAsButton, MovieCardAsCard, MovieCardBaseProps, type NextButtonAsButton, type NextButtonAsLink, type NextButtonProps, type NextHeroImageProps, type NextMovieCardAsLink, type NextMovieCardProps };
+export { Button, HeroImage, MovieCard, MovieCardAsButton, MovieCardAsCard, MovieCardBaseProps, type NextButtonAsButton, type NextButtonAsLink, type NextButtonProps, type NextHeroImageProps, NextImage, type NextImageProps, type NextMovieCardAsLink, type NextMovieCardProps };

package/dist/next/index.js

@@ -1,12 +1,13 @@
 import { Skeleton_default } from '../chunk-JPJYJLAP.js';
-import { getMovieCardLinkClasses, MovieCardContent } from '../chunk-JDBRVX5O.js';
+import { getMovieCardLinkClasses, Rating_default, Typography_default, getMovieCardClasses } from '../chunk-2EQIYKZF.js';
 import { getButtonClasses, iconSizeMap, getButtonDisabledClasses } from '../chunk-FDLKS7BI.js';
-import '../chunk-JI3OVXCK.js';
+import { Card_default } from '../chunk-JI3OVXCK.js';
 import { Icon_default } from '../chunk-JHRISQQJ.js';
 import Link from 'next/link';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
 import Image from 'next/image';
-import { useState } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
 
 function Button(props) {
   const {
@@ -48,11 +49,101 @@ function Button(props) {
   return /* @__PURE__ */ jsx("button", { className: getButtonDisabledClasses(classes), ...buttonProps, children: content });
 }
 var Button_default = Button;
+function NextImage({
+  fallback,
+  aspectRatio,
+  blurDataURL,
+  className,
+  onLoad,
+  onError,
+  style,
+  ...rest
+}) {
+  const [state, setState] = useState("loading");
+  const imgRef = useRef(null);
+  useEffect(() => {
+    if (imgRef.current?.complete && imgRef.current.naturalWidth > 0) {
+      console.warn("loaded from cache");
+      setState("loaded");
+    }
+  }, []);
+  const handleLoad = useCallback(
+    (e) => {
+      setState("loaded");
+      console.warn("handleLoad::load");
+      if (typeof onLoad === "function") {
+        onLoad(e);
+      }
+    },
+    [onLoad]
+  );
+  const handleError = useCallback(
+    (e) => {
+      setState("error");
+      if (typeof onError === "function") {
+        onError(e);
+      }
+    },
+    [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",
+    {
+      className: clsx("ui:relative ui:overflow-hidden ui:bg-muted", className),
+      style: aspectRatio ? { aspectRatio, ...style } : style,
+      "data-state": state,
+      children: state === "error" ? fallback ?? defaultFallback : /* @__PURE__ */ jsx(
+        Image,
+        {
+          ...rest,
+          ref: imgRef,
+          className: clsx(
+            "ui:transition-opacity ui:duration-300",
+            state === "loaded" ? "ui:opacity-100" : "ui:opacity-0"
+          ),
+          onLoad: handleLoad,
+          onError: handleError,
+          placeholder: blurDataURL ? "blur" : "empty",
+          blurDataURL
+        }
+      )
+    }
+  );
+}
+var NextImage_default = NextImage;
 function HeroImage({ backdropPath, title }) {
-  const [loading, setLoading] = useState(true);
   const src = backdropPath ? `https://image.tmdb.org/t/p/original${backdropPath}` : void 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    loading && /* @__PURE__ */ jsx(
+    src ? /* @__PURE__ */ jsx(
+      NextImage_default,
+      {
+        src,
+        alt: title ?? "Unknown",
+        fill: true,
+        preload: true,
+        sizes: "100vw",
+        className: "ui:h-full ui:w-full",
+        fallback: /* @__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__ */ jsx(
       Skeleton_default,
       {
         "data-testid": "hero-image-skeleton",
@@ -62,24 +153,79 @@ function HeroImage({ backdropPath, title }) {
         rounded: false
       }
     ),
-    src && /* @__PURE__ */ jsx(
-      Image,
-      {
-        src,
-        alt: title ?? "Unknown",
-        fill: true,
-        priority: true,
-        sizes: "100vw",
-        className: "ui:relative ui:h-full ui:w-full ui:object-cover ui:object-center ui:z-0",
-        onLoad: () => {
-          setLoading(false);
-        }
-      }
-    ),
     /* @__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 MovieCardContent({
+  id,
+  title,
+  posterUrl,
+  voteAverage,
+  year,
+  className,
+  imageLoading = "lazy",
+  isInteractive,
+  onClick,
+  blurDataURL
+}) {
+  const src = `https://image.tmdb.org/t/p/w342${posterUrl}`;
+  return /* @__PURE__ */ jsxs(
+    Card_default,
+    {
+      variant: "ghost",
+      className: getMovieCardClasses(isInteractive, className),
+      onClick,
+      "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(
+            NextImage_default,
+            {
+              src,
+              alt: title,
+              width: 150,
+              height: 225,
+              loading: imageLoading,
+              blurDataURL,
+              className: "ui:h-full ui:w-full"
+            }
+          ),
+          /* @__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
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
 function MovieCard({
   id,
   title,
@@ -88,6 +234,7 @@ function MovieCard({
   year,
   className,
   imageLoading = "lazy",
+  blurDataURL,
   as = "card",
   ...rest
 }) {
@@ -105,7 +252,8 @@ function MovieCard({
       className,
       imageLoading,
       isInteractive,
-      onClick: as === "button" ? onClick : void 0
+      onClick: as === "button" ? onClick : void 0,
+      blurDataURL
     }
   );
   if (as === "link" && href) {
@@ -115,6 +263,6 @@ function MovieCard({
 }
 var MovieCard_default = MovieCard;
 
-export { Button_default as Button, HeroImage_default as HeroImage, MovieCard_default as MovieCard };
+export { Button_default as Button, HeroImage_default as HeroImage, MovieCard_default as MovieCard, NextImage_default as NextImage };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/next/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/next/Button/Button.tsx","../../src/next/HeroImage/HeroImage.tsx","../../src/next/MovieCard/MovieCard.tsx"],"names":["_","_v","_s","_i","_ip","_c","_ch","jsxs","Fragment","jsx","Link"],"mappings":"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","file":"index.js","sourcesContent":["import Link from 'next/link'\n\nimport {\n  getButtonClasses,\n  getButtonDisabledClasses,\n  iconSizeMap,\n} from '../../Button/Button.utils'\nimport { Icon } from '../../Icon'\n\nimport type { NextButtonProps } from './Button.types'\n\nfunction Button(props: Readonly<NextButtonProps>) {\n  const {\n    variant = 'primary',\n    size = 'md',\n    icon,\n    iconPosition = 'left',\n    className,\n    children,\n  } = props\n\n  const classes = getButtonClasses({ variant, size, iconPosition, className })\n\n  const content = (\n    <>\n      {icon && <Icon name={icon} size={iconSizeMap[size]} />}\n      {children}\n    </>\n  )\n\n  if (props.as === 'link') {\n    const {\n      as: _,\n      variant: _v,\n      size: _s,\n      icon: _i,\n      iconPosition: _ip,\n      className: _c,\n      children: _ch,\n      ...linkProps\n    } = props\n\n    return (\n      <Link className={classes} {...linkProps}>\n        {content}\n      </Link>\n    )\n  }\n\n  const {\n    as: _,\n    variant: _v,\n    size: _s,\n    icon: _i,\n    iconPosition: _ip,\n    className: _c,\n    children: _ch,\n    ...buttonProps\n  } = props\n\n  return (\n    <button className={getButtonDisabledClasses(classes)} {...buttonProps}>\n      {content}\n    </button>\n  )\n}\n\nexport default Button\n","import Image from 'next/image'\nimport { useState } from 'react'\n\nimport { Skeleton } from '../../Skeleton'\n\nexport interface NextHeroImageProps {\n  /** Backdrop path from TMDB API (e.g. \"/abc123.jpg\") */\n  backdropPath?: string | null\n  /** Alt text for the image */\n  title?: string | null\n}\n\nfunction HeroImage({ backdropPath, title }: Readonly<NextHeroImageProps>) {\n  const [loading, setLoading] = useState(true)\n\n  const src = backdropPath\n    ? `https://image.tmdb.org/t/p/original${backdropPath}`\n    : undefined\n\n  return (\n    <>\n      {loading && (\n        <Skeleton\n          data-testid=\"hero-image-skeleton\"\n          variant=\"rectangle\"\n          width=\"ui:relative ui:w-full ui:h-full ui:hero-height ui:z-0\"\n          aspectRatio=\"21/9\"\n          rounded={false}\n        />\n      )}\n      {src && (\n        <Image\n          src={src}\n          alt={title ?? 'Unknown'}\n          fill\n          priority\n          sizes=\"100vw\"\n          className=\"ui:relative ui:h-full ui:w-full ui:object-cover ui:object-center ui:z-0\"\n          onLoad={() => {\n            setLoading(false)\n          }}\n        />\n      )}\n      {/* Gradient Overlay */}\n      <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\" />\n    </>\n  )\n}\n\nexport default HeroImage\n","import Link from 'next/link'\n\nimport { getMovieCardLinkClasses } from '../../MovieCard/MovieCard.utils'\nimport MovieCardContent from '../../MovieCard/MovieCardContent'\n\nimport type { NextMovieCardProps } from './MovieCard.types'\n\nfunction MovieCard({\n  id,\n  title,\n  posterUrl,\n  voteAverage,\n  year,\n  className,\n  imageLoading = 'lazy',\n  as = 'card',\n  ...rest\n}: Readonly<NextMovieCardProps>) {\n  const href = 'href' in rest ? rest.href : undefined\n  const onClick = 'onClick' in rest ? rest.onClick : undefined\n\n  const isInteractive = as === 'link' || as === 'button'\n\n  const cardContent = (\n    <MovieCardContent\n      id={id}\n      title={title}\n      posterUrl={posterUrl}\n      voteAverage={voteAverage}\n      year={year}\n      className={className}\n      imageLoading={imageLoading}\n      isInteractive={isInteractive}\n      onClick={as === 'button' ? onClick : undefined}\n    />\n  )\n\n  if (as === 'link' && href) {\n    return (\n      <Link href={href} className={getMovieCardLinkClasses()}>\n        {cardContent}\n      </Link>\n    )\n  }\n\n  return cardContent\n}\n\nexport default MovieCard\n"]}
+{"version":3,"sources":["../../src/next/Button/Button.tsx","../../src/next/Image/NextImage.tsx","../../src/next/HeroImage/HeroImage.tsx","../../src/next/MovieCard/MovieCardContent.tsx","../../src/next/MovieCard/MovieCard.tsx"],"names":["_","_v","_s","_i","_ip","_c","_ch","jsx","jsxs","Fragment","Link"],"mappings":"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","file":"index.js","sourcesContent":["import Link from 'next/link'\n\nimport {\n  getButtonClasses,\n  getButtonDisabledClasses,\n  iconSizeMap,\n} from '../../Button/Button.utils'\nimport { Icon } from '../../Icon'\n\nimport type { NextButtonProps } from './Button.types'\n\nfunction Button(props: Readonly<NextButtonProps>) {\n  const {\n    variant = 'primary',\n    size = 'md',\n    icon,\n    iconPosition = 'left',\n    className,\n    children,\n  } = props\n\n  const classes = getButtonClasses({ variant, size, iconPosition, className })\n\n  const content = (\n    <>\n      {icon && <Icon name={icon} size={iconSizeMap[size]} />}\n      {children}\n    </>\n  )\n\n  if (props.as === 'link') {\n    const {\n      as: _,\n      variant: _v,\n      size: _s,\n      icon: _i,\n      iconPosition: _ip,\n      className: _c,\n      children: _ch,\n      ...linkProps\n    } = props\n\n    return (\n      <Link className={classes} {...linkProps}>\n        {content}\n      </Link>\n    )\n  }\n\n  const {\n    as: _,\n    variant: _v,\n    size: _s,\n    icon: _i,\n    iconPosition: _ip,\n    className: _c,\n    children: _ch,\n    ...buttonProps\n  } = props\n\n  return (\n    <button className={getButtonDisabledClasses(classes)} {...buttonProps}>\n      {content}\n    </button>\n  )\n}\n\nexport default Button\n","'use client'\n\nimport clsx from 'clsx'\nimport Image from 'next/image'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { Icon } from '../../Icon'\n\nimport type { NextImageProps } from './NextImage.types'\nimport type { ImageState } from '../../Image'\nimport type { SyntheticEvent } from 'react'\n\nfunction NextImage({\n  fallback,\n  aspectRatio,\n  blurDataURL,\n  className,\n  onLoad,\n  onError,\n  style,\n  ...rest\n}: Readonly<NextImageProps>) {\n  const [state, setState] = useState<ImageState>('loading')\n\n  // Add a ref and useEffect to catch already-loaded images\n  const imgRef = useRef<HTMLImageElement>(null)\n\n  useEffect(() => {\n    if (imgRef.current?.complete && imgRef.current.naturalWidth > 0) {\n      console.warn('loaded from cache')\n      setState('loaded')\n    }\n  }, [])\n\n  const handleLoad = useCallback(\n    (e: SyntheticEvent<HTMLImageElement>) => {\n      setState('loaded')\n      console.warn('handleLoad::load')\n      if (typeof onLoad === 'function') {\n        onLoad(e as Parameters<typeof onLoad>[0])\n      }\n    },\n    [onLoad]\n  )\n\n  const handleError = useCallback(\n    (e: SyntheticEvent<HTMLImageElement>) => {\n      setState('error')\n      if (typeof onError === 'function') {\n        onError(e as Parameters<typeof onError>[0])\n      }\n    },\n    [onError]\n  )\n\n  const defaultFallback = (\n    <div className=\"ui:flex ui:h-full ui:w-full ui:items-center ui:justify-center ui:bg-muted\">\n      <Icon\n        name=\"Photo\"\n        size={48}\n        className=\"ui:text-muted-foreground\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  )\n\n  return (\n    <div\n      className={clsx('ui:relative ui:overflow-hidden ui:bg-muted', className)}\n      style={aspectRatio ? { aspectRatio, ...style } : style}\n      data-state={state}\n    >\n      {state === 'error' ? (\n        (fallback ?? defaultFallback)\n      ) : (\n        <Image\n          {...rest}\n          ref={imgRef}\n          className={clsx(\n            'ui:transition-opacity ui:duration-300',\n            state === 'loaded' ? 'ui:opacity-100' : 'ui:opacity-0'\n          )}\n          onLoad={handleLoad}\n          onError={handleError}\n          placeholder={blurDataURL ? 'blur' : 'empty'}\n          blurDataURL={blurDataURL}\n        />\n      )}\n    </div>\n  )\n}\n\nexport default NextImage\n","import { Skeleton } from '../../Skeleton'\nimport { NextImage } from '../Image'\n\nexport interface NextHeroImageProps {\n  /** Backdrop path from TMDB API (e.g. \"/abc123.jpg\") */\n  backdropPath?: string | null\n  /** Alt text for the image */\n  title?: string | null\n}\n\nfunction HeroImage({ backdropPath, title }: Readonly<NextHeroImageProps>) {\n  const src = backdropPath\n    ? `https://image.tmdb.org/t/p/original${backdropPath}`\n    : undefined\n\n  return (\n    <>\n      {src ? (\n        <NextImage\n          src={src}\n          alt={title ?? 'Unknown'}\n          fill\n          preload\n          sizes=\"100vw\"\n          className=\"ui:h-full ui:w-full\"\n          fallback={\n            <Skeleton\n              data-testid=\"hero-image-skeleton\"\n              variant=\"rectangle\"\n              width=\"ui:relative ui:w-full ui:h-full ui:hero-height ui:z-0\"\n              aspectRatio=\"21/9\"\n              rounded={false}\n            />\n          }\n        />\n      ) : (\n        <Skeleton\n          data-testid=\"hero-image-skeleton\"\n          variant=\"rectangle\"\n          width=\"ui:relative ui:w-full ui:h-full ui:hero-height ui:z-0\"\n          aspectRatio=\"21/9\"\n          rounded={false}\n        />\n      )}\n      {/* Gradient Overlay */}\n      <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\" />\n    </>\n  )\n}\n\nexport default HeroImage\n","import { Card } from '../../Card'\nimport { getMovieCardClasses } from '../../MovieCard/MovieCard.utils'\nimport { Rating } from '../../Rating'\nimport { Typography } from '../../Typography'\nimport { NextImage } from '../Image'\n\nimport type { ImageLoading } from '../../Image/Image'\nimport type { ReactNode } from 'react'\n\ninterface NextMovieCardContentProps {\n  id: number\n  title: string\n  posterUrl: string\n  voteAverage: number\n  year?: number | null\n  className?: string\n  imageLoading?: ImageLoading\n  isInteractive: boolean\n  onClick?: (() => void) | undefined\n  blurDataURL?: string\n}\n\nexport default function MovieCardContent({\n  id,\n  title,\n  posterUrl,\n  voteAverage,\n  year,\n  className,\n  imageLoading = 'lazy',\n  isInteractive,\n  onClick,\n  blurDataURL,\n}: Readonly<NextMovieCardContentProps>): ReactNode {\n  const src = `https://image.tmdb.org/t/p/w342${posterUrl}`\n\n  return (\n    <Card\n      variant=\"ghost\"\n      className={getMovieCardClasses(isInteractive, className)}\n      onClick={onClick}\n      data-testid={`movie-card-${String(id)}`}\n    >\n      <div className=\"ui:relative ui:aspect-[2/3] ui:w-full ui:overflow-hidden ui:rounded-md ui:bg-gray-200\">\n        <NextImage\n          src={src}\n          alt={title}\n          width={150}\n          height={225}\n          loading={imageLoading}\n          blurDataURL={blurDataURL}\n          className=\"ui:h-full ui:w-full\"\n        />\n        <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\">\n          <Rating\n            value={voteAverage}\n            size=\"sm\"\n            variant=\"circle\"\n            trackClassName=\"ui:text-gray-200\"\n            className=\"ui:drop-shadow\"\n          />\n        </div>\n      </div>\n\n      <div className=\"ui:mt-2 ui:flex ui:flex-col ui:gap-0.5 ui:px-1\">\n        <Typography\n          variant=\"label\"\n          as=\"h3\"\n          className=\"ui:line-clamp-2\"\n          title={title}\n        >\n          {title}\n        </Typography>\n        {year && (\n          <Typography\n            variant=\"caption-xs\"\n            className=\"ui:[.media-section:nth-of-type(odd)_&]:text-badge-foreground\"\n          >\n            {year}\n          </Typography>\n        )}\n      </div>\n    </Card>\n  )\n}\n","import Link from 'next/link'\n\nimport { getMovieCardLinkClasses } from '../../MovieCard/MovieCard.utils'\n\nimport MovieCardContent from './MovieCardContent'\n\nimport type { NextMovieCardProps } from './MovieCard.types'\n\nfunction MovieCard({\n  id,\n  title,\n  posterUrl,\n  voteAverage,\n  year,\n  className,\n  imageLoading = 'lazy',\n  blurDataURL,\n  as = 'card',\n  ...rest\n}: Readonly<NextMovieCardProps>) {\n  const href = 'href' in rest ? rest.href : undefined\n  const onClick = 'onClick' in rest ? rest.onClick : undefined\n\n  const isInteractive = as === 'link' || as === 'button'\n\n  const cardContent = (\n    <MovieCardContent\n      id={id}\n      title={title}\n      posterUrl={posterUrl}\n      voteAverage={voteAverage}\n      year={year}\n      className={className}\n      imageLoading={imageLoading}\n      isInteractive={isInteractive}\n      onClick={as === 'button' ? onClick : undefined}\n      blurDataURL={blurDataURL}\n    />\n  )\n\n  if (as === 'link' && href) {\n    return (\n      <Link href={href} className={getMovieCardLinkClasses()}>\n        {cardContent}\n      </Link>\n    )\n  }\n\n  return cardContent\n}\n\nexport default MovieCard\n"]}

package/dist/react-router/index.d.ts

@@ -1,6 +1,6 @@
 export { Button, ButtonAsButton, ButtonAsLink, ButtonProps } from '../Button/index.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { M as MovieCardAsCard, a as MovieCardBaseProps, b as MovieCardAsButton } from '../MovieCard.utils-CpNUUs8O.js';
+import { M as MovieCardAsCard, a as MovieCardBaseProps, b as MovieCardAsButton } from '../MovieCard.utils-D8i4d7qA.js';
 import '../Icon/index.js';
 import 'react';
 import 'react-router-dom';

package/dist/react-router/index.js

@@ -1,6 +1,6 @@
-export { MovieCard_default as MovieCard } from '../chunk-5NW3IDX2.js';
+export { MovieCard_default as MovieCard } from '../chunk-3GCDFSJB.js';
 export { Button_default as Button } from '../chunk-WYIIOTWJ.js';
-import '../chunk-JDBRVX5O.js';
+import '../chunk-2EQIYKZF.js';
 import '../chunk-FDLKS7BI.js';
 import '../chunk-JI3OVXCK.js';
 import '../chunk-JHRISQQJ.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vite-mf-monorepo/ui",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Design system components for vite-mf-monorepo",
   "type": "module",
   "publishConfig": {

package/dist/chunk-5NW3IDX2.js

@@ -1,42 +0,0 @@
-import { getMovieCardLinkClasses, MovieCardContent } from './chunk-JDBRVX5O.js';
-import { Link } from 'react-router-dom';
-import { jsx } from 'react/jsx-runtime';
-
-function 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__ */ jsx(
-    MovieCardContent,
-    {
-      id,
-      title,
-      posterUrl,
-      voteAverage,
-      year,
-      className,
-      imageLoading,
-      isInteractive,
-      onClick: as === "button" ? onClick : void 0
-    }
-  );
-  if (as === "link" && to) {
-    return /* @__PURE__ */ jsx(Link, { to, className: getMovieCardLinkClasses(), children: cardContent });
-  }
-  return cardContent;
-}
-var MovieCard_default = MovieCard;
-
-export { MovieCard_default };
-//# sourceMappingURL=chunk-5NW3IDX2.js.map
-//# sourceMappingURL=chunk-5NW3IDX2.js.map

package/dist/chunk-5NW3IDX2.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/react-router/MovieCard/MovieCard.tsx"],"names":[],"mappings":";;;;AAOA,SAAS,SAAA,CAAU;AAAA,EACjB,EAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,GAAe,MAAA;AAAA,EACf,EAAA,GAAK,MAAA;AAAA,EACL,GAAG;AACL,CAAA,EAA6B;AAC3B,EAAA,MAAM,EAAA,GAAK,IAAA,IAAQ,IAAA,GAAO,IAAA,CAAK,EAAA,GAAK,MAAA;AACpC,EAAA,MAAM,OAAA,GAAU,SAAA,IAAa,IAAA,GAAO,IAAA,CAAK,OAAA,GAAU,MAAA;AAEnD,EAAA,MAAM,aAAA,GAAgB,EAAA,KAAO,MAAA,IAAU,EAAA,KAAO,QAAA;AAE9C,EAAA,MAAM,WAAA,mBACJ,GAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA;AAAA,MACA,IAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA,EAAS,EAAA,KAAO,QAAA,GAAW,OAAA,GAAU;AAAA;AAAA,GACvC;AAGF,EAAA,IAAI,EAAA,KAAO,UAAU,EAAA,EAAI;AACvB,IAAA,2BACG,IAAA,EAAA,EAAK,EAAA,EAAQ,SAAA,EAAW,uBAAA,IACtB,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,OAAO,WAAA;AACT;AAEA,IAAO,iBAAA,GAAQ","file":"chunk-5NW3IDX2.js","sourcesContent":["import { Link } from 'react-router-dom'\n\nimport { getMovieCardLinkClasses } from '../../MovieCard/MovieCard.utils'\nimport MovieCardContent from '../../MovieCard/MovieCardContent'\n\nimport type { MovieCardProps } from './MovieCard.types'\n\nfunction MovieCard({\n  id,\n  title,\n  posterUrl,\n  voteAverage,\n  year,\n  className,\n  imageLoading = 'lazy',\n  as = 'card',\n  ...rest\n}: Readonly<MovieCardProps>) {\n  const to = 'to' in rest ? rest.to : undefined\n  const onClick = 'onClick' in rest ? rest.onClick : undefined\n\n  const isInteractive = as === 'link' || as === 'button'\n\n  const cardContent = (\n    <MovieCardContent\n      id={id}\n      title={title}\n      posterUrl={posterUrl}\n      voteAverage={voteAverage}\n      year={year}\n      className={className}\n      imageLoading={imageLoading}\n      isInteractive={isInteractive}\n      onClick={as === 'button' ? onClick : undefined}\n    />\n  )\n\n  if (as === 'link' && to) {\n    return (\n      <Link to={to} className={getMovieCardLinkClasses()}>\n        {cardContent}\n      </Link>\n    )\n  }\n\n  return cardContent\n}\n\nexport default MovieCard\n"]}

package/dist/chunk-JDBRVX5O.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/Image/Image.tsx","../src/Rating/CircleRating.tsx","../src/Rating/StarsRating.tsx","../src/Rating/Rating.tsx","../src/Typography/Typography.tsx","../src/MovieCard/MovieCard.utils.ts","../src/MovieCard/MovieCardContent.tsx"],"names":["jsxs","jsx","clsx"],"mappings":"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","file":"chunk-JDBRVX5O.js","sourcesContent":["import { getBlurDataUrl } from '@vite-mf-monorepo/shared'\nimport clsx from 'clsx'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { Icon } from '../Icon'\n\nimport type { ImgHTMLAttributes, ReactNode } from 'react'\n\nexport type ImageState = 'loading' | 'loaded' | 'error'\n\nexport type AspectRatio = '2/3' | '16/9' | '1/1' | '4/3' | '3/2'\n\nexport type ImageLoading = 'lazy' | 'eager'\n\nexport interface ImageProps\n  extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'placeholder'> {\n  /** Image source URL */\n  src: string\n  /** Alt text for accessibility */\n  alt: string\n  /** Pre-generated blur data URL (base64) */\n  blurDataUrl?: string\n  /** Auto-generate blur placeholder from src using Canvas API */\n  autoBlur?: boolean\n  /** Size of blur canvas (smaller = more blur). Default: 16 */\n  blurSize?: number\n  /** JPEG quality for blur (0-1). Default: 0.3 */\n  blurQuality?: number\n  /** Aspect ratio of the image container */\n  aspectRatio?: AspectRatio | (string & {})\n  /** Fallback content when image fails to load */\n  fallback?: ReactNode\n  /** Callback when image loads successfully */\n  onLoad?: () => void\n  /** Callback when image fails to load */\n  onError?: () => void\n  /** Load strategy: 'lazy' waits for viewport visibility, 'eager' loads immediately. Default: 'eager' */\n  loading?: ImageLoading\n}\n\nfunction Image({\n  src,\n  alt,\n  blurDataUrl,\n  autoBlur = false,\n  blurSize = 16,\n  blurQuality = 0.3,\n  aspectRatio = '2/3',\n  fallback,\n  className,\n  onLoad,\n  onError,\n  loading = 'eager',\n  ...rest\n}: Readonly<ImageProps>) {\n  const imgRef = useRef<HTMLImageElement>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [state, setState] = useState<ImageState>('loading')\n  const [generatedBlur, setGeneratedBlur] = useState<string | undefined>(\n    undefined\n  )\n  const [blurReady, setBlurReady] = useState(!autoBlur || !!blurDataUrl)\n  const [isVisible, setIsVisible] = useState(loading === 'eager')\n\n  const effectiveBlur = blurDataUrl ?? generatedBlur\n\n  // Lazy load with IntersectionObserver\n  useEffect(() => {\n    if (loading === 'eager' || !containerRef.current) {\n      return\n    }\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          setIsVisible(true)\n          observer.unobserve(entry.target)\n        }\n      },\n      { rootMargin: '50px' }\n    )\n\n    observer.observe(containerRef.current)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [loading])\n\n  useEffect(() => {\n    if (!autoBlur || blurDataUrl) {\n      setBlurReady(true)\n      return\n    }\n\n    setBlurReady(false)\n\n    getBlurDataUrl(src, blurSize, blurQuality)\n      .then((base64) => {\n        setGeneratedBlur(base64)\n        setBlurReady(true)\n      })\n      .catch(() => {\n        setBlurReady(true)\n      })\n  }, [autoBlur, src, blurDataUrl, blurSize, blurQuality])\n\n  useEffect(() => {\n    setState('loading')\n    setGeneratedBlur(undefined)\n\n    // Check if image is already loaded from cache\n    if (imgRef.current?.complete && imgRef.current.naturalHeight !== 0) {\n      setState('loaded')\n    }\n  }, [src])\n\n  const handleLoad = useCallback(() => {\n    setState('loaded')\n    onLoad?.()\n  }, [onLoad])\n\n  const handleError = useCallback(() => {\n    setState('error')\n    onError?.()\n  }, [onError])\n\n  const defaultFallback = (\n    <div className=\"ui:flex ui:h-full ui:w-full ui:items-center ui:justify-center ui:bg-muted\">\n      <Icon\n        name=\"Photo\"\n        size={48}\n        className=\"ui:text-muted-foreground\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  )\n\n  return (\n    <div\n      ref={containerRef}\n      className={clsx('ui:relative ui:overflow-hidden ui:bg-muted', className)}\n      style={aspectRatio ? { aspectRatio } : undefined}\n      data-state={state}\n    >\n      {state === 'error' ? (\n        (fallback ?? defaultFallback)\n      ) : (\n        <>\n          {effectiveBlur && state === 'loading' && (\n            <img\n              src={effectiveBlur}\n              alt=\"\"\n              aria-hidden=\"true\"\n              className=\"ui:absolute ui:inset-0 ui:h-full ui:w-full ui:scale-105 ui:object-cover\"\n            />\n          )}\n\n          {blurReady && isVisible && (\n            <img\n              ref={imgRef}\n              src={src}\n              alt={alt}\n              onLoad={handleLoad}\n              onError={handleError}\n              className={clsx(\n                'ui:absolute ui:inset-0 ui:h-full ui:w-full ui:object-cover ui:transition-opacity ui:duration-300',\n                state === 'loaded' ? 'ui:opacity-100' : 'ui:opacity-0'\n              )}\n              {...rest}\n            />\n          )}\n        </>\n      )}\n    </div>\n  )\n}\n\nexport default Image\n","import clsx from 'clsx'\n\nimport type { RatingSize } from './Rating'\n\nconst circleSizeMap: Record<\n  RatingSize,\n  { size: number; stroke: number; fontSize: string }\n> = {\n  sm: { size: 32, stroke: 3, fontSize: 'ui:text-xs' },\n  md: { size: 48, stroke: 4, fontSize: 'ui:text-sm' },\n  lg: { size: 64, stroke: 5, fontSize: 'ui:text-base' },\n}\n\nconst getColorClass = (percent: number): string => {\n  if (percent >= 70) return 'ui:text-green-600'\n  if (percent >= 40) return 'ui:text-amber-600'\n  return 'ui:text-red-500'\n}\n\nexport interface CircleRatingProps {\n  /** Percentage value (0-100) for the progress ring */\n  percent: number\n  /** Size of the rating circle */\n  size: RatingSize\n  /** Whether to display the numeric value in the center */\n  showValue: boolean\n  /** The actual rating value (used for display) */\n  value: number\n  /** Maximum rating value (used for display formatting) */\n  max: number\n  /** Custom class for the background track circle */\n  trackClassName?: string\n}\n\nfunction CircleRating({\n  percent,\n  size,\n  showValue,\n  value,\n  max,\n  trackClassName,\n}: Readonly<CircleRatingProps>) {\n  const { size: svgSize, stroke, fontSize } = circleSizeMap[size]\n  const radius = (svgSize - stroke) / 2\n  const circumference = 2 * Math.PI * radius\n  const offset = circumference - (percent / 100) * circumference\n\n  return (\n    <div className=\"ui:relative ui:inline-flex ui:items-center ui:justify-center\">\n      <svg width={svgSize} height={svgSize} className=\"ui:-rotate-90\">\n        <circle\n          cx={svgSize / 2}\n          cy={svgSize / 2}\n          r={radius}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={stroke}\n          className={trackClassName ?? 'ui:text-gray-200'}\n        />\n        <circle\n          cx={svgSize / 2}\n          cy={svgSize / 2}\n          r={radius}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={stroke}\n          strokeLinecap=\"round\"\n          strokeDasharray={circumference}\n          strokeDashoffset={offset}\n          className={clsx(\n            'ui:transition-all ui:duration-500',\n            getColorClass(percent)\n          )}\n        />\n      </svg>\n      {showValue && (\n        <span\n          className={clsx(\n            'ui:absolute ui:font-bold',\n            fontSize,\n            getColorClass(percent)\n          )}\n        >\n          {max === 100 ? Math.round(percent) : value.toFixed(1)}\n        </span>\n      )}\n    </div>\n  )\n}\n\nexport default CircleRating\n","import clsx from 'clsx'\n\nimport { Icon } from '../Icon'\n\nimport type { IconSize } from '../Icon'\nimport type { RatingSize } from './Rating'\n\nconst starsSizeMap: Record<RatingSize, IconSize> = {\n  sm: 16,\n  md: 20,\n  lg: 24,\n}\n\nexport interface StarsRatingProps {\n  /** Percentage value (0-100) for the star fill */\n  percent: number\n  /** Size of the stars */\n  size: RatingSize\n  /** Whether to display the numeric value next to stars */\n  showValue: boolean\n  /** The actual rating value (used for display) */\n  value: number\n  /** Maximum rating value (used for display formatting) */\n  max: number\n}\n\nfunction StarsRating({\n  percent,\n  size,\n  showValue,\n  value,\n  max,\n}: Readonly<StarsRatingProps>) {\n  const iconSize = starsSizeMap[size]\n\n  return (\n    <div className=\"ui:inline-flex ui:items-center ui:gap-1\">\n      <div className=\"ui:relative\">\n        {/* Empty stars */}\n        <div className=\"ui:flex ui:text-gray-300\">\n          {[1, 2, 3, 4, 5].map((i) => (\n            <Icon key={i} name=\"Star\" size={iconSize} />\n          ))}\n        </div>\n        {/* Filled stars with clip */}\n        <div\n          className=\"ui:absolute ui:inset-0 ui:flex ui:text-yellow-400\"\n          style={{ clipPath: `inset(0 ${String(100 - percent)}% 0 0)` }}\n        >\n          {[1, 2, 3, 4, 5].map((i) => (\n            <Icon key={i} name=\"Star\" size={iconSize} />\n          ))}\n        </div>\n      </div>\n      {showValue && (\n        <span\n          className={clsx(\n            'ui:font-medium ui:text-muted-foreground',\n            size === 'sm' && 'ui:text-xs',\n            size === 'md' && 'ui:text-sm',\n            size === 'lg' && 'ui:text-base'\n          )}\n        >\n          {max === 100 ? (value / 10).toFixed(1) : value.toFixed(1)}\n        </span>\n      )}\n    </div>\n  )\n}\n\nexport default StarsRating\n","import clsx from 'clsx'\n\nimport CircleRating from './CircleRating'\nimport StarsRating from './StarsRating'\n\nexport type RatingVariant = 'circle' | 'stars'\nexport type RatingSize = 'sm' | 'md' | 'lg'\n\nexport interface RatingProps {\n  /** Rating value (0-10 by default, or 0-100 if max=100) */\n  value: number\n  /** Maximum value (default: 10 for TMDB scores) */\n  max?: number\n  /** Visual variant */\n  variant?: RatingVariant\n  /** Size of the rating */\n  size?: RatingSize\n  /** Show the numeric value */\n  showValue?: boolean\n  /** Custom class for the background track circle (circle variant only) */\n  trackClassName?: string\n  /** Additional class name */\n  className?: string\n}\n\nfunction Rating({\n  value,\n  max = 10,\n  variant = 'circle',\n  size = 'md',\n  showValue = true,\n  trackClassName,\n  className,\n}: Readonly<RatingProps>) {\n  const clampedValue = Math.max(0, Math.min(value, max))\n  const percent = (clampedValue / max) * 100\n\n  return (\n    <div className={clsx('ui:inline-flex', className)}>\n      {variant === 'circle' ? (\n        <CircleRating\n          percent={percent}\n          size={size}\n          showValue={showValue}\n          value={clampedValue}\n          max={max}\n          trackClassName={trackClassName}\n        />\n      ) : (\n        <StarsRating\n          percent={percent}\n          size={size}\n          showValue={showValue}\n          value={clampedValue}\n          max={max}\n        />\n      )}\n    </div>\n  )\n}\n\nexport default Rating\n","import clsx from 'clsx'\nimport { createElement } from 'react'\n\nimport type { ElementType, HTMLAttributes, ReactNode } from 'react'\n\nexport type TypographyVariant =\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'body'\n  | 'body-sm'\n  | 'body-lg'\n  | 'lead'\n  | 'caption'\n  | 'caption-xs'\n  | 'label'\n  | 'muted'\n  | 'blockquote'\n\nexport interface TypographyProps extends HTMLAttributes<HTMLElement> {\n  /** Visual style variant */\n  variant: TypographyVariant\n  /** Override semantic HTML tag */\n  as?: ElementType\n  /** Additional CSS classes */\n  className?: string\n  /** Content */\n  children: ReactNode\n}\n\nconst variantStyles: Record<TypographyVariant, string> = {\n  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',\n  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',\n  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',\n  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',\n  h5: 'ui:font-roboto ui:text-sm ui:sm:text-base ui:md:text-lg ui:font-medium ui:leading-normal ui:text-foreground',\n  h6: 'ui:font-roboto ui:text-xs ui:sm:text-sm ui:md:text-base ui:font-medium ui:leading-normal ui:text-foreground',\n  body: 'ui:font-inter ui:text-xs ui:sm:text-sm ui:md:text-base ui:leading-relaxed ui:text-foreground',\n  'body-sm':\n    'ui:font-inter ui:text-xs ui:sm:text-sm ui:leading-relaxed ui:text-foreground',\n  'body-lg':\n    'ui:font-inter ui:text-sm ui:sm:text-base ui:md:text-lg ui:leading-relaxed ui:text-foreground',\n  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',\n  caption: 'ui:font-inter ui:text-xs ui:sm:text-sm ui:text-muted-foreground',\n  'caption-xs': 'ui:font-inter ui:text-xs ui:text-muted-foreground',\n  label:\n    'ui:font-inter ui:text-xs ui:sm:text-sm ui:font-medium ui:text-foreground',\n  muted: 'ui:font-inter ui:text-xs ui:sm:text-sm ui:text-muted-foreground',\n  blockquote:\n    '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',\n}\n\nconst variantToTag: Record<TypographyVariant, ElementType> = {\n  h1: 'h1',\n  h2: 'h2',\n  h3: 'h3',\n  h4: 'h4',\n  h5: 'h5',\n  h6: 'h6',\n  body: 'p',\n  'body-sm': 'p',\n  'body-lg': 'p',\n  lead: 'p',\n  caption: 'span',\n  'caption-xs': 'span',\n  label: 'label',\n  muted: 'p',\n  blockquote: 'blockquote',\n}\n\nfunction Typography({\n  variant,\n  as,\n  className,\n  children,\n  ...rest\n}: Readonly<TypographyProps>) {\n  const Component = as ?? variantToTag[variant]\n\n  return createElement(\n    Component,\n    { className: clsx(variantStyles[variant], className), ...rest },\n    children\n  )\n}\n\nexport default Typography\n","import clsx from 'clsx'\n\nimport type { ImageLoading } from '../Image'\n\nexport interface MovieCardBaseProps {\n  /** Media ID */\n  id: number\n  /** Media title */\n  title: string\n  /** Poster URL (full URL or TMDB path) */\n  posterUrl: string\n  /** Vote average (0-10) */\n  voteAverage: number\n  /** Release year */\n  year?: number | null\n  /** Additional class name */\n  className?: string\n  /** Image loading strategy ('lazy' | 'eager'). Default: 'lazy' */\n  imageLoading?: ImageLoading\n}\n\nexport interface MovieCardAsCard extends MovieCardBaseProps {\n  as?: 'card' | undefined\n  onClick?: never\n}\n\nexport interface MovieCardAsButton extends MovieCardBaseProps {\n  as: 'button'\n  onClick: () => void\n}\n\nexport function getMovieCardClasses(\n  isInteractive: boolean,\n  className?: string\n) {\n  return clsx(\n    'ui:group ui:relative ui:flex ui:flex-col ui:overflow-hidden',\n    isInteractive && [\n      'ui:cursor-pointer',\n      'ui:transition-transform ui:duration-200',\n      'hover:ui:scale-[1.02]',\n    ],\n    className\n  )\n}\n\nexport function getMovieCardLinkClasses() {\n  return 'ui:block ui:no-underline ui:text-inherit'\n}\n","import { Card } from '../Card'\nimport { Image } from '../Image'\nimport { Rating } from '../Rating'\nimport { Typography } from '../Typography'\n\nimport { getMovieCardClasses } from './MovieCard.utils'\n\nimport type { ImageLoading } from '../Image'\nimport type { ReactNode } from 'react'\n\ninterface MovieCardContentProps {\n  id: number\n  title: string\n  posterUrl: string\n  voteAverage: number\n  year?: number | null\n  className?: string\n  imageLoading?: ImageLoading\n  isInteractive: boolean\n  onClick?: (() => void) | undefined\n}\n\nexport default function MovieCardContent({\n  id,\n  title,\n  posterUrl,\n  voteAverage,\n  year,\n  className,\n  imageLoading = 'lazy',\n  isInteractive,\n  onClick,\n}: Readonly<MovieCardContentProps>): ReactNode {\n  return (\n    <Card\n      variant=\"ghost\"\n      className={getMovieCardClasses(isInteractive, className)}\n      onClick={onClick}\n      data-testid={`movie-card-${String(id)}`}\n    >\n      <div className=\"ui:relative ui:aspect-[2/3] ui:w-full ui:overflow-hidden ui:rounded-md ui:bg-gray-200\">\n        <Image\n          src={posterUrl}\n          alt={title}\n          loading={imageLoading}\n          aspectRatio={undefined}\n          className=\"ui:h-full ui:w-full ui:object-cover\"\n        />\n        <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\">\n          <Rating\n            value={voteAverage}\n            size=\"sm\"\n            variant=\"circle\"\n            trackClassName=\"ui:text-gray-200\"\n            className=\"ui:drop-shadow\"\n          />\n        </div>\n      </div>\n\n      <div className=\"ui:mt-2 ui:flex ui:flex-col ui:gap-0.5 ui:px-1\">\n        <Typography\n          variant=\"label\"\n          as=\"h3\"\n          className=\"ui:line-clamp-2\"\n          title={title}\n        >\n          {title}\n        </Typography>\n        {year && (\n          <Typography\n            variant=\"caption-xs\"\n            className=\"ui:[.media-section:nth-of-type(odd)_&]:text-badge-foreground\"\n          >\n            {year}\n          </Typography>\n        )}\n      </div>\n    </Card>\n  )\n}\n"]}