@mezzanine-ui/react 0.16.0 → 1.0.0-beta.0

package/Upload/UploadPictureCard.d.ts

@@ -0,0 +1,110 @@
+import { MouseEventHandler } from 'react';
+import { UploadItemStatus, UploadPictureCardImageFit, UploadPictureCardSize } from '@mezzanine-ui/core/upload';
+import type { IconDefinition } from '@mezzanine-ui/icons';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface UploadPictureCardAriaLabels {
+    /**
+     * Aria label for cancel upload button.
+     * @default 'Cancel upload'
+     */
+    cancelUpload?: string;
+    /**
+     * Aria label for uploading status.
+     * @default 'Uploading'
+     */
+    uploading?: string;
+    /**
+     * Aria label for zoom in button.
+     * @default 'Zoom in image'
+     */
+    zoomIn?: string;
+    /**
+     * Aria label for download button.
+     * @default 'Download file'
+     */
+    download?: string;
+    /**
+     * Aria label for delete button.
+     * @default 'Delete file'
+     */
+    delete?: string;
+    /**
+     * Aria label for reload/retry button.
+     * @default 'Retry upload'
+     */
+    reload?: string;
+}
+export interface UploadPictureCardProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * Aria labels for accessibility. Allows customization for internationalization.
+     */
+    ariaLabels?: UploadPictureCardAriaLabels;
+    /**
+     * The file to display.
+     * Required when displaying local files (before upload).
+     * Optional when `url` is provided for already uploaded files.
+     */
+    file?: File;
+    /**
+     * The URL of the uploaded file.
+     * When provided, this will be used instead of creating a blob URL from `file`.
+     * Useful for displaying files that have already been uploaded to the server.
+     *
+     * @note If only `url` is provided (without `file`), the file type will be inferred
+     * from the URL extension. For accurate type detection, provide `file` when available.
+     */
+    url?: string;
+    /**
+     * The id of the file id to identify the file.
+     */
+    id?: string;
+    /**
+     * The status of the upload picture card.
+     * @default 'loading'
+     */
+    status?: UploadItemStatus;
+    /**
+     * The size of the upload picture card.
+     * @default 'main'
+     */
+    size?: UploadPictureCardSize;
+    /**
+     * The image fit of the upload picture card.
+     * @default 'cover'
+     */
+    imageFit?: UploadPictureCardImageFit;
+    /**
+     * Whether the upload picture card is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Error message to display when status is 'error'.
+     */
+    errorMessage?: string;
+    /**
+     * Error icon to display when status is 'error'.
+     */
+    errorIcon?: IconDefinition;
+    /**
+     * When delete icon is clicked, this callback will be fired.
+     */
+    onDelete?: MouseEventHandler;
+    /**
+     * When zoom in icon is clicked, this callback will be fired.
+     */
+    onZoomIn?: MouseEventHandler;
+    /**
+     * When download icon is clicked, this callback will be fired.
+     */
+    onDownload?: MouseEventHandler;
+    /**
+     * When reload icon is clicked, this callback will be fired.
+     */
+    onReload?: MouseEventHandler;
+}
+/**
+ * The react component for `mezzanine` upload picture card.
+ */
+declare const UploadPictureCard: import("react").ForwardRefExoticComponent<UploadPictureCardProps & import("react").RefAttributes<HTMLDivElement>>;
+export default UploadPictureCard;

package/Upload/UploadPictureCard.js

