@mezzanine-ui/react 1.0.0-beta.5 → 1.0.0-beta.7

package/Card/CardGroup.js

@@ -0,0 +1,147 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cardClasses } from '@mezzanine-ui/core/card';
+import { forwardRef, Children, isValidElement } from 'react';
+import BaseCard from './BaseCard.js';
+import BaseCardSkeleton from './BaseCardSkeleton.js';
+import FourThumbnailCard from './FourThumbnailCard.js';
+import FourThumbnailCardSkeleton from './FourThumbnailCardSkeleton.js';
+import QuickActionCard from './QuickActionCard.js';
+import QuickActionCardSkeleton from './QuickActionCardSkeleton.js';
+import SingleThumbnailCard from './SingleThumbnailCard.js';
+import SingleThumbnailCardSkeleton from './SingleThumbnailCardSkeleton.js';
+import cx from 'clsx';
+
+// List of allowed child component types
+const ALLOWED_CARD_TYPES = [
+    BaseCard,
+    FourThumbnailCard,
+    QuickActionCard,
+    SingleThumbnailCard,
+];
+/**
+ * Get display name of a component for error messages
+ */
+function getComponentDisplayName(child) {
+    const { type } = child;
+    if (typeof type === 'string') {
+        return type;
+    }
+    return (type.displayName ||
+        type.name ||
+        'Unknown');
+}
+/**
+ * Detect the first valid card type from children
+ */
+function getFirstCardType(children) {
+    let firstType = null;
+    Children.forEach(children, (child) => {
+        if (firstType !== null)
+            return;
+        if (!isValidElement(child))
+            return;
+        if (child.type === QuickActionCard) {
+            firstType = QuickActionCard;
+        }
+        else if (child.type === BaseCard) {
+            firstType = BaseCard;
+        }
+        else if (child.type === SingleThumbnailCard) {
+            firstType = SingleThumbnailCard;
+        }
+        else if (child.type === FourThumbnailCard) {
+            firstType = FourThumbnailCard;
+        }
+    });
+    return firstType;
+}
+/**
+ * Get the skeleton component based on loading type
+ */
+function getSkeletonComponent(loadingType) {
+    switch (loadingType) {
+        case 'base':
+            return BaseCardSkeleton;
+        case 'four-thumbnail':
+            return FourThumbnailCardSkeleton;
+        case 'quick-action':
+            return QuickActionCardSkeleton;
+        case 'single-thumbnail':
+            return SingleThumbnailCardSkeleton;
+        default:
+            return BaseCardSkeleton;
+    }
+}
+/**
+ * Get the group class modifier based on loading type
+ */
+function getGroupClassFromLoadingType(loadingType) {
+    switch (loadingType) {
+        case 'four-thumbnail':
+            return cardClasses.groupFourThumbnail;
+        case 'quick-action':
+            return cardClasses.groupQuickAction;
+        case 'single-thumbnail':
+            return cardClasses.groupSingleThumbnail;
+        default:
+            return undefined;
+    }
+}
+/**
+ * CardGroup is a container for card components.
+ * It uses CSS Grid to layout cards in a horizontal row with consistent spacing.
+ */
+const CardGroup = forwardRef(function CardGroup(props, ref) {
+    const { className, children, loading = false, loadingCount = 3, loadingThumbnailAspectRatio, loadingThumbnailWidth, loadingType, } = props;
+    // Detect first card type to determine min-width class
+    const firstCardType = getFirstCardType(children);
+    // Validate children at runtime
+    const validChildren = Children.map(children, (child) => {
+        if (!isValidElement(child)) {
+            return child;
+        }
+        const isAllowedType = ALLOWED_CARD_TYPES.some((allowedType) => child.type === allowedType);
+        if (!isAllowedType) {
+            const displayName = getComponentDisplayName(child);
+            console.warn(`[CardGroup] Invalid child type: <${displayName}>. ` +
+                'CardGroup only accepts Card components (BaseCard, FourThumbnailCard, QuickActionCard, SingleThumbnailCard) as children.');
+            return null;
+        }
+        return child;
+    });
+    // Render loading skeletons
+    const renderSkeletons = () => {
+        if (!loading || !loadingType) {
+            return null;
+        }
+        const SkeletonComponent = getSkeletonComponent(loadingType);
+        // Build props for thumbnail skeletons
+        const thumbnailSkeletonProps = loadingType === 'single-thumbnail' || loadingType === 'four-thumbnail'
+            ? {
+                ...(loadingThumbnailAspectRatio && {
+                    thumbnailAspectRatio: loadingThumbnailAspectRatio,
+                }),
+                ...(loadingThumbnailWidth && {
+                    thumbnailWidth: loadingThumbnailWidth,
+                }),
+            }
+            : undefined;
+        return Array.from({ length: loadingCount }, (_, index) => (jsx(SkeletonComponent, { ...thumbnailSkeletonProps }, `skeleton-${index}`)));
+    };
+    // Determine group class modifier
+    const groupClassModifier = loadingType && loading
+        ? getGroupClassFromLoadingType(loadingType)
+        : undefined;
+    return (jsxs("div", { ref: ref, className: cx(cardClasses.group, {
+            [cardClasses.groupFourThumbnail]: firstCardType === FourThumbnailCard ||
+                groupClassModifier === cardClasses.groupFourThumbnail,
+            [cardClasses.groupQuickAction]: firstCardType === QuickActionCard ||
+                groupClassModifier === cardClasses.groupQuickAction,
+            [cardClasses.groupSingleThumbnail]: firstCardType === SingleThumbnailCard ||
+                groupClassModifier === cardClasses.groupSingleThumbnail,
+        }, className), children: [validChildren, renderSkeletons()] }));
+});
+CardGroup.displayName = 'CardGroup';
+
+export { CardGroup as default };

