@vite-mf-monorepo/ui 0.2.0 → 0.4.0

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/chunk-JPJYJLAP.js

@@ -0,0 +1,38 @@
+import clsx from 'clsx';
+import { jsx } from 'react/jsx-runtime';
+
+// src/Skeleton/Skeleton.tsx
+function Skeleton({
+  variant = "rectangle",
+  width,
+  height,
+  aspectRatio,
+  rounded = true,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        "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;
+
+export { Skeleton_default };
+//# sourceMappingURL=chunk-JPJYJLAP.js.map
+//# sourceMappingURL=chunk-JPJYJLAP.js.map

package/dist/chunk-JPJYJLAP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Skeleton/Skeleton.tsx"],"names":[],"mappings":";;;;AAsBA,SAAS,QAAA,CAAS;AAAA,EAChB,OAAA,GAAU,WAAA;AAAA,EACV,KAAA;AAAA,EACA,MAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA,GAAU,IAAA;AAAA,EACV,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA4B;AAC1B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA;AAAA,QACT,4CAAA;AAAA,QACA,qBAAA;AAAA,QACA;AAAA,UACE,eAAA,EAAiB,YAAY,WAAA,IAAe,OAAA;AAAA,UAC5C,mBAAmB,OAAA,KAAY,QAAA;AAAA,UAC/B,YAAA,EAAc,YAAY,MAAA,IAAU;AAAA,SACtC;AAAA,QACA,KAAA;AAAA,QACA,MAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,KAAA,EAAO,WAAA,GAAc,EAAE,WAAA,EAAY,GAAI,MAAA;AAAA,MACtC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,IAAO,gBAAA,GAAQ","file":"chunk-JPJYJLAP.js","sourcesContent":["import clsx from 'clsx'\n\nimport type { ComponentProps } from 'react'\n\nexport interface SkeletonProps extends ComponentProps<'div'> {\n  /** Shape variant */\n  variant?: 'rectangle' | 'circle' | 'line'\n  /** Width (Tailwind class or custom value) */\n  width?: string\n  /** Height (Tailwind class or custom value) */\n  height?: string\n  /** Aspect ratio (e.g., \"2/3\", \"16/9\", \"1/1\") */\n  aspectRatio?: string\n  /** Apply rounded corners (default: true for rectangle/line, always true for circle) */\n  rounded?: boolean\n}\n\n/**\n * Skeleton - Atomic loading placeholder component\n *\n * Composable primitive for building loading states with shimmer effect.\n */\nfunction Skeleton({\n  variant = 'rectangle',\n  width,\n  height,\n  aspectRatio,\n  rounded = true,\n  className,\n  ...rest\n}: Readonly<SkeletonProps>) {\n  return (\n    <div\n      className={clsx(\n        'ui:relative ui:overflow-hidden ui:bg-muted',\n        'ui-skeleton-shimmer',\n        {\n          'ui:rounded-lg': variant === 'rectangle' && rounded,\n          'ui:rounded-full': variant === 'circle',\n          'ui:rounded': variant === 'line' && rounded,\n        },\n        width,\n        height,\n        className\n      )}\n      style={aspectRatio ? { aspectRatio } : undefined}\n      {...rest}\n    />\n  )\n}\n\nexport default Skeleton\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';