@@ -0,0 +1,101 @@
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useMemo, useState, useEffect } from 'react';
+import { uploadPictureCardClasses } from '@mezzanine-ui/core/upload';
+import { ImageIcon, FileIcon, SpinnerIcon, ZoomInIcon, DownloadIcon, TrashIcon, ResetIcon } from '@mezzanine-ui/icons';
+import Button from '../Button/Button.js';
+import ClearActions from '../ClearActions/ClearActions.js';
+import Typography from '../Typography/Typography.js';
+import { isImageFile } from './upload-utils.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` upload picture card.
+ */
+const UploadPictureCard = forwardRef(function UploadPictureCard(props, ref) {
+    var _a;
+    const { ariaLabels, className, file, url, status = 'loading', imageFit = 'cover', size = 'main', disabled = false, errorMessage, errorIcon, onDelete, onZoomIn, onDownload, onReload, ...rest } = props;
+    const defaultAriaLabels = {
+        cancelUpload: 'Cancel upload',
+        uploading: 'Uploading',
+        zoomIn: 'Zoom in image',
+        download: 'Download file',
+        delete: 'Delete file',
+        reload: 'Retry upload',
+    };
+    const labels = { ...defaultAriaLabels, ...ariaLabels };
+    const isImage = useMemo(() => {
+        return isImageFile(file, url);
+    }, [file, url]);
+    const fileName = useMemo(() => {
+        var _a;
+        if (((_a = props.file) === null || _a === void 0 ? void 0 : _a.name) && !props.url)
+            return props.file.name;
+        if (props.url) {
+            try {
+                const url = new URL(props.url);
+                const pathname = url.pathname;
+                const filename = pathname.split('/').pop() || '';
+                return filename;
+            }
+            catch (_b) {
+                const urlWithoutQuery = props.url.split('?')[0].split('#')[0];
+                return urlWithoutQuery.split('/').pop() || '';
+            }
+        }
+        return '';
+    }, [(_a = props.file) === null || _a === void 0 ? void 0 : _a.name, props.url]);
+    const [imageUrl, setImageUrl] = useState('');
+    const errorIconContent = useMemo(() => {
+        if (errorIcon) {
+            return errorIcon;
+        }
+        return isImage ? ImageIcon : FileIcon;
+    }, [isImage, errorIcon]);
+    const errorMessageContent = useMemo(() => {
+        if (errorMessage) {
+            return errorMessage;
+        }
+        return fileName ? fileName : 'Upload error';
+    }, [fileName, errorMessage]);
+    // Warn if both file and url are missing
+    useEffect(() => {
+        if (!file && !url) {
+            console.warn('UploadPictureCard: Both `file` and `url` props are missing. At least one should be provided to display the upload picture card.');
+        }
+    }, [file, url]);
+    useEffect(() => {
+        if (url && isImage) {
+            setImageUrl(url);
+            return undefined;
+        }
+        if (file && isImage) {
+            try {
+                const blobUrl = URL.createObjectURL(file);
+                setImageUrl(blobUrl);
+                return () => {
+                    URL.revokeObjectURL(blobUrl);
+                };
+            }
+            catch (error) {
+                console.error('Failed to create object URL for image:', error);
+                setImageUrl('');
+            }
+        }
+        else {
+            setImageUrl('');
+        }
+        return undefined;
+    }, [file, url, isImage]);
+    if (!isImage && size === 'minor') {
+        console.warn('UploadPictureCard: minor size is not supported for non-image files');
+        return null;
+    }
+    return (jsx("div", { className: cx(uploadPictureCardClasses.host, uploadPictureCardClasses.size(size), disabled && uploadPictureCardClasses.disabled, className), "aria-disabled": disabled, ref: ref, role: "group", tabIndex: disabled ? -1 : 0, ...rest, children: jsxs("div", { className: uploadPictureCardClasses.container, children: [isImage && imageUrl && status !== 'error' && (jsx("img", { alt: fileName, src: imageUrl, style: {
+                        objectFit: imageFit,
+                        objectPosition: 'center',
+                    } })), status === 'done' && size !== 'minor' && !isImage && (jsxs("div", { className: uploadPictureCardClasses.content, children: [jsx(Icon, { icon: FileIcon, color: "brand", size: 16 }), jsx(Typography, { className: uploadPictureCardClasses.name, ellipsis: true, children: fileName })] })), status === 'error' && size !== 'minor' && (jsxs("div", { className: uploadPictureCardClasses.errorMessage, role: "alert", "aria-live": "polite", children: [jsx(Icon, { icon: errorIconContent, color: "error", size: 16 }), jsx(Typography, { className: uploadPictureCardClasses.errorMessageText, children: errorMessageContent })] })), jsxs("div", { className: cx(uploadPictureCardClasses.actions, uploadPictureCardClasses.actionsStatus(status)), children: [status === 'loading' && size !== 'minor' && (jsxs(Fragment, { children: [jsx(ClearActions, { type: "embedded", variant: "contrast", onClick: onDelete, className: uploadPictureCardClasses.clearActionsIcon, "aria-label": labels.cancelUpload }), jsx("div", { className: uploadPictureCardClasses.loadingIcon, "aria-label": labels.uploading, children: jsx(Icon, { icon: SpinnerIcon, color: "fixed-light", spin: true, size: 32 }) })] })), status === 'done' && size !== 'minor' && (jsx(Fragment, { children: jsx("div", { className: uploadPictureCardClasses.tools, children: jsxs("div", { className: uploadPictureCardClasses.toolsContent, children: [jsx(Button, { variant: "base-secondary", size: "minor", icon: { position: 'icon-only', src: ZoomInIcon }, onClick: onZoomIn, "aria-label": labels.zoomIn }), jsx(Button, { variant: "base-secondary", size: "minor", icon: { position: 'icon-only', src: DownloadIcon }, onClick: onDownload, "aria-label": labels.download }), jsx(Button, { variant: "base-secondary", size: "minor", icon: { position: 'icon-only', src: TrashIcon }, onClick: onDelete, "aria-label": labels.delete })] }) }) })), status === 'error' && size !== 'minor' && (jsx(Fragment, { children: jsx("div", { className: uploadPictureCardClasses.tools, children: jsxs("div", { className: uploadPictureCardClasses.toolsContent, children: [jsx(Button, { variant: "base-secondary", size: "minor", icon: { position: 'icon-only', src: ResetIcon }, onClick: onReload, "aria-label": labels.reload }), jsx(Button, { variant: "base-secondary", size: "minor", icon: { position: 'icon-only', src: TrashIcon }, onClick: onDelete, "aria-label": labels.delete })] }) }) })), size === 'minor' && (jsx(Icon, { icon: ZoomInIcon, color: "fixed-light", size: 24 }))] })] }) }));
+});
+
+export { UploadPictureCard as default };