package/Card/FourThumbnailCard.d.ts

@@ -0,0 +1,14 @@
+import { ComponentOverridableForwardRefComponentPropsFactory } from '../utils/jsx-types';
+import { FourThumbnailCardComponent, FourThumbnailCardProps } from './typings';
+export type FourThumbnailCardComponentProps<C extends FourThumbnailCardComponent = 'div'> = ComponentOverridableForwardRefComponentPropsFactory<FourThumbnailCardComponent, C, FourThumbnailCardProps>;
+/**
+ * FourThumbnailCard displays a 2x2 grid of image thumbnails with optional tag, personal action,
+ * and info section. Supports three action types: default, action, and overflow.
+ *
+ * Children must be Thumbnail components. If less than 4 are provided, empty slots will be rendered.
+ * If more than 4 are provided, only the first 4 will be used (with a console warning in development).
+ */
+declare const FourThumbnailCard: import("react").ForwardRefExoticComponent<Omit<Omit<import("../utils/jsx-types").ComponentPropsWithoutKeyAndRef<"div">, "children" | "title" | "className" | "type" | "options" | "actionName" | "onActionClick" | "onOptionSelect" | "filetype" | "subtitle" | "personalActionIcon" | "personalActionActiveIcon" | "personalActionActive" | "personalActionOnClick" | "tag"> & FourThumbnailCardProps, "component"> & {
+    component?: FourThumbnailCardComponent | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default FourThumbnailCard;

package/Card/FourThumbnailCard.js

@@ -0,0 +1,73 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, Children, isValidElement } from 'react';
+import { cardClasses } from '@mezzanine-ui/core/card';
+import Thumbnail from './Thumbnail.js';
+import ThumbnailCardInfo from './ThumbnailCardInfo.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+const MAX_THUMBNAILS = 4;
+/**
+ * FourThumbnailCard displays a 2x2 grid of image thumbnails with optional tag, personal action,
+ * and info section. Supports three action types: default, action, and overflow.
+ *
+ * Children must be Thumbnail components. If less than 4 are provided, empty slots will be rendered.
+ * If more than 4 are provided, only the first 4 will be used (with a console warning in development).
+ */
+const FourThumbnailCard = forwardRef(function FourThumbnailCard(props, ref) {
+    const { children, className, component: Component = 'div', filetype, personalActionActive = false, personalActionActiveIcon, personalActionIcon, personalActionOnClick, subtitle, tag, title, type = 'default', ...rest } = props;
+    // Process children: filter valid Thumbnail elements and limit to MAX_THUMBNAILS
+    const childArray = Children.toArray(children).filter((child) => {
+        if (!isValidElement(child))
+            return false;
+        // Check if the child is a Thumbnail component
+        const isThumbnail = child.type === Thumbnail;
+        if (!isThumbnail && process.env.NODE_ENV !== 'production') {
+            const displayName = typeof child.type === 'string'
+                ? child.type
+                : child.type.displayName ||
+                    child.type.name ||
+                    'Unknown';
+            console.warn(`[FourThumbnailCard] Invalid child type: <${displayName}>. ` +
+                'FourThumbnailCard only accepts Thumbnail components as children.');
+        }
+        return isThumbnail;
+    });
+    // Warn if more than MAX_THUMBNAILS children are provided
+    if (childArray.length > MAX_THUMBNAILS &&
+        process.env.NODE_ENV !== 'production') {
+        console.warn(`[FourThumbnailCard] Received ${childArray.length} Thumbnail children, ` +
+            `but only the first ${MAX_THUMBNAILS} will be rendered.`);
+    }
+    // Take only the first MAX_THUMBNAILS
+    const thumbnails = childArray.slice(0, MAX_THUMBNAILS);
+    // Fill remaining slots with empty placeholders
+    const emptySlots = MAX_THUMBNAILS - thumbnails.length;
+    const emptyPlaceholders = Array.from({ length: emptySlots }, (_, index) => (jsx("div", { className: cx(cardClasses.fourThumbnailThumbnail, cardClasses.fourThumbnailThumbnailEmpty) }, `empty-${index}`)));
+    const hasPersonalAction = Boolean(personalActionIcon);
+    const currentPersonalActionIcon = personalActionActive
+        ? (personalActionActiveIcon !== null && personalActionActiveIcon !== void 0 ? personalActionActiveIcon : personalActionIcon)
+        : personalActionIcon;
+    const handlePersonalActionClick = (event) => {
+        event.stopPropagation();
+        personalActionOnClick === null || personalActionOnClick === void 0 ? void 0 : personalActionOnClick(event, personalActionActive);
+    };
+    const getInfoProps = () => {
+        if (type === 'action') {
+            const { actionName, onActionClick } = props;
+            return { actionName, onActionClick };
+        }
+        if (type === 'overflow') {
+            const { onOptionSelect, options } = props;
+            return { onOptionSelect, options };
+        }
+        return {};
+    };
+    // Filter out type-specific props before spreading
+    const { actionName: _actionName, onActionClick: _onActionClick, onOptionSelect: _onOptionSelect, options: _options, type: _type, ...componentProps } = rest;
+    return (jsxs(Component, { ...componentProps, ref: ref, className: cx(cardClasses.thumbnail, className), children: [jsxs("div", { className: cardClasses.fourThumbnail, children: [tag && jsx("div", { className: cardClasses.thumbnailTag, children: tag }), hasPersonalAction && currentPersonalActionIcon && (jsx("button", { "aria-label": "Personal Action", className: cardClasses.thumbnailPersonalAction, onClick: handlePersonalActionClick, type: "button", children: jsx(Icon, { icon: currentPersonalActionIcon, size: 24 }) })), thumbnails, emptyPlaceholders] }), jsx(ThumbnailCardInfo, { filetype: filetype, subtitle: subtitle, title: title, type: type, ...getInfoProps() })] }));
+});
+FourThumbnailCard.displayName = 'FourThumbnailCard';
+
+export { FourThumbnailCard as default };

