@vite-mf-monorepo/ui 0.4.5 → 0.4.6

package/dist/IconButton/index.js

@@ -0,0 +1,5 @@
+import { default as default2 } from "./IconButton";
+export {
+  default2 as IconButton
+};
+//# sourceMappingURL=index.js.map

package/dist/IconButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/IconButton/index.ts"],"sourcesContent":["export { default as IconButton } from './IconButton'\nexport type { IconButtonProps } from './IconButton'\n"],"mappings":"AAAA,SAAoB,WAAXA,gBAA6B;","names":["default"]}

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

@@ -30,31 +30,4 @@ interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'placehol
 }
 declare function Image({ src, alt, blurDataUrl, autoBlur, blurSize, blurQuality, aspectRatio, fallback, className, onLoad, onError, loading, ...rest }: Readonly<ImageProps>): react_jsx_runtime.JSX.Element;
 
-interface MovieCardBaseProps {
-    /** Media ID */
-    id: number;
-    /** Media title */
-    title: string;
-    /** Poster URL (full URL or TMDB path) */
-    posterUrl: string;
-    /** Vote average (0-10) */
-    voteAverage: number;
-    /** Release year */
-    year?: number | null;
-    /** Additional class name */
-    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;
-    onClick?: never;
-}
-interface MovieCardAsButton extends MovieCardBaseProps {
-    as: 'button';
-    onClick: () => void;
-}
-
-export { type AspectRatio as A, Image as I, type MovieCardAsCard as M, type MovieCardBaseProps as a, type MovieCardAsButton as b, type ImageProps as c, type ImageState as d };
+export { type AspectRatio, type ImageLoading, type ImageProps, type ImageState, Image as default };

package/dist/Image/Image.js

