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

package/FilterArea/FilterLine.d.ts

@@ -7,5 +7,24 @@ export interface FilterLineProps extends Omit<NativeElementPropsWithoutKeyAndRef
      */
     children: ReactElement<FilterProps> | ReactElement<FilterProps>[];
 }
+/**
+ * 篩選器中的單行條件列，包含一或多個 Filter 欄位。
+ *
+ * 透過 Grid 排版將 Filter 子元件橫向排列；
+ * 需作為 FilterArea 的直接子元件使用。
+ *
+ * @example
+ * ```tsx
+ * import { Filter, FilterLine } from '@mezzanine-ui/react';
+ *
+ * <FilterLine>
+ *   <Filter span={2}>...</Filter>
+ *   <Filter span={3}>...</Filter>
+ * </FilterLine>
+ * ```
+ *
+ * @see {@link FilterArea} 管理多個 FilterLine 的容器元件
+ * @see {@link Filter} 包裝單一篩選欄位的元件
+ */
 declare const FilterLine: import("react").ForwardRefExoticComponent<FilterLineProps & import("react").RefAttributes<HTMLDivElement>>;
 export default FilterLine;

package/FilterArea/FilterLine.js

@@ -4,6 +4,25 @@ import { forwardRef, useMemo } from 'react';
 import { filterAreaClasses } from '@mezzanine-ui/core/filter-area';
 import cx from 'clsx';
 
