@mezzanine-ui/react 1.0.0-rc.6 → 1.0.0-rc.7

package/Radio/Radio.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext } from 'react';
+import { forwardRef, useContext, useRef, useCallback } from 'react';
 import { radioClasses } from '@mezzanine-ui/core/radio';
 import InputCheck from '../_internal/InputCheck/InputCheck.js';
 import { useRadioControlValue } from '../Form/useRadioControlValue.js';
@@ -56,13 +56,27 @@ const Radio = forwardRef(function Radio(props, ref) {
         value,
     });
     const size = (_a = sizeProp !== null && sizeProp !== void 0 ? sizeProp : sizeFromGroup) !== null && _a !== void 0 ? _a : 'main';
+    const radioInputRef = useRef(null);
+    const textInputRef = useRef(null);
+    const handleRadioChange = useCallback((event) => {
+        var _a;
+        onChange(event);
+        if (withInputConfig && !withInputConfig.disabled) {
+            (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [onChange, withInputConfig]);
     return (jsxs("div", { ref: ref, className: cx(radioClasses.wrapper, className), children: [jsx(InputCheck, { ...rest, control: jsxs("span", { className: cx(radioClasses.host, radioClasses.size(size), {
                         [radioClasses.segmented]: type === 'segment',
                         [radioClasses.checked]: checked,
                         [radioClasses.error]: error,
                     }), children: [type === 'segment' && (jsxs("span", { className: cx(radioClasses.segmentedContainer, {
                                 [radioClasses.segmentedContainerWithIconText]: !!children && !!icon,
-                            }), children: [icon && jsx(Icon, { icon: icon, size: 16 }), children] })), jsx("input", { ...restInputProps, "aria-checked": checked, "aria-disabled": disabled, checked: checked, disabled: disabled, id: inputId, onChange: onChange, name: name, type: "radio", value: value })] }), disabled: disabled, error: error, hint: hint, htmlFor: inputId, segmentedStyle: type === 'segment', size: size, children: type === 'radio' && children }), type === 'radio' && withInputConfig && (jsx("div", { style: { width: (_b = withInputConfig.width) !== null && _b !== void 0 ? _b : 120 }, children: jsx(Input, { ...withInputConfig, variant: "base", placeholder: (_c = withInputConfig.placeholder) !== null && _c !== void 0 ? _c : 'Placeholder' }) }))] }));
+                            }), children: [icon && jsx(Icon, { icon: icon, size: 16 }), children] })), jsx("input", { ...restInputProps, "aria-checked": checked, "aria-disabled": disabled, checked: checked, disabled: disabled, id: inputId, onChange: handleRadioChange, name: name, ref: radioInputRef, type: "radio", value: value })] }), disabled: disabled, error: error, hint: hint, htmlFor: inputId, segmentedStyle: type === 'segment', size: size, children: type === 'radio' && children }), type === 'radio' && withInputConfig && (jsx("div", { style: { width: (_b = withInputConfig.width) !== null && _b !== void 0 ? _b : 120 }, children: jsx(Input, { ...withInputConfig, inputRef: textInputRef, inputProps: {
+                        onClick: () => {
+                            var _a;
+                            (_a = radioInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+                        },
+                    }, variant: "base", placeholder: (_c = withInputConfig.placeholder) !== null && _c !== void 0 ? _c : 'Placeholder' }) }))] }));
 });
 
 export { Radio as default };

package/Table/Table.js