@@ -0,0 +1,125 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { getBlurDataUrl } from "@vite-mf-monorepo/shared";
+import clsx from "clsx";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Icon } from "../Icon";
+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,
+    {
+      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;
+export {
+  Image_default as default
+};
+//# sourceMappingURL=Image.js.map

package/dist/Image/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Image/Image.tsx"],"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"],"mappings":"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","names":[]}

package/dist/Image/index.d.ts

@@ -0,0 +1,3 @@
+export { AspectRatio, default as Image, ImageLoading, ImageProps, ImageState } from './Image.js';
+import 'react/jsx-runtime';
+import 'react';

package/dist/Image/index.js

@@ -0,0 +1,5 @@
+import { default as default2 } from "./Image";
+export {
+  default2 as Image
+};
+//# sourceMappingURL=index.js.map

package/dist/Image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Image/index.ts"],"sourcesContent":["export { default as Image } from './Image'\nexport type { AspectRatio, ImageLoading, ImageProps, ImageState } from './Image'\n"],"mappings":"AAAA,SAAoB,WAAXA,gBAAwB;","names":["default"]}

package/dist/Modal/Modal.d.ts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface ModalProps {
+    /** Whether the modal is open */
+    isOpen: boolean;
+    /** Callback when modal should close (ESC key, backdrop click) */
+    onClose: () => void;
+    /** Modal content */
+    children: ReactNode;
+    /** Accessible label for screen readers (required) */
+    'aria-label': string;
+    /** Additional class name for the dialog element */
+    className?: string;
+    /** Optional callback for backdrop click. Falls back to onClose if not provided. */
+    onOverlayClick?: () => void;
+}
+declare function Modal({ isOpen, onClose, children, 'aria-label': ariaLabel, className, onOverlayClick, }: Readonly<ModalProps>): react_jsx_runtime.JSX.Element;
+
+export { type ModalProps, Modal as default };

package/dist/Modal/Modal.js

@@ -0,0 +1,55 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useEffect, useRef } from "react";
+function Modal({
+  isOpen,
+  onClose,
+  children,
+  "aria-label": ariaLabel,
+  className,
+  onOverlayClick
+}) {
+  const ref = useRef(null);
+  useEffect(() => {
+    const dialog = ref.current;
+    if (!dialog) return;
+    if (isOpen) {
+      dialog.showModal();
+      document.body.style.overflow = "hidden";
+    } else {
+      dialog.close();
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+  const handleClick = (e) => {
+    if (e.target === ref.current) (onOverlayClick ?? onClose)();
+  };
+  const handleClose = () => {
+    onClose();
+  };
+  return /* @__PURE__ */ jsx(
+    "dialog",
+    {
+      ref,
+      "aria-label": ariaLabel,
+      "aria-modal": "true",
+      onClick: handleClick,
+      onClose: handleClose,
+      className: clsx(
+        "ui:backdrop:bg-black/80",
+        "ui:bg-transparent ui:border-0 ui:p-0",
+        "ui:max-w-none ui:max-h-none ui:w-full ui:h-full",
+        className
+      ),
+      children
+    }
+  );
+}
+var Modal_default = Modal;
+export {
+  Modal_default as default
+};
+//# sourceMappingURL=Modal.js.map

package/dist/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Modal/Modal.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { useEffect, useRef } from 'react'\n\nimport type { MouseEvent, ReactNode } from 'react'\n\nexport interface ModalProps {\n  /** Whether the modal is open */\n  isOpen: boolean\n  /** Callback when modal should close (ESC key, backdrop click) */\n  onClose: () => void\n  /** Modal content */\n  children: ReactNode\n  /** Accessible label for screen readers (required) */\n  'aria-label': string\n  /** Additional class name for the dialog element */\n  className?: string\n  /** Optional callback for backdrop click. Falls back to onClose if not provided. */\n  onOverlayClick?: () => void\n}\n\nfunction Modal({\n  isOpen,\n  onClose,\n  children,\n  'aria-label': ariaLabel,\n  className,\n  onOverlayClick,\n}: Readonly<ModalProps>) {\n  const ref = useRef<HTMLDialogElement>(null)\n\n  /**\n   * Effect: Opens or closes the native <dialog> element and locks body scroll.\n   * - showModal() places dialog in the top layer (above all MFE remotes, no z-index needed).\n   * - Scroll lock is manual — <dialog> does not lock scroll natively.\n   * - Cleanup restores overflow in case the component unmounts while open.\n   */\n  useEffect(() => {\n    const dialog = ref.current\n    if (!dialog) return\n\n    if (isOpen) {\n      dialog.showModal()\n      document.body.style.overflow = 'hidden'\n    } else {\n      dialog.close()\n      document.body.style.overflow = ''\n    }\n\n    return () => {\n      document.body.style.overflow = ''\n    }\n  }, [isOpen])\n\n  /**\n   * Closes the modal when clicking the <dialog> element itself (the backdrop area).\n   * e.target === ref.current only when clicking outside the dialog content,\n   * since content clicks bubble up to a child, not to the dialog element directly.\n   */\n  const handleClick = (e: MouseEvent<HTMLDialogElement>) => {\n    if (e.target === ref.current) (onOverlayClick ?? onClose)()\n  }\n\n  /**\n   * Syncs the native ESC key close event (fired by the browser on <dialog>)\n   * with the onClose callback, so parent state stays in sync.\n   */\n  const handleClose = () => {\n    onClose()\n  }\n\n  return (\n    <dialog\n      ref={ref}\n      aria-label={ariaLabel}\n      aria-modal=\"true\"\n      onClick={handleClick}\n      onClose={handleClose}\n      className={clsx(\n        'ui:backdrop:bg-black/80',\n        'ui:bg-transparent ui:border-0 ui:p-0',\n        'ui:max-w-none ui:max-h-none ui:w-full ui:h-full',\n        className\n      )}\n    >\n      {children}\n    </dialog>\n  )\n}\n\nexport default Modal\n"],"mappings":"AAuEI;AAvEJ,OAAO,UAAU;AACjB,SAAS,WAAW,cAAc;AAmBlC,SAAS,MAAM;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,MAAM,OAA0B,IAAI;AAQ1C,YAAU,MAAM;AACd,UAAM,SAAS,IAAI;AACnB,QAAI,CAAC,OAAQ;AAEb,QAAI,QAAQ;AACV,aAAO,UAAU;AACjB,eAAS,KAAK,MAAM,WAAW;AAAA,IACjC,OAAO;AACL,aAAO,MAAM;AACb,eAAS,KAAK,MAAM,WAAW;AAAA,IACjC;AAEA,WAAO,MAAM;AACX,eAAS,KAAK,MAAM,WAAW;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAOX,QAAM,cAAc,CAAC,MAAqC;AACxD,QAAI,EAAE,WAAW,IAAI,QAAS,EAAC,kBAAkB,SAAS;AAAA,EAC5D;AAMA,QAAM,cAAc,MAAM;AACxB,YAAQ;AAAA,EACV;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,cAAY;AAAA,MACZ,cAAW;AAAA,MACX,SAAS;AAAA,MACT,SAAS;AAAA,MACT,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,gBAAQ;","names":[]}

package/dist/Modal/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Modal, ModalProps } from './Modal.js';
+import 'react/jsx-runtime';
+import 'react';

package/dist/Modal/index.js

@@ -0,0 +1,5 @@
+import { default as default2 } from "./Modal";
+export {
+  default2 as Modal
+};
+//# sourceMappingURL=index.js.map

package/dist/Modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Modal/index.ts"],"sourcesContent":["export { default as Modal } from './Modal'\nexport type { ModalProps } from './Modal'\n"],"mappings":"AAAA,SAAoB,WAAXA,gBAAwB;","names":["default"]}

package/dist/MovieCard/MovieCard.utils.d.ts

@@ -0,0 +1,34 @@
+import { ImageLoading } from '../Image/Image.js';
+import 'react/jsx-runtime';
+import 'react';
+
+interface MovieCardBaseProps {
+    /** Media ID */
+    id: number;
+    /** Media title */
+    title: string;
+    /** Poster URL (full URL or TMDB path) */
+    posterUrl: string;
+    /** Vote average (0-10) */
+    voteAverage: number;
+    /** Release year */
+    year?: number | null;
+    /** Additional class name */
+    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;
+    onClick?: never;
+}
+interface MovieCardAsButton extends MovieCardBaseProps {
+    as: 'button';
+    onClick: () => void;
+}
+declare function getMovieCardClasses(isInteractive: boolean, className?: string): string;
+declare function getMovieCardLinkClasses(): string;
+
+export { type MovieCardAsButton, type MovieCardAsCard, type MovieCardBaseProps, getMovieCardClasses, getMovieCardLinkClasses };

package/dist/MovieCard/MovieCard.utils.js

@@ -0,0 +1,20 @@
+import clsx from "clsx";
+function getMovieCardClasses(isInteractive, className) {
+  return clsx(
+    "ui:group ui:relative ui:flex ui:flex-col ui:overflow-hidden",
+    isInteractive && [
+      "ui:cursor-pointer",
+      "ui:transition-transform ui:duration-200",
+      "hover:ui:scale-[1.02]"
+    ],
+    className
+  );
+}
+function getMovieCardLinkClasses() {
+  return "ui:block ui:no-underline ui:text-inherit";
+}
+export {
+  getMovieCardClasses,
+  getMovieCardLinkClasses
+};
+//# sourceMappingURL=MovieCard.utils.js.map

package/dist/MovieCard/MovieCard.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/MovieCard/MovieCard.utils.ts"],"sourcesContent":["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"],"mappings":"AAAA,OAAO,UAAU;AAiCV,SAAS,oBACd,eACA,WACA;AACA,SAAO;AAAA,IACL;AAAA,IACA,iBAAiB;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,EACF;AACF;AAEO,SAAS,0BAA0B;AACxC,SAAO;AACT;","names":[]}

package/dist/MovieCard/MovieCardContent.d.ts

@@ -0,0 +1,18 @@
+import { ImageLoading } from '../Image/Image.js';
+import { ReactNode } from 'react';
+import 'react/jsx-runtime';
+
+interface MovieCardContentProps {
+    id: number;
+    title: string;
+    posterUrl: string;
+    voteAverage: number;
+    year?: number | null;
+    className?: string;
+    imageLoading?: ImageLoading;
+    isInteractive: boolean;
+    onClick?: (() => void) | undefined;
+}
+declare function MovieCardContent({ id, title, posterUrl, voteAverage, year, className, imageLoading, isInteractive, onClick, }: Readonly<MovieCardContentProps>): ReactNode;
+
+export { MovieCardContent as default };

package/dist/MovieCard/MovieCardContent.js

@@ -0,0 +1,75 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Card } from "../Card";
+import { Image } from "../Image";
+import { Rating } from "../Rating";
+import { Typography } from "../Typography";
+import { getMovieCardClasses } from "./MovieCard.utils";
+function MovieCardContent({
+  id,
+  title,
+  posterUrl,
+  voteAverage,
+  year,
+  className,
+  imageLoading = "lazy",
+  isInteractive,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      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,
+            {
+              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,
+            {
+              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,
+            {
+              variant: "label",
+              as: "h3",
+              className: "ui:line-clamp-2",
+              title,
+              children: title
+            }
+          ),
+          year && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "caption-xs",
+              className: "ui:[.media-section:nth-of-type(odd)_&]:text-badge-foreground",
+              children: year
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  MovieCardContent as default
+};
+//# sourceMappingURL=MovieCardContent.js.map

package/dist/MovieCard/MovieCardContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/MovieCard/MovieCardContent.tsx"],"sourcesContent":["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"],"mappings":"AAwCM,SACE,KADF;AAxCN,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAE3B,SAAS,2BAA2B;AAiBrB,SAAR,iBAAkC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AACF,GAA+C;AAC7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,WAAW,oBAAoB,eAAe,SAAS;AAAA,MACvD;AAAA,MACA,eAAa,cAAc,OAAO,EAAE,CAAC;AAAA,MAErC;AAAA,6BAAC,SAAI,WAAU,yFACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,KAAK;AAAA,cACL,SAAS;AAAA,cACT,aAAa;AAAA,cACb,WAAU;AAAA;AAAA,UACZ;AAAA,UACA,oBAAC,SAAI,WAAU,sHACb;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,gBAAe;AAAA,cACf,WAAU;AAAA;AAAA,UACZ,GACF;AAAA,WACF;AAAA,QAEA,qBAAC,SAAI,WAAU,kDACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,IAAG;AAAA,cACH,WAAU;AAAA,cACV;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UACC,QACC;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,WAAU;AAAA,cAET;AAAA;AAAA,UACH;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/MovieCard/index.d.ts

@@ -0,0 +1,6 @@
+export { default as MovieCard } from '../react-router/MovieCard/MovieCard.js';
+export { MovieCardAsLink, MovieCardProps } from '../react-router/MovieCard/MovieCard.types.js';
+export { MovieCardAsButton, MovieCardAsCard, MovieCardBaseProps } from './MovieCard.utils.js';
+import 'react/jsx-runtime';
+import '../Image/Image.js';
+import 'react';

package/dist/MovieCard/index.js

@@ -0,0 +1,5 @@
+import { MovieCard } from "../react-router/MovieCard";
+export {
+  MovieCard
+};
+//# sourceMappingURL=index.js.map

package/dist/MovieCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/MovieCard/index.ts"],"sourcesContent":["export { MovieCard } from '../react-router/MovieCard'\nexport type {\n  MovieCardProps,\n  MovieCardBaseProps,\n  MovieCardAsCard,\n  MovieCardAsLink,\n  MovieCardAsButton,\n} from '../react-router/MovieCard'\n"],"mappings":"AAAA,SAAS,iBAAiB;","names":[]}

package/dist/Rating/CircleRating.d.ts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { RatingSize } from './Rating.js';
+
+interface CircleRatingProps {
+    /** Percentage value (0-100) for the progress ring */
+    percent: number;
+    /** Size of the rating circle */
+    size: RatingSize;
+    /** Whether to display the numeric value in the center */
+    showValue: boolean;
+    /** The actual rating value (used for display) */
+    value: number;
+    /** Maximum rating value (used for display formatting) */
+    max: number;
+    /** Custom class for the background track circle */
+    trackClassName?: string;
+}
+declare function CircleRating({ percent, size, showValue, value, max, trackClassName, }: Readonly<CircleRatingProps>): react_jsx_runtime.JSX.Element;
+
+export { type CircleRatingProps, CircleRating as default };

package/dist/Rating/CircleRating.js

@@ -0,0 +1,75 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+const circleSizeMap = {
+  sm: { size: 32, stroke: 3, fontSize: "ui:text-xs" },
+  md: { size: 48, stroke: 4, fontSize: "ui:text-sm" },
+  lg: { size: 64, stroke: 5, fontSize: "ui:text-base" }
+};
+const getColorClass = (percent) => {
+  if (percent >= 70) return "ui:text-green-600";
+  if (percent >= 40) return "ui:text-amber-600";
+  return "ui:text-red-500";
+};
+function CircleRating({
+  percent,
+  size,
+  showValue,
+  value,
+  max,
+  trackClassName
+}) {
+  const { size: svgSize, stroke, fontSize } = circleSizeMap[size];
+  const radius = (svgSize - stroke) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - percent / 100 * circumference;
+  return /* @__PURE__ */ jsxs("div", { className: "ui:relative ui:inline-flex ui:items-center ui:justify-center", children: [
+    /* @__PURE__ */ jsxs("svg", { width: svgSize, height: svgSize, className: "ui:-rotate-90", children: [
+      /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: svgSize / 2,
+          cy: svgSize / 2,
+          r: radius,
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: stroke,
+          className: trackClassName ?? "ui:text-gray-200"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: svgSize / 2,
+          cy: svgSize / 2,
+          r: radius,
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: stroke,
+          strokeLinecap: "round",
+          strokeDasharray: circumference,
+          strokeDashoffset: offset,
+          className: clsx(
+            "ui:transition-all ui:duration-500",
+            getColorClass(percent)
+          )
+        }
+      )
+    ] }),
+    showValue && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: clsx(
+          "ui:absolute ui:font-bold",
+          fontSize,
+          getColorClass(percent)
+        ),
+        children: max === 100 ? Math.round(percent) : value.toFixed(1)
+      }
+    )
+  ] });
+}
+var CircleRating_default = CircleRating;
+export {
+  CircleRating_default as default
+};
+//# sourceMappingURL=CircleRating.js.map