package/Card/FourThumbnailCardSkeleton.d.ts

@@ -0,0 +1,14 @@
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface FourThumbnailCardSkeletonProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'> {
+    /**
+     * Width of the card skeleton container.
+     * @default 200
+     */
+    thumbnailWidth?: number | string;
+}
+/**
+ * Skeleton placeholder for FourThumbnailCard component.
+ * Renders a skeleton that mimics the FourThumbnailCard layout.
+ */
+declare const FourThumbnailCardSkeleton: import("react").ForwardRefExoticComponent<FourThumbnailCardSkeletonProps & import("react").RefAttributes<HTMLDivElement>>;
+export default FourThumbnailCardSkeleton;

package/Card/FourThumbnailCardSkeleton.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { cardClasses } from '@mezzanine-ui/core/card';
+import Skeleton from '../Skeleton/Skeleton.js';
+import cx from 'clsx';
+
+/**
+ * Skeleton placeholder for FourThumbnailCard component.
+ * Renders a skeleton that mimics the FourThumbnailCard layout.
+ */
+const FourThumbnailCardSkeleton = forwardRef(function FourThumbnailCardSkeleton(props, ref) {
+    const { className, thumbnailWidth = 200, ...rest } = props;
+    return (jsxs("div", { ...rest, ref: ref, className: cx(cardClasses.thumbnail, className), children: [jsx("div", { className: cardClasses.fourThumbnail, children: Array.from({ length: 4 }, (_, index) => (jsx(Skeleton, { className: cardClasses.fourThumbnailThumbnail, width: thumbnailWidth, 
+                    // For four-thumbnail layout, force to '4/3' to maintain the grid layout.
+                    style: { aspectRatio: '4/3' } }, index))) }), jsx("div", { className: cardClasses.thumbnailInfo, children: jsx("div", { className: cardClasses.thumbnailInfoMain, children: jsxs("div", { className: cardClasses.thumbnailInfoContent, style: { width: '100%' }, children: [jsx(Skeleton, { height: 20, width: "100%" }), jsx(Skeleton, { height: 16, width: "100%" })] }) }) })] }));
+});
+FourThumbnailCardSkeleton.displayName = 'FourThumbnailCardSkeleton';
+
+export { FourThumbnailCardSkeleton as default };