+/**
+ * 篩選器中的單行條件列，包含一或多個 Filter 欄位。
+ *
+ * 透過 Grid 排版將 Filter 子元件橫向排列；
+ * 需作為 FilterArea 的直接子元件使用。
+ *
+ * @example
+ * ```tsx
+ * import { Filter, FilterLine } from '@mezzanine-ui/react';
+ *
+ * <FilterLine>
+ *   <Filter span={2}>...</Filter>
+ *   <Filter span={3}>...</Filter>
+ * </FilterLine>
+ * ```
+ *
+ * @see {@link FilterArea} 管理多個 FilterLine 的容器元件
+ * @see {@link Filter} 包裝單一篩選欄位的元件
+ */
 const FilterLine = forwardRef(function FilterLine(props, ref) {
     const { className, children, ...rest } = props;
     const lineClassName = useMemo(() => cx(filterAreaClasses.line, className), [className]);

package/Input/SpinnerButton/SpinnerButton.js

@@ -8,7 +8,7 @@ import cx from 'clsx';
 
 const SpinnerButton = forwardRef(function SpinnerButton(props, ref) {
     const { className, disabled, size = 'main', type, ...rest } = props;
-    return (jsx("button", { ref: ref, type: "button", disabled: disabled, className: cx(inputSpinnerButtonClasses.host, disabled && inputSpinnerButtonClasses.disabled, size === 'main' ? inputSpinnerButtonClasses.main : inputSpinnerButtonClasses.sub, className), title: type === 'up' ? 'Increase value' : 'Decrease value', ...rest, children: jsx(Icon, { icon: type === 'up' ? CaretUpFlatIcon : CaretDownFlatIcon }) }));
+    return (jsx("button", { ref: ref, type: "button", disabled: disabled, className: cx(inputSpinnerButtonClasses.host, disabled && inputSpinnerButtonClasses.disabled, size === 'main' ? inputSpinnerButtonClasses.main : inputSpinnerButtonClasses.sub, className), "aria-label": type === 'up' ? 'Increase value' : 'Decrease value', title: type === 'up' ? 'Increase value' : 'Decrease value', ...rest, children: jsx(Icon, { "aria-hidden": "true", icon: type === 'up' ? CaretUpFlatIcon : CaretDownFlatIcon }) }));
 });
 
 export { SpinnerButton as default };

package/Modal/Modal.d.ts

@@ -1,61 +1,9 @@
 import { ModalSize, ModalStatusType } from '@mezzanine-ui/core/modal';
-import { ReactNode } from 'react';
 import { ModalContainerProps } from './useModalContainer';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { ModalHeaderProps } from './ModalHeader';
 import { ModalFooterProps } from './ModalFooter';
-export type ModalHeaderLayoutProps = {
-    /**
-     * Layout of the status type icon relative to title.
-     * - 'horizontal': Icon to the left of title
-     */
-    statusTypeIconLayout: 'horizontal';
-    /**
-     * Alignment of the supporting text.
-     * Only 'left' is allowed when statusTypeIconLayout is 'horizontal'.
-     * @default 'left'
-     */
-    supportingTextAlign?: 'left';
-    /**
-     * Alignment of the title.
-     * Only 'left' is allowed when statusTypeIconLayout is 'horizontal'.
-     * @default 'left'
-     */
-    titleAlign?: 'left';
-} | {
-    /**
-     * Layout of the status type icon relative to title.
-     * - 'vertical': Icon above title
-     * @default 'vertical'
-     */
-    statusTypeIconLayout?: 'vertical';
-    /**
-     * Alignment of the supporting text.
-     * Only 'left' is allowed when titleAlign is 'left'.
-     * @default 'left'
-     */
-    supportingTextAlign?: 'left';
-    /**
-     * Alignment of the title.
-     * @default 'left'
-     */
-    titleAlign?: 'left';
-} | {
-    /**
-     * Layout of the status type icon relative to title.
-     * - 'vertical': Icon above title
-     * @default 'vertical'
-     */
-    statusTypeIconLayout?: 'vertical';
-    /**
-     * Alignment of the supporting text.
-     * @default 'left'
-     */
-    supportingTextAlign?: 'left' | 'center';
-    /**
-     * Alignment of the title.
-     */
-    titleAlign: 'center';
-};
+export type ModalHeaderLayoutProps = Pick<ModalHeaderProps, 'statusTypeIconLayout' | 'titleAlign' | 'supportingTextAlign'>;
 interface CommonModalProps extends Omit<ModalContainerProps, 'children'>, Pick<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'>, Partial<Omit<ModalFooterProps, 'cancelText' | 'children' | 'className' | 'confirmText' | 'showCancelButton'>> {
     /**
      * The custom class name applied to the modal container.
@@ -77,16 +25,6 @@ interface CommonModalProps extends Omit<ModalContainerProps, 'children'>, Pick<N
      * @default 'info'
      */
     modalStatusType?: ModalStatusType;
-    /**
-     * Text content of the cancel button.
-     * Required when cancel button is shown (showCancelButton is true or not provided).
-     */
-    cancelText?: ReactNode;
-    /**
-     * Whether to show the cancel button.
-     * @default true
-     */
-    showCancelButton?: boolean;
     /**
      * Controls whether or not to show dismiss button at top-end.
      * @default true
@@ -113,6 +51,13 @@ interface ExtendedSplitModalProps extends CommonModalProps {
      * Required when modalType is 'extendedSplit'.
      */
     extendedSplitRightSideContent: React.ReactNode;
+    /**
+     * Controls which side the sidebar panel (narrow column with footer) appears on.
+     * - `'left'`: sidebar on the left, wide content on the right
+     * - `'right'`: wide content on the left, sidebar on the right
+     * @default 'right'
+     */
+    extendedSplitSidebarPosition?: 'left' | 'right';
     /**
      * Controls the type/layout of the modal.
      * - 'extendedSplit': Modal with split layout (footer inside left content)
@@ -136,6 +81,10 @@ interface OtherModalProps extends CommonModalProps {
      * Cannot be provided when modalType is not 'extendedSplit'.
      */
     extendedSplitRightSideContent?: never;
+    /**
+     * 此模式下不適用。
+     */
+    extendedSplitSidebarPosition?: never;
     /**
      * Controls the type/layout of the modal.
      * - 'standard': Default modal with body container
@@ -174,28 +123,7 @@ type ModalHeaderPropsWithoutHeader = {
      */
     title?: never;
 };
-export type ModalFooterCancelProps = {
-    /**
-     * Text content of the cancel button.
-     * Required when cancel button is shown (showCancelButton is true or not provided).
-     */
-    cancelText: ReactNode;
-    /**
-     * Whether to show the cancel button.
-     * @default true
-     */
-    showCancelButton?: true;
-} | {
-    /**
-     * Text content of the cancel button.
-     * Cannot be provided when showCancelButton is false.
-     */
-    cancelText?: never;
-    /**
-     * Whether to show the cancel button.
-     */
-    showCancelButton: false;
-};
+export type ModalFooterCancelProps = Pick<ModalFooterProps, 'cancelText' | 'showCancelButton'>;
 type ModalFooterPropsWithFooter = {
     /**
      * Whether to show modal footer.
@@ -217,6 +145,14 @@ type ModalFooterPropsWithoutFooter = {
      * Cannot be provided when showModalFooter is false.
      */
     confirmText?: never;
+    /**
+     * 此模式下不適用。
+     */
+    cancelText?: never;
+    /**
+     * 此模式下不適用。
+     */
+    showCancelButton?: never;
 };
 export type ModalProps = BaseModalProps & ModalHeaderLayoutProps & ((ModalHeaderPropsWithHeader & ModalFooterPropsWithFooter) | (ModalHeaderPropsWithHeader & ModalFooterPropsWithoutFooter) | (ModalHeaderPropsWithoutHeader & ModalFooterPropsWithFooter) | (ModalHeaderPropsWithoutHeader & ModalFooterPropsWithoutFooter));
 /**

package/Modal/Modal.js

@@ -54,7 +54,7 @@ import cx from 'clsx';
  * @see {@link useModalContainer} 用於自訂 Modal 掛載容器的 Hook
  */
 const Modal = forwardRef(function Modal(props, ref) {
-    const { actionsButtonLayout, annotation, auxiliaryContentButtonProps, auxiliaryContentButtonText, auxiliaryContentChecked, auxiliaryContentLabel, auxiliaryContentOnChange, auxiliaryContentOnClick, auxiliaryContentType, backdropClassName, cancelButtonProps, cancelText, children, className, confirmButtonProps, confirmText, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal = false, extendedSplitLeftSideContent, extendedSplitRightSideContent, fullScreen = false, loading = false, modalStatusType = 'info', modalType = 'standard', onBackdropClick, onCancel, onClose, onConfirm, open, passwordButtonProps, passwordButtonText, passwordChecked, passwordCheckedLabel, passwordCheckedOnChange, passwordOnClick, showCancelButton, showDismissButton = true, showModalFooter = false, showModalHeader, showStatusTypeIcon, size = 'regular', statusTypeIconLayout, supportingText, supportingTextAlign, title, titleAlign, ...rest } = props;
+    const { actionsButtonLayout, annotation, auxiliaryContentButtonProps, auxiliaryContentButtonText, auxiliaryContentChecked, auxiliaryContentLabel, auxiliaryContentOnChange, auxiliaryContentOnClick, auxiliaryContentType, backdropClassName, cancelButtonProps, cancelText, children, className, confirmButtonProps, confirmText, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal = false, extendedSplitLeftSideContent, extendedSplitRightSideContent, extendedSplitSidebarPosition = 'right', fullScreen = false, loading = false, modalStatusType = 'info', modalType = 'standard', onBackdropClick, onCancel, onClose, onConfirm, open, passwordButtonProps, passwordButtonText, passwordChecked, passwordCheckedLabel, passwordCheckedOnChange, passwordOnClick, showCancelButton, showDismissButton = true, showModalFooter = false, showModalHeader, showStatusTypeIcon, size = 'regular', statusTypeIconLayout, supportingText, supportingTextAlign, title, titleAlign, ...rest } = props;
     const bodyContentRef = useRef(null);
     const [hasTopSeparator, setHasTopSeparator] = useState(false);
     const [hasBottomSeparator, setHasBottomSeparator] = useState(false);
@@ -128,7 +128,9 @@ const Modal = forwardRef(function Modal(props, ref) {
                             supportingTextAlign,
                             title: title,
                             titleAlign,
-                        } })), modalType === 'extendedSplit' && (jsxs("div", { className: modalClasses.modalBodyContainerExtendedSplit, children: [jsx("div", { className: modalClasses.modalBodyContainerExtendedSplitRight, children: extendedSplitRightSideContent }), jsxs("div", { className: modalClasses.modalBodyContainerExtendedSplitLeft, children: [jsx("div", { className: modalClasses.modalBodyContainerExtendedSplitLeftSideContent, children: extendedSplitLeftSideContent }), showModalFooter && renderModalFooter()] })] })), (modalType === 'standard' ||
+                        } })), modalType === 'extendedSplit' && (jsxs("div", { className: cx(modalClasses.modalBodyContainerExtendedSplit, {
+                            [modalClasses.modalBodyContainerExtendedSplitSidebarLeft]: extendedSplitSidebarPosition === 'left',
+                        }), children: [jsx("div", { className: modalClasses.modalBodyContainerExtendedSplitRight, children: extendedSplitRightSideContent }), jsxs("div", { className: modalClasses.modalBodyContainerExtendedSplitLeft, children: [jsx("div", { className: modalClasses.modalBodyContainerExtendedSplitLeftSideContent, children: extendedSplitLeftSideContent }), showModalFooter && renderModalFooter()] })] })), (modalType === 'standard' ||
                         modalType === 'verification' ||
                         modalType === 'extended' ||
                         modalType === 'mediaPreview') && (jsxs(Fragment, { children: [children && (jsx("div", { ref: handleBodyContainerRef, className: cx(modalClasses.modalBodyContainer, {

package/Modal/ModalBodyForVerification.js

@@ -89,7 +89,9 @@ const ModalBodyForVerification = forwardRef(function ModalBodyForVerification(pr
     const handleInputChange = (index, e) => {
         handleChange(index, e.target.value);
     };
-    return (jsxs("div", { ...rest, ref: ref, className: cx(modalClasses.modalBodyVerification, className), children: [jsx("div", { className: modalClasses.modalBodyVerificationInputs, children: Array.from({ length }).map((_, index) => (jsx("input", { ref: (el) => {
+    return (jsxs("div", { ...rest, ref: ref, className: cx(modalClasses.modalBodyVerification, className), children: [jsx("div", { className: cx(modalClasses.modalBodyVerificationInputs, {
+                    [modalClasses.modalBodyVerificationInputsExtended]: length > 4,
+                }), children: Array.from({ length }).map((_, index) => (jsx("input", { ref: (el) => {
                         inputRefs.current[index] = el;
                     }, type: "text", inputMode: "numeric", maxLength: 1, value: codes[index] || '', onChange: (e) => handleInputChange(index, e), onKeyDown: (e) => handleKeyDown(index, e), onPaste: handlePaste, className: cx(modalClasses.modalBodyVerificationInput, {
                         [modalClasses.modalBodyVerificationInputError]: error,

package/NotificationCenter/NotificationCenter.d.ts

@@ -126,24 +126,36 @@ export interface NotificationCenterSeverityMethods {
     warning: (props?: NotificationCenterShorthandProps) => Key;
 }
 /**
- * The react component for `mezzanine` notification center.
+ * 通知中心元件，支援即時提示（`notification`）與抽屜清單（`drawer`）兩種呈現模式。
  *
- * Trigger notifications imperatively via severity shorthand methods or `add`:
+ * 以 `<NotificationCenter type="notification" />` 宣告式渲染單筆浮動通知；
+ * 或使用靜態方法 `NotificationCenter.add()`、`.success()`、`.error()` 等命令式 API
+ * 觸發通知，並可透過回傳的 key 呼叫 `remove()` 收回。
+ * `type: 'drawer'` 模式下，請搭配 `NotificationCenterDrawer` 以清單方式顯示。
  *
  * @example
  * ```tsx
- * import NotificationCenter from '@mezzanine-ui/react/notification-center';
+ * import NotificationCenter from '@mezzanine-ui/react/NotificationCenter';
  *
- * NotificationCenter.success({ title: 'Saved!', description: 'Your changes have been saved.' });
- * NotificationCenter.error({ title: 'Error', description: 'Something went wrong.' });
+ * // 宣告式：嵌入畫面中的通知
+ * <NotificationCenter
+ *   reference="notify-1"
+ *   severity="success"
+ *   title="儲存成功"
+ *   type="notification"
+ * />
  *
- * // Dismiss programmatically
- * const key = NotificationCenter.add({ severity: 'info', title: 'Processing…', type: 'notification' });
+ * // 命令式：觸發浮動通知
+ * NotificationCenter.success({ title: '儲存成功', description: '資料已更新。' });
+ * NotificationCenter.error({ title: '操作失敗', description: '請稍後再試。' });
+ *
+ * // 手動控制生命週期
+ * const key = NotificationCenter.add({ severity: 'info', title: '處理中…', type: 'notification' });
  * NotificationCenter.remove(key);
  * ```
  *
- * @see {@link NotificationData} for all available notification options.
- * @see {@link NotificationCenterDrawer} for the drawer list variant.
+ * @see {@link NotificationData} 所有可用的通知設定項
+ * @see {@link NotificationCenterDrawer} 抽屜清單模式的容器元件
  */
 declare const NotificationCenter: FC<PropsWithChildren<NotificationData>> & {
     add: (notif: NotificationData & {

package/NotificationCenter/NotificationCenter.js

@@ -276,7 +276,7 @@ const NotificationCenterFC = (props) => {
     const showCancelButton = Boolean(cancelButtonText && (onCancelProp || onCloseProp));
     const hideButtons = !(type === 'notification' &&
         (showConfirmButton || showCancelButton));
-    const notificationContent = (jsxs("div", { className: cx(notificationClasses.host, notificationClasses.severity(severity), notificationClasses.type(type)), onMouseEnter: handleNotificationMouseEnter, onMouseLeave: handleNotificationMouseLeave, children: [targetIcon ? (jsx("div", { className: notificationClasses.iconContainer, children: jsx(Icon, { icon: targetIcon, className: notificationClasses.severityIcon, size: 32 }) })) : null, jsxs("div", { className: notificationClasses.body, children: [jsxs("div", { className: notificationClasses.bodyContent, children: [jsx("h4", { className: notificationClasses.title, children: title }), jsx(Typography, { className: notificationClasses.content, children: description })] }), !hideButtons && (jsxs(ButtonGroup, { className: notificationClasses.action, children: [showCancelButton ? (jsx(Button, { onClick: onCancel || onClose, size: "minor", variant: "base-secondary", ...cancelButtonProps, children: cancelButtonText })) : (jsx(Fragment, {})), showConfirmButton ? (jsx(Button, { onClick: onConfirm, size: "minor", ...confirmButtonProps, children: confirmButtonText })) : (jsx(Fragment, {}))] })), type === 'drawer' && (jsxs(Fragment, { children: [isToday && (jsx(Popper, { anchor: timeStampAnchor, open: Boolean(timeStampAnchor), arrow: {
+    const notificationContent = (jsxs("div", { className: cx(notificationClasses.host, notificationClasses.severity(severity), notificationClasses.type(type)), onMouseEnter: handleNotificationMouseEnter, onMouseLeave: handleNotificationMouseLeave, children: [targetIcon ? (jsx("div", { className: notificationClasses.iconContainer, children: jsx(Icon, { icon: targetIcon, className: notificationClasses.severityIcon, size: 32 }) })) : null, jsxs("div", { className: notificationClasses.body, children: [jsxs("div", { className: notificationClasses.bodyContent, children: [jsx("h4", { className: notificationClasses.title, children: title }), jsx(Typography, { className: notificationClasses.content, children: description })] }), !hideButtons && (jsxs(ButtonGroup, { className: notificationClasses.action, children: [showCancelButton ? (jsx(Button, { onClick: onCancel || onClose, size: "minor", variant: "base-secondary", ...cancelButtonProps, children: cancelButtonText })) : null, showConfirmButton ? (jsx(Button, { onClick: onConfirm, size: "minor", ...confirmButtonProps, children: confirmButtonText })) : null] })), type === 'drawer' && (jsxs(Fragment, { children: [isToday && (jsx(Popper, { anchor: timeStampAnchor, open: Boolean(timeStampAnchor), arrow: {
                                     className: notificationClasses.timeStampPopperArrow,
                                     enabled: true,
                                     padding: 0,
@@ -325,24 +325,36 @@ const { add: addNotifier, config, destroy, remove, } = createNotifier({
     },
 });
 /**
- * The react component for `mezzanine` notification center.
+ * 通知中心元件，支援即時提示（`notification`）與抽屜清單（`drawer`）兩種呈現模式。
  *
- * Trigger notifications imperatively via severity shorthand methods or `add`:
+ * 以 `<NotificationCenter type="notification" />` 宣告式渲染單筆浮動通知；
+ * 或使用靜態方法 `NotificationCenter.add()`、`.success()`、`.error()` 等命令式 API
+ * 觸發通知，並可透過回傳的 key 呼叫 `remove()` 收回。
+ * `type: 'drawer'` 模式下，請搭配 `NotificationCenterDrawer` 以清單方式顯示。
  *
  * @example
  * ```tsx
- * import NotificationCenter from '@mezzanine-ui/react/notification-center';
+ * import NotificationCenter from '@mezzanine-ui/react/NotificationCenter';
  *
- * NotificationCenter.success({ title: 'Saved!', description: 'Your changes have been saved.' });
- * NotificationCenter.error({ title: 'Error', description: 'Something went wrong.' });
+ * // 宣告式：嵌入畫面中的通知
+ * <NotificationCenter
+ *   reference="notify-1"
+ *   severity="success"
+ *   title="儲存成功"
+ *   type="notification"
+ * />
  *
- * // Dismiss programmatically
- * const key = NotificationCenter.add({ severity: 'info', title: 'Processing…', type: 'notification' });
+ * // 命令式：觸發浮動通知
+ * NotificationCenter.success({ title: '儲存成功', description: '資料已更新。' });
+ * NotificationCenter.error({ title: '操作失敗', description: '請稍後再試。' });
+ *
+ * // 手動控制生命週期
+ * const key = NotificationCenter.add({ severity: 'info', title: '處理中…', type: 'notification' });
  * NotificationCenter.remove(key);
  * ```
  *
- * @see {@link NotificationData} for all available notification options.
- * @see {@link NotificationCenterDrawer} for the drawer list variant.
+ * @see {@link NotificationData} 所有可用的通知設定項
+ * @see {@link NotificationCenterDrawer} 抽屜清單模式的容器元件
  */
 const NotificationCenter = Object.assign(NotificationCenterFC, {
     add: (notif) => {

package/NotificationCenter/NotificationCenterDrawer.d.ts

@@ -6,7 +6,58 @@ type NotificationDataForDrawer = NotificationData & {
     key: Key;
     type: 'drawer';
 };
-type NotificationCenterDrawerPropsBase = Pick<DrawerProps, 'controlBarAllRadioLabel' | 'controlBarCustomButtonLabel' | 'controlBarDefaultValue' | 'controlBarOnCustomButtonClick' | 'controlBarOnRadioChange' | 'controlBarReadRadioLabel' | 'controlBarShow' | 'controlBarShowUnreadButton' | 'controlBarUnreadRadioLabel' | 'controlBarValue' | 'onClose' | 'open' | 'renderControlBar'> & {
+type NotificationCenterDrawerPropsBase = Pick<DrawerProps, 'onClose' | 'open'> & {
+    /**
+     * Label for the "all" filter option in the filter bar.
+     */
+    filterBarAllRadioLabel?: DrawerProps['filterAreaAllRadioLabel'];
+    /**
+     * Label for the custom action button in the filter bar.
+     */
+    filterBarCustomButtonLabel?: DrawerProps['filterAreaCustomButtonLabel'];
+    /**
+     * Default selected filter value in the filter bar.
+     */
+    filterBarDefaultValue?: DrawerProps['filterAreaDefaultValue'];
+    /**
+     * Callback fired when the custom action button is clicked.
+     */
+    filterBarOnCustomButtonClick?: DrawerProps['filterAreaOnCustomButtonClick'];
+    /**
+     * Callback fired when the filter option changes.
+     */
+    filterBarOnRadioChange?: DrawerProps['filterAreaOnRadioChange'];
+    /**
+     * Label for the "read" filter option in the filter bar.
+     */
+    filterBarReadRadioLabel?: DrawerProps['filterAreaReadRadioLabel'];
+    /**
+     * Whether to show the filter bar.
+     */
+    filterBarShow?: DrawerProps['filterAreaShow'];
+    /**
+     * Whether to show the "unread only" shortcut button.
+     */
+    filterBarShowUnreadButton?: DrawerProps['filterAreaShowUnreadButton'];
+    /**
+     * Label for the "unread" filter option in the filter bar.
+     */
+    filterBarUnreadRadioLabel?: DrawerProps['filterAreaUnreadRadioLabel'];
+    /**
+     * Controlled selected filter value in the filter bar.
+     */
+    filterBarValue?: DrawerProps['filterAreaValue'];
+    /**
+     * Options for the filter bar dropdown.
+     * When non-empty, the right-side filter area button is replaced by a Dropdown
+     * triggered by a `DotHorizontalIcon` icon button.
+     */
+    filterBarOptions?: DrawerProps['filterAreaOptions'];
+    /**
+     * Callback fired when a filter bar dropdown option is selected.
+     * Only used when `filterBarOptions` is non-empty.
+     */
+    filterBarOnSelect?: DrawerProps['filterAreaOnSelect'];
     /**
      * The size of the drawer.
      * @default 'narrow'

package/NotificationCenter/NotificationCenterDrawer.js

@@ -55,7 +55,7 @@ const getTimeGroup = (timestamp, now) => {
     return 'earlier';
 };
 const NotificationCenterDrawer = (props) => {
-    const { children, controlBarAllRadioLabel, controlBarCustomButtonLabel, controlBarDefaultValue, controlBarOnCustomButtonClick, controlBarOnRadioChange, controlBarReadRadioLabel, controlBarShow, controlBarShowUnreadButton, controlBarUnreadRadioLabel, controlBarValue, drawerSize = 'narrow', earlierLabel, emptyNotificationTitle = '目前沒有新的通知', emptyNotificationDescription = '當有新的系統通知時，將會顯示在這裡。', notificationList, onClose, open, past7DaysLabel, renderControlBar, title, todayLabel, yesterdayLabel, ...restDrawerProps } = props;
+    const { children, filterBarAllRadioLabel, filterBarCustomButtonLabel, filterBarDefaultValue, filterBarOnCustomButtonClick, filterBarOnRadioChange, filterBarOnSelect, filterBarReadRadioLabel, filterBarShow, filterBarShowUnreadButton, filterBarUnreadRadioLabel, filterBarValue, filterBarOptions, drawerSize = 'narrow', earlierLabel, emptyNotificationTitle = '目前沒有新的通知', emptyNotificationDescription = '當有新的系統通知時，將會顯示在這裡。', notificationList, onClose, open, past7DaysLabel, title, todayLabel, yesterdayLabel, ...restDrawerProps } = props;
     const isEmpty = useMemo(() => {
         if (notificationList) {
             return notificationList.length === 0;
@@ -120,7 +120,7 @@ const NotificationCenterDrawer = (props) => {
         todayLabel,
         yesterdayLabel,
     ]);
-    return (jsx(Drawer, { className: notificationClasses.drawer, controlBarAllRadioLabel: controlBarAllRadioLabel, controlBarCustomButtonLabel: controlBarCustomButtonLabel, controlBarDefaultValue: controlBarDefaultValue, controlBarIsEmpty: isEmpty, controlBarOnCustomButtonClick: controlBarOnCustomButtonClick, controlBarOnRadioChange: controlBarOnRadioChange, controlBarReadRadioLabel: controlBarReadRadioLabel, controlBarShow: controlBarShow, controlBarShowUnreadButton: controlBarShowUnreadButton, controlBarUnreadRadioLabel: controlBarUnreadRadioLabel, controlBarValue: controlBarValue, headerTitle: title, isHeaderDisplay: Boolean(title), onClose: onClose, open: open, renderControlBar: renderControlBar, size: drawerSize, ...restDrawerProps, children: jsx("div", { className: notificationClasses.notificationsContainer, children: renderNotifications }) }));
+    return (jsx(Drawer, { className: notificationClasses.drawer, filterAreaAllRadioLabel: filterBarAllRadioLabel, filterAreaCustomButtonLabel: filterBarCustomButtonLabel, filterAreaDefaultValue: filterBarDefaultValue, filterAreaIsEmpty: isEmpty, filterAreaOnCustomButtonClick: filterBarOnCustomButtonClick, filterAreaOnRadioChange: filterBarOnRadioChange, filterAreaOnSelect: filterBarOnSelect, filterAreaReadRadioLabel: filterBarReadRadioLabel, filterAreaShow: filterBarShow, filterAreaShowUnreadButton: filterBarShowUnreadButton, filterAreaUnreadRadioLabel: filterBarUnreadRadioLabel, filterAreaValue: filterBarValue, filterAreaOptions: filterBarOptions, headerTitle: title, isHeaderDisplay: Boolean(title), onClose: onClose, open: open, size: drawerSize, ...restDrawerProps, children: jsx("div", { className: notificationClasses.notificationsContainer, children: renderNotifications }) }));
 };
 
 export { NotificationCenterDrawer as default };

package/OverflowTooltip/OverflowTooltip.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useEffect } from 'react';
+import { forwardRef, useState, useEffect, useRef } from 'react';
 import { overflowTooltipClasses } from '@mezzanine-ui/core/overflow-tooltip';
-import { getCSSVariableValue } from '../utils/get-css-variable-value.js';
+import { getNumericCSSVariablePixelValue } from '../utils/get-css-variable-value.js';
 import { offset, flip, shift } from '@floating-ui/react-dom';
 import { spacingPrefix } from '@mezzanine-ui/system/spacing';
 import { MOTION_EASING, MOTION_DURATION } from '@mezzanine-ui/system/motion';
@@ -16,8 +16,9 @@ import cx from 'clsx';
  */
 const OverflowTooltip = forwardRef(function OverflowTooltip(props, ref) {
     const { anchor, className, onTagDismiss, open, placement = 'top-start', readOnly, tags, tagSize, } = props;
-    const offsetValue = Number(getCSSVariableValue(`--${spacingPrefix}-gap-base`).replace('rem', '')) * 16;
-    const arrowHeight = Number(getCSSVariableValue(`--${spacingPrefix}-size-element-tight`).replace('rem', '')) * 16;
+    const offsetValue = getNumericCSSVariablePixelValue(`--${spacingPrefix}-gap-base`);
+    const arrowHeight = getNumericCSSVariablePixelValue(`--${spacingPrefix}-size-element-tight`);
+    const arrowPadding = getNumericCSSVariablePixelValue(`--${spacingPrefix}-padding-horizontal-comfort`);
     const middleware = [offset({ mainAxis: offsetValue + arrowHeight })];
     const flipMiddleware = flip({
         crossAxis: 'alignment',
@@ -36,7 +37,47 @@ const OverflowTooltip = forwardRef(function OverflowTooltip(props, ref) {
             setPopperOpen(true);
         }
     }, [open]);
-    return (jsx(Popper, { ref: ref, anchor: anchor, open: popperOpen, arrow: { enabled: true, className: overflowTooltipClasses.arrow }, className: cx(overflowTooltipClasses.host, className), options: { placement, middleware }, children: jsx(Fade, { in: open, duration: {
+    const contentRef = useRef(null);
+    useEffect(() => {
+        if (!popperOpen)
+            return;
+        const rafId = requestAnimationFrame(() => {
+            const content = contentRef.current;
+            if (!content)
+                return;
+            content.style.width = '';
+            const children = Array.from(content.children);
+            if (!children.length)
+                return;
+            const rows = new Map();
+            children.forEach((child) => {
+                const top = Math.round(child.getBoundingClientRect().top);
+                if (!rows.has(top))
+                    rows.set(top, []);
+                const arr = rows.get(top);
+                if (arr) {
+                    arr.push(child);
+                }
+            });
+            const style = getComputedStyle(content);
+            const paddingLeft = parseFloat(style.paddingLeft);
+            const paddingRight = parseFloat(style.paddingRight);
+            const contentLeft = content.getBoundingClientRect().left;
+            let maxRowWidth = 0;
+            rows.forEach((rowItems) => {
+                const lastItem = rowItems[rowItems.length - 1];
+                const rowWidth = lastItem.getBoundingClientRect().right - contentLeft - paddingLeft;
+                maxRowWidth = Math.max(maxRowWidth, rowWidth);
+            });
+            content.style.width = `${maxRowWidth + paddingLeft + paddingRight}px`;
+        });
+        return () => cancelAnimationFrame(rafId);
+    }, [tags, popperOpen, tagSize, readOnly]);
+    return (jsx(Popper, { ref: ref, anchor: anchor, open: popperOpen, arrow: {
+            enabled: true,
+            className: overflowTooltipClasses.arrow,
+            padding: arrowPadding,
+        }, className: cx(overflowTooltipClasses.host, className), options: { placement, middleware }, children: jsx(Fade, { ref: contentRef, in: open, duration: {
                 enter: MOTION_DURATION.fast,
                 exit: MOTION_DURATION.fast,
             }, easing: {

package/PageFooter/PageFooter.js

@@ -10,29 +10,21 @@ import cx from 'clsx';
 
 const PageFooter = forwardRef(function PageFooter(props, ref) {
     var _a;
-    const { actions, annotationClassName, className, type = 'standard', warningMessage, ...rest } = props;
-    // Filter out onAnnotationClick from rest props to avoid React warnings
-    if ('onAnnotationClick' in rest) {
-        delete rest.onAnnotationClick;
-    }
+    const { actions, annotationClassName, annotation, className, dropdownProps, supportingActionIcon, supportingActionName, supportingActionOnClick, supportingActionType, supportingActionVariant = 'base-ghost', type = 'standard', warningMessage, ...rest } = props;
     const { children: primaryButtonText, ...restPrimaryButtonProps } = (_a = actions === null || actions === void 0 ? void 0 : actions.primaryButton) !== null && _a !== void 0 ? _a : {};
     // Render annotation based on type
     const renderAnnotation = () => {
         switch (type) {
-            case 'standard': {
-                const { supportingActionName, supportingActionType, supportingActionOnClick, supportingActionVariant = 'base-ghost', } = props;
+            case 'standard':
                 return (jsx(Button, { size: "main", type: supportingActionType, onClick: supportingActionOnClick, variant: supportingActionVariant, children: supportingActionName }));
-            }
-            case 'overflow': {
-                const { supportingActionIcon, dropdownProps } = props;
+            case 'overflow':
+                if (!dropdownProps)
+                    return null;
                 return (jsx(Dropdown, { ...dropdownProps, options: dropdownProps.options || [], placement: dropdownProps.placement || 'top', children: jsx(Button, { type: "button", iconType: "icon-only", icon: supportingActionIcon || DotHorizontalIcon, size: "main", variant: "base-ghost" }) }));
-            }
-            case 'information': {
-                const { annotation } = props;
+            case 'information':
                 if (!annotation)
                     return null;
                 return (jsx(Typography, { color: "text-neutral", variant: "caption", children: annotation }));
-            }
             default:
                 return null;
         }

package/Pagination/PaginationPageSize.js

@@ -25,7 +25,7 @@ const PaginationPageSize = forwardRef((props, ref) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(Number(option.id));
         setOpen(false);
     };
-    return (jsxs("div", { ...rest, ref: ref, className: cx(paginationPageSizeClasses.host, className), children: [label ? (jsx(Typography, { component: "div", ellipsis: true, variant: "label-primary", children: label })) : null, jsx(Dropdown, { disabled: disabled, onSelect: dropDownOnSelect, onVisibilityChange: setOpen, open: open, options: selectOptions, sameWidth: true, children: jsx(SelectTrigger, { className: paginationPageSizeClasses.select, disabled: disabled, size: "sub", value: currentValue }) })] }));
+    return (jsxs("div", { ...rest, ref: ref, className: cx(paginationPageSizeClasses.host, className), children: [label ? (jsx(Typography, { component: "div", ellipsis: true, variant: "label-primary", children: label })) : null, jsx(Dropdown, { disabled: disabled, minWidth: 0, onSelect: dropDownOnSelect, onVisibilityChange: setOpen, open: open, options: selectOptions, sameWidth: true, value: currentValue === null || currentValue === void 0 ? void 0 : currentValue.id, children: jsx(SelectTrigger, { className: paginationPageSizeClasses.select, disabled: disabled, size: "sub", value: currentValue }) })] }));
 });
 
 export { PaginationPageSize as default };

package/README.md

@@ -18,13 +18,43 @@ npm install @mezzanine-ui/react @mezzanine-ui/core @mezzanine-ui/icons @mezzanin
 
 ## Quick Start
 
-Import the component styles from `@mezzanine-ui/core`, then use components from this package:
+### 1. Setup Styles
+
+Create a `main.scss` and import it at your app entry point:
+
+```scss
+@use '@mezzanine-ui/system' as mzn-system;
+@use '@mezzanine-ui/core' as mzn-core;
+
+:root {
+  @include mzn-system.common-variables('default');
+  @include mzn-system.colors();
+  @include mzn-system.palette-variables(light);
+}
+
+/* Optional: dark mode */
+[data-theme='dark'] {
+  @include mzn-system.palette-variables(dark);
+}
+
+/* Optional: compact density */
+[data-density='compact'] {
+  @include mzn-system.common-variables(compact);
+}
+
+@include mzn-core.styles();
+```
+
+> **Note:** The `~` prefix (e.g. `~@mezzanine-ui/system`) was required by older webpack 4 + sass-loader setups. Modern tooling (Next.js 13+, Vite) resolves node_modules without it.
 
 ```tsx
-// Import component styles (e.g. in your app entry or global stylesheet)
-import '@mezzanine-ui/core/button/styles';
+// app entry (e.g. main.tsx / _app.tsx)
+import './main.scss';
+```
+
+### 2. Use Components
 
-// Use the component
+```tsx
 import Button from '@mezzanine-ui/react/Button';
 
 function App() {