package/dist/Rating/CircleRating.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Rating/CircleRating.tsx"],"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"],"mappings":"AAiDM,SACE,KADF;AAjDN,OAAO,UAAU;AAIjB,MAAM,gBAGF;AAAA,EACF,IAAI,EAAE,MAAM,IAAI,QAAQ,GAAG,UAAU,aAAa;AAAA,EAClD,IAAI,EAAE,MAAM,IAAI,QAAQ,GAAG,UAAU,aAAa;AAAA,EAClD,IAAI,EAAE,MAAM,IAAI,QAAQ,GAAG,UAAU,eAAe;AACtD;AAEA,MAAM,gBAAgB,CAAC,YAA4B;AACjD,MAAI,WAAW,GAAI,QAAO;AAC1B,MAAI,WAAW,GAAI,QAAO;AAC1B,SAAO;AACT;AAiBA,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAgC;AAC9B,QAAM,EAAE,MAAM,SAAS,QAAQ,SAAS,IAAI,cAAc,IAAI;AAC9D,QAAM,UAAU,UAAU,UAAU;AACpC,QAAM,gBAAgB,IAAI,KAAK,KAAK;AACpC,QAAM,SAAS,gBAAiB,UAAU,MAAO;AAEjD,SACE,qBAAC,SAAI,WAAU,gEACb;AAAA,yBAAC,SAAI,OAAO,SAAS,QAAQ,SAAS,WAAU,iBAC9C;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,UAAU;AAAA,UACd,IAAI,UAAU;AAAA,UACd,GAAG;AAAA,UACH,MAAK;AAAA,UACL,QAAO;AAAA,UACP,aAAa;AAAA,UACb,WAAW,kBAAkB;AAAA;AAAA,MAC/B;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,UAAU;AAAA,UACd,IAAI,UAAU;AAAA,UACd,GAAG;AAAA,UACH,MAAK;AAAA,UACL,QAAO;AAAA,UACP,aAAa;AAAA,UACb,eAAc;AAAA,UACd,iBAAiB;AAAA,UACjB,kBAAkB;AAAA,UAClB,WAAW;AAAA,YACT;AAAA,YACA,cAAc,OAAO;AAAA,UACvB;AAAA;AAAA,MACF;AAAA,OACF;AAAA,IACC,aACC;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,cAAc,OAAO;AAAA,QACvB;AAAA,QAEC,kBAAQ,MAAM,KAAK,MAAM,OAAO,IAAI,MAAM,QAAQ,CAAC;AAAA;AAAA,IACtD;AAAA,KAEJ;AAEJ;AAEA,IAAO,uBAAQ;","names":[]}

package/dist/Rating/Rating.d.ts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type RatingVariant = 'circle' | 'stars';
+type RatingSize = 'sm' | 'md' | 'lg';
+interface RatingProps {
+    /** Rating value (0-10 by default, or 0-100 if max=100) */
+    value: number;
+    /** Maximum value (default: 10 for TMDB scores) */
+    max?: number;
+    /** Visual variant */
+    variant?: RatingVariant;
+    /** Size of the rating */
+    size?: RatingSize;
+    /** Show the numeric value */
+    showValue?: boolean;
+    /** Custom class for the background track circle (circle variant only) */
+    trackClassName?: string;
+    /** Additional class name */
+    className?: string;
+}
+declare function Rating({ value, max, variant, size, showValue, trackClassName, className, }: Readonly<RatingProps>): react_jsx_runtime.JSX.Element;
+
+export { type RatingProps, type RatingSize, type RatingVariant, Rating as default };