package/Card/QuickActionCard.d.ts

@@ -0,0 +1,12 @@
+import { ComponentOverridableForwardRefComponentPropsFactory } from '../utils/jsx-types';
+import { QuickActionCardComponent, QuickActionCardProps } from './typings';
+export type QuickActionCardComponentProps<C extends QuickActionCardComponent = 'button'> = ComponentOverridableForwardRefComponentPropsFactory<QuickActionCardComponent, C, QuickActionCardProps>;
+/**
+ * QuickActionCard is a compact card component for quick actions.
+ * It displays an icon with a title and optional subtitle.
+ * Either icon or title must be provided.
+ */
+declare const QuickActionCard: import("react").ForwardRefExoticComponent<Omit<Omit<import("../utils/jsx-types").ComponentPropsWithoutKeyAndRef<"button">, "title" | "className" | "icon" | "disabled" | "readOnly" | "mode" | "subtitle"> & QuickActionCardProps, "component"> & {
+    component?: QuickActionCardComponent | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export default QuickActionCard;

package/Card/QuickActionCard.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { cardClasses } from '@mezzanine-ui/core/card';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+/**
+ * QuickActionCard is a compact card component for quick actions.
+ * It displays an icon with a title and optional subtitle.
+ * Either icon or title must be provided.
+ */
+const QuickActionCard = forwardRef(function QuickActionCard(props, ref) {
+    const { className, component: Component = 'button', disabled = false, icon, mode = 'horizontal', readOnly = false, subtitle, title, ...rest } = props;
+    return (jsxs(Component, { ...rest, ref: ref, "aria-disabled": disabled || undefined, "aria-readonly": readOnly || undefined, className: cx(cardClasses.quickAction, {
+            [cardClasses.quickActionDisabled]: disabled,
+            [cardClasses.quickActionReadOnly]: readOnly,
+            [cardClasses.quickActionVertical]: mode === 'vertical',
+        }, className), children: [icon && (jsx(Icon, { icon: icon, size: 24, className: cardClasses.quickActionIcon })), title || subtitle ? (jsxs("div", { className: cardClasses.quickActionContent, children: [title && jsx("span", { className: cardClasses.quickActionTitle, children: title }), subtitle && (jsx("span", { className: cardClasses.quickActionSubtitle, children: subtitle }))] })) : null] }));
+});
+QuickActionCard.displayName = 'QuickActionCard';
+
+export { QuickActionCard as default };

package/Card/QuickActionCardSkeleton.d.ts

@@ -0,0 +1,14 @@
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface QuickActionCardSkeletonProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'> {
+    /**
+     * Layout mode matching QuickActionCard
+     * @default 'horizontal'
+     */
+    mode?: 'horizontal' | 'vertical';
+}
+/**
+ * Skeleton placeholder for QuickActionCard component.
+ * Renders a skeleton that mimics the QuickActionCard layout.
+ */
+declare const QuickActionCardSkeleton: import("react").ForwardRefExoticComponent<QuickActionCardSkeletonProps & import("react").RefAttributes<HTMLDivElement>>;
+export default QuickActionCardSkeleton;

package/Card/QuickActionCardSkeleton.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { cardClasses } from '@mezzanine-ui/core/card';
+import Skeleton from '../Skeleton/Skeleton.js';
+import cx from 'clsx';
+
+/**
+ * Skeleton placeholder for QuickActionCard component.
+ * Renders a skeleton that mimics the QuickActionCard layout.
+ */
+const QuickActionCardSkeleton = forwardRef(function QuickActionCardSkeleton(props, ref) {
+    const { className, mode = 'horizontal', ...rest } = props;
+    return (jsxs("div", { ...rest, ref: ref, className: cx(cardClasses.quickAction, cardClasses.quickActionReadOnly, mode === 'vertical' && cardClasses.quickActionVertical, className), children: [jsx(Skeleton, { circle: true, height: 24, width: 24 }), jsxs("div", { className: cardClasses.quickActionContent, children: [jsx(Skeleton, { height: 20, width: "70%" }), jsx(Skeleton, { height: 16, width: "50%" })] })] }));
+});
+QuickActionCardSkeleton.displayName = 'QuickActionCardSkeleton';
+
+export { QuickActionCardSkeleton as default };

package/Card/SingleThumbnailCard.d.ts