package/Upload/Uploader.d.ts

@@ -0,0 +1,161 @@
+import { ChangeEventHandler, ReactNode, Ref } from 'react';
+import { type UploaderHintType, type UploadPictureControl, type UploadType } from '@mezzanine-ui/core/upload';
+import { type IconDefinition } from '@mezzanine-ui/icons';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+type UploaderInputElementProps = Omit<NativeElementPropsWithoutKeyAndRef<'input'>, 'accept' | 'disabled' | 'multiple' | 'onChange' | 'type' | `aria-${'disabled'}`> & {
+    /**
+     * The id attribute can be provided via inputProps, but it's recommended to use the `id` prop directly.
+     * If both are provided, the `id` prop takes precedence.
+     */
+    id?: string;
+    /**
+     * The name attribute can be provided via inputProps, but it's recommended to use the `name` prop directly.
+     * If both are provided, the `name` prop takes precedence.
+     */
+    name?: string;
+};
+export interface UploaderHint {
+    /**
+     * The label text of the hint.
+     */
+    label: string;
+    /**
+     * The icon element of the hint.
+     */
+    type?: UploaderHintType;
+}
+export interface UploaderLabel {
+    /**
+     * Label text for upload state.
+     */
+    uploadLabel?: string;
+    /**
+     * Label text for uploading state.
+     */
+    uploadingLabel?: string;
+    /**
+     * Label text for success state.
+     */
+    success?: string;
+    /**
+     * Label text for error state.
+     */
+    error?: string;
+    /**
+     * Label text for "Click to upload" when isFillWidth is true.
+     * @default 'Click to upload'
+     */
+    clickToUpload?: string;
+}
+export interface UploaderIcon {
+    /**
+     * Icon for upload action.
+     */
+    upload?: IconDefinition;
+    /**
+     * Icon for error state.
+     */
+    error?: ReactNode;
+    /**
+     * Icon for success state.
+     */
+    success?: ReactNode;
+    /**
+     * Icon for zoom action.
+     */
+    zoom?: ReactNode;
+    /**
+     * Icon for document.
+     */
+    document?: ReactNode;
+    /**
+     * Icon for download action.
+     */
+    download?: ReactNode;
+    /**
+     * Icon for reload action.
+     */
+    reload?: ReactNode;
+    /**
+     * Icon for delete action.
+     */
+    delete?: ReactNode;
+}
+export interface UploaderProps extends Omit<NativeElementPropsWithoutKeyAndRef<'label'>, 'onChange'> {
+    /**
+     * The accept attributes of native input element.
+     * @example 'image/*', '.pdf,.doc,.docx'
+     */
+    accept?: string;
+    /**
+     * Whether the input is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The id of input element.
+     */
+    id?: string;
+    /**
+     * Whether to fill the width of the container.
+     * @default false
+     */
+    isFillWidth?: boolean;
+    /**
+     * Since at Mezzanine we use a host element to wrap our input, most derived props will be passed to the host element.
+     * If you need direct control to the input element, use this prop to provide to it.
+     */
+    inputProps?: UploaderInputElementProps;
+    /**
+     * The react ref passed to input element.
+     */
+    inputRef?: React.Ref<HTMLInputElement>;
+    /**
+     * The name attribute of the input element.
+     */
+    name?: string;
+    /**
+     * Whether can select multiple files to upload.
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * The type for upload component.
+     * @default 'base'
+     * @example 'base' | 'button'
+     */
+    type?: UploadType;
+    /**
+     * Array of hints to display with the upload component.
+     */
+    hints?: UploaderHint[];
+    /**
+     * Label configuration for different states.
+     */
+    label?: UploaderLabel;
+    /**
+     * Icon configuration for different actions and states.
+     */
+    icon?: UploaderIcon;
+    /**
+     * Provide `controllerRef` if you need detail data of file.
+     */
+    controllerRef?: Ref<UploadPictureControl | null>;
+    /**
+     * Invoked by input change event.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Fired after user selected files.
+     */
+    onUpload?: (files: File[]) => void;
+    /**
+     * Fired after user deletes file.
+     */
+    onDelete?: () => void;
+}
+/**
+ * The react component for `mezzanine` uploader.
+ */
+declare const Uploader: import("react").ForwardRefExoticComponent<UploaderProps & import("react").RefAttributes<HTMLLabelElement>>;
+export default Uploader;

