@vite-mf-monorepo/ui 0.4.5 → 0.4.7

package/dist/index.d.ts

@@ -1,373 +1,32 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
-import { ComponentProps, ReactNode, ButtonHTMLAttributes, HTMLAttributes, ElementType } from 'react';
-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-D8i4d7qA.js';
-export { MovieCard, MovieCardProps } from './react-router/index.js';
+export { default as Avatar, AvatarProps, AvatarSize } from './Avatar/Avatar.js';
+export { default as Badge, BadgeProps, BadgeSize, BadgeVariant } from './Badge/Badge.js';
+export { default as Button } from './react-router/Button/Button.js';
+export { ButtonProps } from './react-router/Button/Button.types.js';
+export { default as Card, CardProps, CardVariant } from './Card/Card.js';
+export { default as Icon, IconName, IconProps, IconSize } from './Icon/Icon.js';
+export { default as IconButton, IconButtonProps } from './IconButton/IconButton.js';
+export { AspectRatio, default as Image, ImageProps, ImageState } from './Image/Image.js';
+export { default as HeroImage, HeroImageProps } from './HeroImage/HeroImage.js';
+export { default as Modal, ModalProps } from './Modal/Modal.js';
+export { default as Rating, RatingProps, RatingSize, RatingVariant } from './Rating/Rating.js';
+export { default as MovieCard } from './react-router/MovieCard/MovieCard.js';
+export { MovieCardProps } from './react-router/MovieCard/MovieCard.types.js';
+export { default as TrailerCard, TrailerCardProps } from './TrailerCard/TrailerCard.js';
+export { default as Carousel, CarouselArrowPosition, CarouselProps, CarouselVariant } from './Carousel/Carousel.js';
+export { default as CarouselItem, CarouselItemProps } from './Carousel/CarouselItem.js';
+export { default as CarouselNavigation, CarouselNavigationPosition, CarouselNavigationProps } from './Carousel/CarouselNavigation.js';
+export { default as CarouselPagination, CarouselPaginationProps } from './Carousel/CarouselPagination.js';
+export { default as CarouselCounter, CarouselCounterProps } from './Carousel/CarouselCounter.js';
+export { default as CarouselLoading, CarouselLoadingProps } from './Carousel/CarouselLoading.js';
+export { default as Tabs, TabsProps, TabsVariant } from './Tabs/Tabs.js';
+export { default as Skeleton, SkeletonProps } from './Skeleton/Skeleton.js';
+export { default as Talent, TalentProps } from './Talent/Talent.js';
+export { default as Typography, TypographyProps, TypographyVariant } from './Typography/Typography.js';
+export { default as Spinner, SpinnerProps } from './Spinner/Spinner.js';
+import 'react/jsx-runtime';
+import 'react';
 import 'react-router-dom';