@@ -0,0 +1,13 @@
+import { ComponentOverridableForwardRefComponentPropsFactory } from '../utils/jsx-types';
+import { SingleThumbnailCardComponent, SingleThumbnailCardProps } from './typings';
+export type SingleThumbnailCardComponentProps<C extends SingleThumbnailCardComponent = 'div'> = ComponentOverridableForwardRefComponentPropsFactory<SingleThumbnailCardComponent, C, SingleThumbnailCardProps>;
+/**
+ * SingleThumbnailCard displays a single image thumbnail with optional tag, personal action,
+ * and info section. Supports three action types: default, action, and overflow.
+ *
+ * The card width is determined by the image child element.
+ */
+declare const SingleThumbnailCard: import("react").ForwardRefExoticComponent<Omit<Omit<import("../utils/jsx-types").ComponentPropsWithoutKeyAndRef<"div">, "children" | "title" | "className" | "type" | "options" | "actionName" | "onActionClick" | "onOptionSelect" | "filetype" | "subtitle" | "personalActionIcon" | "personalActionActiveIcon" | "personalActionActive" | "personalActionOnClick" | "tag"> & SingleThumbnailCardProps, "component"> & {
+    component?: SingleThumbnailCardComponent | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default SingleThumbnailCard;

package/Card/SingleThumbnailCard.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, Children } from 'react';
+import { cardClasses } from '@mezzanine-ui/core/card';
+import ThumbnailCardInfo from './ThumbnailCardInfo.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+/**
+ * SingleThumbnailCard displays a single image thumbnail with optional tag, personal action,
+ * and info section. Supports three action types: default, action, and overflow.
+ *
+ * The card width is determined by the image child element.
+ */
+const SingleThumbnailCard = forwardRef(function SingleThumbnailCard(props, ref) {
+    const { children, className, component: Component = 'div', filetype, personalActionActive = false, personalActionActiveIcon, personalActionIcon, personalActionOnClick, subtitle, tag, title, type = 'default', ...rest } = props;
+    // Ensure only one child is provided
+    const child = Children.only(children);
+    const hasPersonalAction = Boolean(personalActionIcon);
+    const currentPersonalActionIcon = personalActionActive
+        ? (personalActionActiveIcon !== null && personalActionActiveIcon !== void 0 ? personalActionActiveIcon : personalActionIcon)
+        : personalActionIcon;
+    const handlePersonalActionClick = (event) => {
+        event.stopPropagation();
+        personalActionOnClick === null || personalActionOnClick === void 0 ? void 0 : personalActionOnClick(event, personalActionActive);
+    };
+    const getInfoProps = () => {
+        if (type === 'action') {
+            const { actionName, onActionClick } = props;
+            return { actionName, onActionClick };
+        }
+        if (type === 'overflow') {
+            const { onOptionSelect, options } = props;
+            return { onOptionSelect, options };
+        }
+        return {};
+    };
+    // Filter out type-specific props before spreading
+    const { actionName: _actionName, onActionClick: _onActionClick, onOptionSelect: _onOptionSelect, options: _options, type: _type, ...componentProps } = rest;
+    return (jsxs(Component, { ...componentProps, ref: ref, className: cx(cardClasses.thumbnail, className), children: [jsxs("div", { className: cardClasses.singleThumbnail, children: [tag && jsx("div", { className: cardClasses.thumbnailTag, children: tag }), hasPersonalAction && currentPersonalActionIcon && (jsx("button", { "aria-label": "Personal Action", className: cardClasses.thumbnailPersonalAction, onClick: handlePersonalActionClick, type: "button", children: jsx(Icon, { icon: currentPersonalActionIcon, size: 24 }) })), child, jsx("div", { className: cardClasses.singleThumbnailOverlay })] }), jsx(ThumbnailCardInfo, { filetype: filetype, subtitle: subtitle, title: title, type: type, ...getInfoProps() })] }));
+});
+SingleThumbnailCard.displayName = 'SingleThumbnailCard';
+
+export { SingleThumbnailCard as default };

package/Card/SingleThumbnailCardSkeleton.d.ts

@@ -0,0 +1,19 @@
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface SingleThumbnailCardSkeletonProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'> {
+    /**
+     * Width of the thumbnail skeleton.
+     * @default 'var(--mzn-spacing-size-container-slim)'
+     */
+    thumbnailWidth?: number | string;
+    /**
+     * Aspect ratio of the thumbnail skeleton.
+     * @default '16/9'
+     */
+    thumbnailAspectRatio?: string;
+}
+/**
+ * Skeleton placeholder for SingleThumbnailCard component.
+ * Renders a skeleton that mimics the SingleThumbnailCard layout.
+ */
+declare const SingleThumbnailCardSkeleton: import("react").ForwardRefExoticComponent<SingleThumbnailCardSkeletonProps & import("react").RefAttributes<HTMLDivElement>>;
+export default SingleThumbnailCardSkeleton;