package/Upload/Uploader.js

@@ -0,0 +1,120 @@
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useId, useRef, useState, useMemo } from 'react';
+import { uploaderClasses } from '@mezzanine-ui/core/upload';
+import { UploadIcon } from '@mezzanine-ui/icons';
+import Button from '../Button/Button.js';
+import Typography from '../Typography/Typography.js';
+import { composeRefs } from '../utils/composeRefs.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` uploader.
+ */
+const Uploader = forwardRef(function Uploader(props, ref) {
+    var _a, _b, _c;
+    const { accept, className, disabled = false, id, inputProps, inputRef: inputRefProp, isFillWidth = false, multiple = false, name, type, hints, label: labelConfig, icon: iconConfig, controllerRef: _controllerRef, onChange: onChangeProp, onUpload, onDelete: _onDelete, ...rest } = props;
+    const { name: nameFromInputProps, id: idFromInputProps, ...restInputProps } = inputProps || {};
+    // Generate unique id if not provided
+    const generatedId = useId();
+    const finalInputId = (_a = id !== null && id !== void 0 ? id : idFromInputProps) !== null && _a !== void 0 ? _a : generatedId;
+    const inputElementRef = useRef(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const composedInputRef = useMemo(() => composeRefs([inputRefProp, inputElementRef]), [inputRefProp]);
+    const resolvedName = (_b = name !== null && name !== void 0 ? name : nameFromInputProps) !== null && _b !== void 0 ? _b : finalInputId;
+    const handleChange = (event) => {
+        if (onChangeProp) {
+            onChangeProp(event);
+        }
+        if (onUpload) {
+            const { files: fileList } = event.target;
+            if (fileList) {
+                const files = [];
+                for (let i = 0; i < fileList.length; i += 1) {
+                    files.push(fileList[i]);
+                }
+                onUpload(files);
+            }
+        }
+        // Reset input value to allow selecting the same file again
+        event.currentTarget.value = '';
+    };
+    const handleDragOver = (event) => {
+        if (disabled || type === 'button') {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    const handleDragEnter = (event) => {
+        if (disabled || type === 'button') {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        setIsDragging(true);
+    };
+    const handleDragLeave = (event) => {
+        if (disabled || type === 'button') {
+            return;
+        }
+        // Only clear dragging state if leaving the label itself (not a child)
+        const rect = event.currentTarget.getBoundingClientRect();
+        const x = event.clientX;
+        const y = event.clientY;
+        if (x < rect.left ||
+            x > rect.right ||
+            y < rect.top ||
+            y > rect.bottom) {
+            setIsDragging(false);
+        }
+    };
+    const handleDrop = (event) => {
+        if (disabled || type === 'button') {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        setIsDragging(false);
+        const { dataTransfer } = event;
+        if ((dataTransfer === null || dataTransfer === void 0 ? void 0 : dataTransfer.files) && dataTransfer.files.length > 0) {
+            const files = [];
+            for (let i = 0; i < dataTransfer.files.length; i += 1) {
+                files.push(dataTransfer.files[i]);
+            }
+            if (onUpload) {
+                onUpload(files);
+            }
+            // Note: We cannot directly set input.files from drag & drop
+            // The onChange event will not be triggered for drag & drop
+            // If onChange is needed, it should be handled via onUpload callback
+        }
+    };
+    const uploadIcon = useMemo(() => {
+        var _a;
+        const icon = (_a = iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.upload) !== null && _a !== void 0 ? _a : UploadIcon;
+        return jsx(Icon, { className: uploaderClasses.uploadIcon, icon: icon });
+    }, [iconConfig]);
+    const uploadLabel = (labelConfig === null || labelConfig === void 0 ? void 0 : labelConfig.uploadLabel)
+        ? labelConfig === null || labelConfig === void 0 ? void 0 : labelConfig.uploadLabel
+        : isFillWidth
+            ? 'Drag the file here or'
+            : 'Upload';
+    const clickToUploadLabel = (_c = labelConfig === null || labelConfig === void 0 ? void 0 : labelConfig.clickToUpload) !== null && _c !== void 0 ? _c : 'Click to upload';
+    const handleClickToUpload = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!disabled && inputElementRef.current) {
+            inputElementRef.current.click();
+        }
+    };
+    return (jsx("label", { className: cx(uploaderClasses.host, type && uploaderClasses.type(type), type !== 'button' && isFillWidth && uploaderClasses.fillWidth, isDragging && uploaderClasses.dragging, type !== 'button' && disabled && uploaderClasses.disabled, className), onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, ref: ref, ...rest, children: jsxs(Fragment, { children: [type === 'base'
+                    && isFillWidth
+                    && jsxs("div", { className: uploaderClasses.uploadContent, children: [uploadIcon, jsxs(Typography, { className: uploaderClasses.uploadLabel, children: [uploadLabel && jsxs(Fragment, { children: [uploadLabel, ' '] }), jsx("span", { className: uploaderClasses.clickToUpload, children: clickToUploadLabel })] }), hints === null || hints === void 0 ? void 0 : hints.map((hint, index) => (jsx(Typography, { className: uploaderClasses.fillWidthHints, children: hint.label }, index)))] }), type === 'base'
+                    && !isFillWidth
+                    && jsxs("div", { className: uploaderClasses.uploadContent, children: [uploadIcon, jsx(Typography, { className: uploaderClasses.uploadLabel, children: uploadLabel })] }), type === 'button'
+                    && (jsxs(Button, { disabled: disabled, onClick: handleClickToUpload, children: [uploadIcon, jsx(Typography, { children: uploadLabel })] })), jsx("input", { ...restInputProps, accept: accept, "aria-disabled": disabled, className: uploaderClasses.input, disabled: disabled, id: finalInputId, multiple: multiple, name: resolvedName, onChange: handleChange, ref: composedInputRef, type: "file" })] }) }));
+});
+
+export { Uploader as default };

package/Upload/index.d.ts

@@ -1,6 +1,8 @@
-export type { UploadResultSize, UploadResultStatus, } from '@mezzanine-ui/core/upload';
-export { UploadButtonProps, default as UploadButton } from './UploadButton';
-export { UploadPictureControl, UploadPictureProps, default as UploadPicture, } from './UploadPicture';
-export { UploadPictureBlockProps, default as UploadPictureBlock, } from './UploadPictureBlock';
-export { UploadPictureWallControl, UploadPictureWallProps, default as UploadPictureWall, } from './UploadPictureWall';
-export { UploadResultProps, default as UploadResult } from './UploadResult';
+export { default as Upload } from './Upload';
+export type { UploadFile, UploadProps } from './Upload';
+export { default as Uploader } from './Uploader';
+export type { UploaderProps } from './Uploader';
+export { default as UploadItem } from './UploadItem';
+export type { UploadItemProps } from './UploadItem';
+export { default as UploadPictureCard } from './UploadPictureCard';
+export type { UploadPictureCardProps } from './UploadPictureCard';

package/Upload/index.js

@@ -1,5 +1,4 @@
-export { default as UploadButton } from './UploadButton.js';
-export { default as UploadPicture } from './UploadPicture.js';
-export { default as UploadPictureBlock } from './UploadPictureBlock.js';
-export { default as UploadPictureWall } from './UploadPictureWall.js';
-export { default as UploadResult } from './UploadResult.js';
+export { default as Upload } from './Upload.js';
+export { default as Uploader } from './Uploader.js';
+export { default as UploadItem } from './UploadItem.js';
+export { default as UploadPictureCard } from './UploadPictureCard.js';

package/Upload/upload-utils.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Resolves the file type from a File object or URL.
+ * Prefers file.type if available, otherwise infers from URL extension.
+ *
+ * @param file - The File object (optional)
+ * @param url - The URL string (optional)
+ * @returns The resolved MIME type string, or empty string if unable to determine
+ *
+ * @example
+ * ```ts
+ * // From file object
+ * resolveFileType(file, undefined) // 'image/jpeg'
+ *
+ * // From URL
+ * resolveFileType(undefined, 'https://example.com/image.jpg') // 'image/jpeg'
+ *
+ * // Neither provided
+ * resolveFileType(undefined, undefined) // ''
+ * ```
+ */
+export declare function resolveFileType(file?: File, url?: string): string;
+/**
+ * Checks if a file is an image based on File object or URL.
+ *
+ * @param file - The File object (optional)
+ * @param url - The URL string (optional)
+ * @returns true if the file is an image, false otherwise
+ *
+ * @example
+ * ```ts
+ * // From file object
+ * isImageFile(file, undefined) // true if file.type starts with 'image/'
+ *
+ * // From URL
+ * isImageFile(undefined, 'https://example.com/image.jpg') // true
+ *
+ * // Neither provided
+ * isImageFile(undefined, undefined) // false
+ * ```
+ */
+export declare function isImageFile(file?: File, url?: string): boolean;

package/Upload/upload-utils.js

@@ -0,0 +1,65 @@
+/**
+ * Supported image file extensions.
+ */
+const IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp', 'ico'];
+/**
+ * Resolves the file type from a File object or URL.
+ * Prefers file.type if available, otherwise infers from URL extension.
+ *
+ * @param file - The File object (optional)
+ * @param url - The URL string (optional)
+ * @returns The resolved MIME type string, or empty string if unable to determine
+ *
+ * @example
+ * ```ts
+ * // From file object
+ * resolveFileType(file, undefined) // 'image/jpeg'
+ *
+ * // From URL
+ * resolveFileType(undefined, 'https://example.com/image.jpg') // 'image/jpeg'
+ *
+ * // Neither provided
+ * resolveFileType(undefined, undefined) // ''
+ * ```
+ */
+function resolveFileType(file, url) {
+    var _a;
+    // Prefer file.type if available
+    if (file === null || file === void 0 ? void 0 : file.type) {
+        return file.type;
+    }
+    // Infer from URL extension if URL is provided
+    if (url) {
+        const extension = (_a = url.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+        if (extension && IMAGE_EXTENSIONS.includes(extension)) {
+            // Normalize jpg to jpeg
+            return `image/${extension === 'jpg' ? 'jpeg' : extension}`;
+        }
+    }
+    return '';
+}
+/**
+ * Checks if a file is an image based on File object or URL.
+ *
+ * @param file - The File object (optional)
+ * @param url - The URL string (optional)
+ * @returns true if the file is an image, false otherwise
+ *
+ * @example
+ * ```ts
+ * // From file object
+ * isImageFile(file, undefined) // true if file.type starts with 'image/'
+ *
+ * // From URL
+ * isImageFile(undefined, 'https://example.com/image.jpg') // true
+ *
+ * // Neither provided
+ * isImageFile(undefined, undefined) // false
+ * ```
+ */
+function isImageFile(file, url) {
+    const fileType = resolveFileType(file, url);
+    return fileType.startsWith('image/');
+}
+
+export { isImageFile, resolveFileType };

package/_internal/InputCheck/InputCheck.d.ts

@@ -20,9 +20,23 @@ export interface InputCheckProps extends Omit<NativeElementPropsWithoutKeyAndRef
      * @default false
      */
     error?: boolean;
+    /**
+     * Whether the input check is focused.
+     * @default false
+     */
+    focused?: boolean;
+    /**
+     * Support text of input check.
+     */
+    hint?: string;
+    /**
+     * Whether the input check use segment style.
+     * @default false
+     */
+    segmentedStyle?: boolean;
     /**
      * The size of input check.
-     * @default 'medium'
+     * @default 'main'
      */
     size?: InputCheckSize;
 }

package/_internal/InputCheck/InputCheck.js

@@ -7,12 +7,16 @@ import cx from 'clsx';
  * The react component for `mezzanine` input check.
  */
 const InputCheck = forwardRef(function InputCheck(props, ref) {
-    const { children, className, control, disabled, error, htmlFor, size = 'medium', ...rest } = props;
+    const { children, className, control, disabled, error, focused, hint, htmlFor, segmentedStyle = false, size = 'main', ...rest } = props;
     return (jsxs("label", { ...rest, ref: ref, className: cx(inputCheckClasses.host, inputCheckClasses.size(size), {
             [inputCheckClasses.disabled]: disabled,
             [inputCheckClasses.error]: error,
+            [inputCheckClasses.segmented]: segmentedStyle,
             [inputCheckClasses.withLabel]: !!children,
-        }, className), htmlFor: htmlFor, children: [jsx("span", { className: inputCheckClasses.control, children: control }), children && jsx("span", { className: inputCheckClasses.label, children: children })] }));
+        }, className), htmlFor: htmlFor, children: [jsx("span", { className: cx(inputCheckClasses.control, {
+                    [inputCheckClasses.controlFocused]: focused,
+                    [inputCheckClasses.controlSegmented]: segmentedStyle,
+                }), children: control }), children && (jsxs("span", { className: inputCheckClasses.label, children: [children, hint && jsx("span", { className: inputCheckClasses.hint, children: hint })] }))] }));
 });
 
 export { InputCheck as default };