-
-type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
-interface AvatarProps extends Omit<ComponentProps<'img'>, 'src'> {
-    /** Image source URL */
-    src?: string | null;
-    /** Alt text for the image */
-    alt: string;
-    /** Size of the avatar */
-    size?: AvatarSize;
-    /** Fallback initials to display when no image */
-    initials?: string;
-    /** For testing purposes */
-    testId?: string;
-}
-declare function Avatar({ className, src, alt, size, initials, testId, ...rest }: Readonly<AvatarProps>): react_jsx_runtime.JSX.Element;
-
-type BadgeVariant = 'default' | 'secondary' | 'outline' | 'destructive';
-type BadgeSize = 'sm' | 'md' | 'lg';
-interface BadgeProps {
-    /** Badge content */
-    children: ReactNode;
-    /** Visual variant */
-    variant?: BadgeVariant;
-    /** Size */
-    size?: BadgeSize;
-    /** Optional icon (left) */
-    icon?: IconName;
-    /** Custom text color class (overrides variant color) */
-    textClassName?: string;
-    /** Additional class name */
-    className?: string;
-}
-declare function Badge({ children, variant, size, icon, textClassName, className, }: Readonly<BadgeProps>): react_jsx_runtime.JSX.Element;
-
-interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /** Icon name to display */
-    icon: IconName;
-    /** Visual variant of the button */
-    variant?: 'primary' | 'secondary' | 'ghost' | 'outline';
-    /** Size of the button */
-    size?: 'sm' | 'md' | 'lg';
-    /** Accessible label for screen readers */
-    'aria-label': string;
-}
-declare function IconButton({ className, icon, variant, size, disabled, ...rest }: Readonly<IconButtonProps>): react_jsx_runtime.JSX.Element;
-
-interface HeroImageProps {
-    /** Backdrop path from TMDB API */
-    backdropPath?: string | null;
-    /** Alt text for the image */
-    title?: string | null;
-}
-/**
- * HeroImage component for displaying optimized backdrop images with responsive sources
- * and gradient overlay. Used in hero sections across the application.
- */
-declare function HeroImage({ backdropPath, title }: Readonly<HeroImageProps>): react_jsx_runtime.JSX.Element;
-
-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;
-
-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;
-
-interface TrailerCardProps {
-    /** YouTube video ID */
-    videoKey: string;
-    /** Trailer title/name */
-    title: string;
-    /** Video type (Trailer, Clip, Featurette, etc.) */
-    type?: string;
-    /** Additional className for the card */
-    className?: string;
-}
-declare function TrailerCard({ videoKey, title, type, className, }: Readonly<TrailerCardProps>): react_jsx_runtime.JSX.Element;
-
-/** Carousel visual variant */
-type CarouselVariant = 'standard' | 'hero' | 'lightbox';
-/** Arrow position for navigation buttons */
-type CarouselArrowPosition = 'sides' | 'bottom-right';
-interface CarouselProps {
-    /** Carousel items */
-    children?: ReactNode;
-    /** Visual variant */
-    variant?: CarouselVariant;
-    /** Show pagination dots (ignored for lightbox — counter is shown instead) */
-    showPagination?: boolean;
-    /** Show navigation arrows */
-    showArrows?: boolean;
-    /** Arrow position */
-    arrowPosition?: CarouselArrowPosition;
-    /** Gap between items in pixels */
-    gap?: number;
-    /** Additional class name */
-    className?: string;
-    /** Class name for the hero controls container (pagination + arrows) — use to constrain width/padding */
-    heroControlsClassName?: string;
-    /** Error message to display instead of carousel content */
-    errorMessage?: string;
-    /** Apply rounded corners to viewport */
-    rounded?: boolean;
-    /**
-     * Initial scroll index — jumps to this item on mount without animation.
-     * Use with key={index} on Carousel for URL-based navigation (lightbox).
-     */
-    initialIndex?: number;
-    /**
-     * Override internal prev navigation (e.g. navigate to previous URL in lightbox).
-     * When provided, replaces internal scrollPrev.
-     */
-    onPrev?: () => void;
-    /**
-     * Override internal next navigation (e.g. navigate to next URL in lightbox).
-     * When provided, replaces internal scrollNext.
-     */
-    onNext?: () => void;
-    /**
-     * When true, all internal scroll transitions are instant (no smooth animation).
-     * Use for lightbox with URL-based navigation where the Carousel remounts each time.
-     */
-    disableAnimation?: boolean;
-    /**
-     * When true, user-initiated wheel/trackpad scroll is blocked on the container,
-     * and currentIndex is driven entirely by initialIndex (no scroll tracking).
-     * Use for URL-driven carousels (lightbox) to avoid scroll/resize desync.
-     */
-    disableScroll?: boolean;
-}
-/**
- * Carousel component with horizontal scroll, pagination, and navigation.
- * Supports three variants:
- * - standard: multi-items horizontal scroll
- * - hero: single panoramic item with snap
- * - lightbox: single item per view, ghost arrows, counter (for PhotoViewer)
- */
-declare function Carousel({ children, variant, showPagination, showArrows, arrowPosition, gap, className, heroControlsClassName, errorMessage, rounded, initialIndex, onPrev, onNext, disableAnimation, disableScroll, }: Readonly<CarouselProps>): react_jsx_runtime.JSX.Element;
-
-interface CarouselItemProps extends HTMLAttributes<HTMLDivElement> {
-    /** Whether this is a hero item (full width with snap) */
-    isHero?: boolean;
-    /** Whether this is a lightbox item (full width with snap, same layout as hero) */
-    isLightbox?: boolean;
-}
-/**
- * Wrapper for individual carousel items.
- * For hero and lightbox variants, items take full width and snap to center.
- */
-declare function CarouselItem({ children, isHero, isLightbox, className, ...rest }: Readonly<CarouselItemProps>): react_jsx_runtime.JSX.Element;
-
-/** Position mode for navigation buttons */
-type CarouselNavigationPosition = 'inline' | 'sides' | 'sides-inset';
-interface CarouselNavigationProps {
-    /** Callback for previous button */
-    onPrev: () => void;
-    /** Callback for next button */
-    onNext: () => void;
-    /** Whether previous is disabled */
-    canPrev: boolean;
-    /** Whether next is disabled */
-    canNext: boolean;
-    /** Button size */
-    size?: 'sm' | 'md';
-    /** Position mode */
-    position?: CarouselNavigationPosition;
-    /** Icon button visual variant — ghost for lightbox (white arrows on dark bg) */
-    iconVariant?: 'secondary' | 'ghost';
-    /** Additional class name */
-    className?: string;
-}
-/**
- * Navigation buttons for Carousel (previous/next).
- * - inline: side by side (for bottom-right layout)
- * - sides: absolute, centered on the carousel edges (overhangs container — standard carousel)
- * - sides-inset: absolute, inside the container with padding (lightbox, fullscreen contexts)
- */
-declare function CarouselNavigation({ onPrev, onNext, canPrev, canNext, size, position, iconVariant, className, }: Readonly<CarouselNavigationProps>): react_jsx_runtime.JSX.Element;
-
-interface CarouselPaginationProps {
-    /** Total number of items */
-    total: number;
-    /** Current active index */
-    current: number;
-    /** Use light colors (for dark backgrounds) */
-    light?: boolean;
-    /** Additional class name */
-    className?: string;
-}
-/**
- * Pagination dots for Carousel.
- * Active dot is displayed as a capsule (wider), inactive dots are circles.
- * Supports light mode for dark backgrounds (white dots).
- */
-declare function CarouselPagination({ total, current, light, className, }: Readonly<CarouselPaginationProps>): react_jsx_runtime.JSX.Element | null;
-
-interface CarouselCounterProps {
-    /** Current index (0-based) — displayed as 1-based */
-    current: number;
-    /** Total number of items */
-    total: number;
-    /** Additional class name */
-    className?: string;
-}
-/**
- * Counter for Carousel lightbox variant.
- * Displays current position as "3 / 20" (1-indexed).
- */
-declare function CarouselCounter({ current, total, className, }: Readonly<CarouselCounterProps>): react_jsx_runtime.JSX.Element;
-
-interface CarouselLoadingProps {
-    /** Number of skeleton cards to display */
-    count?: number;
-    /** Width of each card in pixels */
-    cardWidth?: number;
-    /** Height of each card in pixels */
-    cardHeight?: number;
-    /** Show skeleton for title */
-    showTitle?: boolean;
-    /** Show skeleton for subtitle/date */
-    showSubtitle?: boolean;
-    /** Apply rounded corners to skeleton */
-    rounded?: boolean;
-}
-/**
- * CarouselLoading - Loading state for carousel with skeleton cards
- *
- * Displays a horizontal scrollable list of skeleton placeholders
- * matching the structure of MovieCard components.
- */
-declare function CarouselLoading({ count, cardWidth, cardHeight, showTitle, showSubtitle, rounded, }: Readonly<CarouselLoadingProps>): react_jsx_runtime.JSX.Element;
-
-type TabsListProps = HTMLAttributes<HTMLDivElement>;
-declare function TabsList({ className, children, ...rest }: Readonly<TabsListProps>): react_jsx_runtime.JSX.Element;
-
-interface TabsPanelProps extends HTMLAttributes<HTMLDivElement> {
-    /** Value that identifies this panel (must match a Tabs.Trigger value) */
-    value: string;
-    /** Panel content */
-    children: ReactNode;
-}
-/**
- * Tabpanel for Tabs component.
- * Automatically hidden/shown based on active tab value.
- * Provides proper ARIA attributes for accessibility.
- */
-declare function TabsPanel({ value, children, ...rest }: Readonly<TabsPanelProps>): react_jsx_runtime.JSX.Element;
-
-interface TabsTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /** Value that identifies this tab */
-    value: string;
-    /** Optional icon component */
-    icon?: ReactNode;
-}
-declare function TabsTrigger({ value, icon, disabled, className, children, ...rest }: Readonly<TabsTriggerProps>): react_jsx_runtime.JSX.Element;
-
-/** Tabs visual variant */
-type TabsVariant = 'underline' | 'pills';
-interface TabsProps extends HTMLAttributes<HTMLDivElement> {
-    /** Default active tab value (uncontrolled) */
-    defaultValue?: string;
-    /** Controlled active tab value */
-    value?: string;
-    /** Callback when tab changes */
-    onValueChange?: (value: string) => void;
-    /** Visual variant */
-    variant?: TabsVariant;
-    /** Optional prefix for ID generation (e.g., "popular" generates ids: popular-{value}) */
-    prefix?: string;
-}
-/**
- * Tabs component for navigation between content sections.
- * Implements ARIA tabs pattern for accessibility.
- * Supports underline and pills variants.
- * Uses Compound Component pattern.
- */
-declare function Tabs({ defaultValue, value, onValueChange, variant, prefix, className, children, ...rest }: Readonly<TabsProps>): react_jsx_runtime.JSX.Element;
-declare namespace Tabs {
-    var List: typeof TabsList;
-    var Trigger: typeof TabsTrigger;
-    var Panel: typeof TabsPanel;
-}
-
-interface SkeletonProps extends ComponentProps<'div'> {
-    /** Shape variant */
-    variant?: 'rectangle' | 'circle' | 'line';
-    /** Width (Tailwind class or custom value) */
-    width?: string;
-    /** Height (Tailwind class or custom value) */
-    height?: string;
-    /** Aspect ratio (e.g., "2/3", "16/9", "1/1") */
-    aspectRatio?: string;
-    /** Apply rounded corners (default: true for rectangle/line, always true for circle) */
-    rounded?: boolean;
-}
-/**
- * Skeleton - Atomic loading placeholder component
- *
- * Composable primitive for building loading states with shimmer effect.
- */
-declare function Skeleton({ variant, width, height, aspectRatio, rounded, className, ...rest }: Readonly<SkeletonProps>): react_jsx_runtime.JSX.Element;
-
-interface TalentProps extends HTMLAttributes<HTMLDivElement> {
-    /** Full name of the talent (actor, director, writer, etc.) */
-    name?: string;
-    /** Role or job title (e.g., "Director", "Screenplay", "Character Name") */
-    role?: string;
-    /** Optional profile image URL */
-    imageSrc?: string;
-    /** Layout variant - vertical for crew/cast cards, horizontal for lists */
-    variant?: 'vertical' | 'horizontal';
-    /** Avatar size */
-    size?: AvatarSize;
-}
-declare function Talent({ name, role, imageSrc, variant, size, className, ...rest }: Readonly<TalentProps>): react_jsx_runtime.JSX.Element;
-
-type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body' | 'body-sm' | 'body-lg' | 'lead' | 'caption' | 'caption-xs' | 'label' | 'muted' | 'blockquote';
-interface TypographyProps extends HTMLAttributes<HTMLElement> {
-    /** Visual style variant */
-    variant: TypographyVariant;
-    /** Override semantic HTML tag */
-    as?: ElementType;
-    /** Additional CSS classes */
-    className?: string;
-    /** Content */
-    children: ReactNode;
-}
-declare function Typography({ variant, as, className, children, ...rest }: Readonly<TypographyProps>): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
-
-interface SpinnerProps {
-    className?: string;
-}
-declare function Spinner({ className }: Readonly<SpinnerProps>): react_jsx_runtime.JSX.Element;
-
-export { Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Carousel, type CarouselArrowPosition, CarouselCounter, type CarouselCounterProps, CarouselItem, type CarouselItemProps, CarouselLoading, type CarouselLoadingProps, CarouselNavigation, type CarouselNavigationPosition, type CarouselNavigationProps, CarouselPagination, type CarouselPaginationProps, type CarouselProps, type CarouselVariant, HeroImage, type HeroImageProps, IconButton, type IconButtonProps, IconName, Modal, type ModalProps, Rating, type RatingProps, type RatingSize, type RatingVariant, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, Tabs, type TabsProps, type TabsVariant, Talent, type TalentProps, TrailerCard, type TrailerCardProps, Typography, type TypographyProps, type TypographyVariant };
+import './MovieCard/MovieCard.utils.js';
+import './Tabs/TabsList.js';
+import './Tabs/TabsPanel.js';
+import './Tabs/TabsTrigger.js';