package/Card/SingleThumbnailCardSkeleton.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { cardClasses } from '@mezzanine-ui/core/card';
+import Skeleton from '../Skeleton/Skeleton.js';
+import cx from 'clsx';
+
+/**
+ * Skeleton placeholder for SingleThumbnailCard component.
+ * Renders a skeleton that mimics the SingleThumbnailCard layout.
+ */
+const SingleThumbnailCardSkeleton = forwardRef(function SingleThumbnailCardSkeleton(props, ref) {
+    const { className, thumbnailAspectRatio = '16/9', thumbnailWidth = 'var(--mzn-spacing-size-container-slim)', ...rest } = props;
+    return (jsxs("div", { ...rest, ref: ref, className: cx(cardClasses.thumbnail, className), children: [jsx("div", { className: cardClasses.singleThumbnail, children: jsx(Skeleton, { height: "100%", style: { aspectRatio: thumbnailAspectRatio }, width: thumbnailWidth }) }), jsx("div", { className: cardClasses.thumbnailInfo, children: jsx("div", { className: cardClasses.thumbnailInfoMain, children: jsxs("div", { className: cardClasses.thumbnailInfoContent, style: { width: '100%' }, children: [jsx(Skeleton, { height: 20, width: "100%" }), jsx(Skeleton, { height: 16, width: "100%" })] }) }) })] }));
+});
+SingleThumbnailCardSkeleton.displayName = 'SingleThumbnailCardSkeleton';
+
+export { SingleThumbnailCardSkeleton as default };

package/Card/Thumbnail.d.ts

@@ -0,0 +1,12 @@
+import { ComponentOverridableForwardRefComponentPropsFactory } from '../utils/jsx-types';
+import { ThumbnailComponent, ThumbnailPropsBase } from './typings';
+export type ThumbnailComponentProps<C extends ThumbnailComponent = 'div'> = ComponentOverridableForwardRefComponentPropsFactory<ThumbnailComponent, C, ThumbnailPropsBase>;
+/**
+ * Thumbnail is a child component for FourThumbnailCard.
+ * It wraps an image with an overlay that shows the title on hover.
+ * Supports polymorphic rendering as 'div', 'a', 'button', or custom components (e.g., Next.js Link).
+ */
+declare const Thumbnail: import("react").ForwardRefExoticComponent<Omit<Omit<import("../utils/jsx-types").ComponentPropsWithoutKeyAndRef<"div">, keyof ThumbnailPropsBase> & ThumbnailPropsBase, "component"> & {
+    component?: ThumbnailComponent | undefined;
+} & import("react").RefAttributes<HTMLElement>>;
+export default Thumbnail;

package/Card/Thumbnail.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { cardClasses } from '@mezzanine-ui/core/card';
+import cx from 'clsx';
+
+/**
+ * Thumbnail is a child component for FourThumbnailCard.
+ * It wraps an image with an overlay that shows the title on hover.
+ * Supports polymorphic rendering as 'div', 'a', 'button', or custom components (e.g., Next.js Link).
+ */
+const Thumbnail = forwardRef(function Thumbnail(props, ref) {
+    const { children, className, component: Component = 'div', title, ...rest } = props;
+    return (jsxs(Component, { ...rest, ref: ref, className: cx(cardClasses.fourThumbnailThumbnail, className), children: [children, jsx("div", { className: cardClasses.fourThumbnailOverlay, children: title && jsx("span", { children: title }) })] }));
+});
+Thumbnail.displayName = 'Thumbnail';
+
+export { Thumbnail as default };

package/Card/ThumbnailCardInfo.d.ts

@@ -0,0 +1,34 @@
+import { MouseEvent } from 'react';
+import { SingleThumbnailCardOverflowProps, SingleThumbnailCardProps } from './typings';
+export interface ThumbnailCardInfoProps extends Pick<SingleThumbnailCardProps, 'filetype' | 'subtitle' | 'title' | 'type'> {
+    /**
+     * Label text for the action button (when type="action")
+     */
+    actionName?: string;
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Whether the action is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Click handler for the action button (when type="action")
+     */
+    onActionClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Callback when an option is selected (when type="overflow")
+     */
+    onOptionSelect?: SingleThumbnailCardOverflowProps['onOptionSelect'];
+    /**
+     * Dropdown options (when type="overflow")
+     */
+    options?: SingleThumbnailCardOverflowProps['options'];
+}
+/**
+ * ThumbnailCardInfo is a shared component for rendering card info section
+ * Used by SingleThumbnailCard and FourThumbnailCard
+ */
+declare const ThumbnailCardInfo: import("react").ForwardRefExoticComponent<ThumbnailCardInfoProps & import("react").RefAttributes<HTMLDivElement>>;
+export default ThumbnailCardInfo;