@@ -244,7 +244,7 @@ function TableInner(props, ref) {
         pagination: pagination || undefined,
         pinnable: pinnableState,
         resizable,
-        rowState,
+        rowState: rowState,
         rowHeight,
         scroll,
         scrollContainerRef,

package/TimePicker/TimePicker.js

@@ -204,7 +204,7 @@ const TimePicker = forwardRef(function TimePicker(props, ref) {
         }
     };
     const suffixIcon = (jsx(Icon, { "aria-label": "Open time picker", icon: ClockIcon, onClick: readOnly ? undefined : onIconClick }));
-    return (jsxs(Fragment, { children: [jsx(PickerTrigger, { ...restTriggerProps, ref: triggerComposedRef, className: className, clearable: clearable, disabled: disabled, error: error, format: resolvedFormat, fullWidth: fullWidth, inputProps: resolvedInputProps, inputRef: inputRef, hoverValue: open && !inputValue && pendingValue
+    return (jsxs(Fragment, { children: [jsx(PickerTrigger, { ...restTriggerProps, ref: triggerComposedRef, className: className, clearable: clearable, disabled: disabled, error: error, forceShowClearable: !!internalValue, format: resolvedFormat, fullWidth: fullWidth, hideSuffixWhenClearable: clearable, inputProps: resolvedInputProps, inputRef: inputRef, hoverValue: open && !inputValue && pendingValue
                     ? ((_b = formatToString(locale, pendingValue, resolvedFormat)) !== null && _b !== void 0 ? _b : undefined)
                     : undefined, onChange: (e) => {
                     const val = e.target.value;

package/TimeRangePicker/TimeRangePicker.js

@@ -150,7 +150,7 @@ const TimeRangePicker = forwardRef(function TimeRangePicker(props, ref) {
     });
     /** Suffix icon */
     const suffixIcon = (jsx(Icon, { "aria-label": "Open time picker", icon: ClockIcon, onClick: readOnly ? undefined : onIconClick }));
-    return (jsxs(Fragment, { children: [jsx(RangePickerTrigger, { className: className, clearable: clearable, disabled: disabled, error: error, errorMessagesFrom: errorMessagesFrom, errorMessagesTo: errorMessagesTo, format: resolvedFormat, fullWidth: fullWidth, inputFromPlaceholder: inputFromPlaceholder, inputFromProps: inputFromProps, inputFromRef: inputFromRef, inputFromValue: inputFromValue, inputToPlaceholder: inputToPlaceholder, inputToProps: inputToProps, inputToRef: inputToRef, inputToValue: inputToValue, onClear: onClearHandler, onFromFocus: onFromFocusHandler, onIconClick: onIconClick, onInputFromChange: onInputFromChange, onInputToChange: onInputToChange, onToFocus: onToFocusHandler, prefix: prefix, readOnly: readOnly, ref: triggerComposedRef, required: required, size: size, suffixActionIcon: suffixIcon, validateFrom: validateFrom, validateTo: validateTo }), focusedInput && (jsx(TimePickerPanel, { anchor: panelAnchor, fadeProps: fadeProps, hideHour: hideHour, hideMinute: hideMinute, hideSecond: hideSecond, hourStep: hourStep, minuteStep: minuteStep, onChange: onPanelChange, onCancel: onCancel, onConfirm: onConfirm, open: open, popperProps: popperProps, ref: panelRef, secondStep: secondStep, value: panelValue }))] }));
+    return (jsxs(Fragment, { children: [jsx(RangePickerTrigger, { className: className, clearable: clearable, disabled: disabled, error: error, errorMessagesFrom: errorMessagesFrom, errorMessagesTo: errorMessagesTo, forceShowClearable: internalValue.some(Boolean), format: resolvedFormat, fullWidth: fullWidth, hideSuffixWhenClearable: clearable, inputFromPlaceholder: inputFromPlaceholder, inputFromProps: inputFromProps, inputFromRef: inputFromRef, inputFromValue: inputFromValue, inputToPlaceholder: inputToPlaceholder, inputToProps: inputToProps, inputToRef: inputToRef, inputToValue: inputToValue, onClear: onClearHandler, onFromFocus: onFromFocusHandler, onIconClick: onIconClick, onInputFromChange: onInputFromChange, onInputToChange: onInputToChange, onToFocus: onToFocusHandler, prefix: prefix, readOnly: readOnly, ref: triggerComposedRef, required: required, size: size, suffixActionIcon: suffixIcon, validateFrom: validateFrom, validateTo: validateTo }), focusedInput && (jsx(TimePickerPanel, { anchor: panelAnchor, fadeProps: fadeProps, hideHour: hideHour, hideMinute: hideMinute, hideSecond: hideSecond, hourStep: hourStep, minuteStep: minuteStep, onChange: onPanelChange, onCancel: onCancel, onConfirm: onConfirm, open: open, popperProps: popperProps, ref: panelRef, secondStep: secondStep, value: panelValue }))] }));
 });
 
 export { TimeRangePicker as default };

package/Toggle/Toggle.d.ts

@@ -40,7 +40,7 @@ export interface ToggleProps extends Omit<NativeElementPropsWithoutKeyAndRef<'di
     supportingText?: string;
 }
 /**
- * 切換開關元件（亦以 `Switch` 名稱匯出），用於表示開／關二元狀態。
+ * 切換開關元件，用於表示開／關二元狀態。
  *
  * 支援受控（`checked` + `onChange`）與非受控（`defaultChecked`）兩種用法；
  * `label` 顯示於開關右側，`supportingText` 顯示於 label 下方作為輔助說明。

package/Toggle/Toggle.js

@@ -8,7 +8,7 @@ import { FormControlContext } from '../Form/FormControlContext.js';
 import cx from 'clsx';
 
 /**
- * 切換開關元件（亦以 `Switch` 名稱匯出），用於表示開／關二元狀態。
+ * 切換開關元件，用於表示開／關二元狀態。
  *
  * 支援受控（`checked` + `onChange`）與非受控（`defaultChecked`）兩種用法；
  * `label` 顯示於開關右側，`supportingText` 顯示於 label 下方作為輔助說明。

package/Upload/Upload.d.ts

@@ -2,6 +2,7 @@ import { type UploadItemStatus, type UploadMode, type UploadSize } from '@mezzan
 import { type ReactNode } from 'react';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import type { UploaderProps } from './Uploader';
+import type { UploadPictureCardAriaLabels } from './UploadPictureCard';
 export interface UploadFile {
     /**
      * The file object.
@@ -51,13 +52,17 @@ export interface UploadProps extends Omit<NativeElementPropsWithoutKeyAndRef<'di
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Hints passed into the Uploader dropzone area. Only visible in dropzone modes (`list`, `card-wall`).
+     */
+    dropzoneHints?: UploaderProps['hints'];
     /**
      * Controlled file list for the upload component.
      * Provide this along with `onChange` to fully control the file state.
      */
     files?: UploadFile[];
     /**
-     * Array of hints to display with the upload component.
+     * Array of hints displayed outside the uploader area. Visible in all modes.
      */
     hints?: UploaderProps['hints'];
     /**
@@ -77,11 +82,6 @@ export interface UploadProps extends Omit<NativeElementPropsWithoutKeyAndRef<'di
      * The react ref passed to input element.
      */
     inputRef?: UploaderProps['inputRef'];
-    /**
-     * Whether to fill the width of the container.
-     * @default false
-     */
-    isFillWidth?: boolean;
     /**
      * Maximum number of files allowed to upload.
      * If exceeded, the excess files will be ignored.
@@ -89,7 +89,8 @@ export interface UploadProps extends Omit<NativeElementPropsWithoutKeyAndRef<'di
     maxFiles?: number;
     /**
      * The display mode for the upload component.
-     * - 'list': Display files as a list using UploadItem
+     * - 'list': Display files as a list using UploadItem (with dropzone)
+     * - 'basic-list': Display files as a list without drag-and-drop
      * - 'button-list': Display uploader as a button with files in list format
      * - 'cards': Display image files as picture cards using UploadPictureCard
      * - 'card-wall': Display uploader at top with image files as picture cards below
@@ -129,6 +130,11 @@ export interface UploadProps extends Omit<NativeElementPropsWithoutKeyAndRef<'di
      * This will be used when a file's status becomes 'error' and no errorIcon is provided.
      */
     errorIcon?: ReactNode;
+    /**
+     * Aria labels passed to picture cards in `cards` / `card-wall` mode.
+     * Useful for customizing text such as "Click to Replace".
+     */
+    ariaLabels?: UploadPictureCardAriaLabels;
     /**
      * Fired when files list changes.
      */

package/Upload/Upload.js

@@ -1,21 +1,25 @@
 'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useRef, useEffect, useMemo, useCallback } from 'react';
+import { forwardRef, useRef, useState, useEffect, useMemo, useCallback } from 'react';
 import { defaultUploadPictureCardErrorMessage, uploadClasses } from '@mezzanine-ui/core/upload';
 import { DangerousFilledIcon, InfoFilledIcon } from '@mezzanine-ui/icons';
+import { isImageFile } from './upload-utils.js';
 import Uploader from './Uploader.js';
 import UploadItem from './UploadItem.js';
-import { isImageFile } from './upload-utils.js';
 import UploadPictureCard from './UploadPictureCard.js';
 import Icon from '../Icon/Icon.js';
+import MediaPreviewModal from '../Modal/MediaPreviewModal.js';
 import cx from 'clsx';
 
 const Upload = forwardRef(function Upload(props, ref) {
-    const { accept, className, disabled = false, mode = 'list', size = 'main', showFileSize = true, files: controlledFiles = [], onUpload, onDelete, onReload, onDownload, onZoomIn, onChange, id, name, multiple = false, maxFiles, hints, uploaderLabel, uploaderIcon, inputRef, inputProps, onMaxFilesExceeded, errorMessage, errorIcon, ...rest } = props;
+    var _a, _b;
+    const { accept, className, disabled = false, dropzoneHints, mode = 'list', size = 'main', showFileSize = true, files: controlledFiles = [], onUpload, onDelete, onReload, onDownload, onZoomIn, onChange, id, name, multiple = false, maxFiles, hints, uploaderLabel, uploaderIcon, inputRef, inputProps, onMaxFilesExceeded, errorMessage, errorIcon, ariaLabels, ...rest } = props;
     const files = controlledFiles;
     const filesRef = useRef(files);
     const replaceFileIdRef = useRef(null);
     const replaceInputRef = useRef(null);
+    const [previewFile, setPreviewFile] = useState(null);
+    const [isPreviewOpen, setIsPreviewOpen] = useState(false);
     useEffect(() => {
         filesRef.current = files;
     }, [files]);
@@ -224,10 +228,34 @@ const Upload = forwardRef(function Upload(props, ref) {
     }, [findFileById, onDownload]);
     const handleZoomIn = useCallback((fileId) => {
         const file = findFileById(fileId);
-        if (file && file.file) {
+        if (!file)
+            return;
+        setPreviewFile(file);
+        setIsPreviewOpen(true);
+        if (file.file) {
             onZoomIn === null || onZoomIn === void 0 ? void 0 : onZoomIn(fileId, file.file);
         }
     }, [findFileById, onZoomIn]);
+    const [previewObjectUrl, setPreviewObjectUrl] = useState(null);
+    useEffect(() => {
+        if (!previewFile || previewFile.url || !previewFile.file) {
+            setPreviewObjectUrl(null);
+            return;
+        }
+        if (!isImageFile(previewFile.file, previewFile.url)) {
+            setPreviewObjectUrl(null);
+            return;
+        }
+        const url = URL.createObjectURL(previewFile.file);
+        setPreviewObjectUrl(url);
+        return () => {
+            URL.revokeObjectURL(url);
+        };
+    }, [previewFile]);
+    const previewIsImage = previewFile
+        ? isImageFile(previewFile.file, previewFile.url)
+        : false;
+    const previewImageSrc = (_b = (_a = previewFile === null || previewFile === void 0 ? void 0 : previewFile.url) !== null && _a !== void 0 ? _a : previewObjectUrl) !== null && _b !== void 0 ? _b : '';
     const { imageFiles, nonImageFiles } = useMemo(() => {
         const images = [];
         const nonImages = [];
@@ -246,19 +274,23 @@ const Upload = forwardRef(function Upload(props, ref) {
     const uploaderConfig = useMemo(() => {
         const config = {
             list: {
-                isFillWidth: true,
+                mode: 'dropzone',
+                type: 'base',
+            },
+            'basic-list': {
+                mode: 'basic',
                 type: 'base',
             },
             'button-list': {
                 type: 'button',
             },
             cards: {
+                mode: 'basic',
                 type: 'base',
-                isFillWidth: false,
             },
             'card-wall': {
+                mode: 'basic',
                 type: 'base',
-                isFillWidth: false,
             },
         };
         return config[mode];
@@ -266,7 +298,7 @@ const Upload = forwardRef(function Upload(props, ref) {
     const topUploaderConfig = useMemo(() => {
         if (mode === 'card-wall') {
             return {
-                isFillWidth: true,
+                mode: 'dropzone',
                 type: 'base',
             };
         }
@@ -296,18 +328,19 @@ const Upload = forwardRef(function Upload(props, ref) {
         handleDownload,
         handleReload,
     ]);
-    const uploaderElement = (jsx(Uploader, { accept: accept, disabled: effectiveDisabled, id: id, name: name, multiple: multiple, label: uploaderLabel, icon: uploaderIcon, inputRef: inputRef, inputProps: inputProps, hints: hints, onUpload: handleUpload, ...uploaderConfig }));
-    const topUploaderElement = topUploaderConfig ? (jsx(Uploader, { accept: accept, disabled: effectiveDisabled, id: id ? `${id}-top` : undefined, name: name, multiple: multiple, label: uploaderLabel, icon: uploaderIcon, inputRef: inputRef, inputProps: inputProps, hints: hints, onUpload: handleUpload, ...topUploaderConfig })) : null;
+    const uploaderElement = (jsx(Uploader, { accept: accept, disabled: effectiveDisabled, id: id, name: name, multiple: multiple, label: uploaderLabel, icon: uploaderIcon, inputRef: inputRef, inputProps: inputProps, hints: uploaderConfig.mode === 'dropzone' ? dropzoneHints : undefined, onUpload: handleUpload, ...uploaderConfig }));
+    const topUploaderElement = topUploaderConfig ? (jsx(Uploader, { accept: accept, disabled: effectiveDisabled, id: id ? `${id}-top` : undefined, name: name, multiple: multiple, label: uploaderLabel, icon: uploaderIcon, inputRef: inputRef, inputProps: inputProps, hints: dropzoneHints, onUpload: handleUpload, ...topUploaderConfig })) : null;
+    // When a top uploader exists (card-wall mode), the inline card uploader is not needed.
+    const inlineCardUploaderElement = topUploaderElement ? null : uploaderElement;
     const hintsElement = useMemo(() => {
-        if (!hints ||
-            hints.length === 0 ||
-            mode === 'list' ||
-            mode === 'card-wall')
+        if (!hints || hints.length === 0)
             return null;
-        const hintsClassName = mode === 'cards' ? uploadClasses.fillWidthHints : uploadClasses.hints;
+        const hintsClassName = mode === 'list' || mode === 'card-wall' || mode === 'cards'
+            ? uploadClasses.fillWidthHints
+            : uploadClasses.hints;
         return (jsx("ul", { className: hintsClassName, children: hints.map((hint) => (jsxs("li", { className: uploadClasses.hint(hint.type || 'info'), children: [jsx(Icon, { icon: hint.type === 'info' ? InfoFilledIcon : DangerousFilledIcon, color: hint.type === 'info' ? 'info' : 'error', size: 14 }), hint.label] }, hint.label))) }));
     }, [hints, mode]);
-    return (jsxs("div", { ref: ref, className: cx(uploadClasses.host, className, mode === 'cards' && uploadClasses.hostCards), ...rest, children: [topUploaderElement, !shouldUsePictureCard && (jsxs("div", { className: uploadClasses.uploadButtonList, children: [uploaderElement, mode === 'button-list' && hintsElement] })), jsxs("div", { className: cx(uploadClasses.uploadList, shouldUsePictureCard && uploadClasses.uploadListCards), children: [shouldUsePictureCard && (jsxs(Fragment, { children: [imageFiles.map((uploadFile) => (jsx(UploadPictureCard, { file: uploadFile.file, url: uploadFile.url, id: uploadFile.id, status: uploadFile.status, size: size, disabled: disabled, errorMessage: uploadFile.errorMessage, onDelete: () => handleDelete(uploadFile.id), onReload: () => handleReload(uploadFile.id), ...(!isSingleFileCardMode && {
+    return (jsxs("div", { ref: ref, className: cx(uploadClasses.host, className, mode === 'cards' && uploadClasses.hostCards), ...rest, children: [topUploaderElement, mode === 'card-wall' && hintsElement, !shouldUsePictureCard && (jsxs("div", { className: uploadClasses.uploadButtonList, children: [uploaderElement, hintsElement] })), jsxs("div", { className: cx(uploadClasses.uploadList, shouldUsePictureCard && uploadClasses.uploadListCards), children: [shouldUsePictureCard && (jsxs(Fragment, { children: [imageFiles.map((uploadFile) => (jsx(UploadPictureCard, { ariaLabels: ariaLabels, file: uploadFile.file, url: uploadFile.url, id: uploadFile.id, status: uploadFile.status, size: size, disabled: disabled, errorMessage: uploadFile.errorMessage, onDelete: () => handleDelete(uploadFile.id), onReload: () => handleReload(uploadFile.id), ...(!isSingleFileCardMode && {
                                     onDownload: () => handleDownload(uploadFile.id),
                                     onZoomIn: () => handleZoomIn(uploadFile.id),
                                 }), ...(isSingleFileCardMode && {
@@ -317,17 +350,19 @@ const Upload = forwardRef(function Upload(props, ref) {
                                         replaceFileIdRef.current = uploadFile.id;
                                         (_a = replaceInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
                                     },
-                                }) }, uploadFile.id))), !isSingleFileCardMode && uploaderElement, isSingleFileCardMode &&
+                                }) }, uploadFile.id))), nonImageFiles.map((uploadFile) => (jsx(UploadPictureCard, { ariaLabels: ariaLabels, file: uploadFile.file, url: uploadFile.url, id: uploadFile.id, status: uploadFile.status, size: size, disabled: disabled, errorMessage: uploadFile.errorMessage, onDelete: () => handleDelete(uploadFile.id), onReload: () => handleReload(uploadFile.id), ...(!isSingleFileCardMode && {
+                                    onDownload: () => handleDownload(uploadFile.id),
+                                }) }, uploadFile.id))), !isSingleFileCardMode && inlineCardUploaderElement, isSingleFileCardMode &&
                                 imageFiles.length === 0 &&
-                                uploaderElement, isSingleFileCardMode && (jsx("input", { ref: replaceInputRef, accept: accept, style: { display: 'none' }, type: "file", onChange: (e) => {
+                                inlineCardUploaderElement, isSingleFileCardMode && (jsx("input", { ref: replaceInputRef, accept: accept, style: { display: 'none' }, type: "file", onChange: (e) => {
                                     var _a;
                                     const selectedFiles = Array.from((_a = e.target.files) !== null && _a !== void 0 ? _a : []);
                                     e.target.value = '';
                                     if (selectedFiles.length)
                                         handleUpload(selectedFiles);
-                                } }))] })), nonImageFiles.length > 0 && nonImageFiles.map(renderUploadItem), !shouldUsePictureCard &&
+                                } }))] })), !shouldUsePictureCard && nonImageFiles.length > 0 && nonImageFiles.map(renderUploadItem), !shouldUsePictureCard &&
                         imageFiles.length > 0 &&
-                        imageFiles.map(renderUploadItem)] }), mode === 'cards' && hintsElement] }));
+                        imageFiles.map(renderUploadItem)] }), mode === 'cards' && hintsElement, previewFile && previewIsImage && previewImageSrc && (jsx(MediaPreviewModal, { open: isPreviewOpen, onClose: () => setIsPreviewOpen(false), mediaItems: [previewImageSrc] }))] }));
 });
 
 export { Upload as default };

package/Upload/UploadItem.js

@@ -91,6 +91,8 @@ const UploadItem = forwardRef(function UploadItem(props, ref) {
     const isFinished = useMemo(() => {
         return /done|error/.test(status);
     }, [status]);
+    const shouldShowFileSize = Boolean(showFileSize && isFinished && fileSize);
+    const shouldSingleLineCenter = Boolean(type === 'thumbnail' && fileName && !shouldShowFileSize);
     useEffect(() => {
         if (!props.file && !props.url) {
             console.warn('UploadItem: Both `file` and `url` props are missing. At least one should be provided to display the upload item.');
@@ -112,7 +114,8 @@ const UploadItem = forwardRef(function UploadItem(props, ref) {
                     [uploadItemClasses.alignCenter]: status !== 'done',
                     [uploadItemClasses.error]: status === 'error',
                     [uploadItemClasses.disabled]: disabled,
-                }, className), children: [jsxs("div", { ...rest, "aria-disabled": disabled, className: uploadItemClasses.container, role: "group", tabIndex: disabled ? -1 : 0, children: [jsxs("div", { className: uploadItemClasses.contentWrapper, children: [jsx("div", { className: uploadItemClasses.icon, children: itemIcon }), jsxs("div", { className: uploadItemClasses.content, children: [jsx(Tooltip, { title: isTextTruncated ? fileName : undefined, options: { placement: 'bottom' }, children: ({ onMouseEnter, onMouseLeave, ref: tooltipRef }) => (jsx(Typography, { ref: mergeRefs(tooltipRef), className: uploadItemClasses.name, ellipsis: true, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: fileName })) }), showFileSize && isFinished && fileSize && (jsx(Typography, { className: uploadItemClasses.fontSize, children: fileSize }))] })] }), jsxs("div", { className: uploadItemClasses.actions, children: [status === 'loading' && (jsxs(Fragment, { children: [loadingIcon, jsx(ClearActions, { onClick: onCancel, className: uploadItemClasses.closeIcon, role: "button" })] })), status === 'done' && !disabled && (jsx(Icon, { icon: DownloadIcon, size: 16, className: uploadItemClasses.downloadIcon, onClick: onDownload })), status === 'error' && !disabled && (jsx(Icon, { icon: ResetIcon, size: 16, className: uploadItemClasses.resetIcon, onClick: onReload }))] })] }), isFinished && !disabled && (jsx("div", { className: uploadItemClasses.deleteContent, children: jsx(Icon, { icon: TrashIcon, size: 16, className: uploadItemClasses.deleteIcon, onClick: onDelete }) }))] }), status === 'error' && errorMessage && (jsxs("div", { className: uploadItemClasses.errorMessage, children: [jsx(Icon, { icon: errorIcon !== null && errorIcon !== void 0 ? errorIcon : DangerousFilledIcon, size: 14, color: "error", className: uploadItemClasses.errorIcon }), jsx(Typography, { color: "text-error", variant: "caption", className: uploadItemClasses.errorMessageText, children: errorMessage })] }))] }));
+                    [uploadItemClasses.singleLineContent]: shouldSingleLineCenter,
+                }, className), children: [jsxs("div", { ...rest, "aria-disabled": disabled, className: uploadItemClasses.container, role: "group", tabIndex: disabled ? -1 : 0, children: [jsxs("div", { className: uploadItemClasses.contentWrapper, children: [jsx("div", { className: uploadItemClasses.icon, children: itemIcon }), jsxs("div", { className: uploadItemClasses.content, children: [jsx(Tooltip, { title: isTextTruncated ? fileName : undefined, options: { placement: 'bottom' }, children: ({ onMouseEnter, onMouseLeave, ref: tooltipRef }) => (jsx(Typography, { ref: mergeRefs(tooltipRef), className: uploadItemClasses.name, ellipsis: true, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: fileName })) }), shouldShowFileSize && (jsx(Typography, { className: uploadItemClasses.fontSize, children: fileSize }))] })] }), jsxs("div", { className: uploadItemClasses.actions, children: [status === 'loading' && (jsxs(Fragment, { children: [loadingIcon, jsx(ClearActions, { onClick: onCancel, className: uploadItemClasses.closeIcon, role: "button" })] })), status === 'done' && !disabled && (jsx(Icon, { icon: DownloadIcon, size: 16, className: uploadItemClasses.downloadIcon, onClick: onDownload })), status === 'error' && !disabled && (jsx(Icon, { icon: ResetIcon, size: 16, className: uploadItemClasses.resetIcon, onClick: onReload }))] })] }), isFinished && !disabled && (jsx("div", { className: uploadItemClasses.deleteContent, children: jsx(Icon, { icon: TrashIcon, size: 16, className: uploadItemClasses.deleteIcon, color: "neutral-solid", onClick: onDelete }) }))] }), status === 'error' && errorMessage && (jsxs("div", { className: uploadItemClasses.errorMessage, children: [jsx(Icon, { icon: errorIcon !== null && errorIcon !== void 0 ? errorIcon : DangerousFilledIcon, size: 14, color: "error", className: uploadItemClasses.errorIcon }), jsx(Typography, { color: "text-error", variant: "caption", className: uploadItemClasses.errorMessageText, children: errorMessage })] }))] }));
 });
 
 export { UploadItem as default };

package/Upload/UploadPictureCard.d.ts

@@ -91,6 +91,11 @@ export interface UploadPictureCardProps extends NativeElementPropsWithoutKeyAndR
      * Error icon to display when status is 'error'.
      */
     errorIcon?: IconDefinition;
+    /**
+     * Whether the upload picture card is readable.
+     * @default false
+     */
+    readable?: boolean;
     /**
      * When delete icon is clicked, this callback will be fired.
      */

package/Upload/UploadPictureCard.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useMemo, useState, useEffect } from 'react';
+import { forwardRef, useCallback, useMemo, useState, useEffect } from 'react';
 import { uploadPictureCardClasses } from '@mezzanine-ui/core/upload';
 import { ImageIcon, FileIcon, ZoomInIcon, DownloadIcon, TrashIcon, ResetIcon } from '@mezzanine-ui/icons';
 import Button from '../Button/Button.js';
@@ -16,7 +16,7 @@ import cx from 'clsx';
  */
 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, onDownload, onReload, onReplace, onZoomIn, ...rest } = props;
+    const { ariaLabels, className, file, url, status = 'loading', imageFit = 'cover', size = 'main', disabled = false, errorMessage, errorIcon, readable = false, onDelete, onDownload, onReload, onReplace, onZoomIn, ...rest } = props;
     const defaultAriaLabels = {
         cancelUpload: 'Cancel upload',
         clickToReplace: 'Click to Replace',
@@ -27,6 +27,9 @@ const UploadPictureCard = forwardRef(function UploadPictureCard(props, ref) {
         zoomIn: 'Zoom in image',
     };
     const labels = { ...defaultAriaLabels, ...ariaLabels };
+    const handleDelete = useCallback((e) => { e.stopPropagation(); onDelete === null || onDelete === void 0 ? void 0 : onDelete(e); }, [onDelete]);
+    const handleDownload = useCallback((e) => { e.stopPropagation(); onDownload === null || onDownload === void 0 ? void 0 : onDownload(e); }, [onDownload]);
+    const handleZoomIn = useCallback((e) => { e.stopPropagation(); onZoomIn === null || onZoomIn === void 0 ? void 0 : onZoomIn(e); }, [onZoomIn]);
     const isImage = useMemo(() => {
         return isImageFile(file, url);
     }, [file, url]);
@@ -94,17 +97,17 @@ const UploadPictureCard = forwardRef(function UploadPictureCard(props, ref) {
         console.warn('UploadPictureCard: minor size is not supported for non-image files');
         return null;
     }
-    return (jsx("div", { "aria-disabled": disabled, className: cx(uploadPictureCardClasses.host, uploadPictureCardClasses.size(size), disabled && uploadPictureCardClasses.disabled, onReplace && status === 'done' && uploadPictureCardClasses.replaceMode, className), onClick: onReplace && status === 'done' ? onReplace : undefined, onKeyDown: onReplace && status === 'done'
+    return (jsx("div", { "aria-disabled": disabled, className: cx(uploadPictureCardClasses.host, uploadPictureCardClasses.size(size), disabled && uploadPictureCardClasses.disabled, readable && uploadPictureCardClasses.readable, !readable && onReplace && status === 'done' && uploadPictureCardClasses.replaceMode, className), onClick: !readable && onReplace && status === 'done' ? onReplace : undefined, onKeyDown: !readable && onReplace && status === 'done'
             ? (e) => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
                     e.currentTarget.click();
                 }
             }
-            : undefined, 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: {
+            : undefined, ref: ref, role: "group", tabIndex: disabled || readable ? -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(Spin, { loading: true, size: "sub" }) })] })), status === 'done' && size !== 'minor' && (jsxs(Fragment, { children: [jsx("div", { className: uploadPictureCardClasses.tools, children: jsxs("div", { className: uploadPictureCardClasses.toolsContent, children: [onZoomIn && (jsx(Button, { variant: "base-secondary", size: "minor", icon: ZoomInIcon, iconType: "icon-only", onClick: onZoomIn, "aria-label": labels.zoomIn })), onDownload && (jsx(Button, { variant: "base-secondary", size: "minor", iconType: "icon-only", icon: DownloadIcon, onClick: onDownload, "aria-label": labels.download })), jsx(Button, { variant: "base-secondary", size: "minor", iconType: "icon-only", icon: TrashIcon, onClick: onDelete, "aria-label": labels.delete })] }) }), onReplace && (jsx("span", { className: uploadPictureCardClasses.replaceLabel, children: labels.clickToReplace }))] })), 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", iconType: "icon-only", icon: ResetIcon, onClick: onReload, "aria-label": labels.reload }), jsx(Button, { variant: "base-secondary", size: "minor", iconType: "icon-only", icon: TrashIcon, onClick: onDelete, "aria-label": labels.delete })] }) }) })), size === 'minor' && (jsx(Icon, { icon: ZoomInIcon, color: "fixed-light", size: 24 }))] })] }) }));
+                    } })), 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' && !readable && (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(Spin, { loading: true, size: "sub" }) })] })), status === 'done' && size !== 'minor' && !readable && (jsxs(Fragment, { children: [jsx("div", { className: uploadPictureCardClasses.tools, children: jsxs("div", { className: uploadPictureCardClasses.toolsContent, children: [onZoomIn && (jsx(Button, { variant: "base-secondary", size: "minor", icon: ZoomInIcon, iconType: "icon-only", onClick: handleZoomIn, "aria-label": labels.zoomIn })), onDownload && (jsx(Button, { variant: "base-secondary", size: "minor", iconType: "icon-only", icon: DownloadIcon, onClick: handleDownload, "aria-label": labels.download })), jsx(Button, { variant: "base-secondary", size: "minor", iconType: "icon-only", icon: TrashIcon, onClick: handleDelete, "aria-label": labels.delete })] }) }), onReplace && (jsx("span", { className: uploadPictureCardClasses.replaceLabel, children: labels.clickToReplace }))] })), status === 'error' && size !== 'minor' && !readable && (jsx(Fragment, { children: jsx("div", { className: uploadPictureCardClasses.tools, children: jsxs("div", { className: uploadPictureCardClasses.toolsContent, children: [jsx(Button, { variant: "base-secondary", size: "minor", iconType: "icon-only", icon: ResetIcon, onClick: onReload, "aria-label": labels.reload }), jsx(Button, { variant: "base-secondary", size: "minor", iconType: "icon-only", icon: TrashIcon, onClick: onDelete, "aria-label": labels.delete })] }) }) })), size === 'minor' && !readable && (jsx(Icon, { icon: ZoomInIcon, color: "fixed-light", size: 24 }))] })] }) }));
 });
 
 export { UploadPictureCard as default };

package/Upload/Uploader.d.ts

@@ -1,5 +1,5 @@
 import { ChangeEventHandler, ReactNode, Ref } from 'react';
-import { type UploaderHintType, type UploadPictureControl, type UploadType } from '@mezzanine-ui/core/upload';
+import { type UploaderHintType, type UploaderMode, 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'}`> & {
@@ -42,7 +42,7 @@ export interface UploaderLabel {
      */
     error?: string;
     /**
-     * Label text for "Click to upload" when isFillWidth is true.
+     * Label text for "Click to upload" in `mode="dropzone"`.
      * @default 'Click to upload'
      */
     clickToUpload?: string;
@@ -87,20 +87,31 @@ export interface UploaderProps extends Omit<NativeElementPropsWithoutKeyAndRef<'
      * @example 'image/*', '.pdf,.doc,.docx'
      */
     accept?: string;
+    /**
+     * Provide `controllerRef` if you need detail data of file.
+     */
+    controllerRef?: Ref<UploadPictureControl | null>;
     /**
      * Whether the input is disabled.
      * @default false
      */
     disabled?: boolean;
     /**
-     * The id of input element.
+     * Array of hints to display outside the uploader (below the label element).
      */
-    id?: string;
+    externalHints?: UploaderHint[];
     /**
-     * Whether to fill the width of the container.
-     * @default false
+     * Array of hints to display with the upload component.
+     */
+    hints?: UploaderHint[];
+    /**
+     * Icon configuration for different actions and states.
      */
-    isFillWidth?: boolean;
+    icon?: UploaderIcon;
+    /**
+     * The id of input element.
+     */
+    id?: string;
     /**
      * 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.
@@ -110,37 +121,25 @@ export interface UploaderProps extends Omit<NativeElementPropsWithoutKeyAndRef<'
      * The react ref passed to input element.
      */
     inputRef?: React.Ref<HTMLInputElement>;
+    /**
+     * Label configuration for different states.
+     */
+    label?: UploaderLabel;
     /**
      * The name attribute of the input element.
      */
     name?: string;
+    /**
+     * The mode for upload component.
+     * @default 'basic'
+     * @example 'basic' | 'dropzone'
+     */
+    mode?: UploaderMode;
     /**
      * 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.
      */
@@ -150,9 +149,11 @@ export interface UploaderProps extends Omit<NativeElementPropsWithoutKeyAndRef<'
      */
     onUpload?: (files: File[]) => void;
     /**
-     * Fired after user deletes file.
+     * The type for upload component.
+     * @default 'base'
+     * @example 'base' | 'button'
      */
-    onDelete?: () => void;
+    type?: UploadType;
 }
 /**
  * The react component for `mezzanine` uploader.

package/Upload/Uploader.js

@@ -2,7 +2,7 @@
 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 { UploadIcon, InfoFilledIcon, DangerousFilledIcon } from '@mezzanine-ui/icons';
 import Button from '../Button/Button.js';
 import Typography from '../Typography/Typography.js';
 import { composeRefs } from '../utils/composeRefs.js';
@@ -14,7 +14,7 @@ import cx from 'clsx';
  */
 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 { accept, className, controllerRef: _controllerRef, disabled = false, externalHints, id, hints, icon: iconConfig, inputProps, inputRef: inputRefProp, label: labelConfig, mode = 'basic', multiple = false, name, onChange: onChangeProp, onUpload, type, ...rest } = props;
     const { name: nameFromInputProps, id: idFromInputProps, ...restInputProps } = inputProps || {};
     // Generate unique id if not provided
     const generatedId = useId();
@@ -23,6 +23,7 @@ const Uploader = forwardRef(function Uploader(props, ref) {
     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 isDropzone = mode === 'dropzone';
     const handleChange = (event) => {
         if (onChangeProp) {
             onChangeProp(event);
@@ -98,7 +99,7 @@ const Uploader = forwardRef(function Uploader(props, ref) {
     }, [iconConfig]);
     const uploadLabel = (labelConfig === null || labelConfig === void 0 ? void 0 : labelConfig.uploadLabel)
         ? labelConfig === null || labelConfig === void 0 ? void 0 : labelConfig.uploadLabel
-        : isFillWidth
+        : isDropzone
             ? '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';
@@ -109,12 +110,12 @@ const Uploader = forwardRef(function Uploader(props, ref) {
             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" })] }) }));
+    return (jsxs(Fragment, { children: [jsx("label", { className: cx(uploaderClasses.host, type && uploaderClasses.type(type), type !== 'button' && isDropzone && 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'
+                            && isDropzone
+                            && 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'
+                            && !isDropzone
+                            && jsxs("div", { className: uploaderClasses.uploadContent, children: [uploadIcon, jsx(Typography, { className: uploaderClasses.uploadLabel, children: uploadLabel })] }), type === 'button'
+                            && (jsx(Button, { disabled: disabled, iconType: "leading", icon: UploadIcon, onClick: handleClickToUpload, children: jsx(Typography, { align: "center", color: "text-fixed-light", variant: "button-highlight", className: uploaderClasses.uploadButtonText, 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" })] }) }), externalHints && externalHints.length > 0 && (jsx("ul", { className: uploaderClasses.externalHints, children: externalHints.map((hint) => (jsxs("li", { className: uploaderClasses.externalHint(hint.type || 'info'), children: [jsx(Icon, { icon: hint.type === 'info' ? InfoFilledIcon : DangerousFilledIcon, color: hint.type === 'info' ? 'info' : 'error', size: 14 }), hint.label] }, hint.label))) }))] }));
 });
 
 export { Uploader as default };

package/index.d.ts

@@ -123,7 +123,7 @@ export type { CascaderOption, CascaderPanelProps, CascaderProps, CascaderSize, }
 export { default as Select, SelectControlContext, SelectTrigger, SelectTriggerTags, } from './Select';
 export type { SelectControl, SelectProps, SelectTriggerInputProps, SelectTriggerProps, SelectTriggerTagsProps, SelectValue, } from './Select';
 export { default as SelectionCard } from './SelectionCard';
-export type { SelectionCardProps, SelectionCardPropsBase } from './SelectionCard';
+export type { SelectionCardProps, SelectionCardPropsBase, } from './SelectionCard';
 export { default as Slider, useSlider } from './Slider';
 export type { RangeSliderProps, RangeSliderValue, SingleSliderProps, SingleSliderValue, SliderBaseProps, SliderComponentProps, SliderProps, SliderRect, SliderValue, UseRangeSliderProps, UseSingleSliderProps, UseSliderCommonProps, UseSliderProps, UseSliderResult, } from './Slider';
 export { default as Textarea } from './Textarea';
@@ -134,8 +134,8 @@ export { default as TimePicker, TimePickerPanel } from './TimePicker';
 export type { TimePickerPanelProps, TimePickerProps } from './TimePicker';
 export { default as TimeRangePicker, useTimeRangePickerValue, } from './TimeRangePicker';
 export type { TimeRangePickerProps, TimeRangePickerValue, UseTimeRangePickerValueProps, } from './TimeRangePicker';
-export { default as Switch } from './Toggle';
-export type { ToggleProps as SwitchProps, ToggleSize as SwitchSize, } from './Toggle';
+export { default as Toggle } from './Toggle';
+export type { ToggleProps, ToggleSize } from './Toggle';
 export { Upload, UploadItem, UploadPictureCard, Uploader } from './Upload';
 export type { UploadFile, UploadItemProps, UploadPictureCardProps, UploadProps, UploaderProps, } from './Upload';
 /**

package/index.js

@@ -116,7 +116,7 @@ export { default as TextField } from './TextField/TextField.js';
 export { default as TimePicker } from './TimePicker/TimePicker.js';
 export { default as TimePickerPanel } from './TimePicker/TimePickerPanel.js';
 export { default as TimeRangePicker } from './TimeRangePicker/TimeRangePicker.js';
-export { default as Switch } from './Toggle/Toggle.js';
+export { default as Toggle } from './Toggle/Toggle.js';
 export { default as Upload } from './Upload/Upload.js';
 export { default as UploadItem } from './Upload/UploadItem.js';
 export { default as UploadPictureCard } from './Upload/UploadPictureCard.js';