package/Card/ThumbnailCardInfo.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { getFileTypeCategory, cardClasses } from '@mezzanine-ui/core/card';
+import { DotHorizontalIcon } from '@mezzanine-ui/icons';
+import Button from '../Button/Button.js';
+import Dropdown from '../Dropdown/Dropdown.js';
+import cx from 'clsx';
+
+/**
+ * ThumbnailCardInfo is a shared component for rendering card info section
+ * Used by SingleThumbnailCard and FourThumbnailCard
+ */
+const ThumbnailCardInfo = forwardRef(function ThumbnailCardInfo(props, ref) {
+    const { className, disabled = false, filetype, subtitle, title, type = 'default', } = props;
+    const filetypeCategory = filetype
+        ? getFileTypeCategory(filetype)
+        : undefined;
+    const filetypeClassName = filetypeCategory
+        ? `${cardClasses.thumbnailInfoFiletype}--${filetypeCategory}`
+        : undefined;
+    const renderAction = () => {
+        if (type === 'default') {
+            return null;
+        }
+        if (type === 'action') {
+            const { actionName: name, onActionClick: onClick } = props;
+            return (jsx("div", { className: cardClasses.thumbnailInfoAction, children: jsx(Button, { disabled: disabled, onClick: (event) => {
+                        event.stopPropagation();
+                        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+                    }, size: "sub", type: "button", variant: "base-text-link", children: name }) }));
+        }
+        if (type === 'overflow') {
+            const { onOptionSelect: onSelect, options: opts } = props;
+            return (jsx("div", { className: cardClasses.thumbnailInfoAction, children: jsx(Dropdown, { disabled: disabled, globalPortal: false, mode: "single", onSelect: onSelect, options: opts, children: jsx(Button, { disabled: disabled, icon: DotHorizontalIcon, iconType: "icon-only", size: "sub", type: "button", variant: "base-text-link" }) }) }));
+        }
+        return null;
+    };
+    return (jsxs("div", { ref: ref, className: cx(cardClasses.thumbnailInfo, className), children: [jsxs("div", { className: cardClasses.thumbnailInfoMain, children: [filetype && (jsx("div", { className: cx(cardClasses.thumbnailInfoFiletype, filetypeClassName), children: filetype.toUpperCase() })), jsxs("div", { className: cardClasses.thumbnailInfoContent, children: [title && (jsx("span", { className: cardClasses.thumbnailInfoTitle, children: title })), subtitle && (jsx("span", { className: cardClasses.thumbnailInfoSubtitle, children: subtitle }))] })] }), renderAction()] }));
+});
+ThumbnailCardInfo.displayName = 'ThumbnailCardInfo';
+
+export { ThumbnailCardInfo as default };

package/Card/index.d.ts

@@ -1,4 +1,43 @@
-export type { CardActionsProps } from './CardActions';
-export { default as CardActions } from './CardActions';
-export type { CardProps } from './Card';
-export { default } from './Card';
+import { PropsWithoutRef, ReactElement, ReactNode, RefAttributes } from 'react';
+import BaseCard, { BaseCardComponentProps } from './BaseCard';
+import FourThumbnailCard, { FourThumbnailCardComponentProps } from './FourThumbnailCard';
+import QuickActionCard, { QuickActionCardComponentProps } from './QuickActionCard';
+import SingleThumbnailCard, { SingleThumbnailCardComponentProps } from './SingleThumbnailCard';
+import Thumbnail, { ThumbnailComponentProps } from './Thumbnail';
+import { BaseCardComponent, FourThumbnailCardComponent, QuickActionCardComponent, SingleThumbnailCardComponent, ThumbnailComponent } from './typings';
+export { default as CardGroup } from './CardGroup';
+export type { CardGroupLoadingType, CardGroupProps } from './CardGroup';
+export { default as ThumbnailCardInfo } from './ThumbnailCardInfo';
+export type { ThumbnailCardInfoProps } from './ThumbnailCardInfo';
+export { default as BaseCardSkeleton } from './BaseCardSkeleton';
+export type { BaseCardSkeletonProps } from './BaseCardSkeleton';
+export { default as FourThumbnailCardSkeleton } from './FourThumbnailCardSkeleton';
+export type { FourThumbnailCardSkeletonProps } from './FourThumbnailCardSkeleton';
+export { default as QuickActionCardSkeleton } from './QuickActionCardSkeleton';
+export type { QuickActionCardSkeletonProps } from './QuickActionCardSkeleton';
+export { default as SingleThumbnailCardSkeleton } from './SingleThumbnailCardSkeleton';
+export type { SingleThumbnailCardSkeletonProps } from './SingleThumbnailCardSkeleton';
+export type { BaseCardComponentProps, FourThumbnailCardComponentProps, QuickActionCardComponentProps, SingleThumbnailCardComponentProps, ThumbnailComponentProps, };
+export type { BaseCardComponent, BaseCardActionVariant, BaseCardType, BaseCardProps, BaseCardPropsCommon, BaseCardDefaultProps, BaseCardActionProps, BaseCardOverflowProps, BaseCardToggleProps, FourThumbnailCardComponent, FourThumbnailCardType, FourThumbnailCardProps, FourThumbnailCardPropsCommon, FourThumbnailCardDefaultProps, FourThumbnailCardActionProps, FourThumbnailCardOverflowProps, QuickActionCardComponent, QuickActionCardMode, QuickActionCardProps, QuickActionCardPropsCommon, QuickActionCardWithIconProps, QuickActionCardWithTitleProps, SingleThumbnailCardComponent, SingleThumbnailCardType, SingleThumbnailCardProps, SingleThumbnailCardPropsCommon, SingleThumbnailCardDefaultProps, SingleThumbnailCardActionProps, SingleThumbnailCardOverflowProps, ThumbnailComponent, ThumbnailPropsBase, } from './typings';
+/**
+ * Type alias for proper generic inference when using component prop
+ */
+type GenericBaseCard = <C extends BaseCardComponent = 'div'>(props: PropsWithoutRef<BaseCardComponentProps<C>> & RefAttributes<HTMLElement>) => ReactElement<any>;
+type GenericFourThumbnailCard = <C extends FourThumbnailCardComponent = 'div'>(props: PropsWithoutRef<FourThumbnailCardComponentProps<C>> & RefAttributes<HTMLElement> & {
+    children: ReactNode;
+    title: string;
+}) => ReactElement<any>;
+type GenericQuickActionCard = <C extends QuickActionCardComponent = 'button'>(props: PropsWithoutRef<QuickActionCardComponentProps<C>> & RefAttributes<HTMLElement>) => ReactElement<any>;
+type GenericSingleThumbnailCard = <C extends SingleThumbnailCardComponent = 'div'>(props: PropsWithoutRef<SingleThumbnailCardComponentProps<C>> & RefAttributes<HTMLElement> & {
+    children: ReactElement;
+    title: string;
+}) => ReactElement<any>;
+type GenericThumbnail = <C extends ThumbnailComponent = 'div'>(props: PropsWithoutRef<ThumbnailComponentProps<C>> & RefAttributes<HTMLElement> & {
+    children: ReactNode;
+}) => ReactElement<any>;
+export { BaseCard, FourThumbnailCard, QuickActionCard, SingleThumbnailCard, Thumbnail, };
+export declare const BaseCardGeneric: GenericBaseCard;
+export declare const FourThumbnailCardGeneric: GenericFourThumbnailCard;
+export declare const QuickActionCardGeneric: GenericQuickActionCard;
+export declare const SingleThumbnailCardGeneric: GenericSingleThumbnailCard;
+export declare const ThumbnailGeneric: GenericThumbnail;

package/Card/index.js

@@ -1,2 +1,19 @@
-export { default as CardActions } from './CardActions.js';
-export { default } from './Card.js';
+import BaseCard from './BaseCard.js';
+import FourThumbnailCard from './FourThumbnailCard.js';
+import QuickActionCard from './QuickActionCard.js';
+import SingleThumbnailCard from './SingleThumbnailCard.js';
+import Thumbnail from './Thumbnail.js';
+export { default as CardGroup } from './CardGroup.js';
+export { default as ThumbnailCardInfo } from './ThumbnailCardInfo.js';
+export { default as BaseCardSkeleton } from './BaseCardSkeleton.js';
+export { default as FourThumbnailCardSkeleton } from './FourThumbnailCardSkeleton.js';
+export { default as QuickActionCardSkeleton } from './QuickActionCardSkeleton.js';
+export { default as SingleThumbnailCardSkeleton } from './SingleThumbnailCardSkeleton.js';
+
+const BaseCardGeneric = BaseCard;
+const FourThumbnailCardGeneric = FourThumbnailCard;
+const QuickActionCardGeneric = QuickActionCard;
+const SingleThumbnailCardGeneric = SingleThumbnailCard;
+const ThumbnailGeneric = Thumbnail;
+
+export { BaseCard, BaseCardGeneric, FourThumbnailCard, FourThumbnailCardGeneric, QuickActionCard, QuickActionCardGeneric, SingleThumbnailCard, SingleThumbnailCardGeneric, Thumbnail, ThumbnailGeneric };