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

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.d.ts

@@ -67,7 +67,7 @@ type PageFooterOverflowProps = PageFooterBaseProps & {
     type: 'overflow';
     /**
      * Overflow type: Icon for the icon-only button.
-     * @default DotVerticalIcon
+     * @default DotHorizontalIcon
      */
     supportingActionIcon?: ButtonProps['icon'];
     /**

package/PageFooter/PageFooter.js

@@ -4,35 +4,27 @@ import { pageFooterClasses } from '@mezzanine-ui/core/page-footer';
 import Button from '../Button/Button.js';
 import ButtonGroup from '../Button/ButtonGroup.js';
 import Typography from '../Typography/Typography.js';
-import { DotVerticalIcon } from '@mezzanine-ui/icons';
+import { DotHorizontalIcon } from '@mezzanine-ui/icons';
 import Dropdown from '../Dropdown/Dropdown.js';
 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;
-                return (jsx(Dropdown, { ...dropdownProps, options: dropdownProps.options || [], placement: dropdownProps.placement || 'top', children: jsx(Button, { type: "button", iconType: "icon-only", icon: supportingActionIcon || DotVerticalIcon, size: "main", variant: "base-ghost" }) }));
-            }
-            case 'information': {
-                const { annotation } = 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':
                 if (!annotation)
                     return null;
                 return (jsx(Typography, { color: "text-neutral", variant: "caption", children: annotation }));
-            }
             default:
                 return null;
         }

package/Pagination/Pagination.d.ts

@@ -93,7 +93,44 @@ export interface PaginationProps extends Omit<DetailedHTMLProps<HTMLAttributes<H
     total?: number;
 }
 /**
- * The react component for `mezzanine` pagination.
+ * 分頁導覽元件，提供頁碼切換、頁碼跳轉輸入框以及每頁筆數選擇器。
+ *
+ * 傳入 `total` 與 `pageSize` 自動計算總頁數並渲染頁碼列表；`boundaryCount` 控制首尾
+ * 始終顯示的頁數，`siblingCount` 控制當前頁兩側的頁數。啟用 `showJumper` 可直接輸入頁碼跳轉，
+ * 啟用 `showPageSizeOptions` 可讓使用者選擇每頁顯示筆數。
+ *
+ * @example
+ * ```tsx
+ * import Pagination from '@mezzanine-ui/react/Pagination';
+ *
+ * // 基本用法
+ * <Pagination total={100} current={page} onChange={setPage} />
+ *
+ * // 顯示結果摘要與每頁筆數選擇器
+ * <Pagination
+ *   total={200}
+ *   current={page}
+ *   pageSize={pageSize}
+ *   onChange={setPage}
+ *   onChangePageSize={setPageSize}
+ *   showPageSizeOptions
+ *   pageSizeOptions={[10, 20, 50]}
+ *   renderResultSummary={(from, to, total) => `顯示 ${from}–${to} 筆，共 ${total} 筆`}
+ * />
+ *
+ * // 顯示頁碼跳轉輸入框
+ * <Pagination
+ *   total={500}
+ *   current={page}
+ *   onChange={setPage}
+ *   showJumper
+ *   hintText="前往"
+ *   buttonText="GO"
+ * />
+ * ```
+ *
+ * @see {@link Table} 搭配 Table 元件的 `pagination` prop 使用
+ * @see {@link usePagination} 獨立使用分頁邏輯的 hook
  */
 declare const Pagination: import("react").ForwardRefExoticComponent<Omit<PaginationProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
 export default Pagination;

package/Pagination/Pagination.js

@@ -9,7 +9,44 @@ import Typography from '../Typography/Typography.js';
 import cx from 'clsx';
 
 /**
- * The react component for `mezzanine` pagination.
+ * 分頁導覽元件，提供頁碼切換、頁碼跳轉輸入框以及每頁筆數選擇器。
+ *
+ * 傳入 `total` 與 `pageSize` 自動計算總頁數並渲染頁碼列表；`boundaryCount` 控制首尾
+ * 始終顯示的頁數，`siblingCount` 控制當前頁兩側的頁數。啟用 `showJumper` 可直接輸入頁碼跳轉，
+ * 啟用 `showPageSizeOptions` 可讓使用者選擇每頁顯示筆數。
+ *
+ * @example
+ * ```tsx
+ * import Pagination from '@mezzanine-ui/react/Pagination';
+ *
+ * // 基本用法
+ * <Pagination total={100} current={page} onChange={setPage} />
+ *
+ * // 顯示結果摘要與每頁筆數選擇器
+ * <Pagination
+ *   total={200}
+ *   current={page}
+ *   pageSize={pageSize}
+ *   onChange={setPage}
+ *   onChangePageSize={setPageSize}
+ *   showPageSizeOptions
+ *   pageSizeOptions={[10, 20, 50]}
+ *   renderResultSummary={(from, to, total) => `顯示 ${from}–${to} 筆，共 ${total} 筆`}
+ * />
+ *
+ * // 顯示頁碼跳轉輸入框
+ * <Pagination
+ *   total={500}
+ *   current={page}
+ *   onChange={setPage}
+ *   showJumper
+ *   hintText="前往"
+ *   buttonText="GO"
+ * />
+ * ```
+ *
+ * @see {@link Table} 搭配 Table 元件的 `pagination` prop 使用
+ * @see {@link usePagination} 獨立使用分頁邏輯的 hook
  */
 const Pagination = forwardRef((props, ref) => {
     const { boundaryCount = 1, buttonText, className, current = 1, disabled, hintText, inputPlaceholder, itemRender = (item) => jsx(PaginationItem, { ...item }), onChange, onChangePageSize, pageSize = 10, pageSizeLabel, pageSizeOptions, renderPageSizeOptionName, renderResultSummary, showJumper = false, showPageSizeOptions = false, siblingCount = 1, total = 0, ...rest } = props;

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/Pagination/usePagination.d.ts

@@ -13,6 +13,26 @@ export interface UsePaginationParams {
     total?: number;
 }
 export declare const range: (start: number, end: number) => number[];
+/**
+ * 計算分頁項目清單的 Hook。
+ *
+ * 根據 `total`、`pageSize`、`current`、`boundaryCount` 與 `siblingCount` 等參數，
+ * 計算出包含頁碼按鈕、省略號、上一頁、下一頁的 `PaginationItemProps` 陣列。
+ *
+ * @example
+ * ```tsx
+ * import { usePagination } from '@mezzanine-ui/react';
+ *
+ * const { items } = usePagination({
+ *   total: 100,
+ *   pageSize: 10,
+ *   current: 1,
+ *   onChange: (page) => setCurrentPage(page),
+ * });
+ * ```
+ *
+ * @see {@link Pagination} 搭配的元件
+ */
 export declare function usePagination(props?: UsePaginationParams): {
     items: PaginationItemProps[];
 };

package/Pagination/usePagination.js

@@ -4,6 +4,26 @@ const range = (start, end) => {
     const length = end - start + 1;
     return Array.from({ length }, (_, i) => start + i);
 };
+/**
+ * 計算分頁項目清單的 Hook。
+ *
+ * 根據 `total`、`pageSize`、`current`、`boundaryCount` 與 `siblingCount` 等參數，
+ * 計算出包含頁碼按鈕、省略號、上一頁、下一頁的 `PaginationItemProps` 陣列。
+ *
+ * @example
+ * ```tsx
+ * import { usePagination } from '@mezzanine-ui/react';
+ *
+ * const { items } = usePagination({
+ *   total: 100,
+ *   pageSize: 10,
+ *   current: 1,
+ *   onChange: (page) => setCurrentPage(page),
+ * });
+ * ```
+ *
+ * @see {@link Pagination} 搭配的元件
+ */
 function usePagination(props = {}) {
     const { boundaryCount = 1, current = 1, disabled = false, onChange: handleChange, pageSize = 10, siblingCount = 1, total = 0, } = props;
     const totalPages = total ? Math.ceil(total / pageSize) : 1;

package/Progress/Progress.d.ts

@@ -45,7 +45,30 @@ export interface ProgressProps extends Omit<NativeElementPropsWithoutKeyAndRef<'
     type?: ProgressType;
 }
 /**
- * The react component for `mezzanine` progress.
+ * 進度條元件，支援百分比文字與狀態圖示兩種顯示類型。
+ *
+ * `percent` 介於 0～100，未達 100 時狀態自動為 `enabled`，達到 100 時自動切換為 `success`。
+ * 可強制指定 `status` 為 `error` 以顯示錯誤圖示；使用 `tick` prop 可在進度條上標記特定位置。
+ * 支援 `icons` prop 自訂 success 與 error 狀態的圖示。
+ *
+ * @example
+ * ```tsx
+ * import Progress from '@mezzanine-ui/react/Progress';
+ *
+ * // 基本進度條
+ * <Progress percent={60} />
+ *
+ * // 顯示百分比文字
+ * <Progress percent={75} type="percent" />
+ *
+ * // 錯誤狀態
+ * <Progress percent={40} status="error" type="icon" />
+ *
+ * // 帶有 tick 標記點
+ * <Progress percent={60} tick={80} />
+ * ```
+ *
+ * @see {@link Spin} 載入旋轉元件
  */
 declare const Progress: import("react").ForwardRefExoticComponent<ProgressProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Progress;

package/Progress/Progress.js

@@ -8,7 +8,30 @@ import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
 /**
- * The react component for `mezzanine` progress.
+ * 進度條元件，支援百分比文字與狀態圖示兩種顯示類型。
+ *
+ * `percent` 介於 0～100，未達 100 時狀態自動為 `enabled`，達到 100 時自動切換為 `success`。
+ * 可強制指定 `status` 為 `error` 以顯示錯誤圖示；使用 `tick` prop 可在進度條上標記特定位置。
+ * 支援 `icons` prop 自訂 success 與 error 狀態的圖示。
+ *
+ * @example
+ * ```tsx
+ * import Progress from '@mezzanine-ui/react/Progress';
+ *
+ * // 基本進度條
+ * <Progress percent={60} />
+ *
+ * // 顯示百分比文字
+ * <Progress percent={75} type="percent" />
+ *
+ * // 錯誤狀態
+ * <Progress percent={40} status="error" type="icon" />
+ *
+ * // 帶有 tick 標記點
+ * <Progress percent={60} tick={80} />
+ * ```
+ *
+ * @see {@link Spin} 載入旋轉元件
  */
 const Progress = forwardRef(function Progress(props, ref) {
     const { className, icons, percent = 0, percentProps, status = percent < 100

package/README.md

@@ -1 +1,83 @@
 # @mezzanine-ui/react
+
+React component library for Mezzanine UI. Provides a comprehensive set of accessible, themeable UI components built on top of `@mezzanine-ui/core`, `@mezzanine-ui/icons`, and `@mezzanine-ui/system`.
+
+## Installation
+
+```bash
+npm install @mezzanine-ui/react @mezzanine-ui/core @mezzanine-ui/icons @mezzanine-ui/system
+```
+
+## Peer Dependencies
+
+| Package     | Version |
+| ----------- | ------- |
+| `react`     | `>= 18` |
+| `react-dom` | `>= 18` |
+| `lodash`    | `>= 4`  |
+
+## Quick Start
+
+### 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
+// app entry (e.g. main.tsx / _app.tsx)
+import './main.scss';
+```
+
+### 2. Use Components
+
+```tsx
+import Button from '@mezzanine-ui/react/Button';
+
+function App() {
+  return <Button variant="base-primary">Click me</Button>;
+}
+```
+
+## Component Catalog
+
+See [COMPONENTS.md](./COMPONENTS.md) for the full list of available components, their import names, and descriptions.
+
+## AI Tooling Note
+
+All published `.d.ts` files include JSDoc comments with `@example` blocks referencing `@mezzanine-ui/react` import paths. AI tools (e.g. GitHub Copilot, Claude) can use these to generate accurate component usage without additional documentation lookups.
+
+## Related Packages
+
+| Package                | Description                                   |
+| ---------------------- | --------------------------------------------- |
+| `@mezzanine-ui/core`   | CSS styles and TypeScript types per component |
+| `@mezzanine-ui/icons`  | SVG icon definitions                          |
+| `@mezzanine-ui/system` | Design tokens and CSS custom properties       |
+
+## License
+
+MIT

package/Radio/Radio.d.ts

@@ -37,7 +37,9 @@ export interface RadioBaseProps extends Omit<InputCheckProps, 'control' | 'htmlF
     value?: string;
 }
 export interface RadioNormalProps extends RadioBaseProps {
+    /** 此模式下不適用，僅限 segment 類型。 */
     icon?: never;
+    /** 顯示在 radio 標籤下方的輔助說明文字。 */
     hint?: string;
     /**
      * The type of radio.
@@ -58,17 +60,49 @@ export interface RadioSegmentProps extends RadioBaseProps {
      * The icon in radio prefix.
      */
     icon?: IconDefinition;
+    /** 此模式下不適用，僅限 radio 類型。 */
     hint?: never;
     /**
      * The type of radio.
      * @default 'radio'
      */
     type: 'segment';
+    /** 此模式下不適用，僅限 radio 類型。 */
     withInputConfig?: never;
 }
 export type RadioProps = RadioNormalProps | RadioSegmentProps;
 /**
- * The react component for `mezzanine` radio.
+ * 單選按鈕元件，支援標準（radio）與區段（segment）兩種類型。
+ *
+ * 在 `RadioGroup` 內使用時，會自動繼承群組的 `name`、`size` 與 `type`；
+ * 也可獨立使用，透過 `checked`／`defaultChecked` 進行受控或非受控操作。
+ * `segment` 類型可搭配 `icon` 屬性顯示圖示，適合用於分頁切換情境。
+ *
+ * @example
+ * ```tsx
+ * import Radio from '@mezzanine-ui/react/Radio';
+ *
+ * // 基本用法（非受控）
+ * <Radio value="male" inputProps={{ name: 'gender' }}>男性</Radio>
+ *
+ * // 受控用法
+ * const [value, setValue] = useState('a');
+ * <Radio
+ *   checked={value === 'a'}
+ *   value="a"
+ *   inputProps={{ name: 'option' }}
+ *   onChange={() => setValue('a')}
+ * >
+ *   選項 A
+ * </Radio>
+ *
+ * // Segment 類型搭配圖示
+ * import { ListIcon } from '@mezzanine-ui/icons';
+ * <Radio type="segment" icon={ListIcon} value="list">列表</Radio>
+ * ```
+ *
+ * @see {@link RadioGroup} 管理多個單選按鈕的群組元件
+ * @see {@link useRadioControlValue} 單選按鈕受控值的自訂 Hook
  */
 declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Radio;

package/Radio/Radio.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext, useState } 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';
@@ -10,13 +10,43 @@ import Input from '../Input/Input.js';
 import cx from 'clsx';
 
 /**
- * The react component for `mezzanine` radio.
+ * 單選按鈕元件，支援標準（radio）與區段（segment）兩種類型。
+ *
+ * 在 `RadioGroup` 內使用時，會自動繼承群組的 `name`、`size` 與 `type`；
+ * 也可獨立使用，透過 `checked`／`defaultChecked` 進行受控或非受控操作。
+ * `segment` 類型可搭配 `icon` 屬性顯示圖示，適合用於分頁切換情境。
+ *
+ * @example
+ * ```tsx
+ * import Radio from '@mezzanine-ui/react/Radio';
+ *
+ * // 基本用法（非受控）
+ * <Radio value="male" inputProps={{ name: 'gender' }}>男性</Radio>
+ *
+ * // 受控用法
+ * const [value, setValue] = useState('a');
+ * <Radio
+ *   checked={value === 'a'}
+ *   value="a"
+ *   inputProps={{ name: 'option' }}
+ *   onChange={() => setValue('a')}
+ * >
+ *   選項 A
+ * </Radio>
+ *
+ * // Segment 類型搭配圖示
+ * import { ListIcon } from '@mezzanine-ui/icons';
+ * <Radio type="segment" icon={ListIcon} value="list">列表</Radio>
+ * ```
+ *
+ * @see {@link RadioGroup} 管理多個單選按鈕的群組元件
+ * @see {@link useRadioControlValue} 單選按鈕受控值的自訂 Hook
  */
 const Radio = forwardRef(function Radio(props, ref) {
-    var _a, _b;
+    var _a, _b, _c;
     const radioGroup = useContext(RadioGroupContext);
     const { disabled: disabledFromGroup, name: nameFromGroup, size: sizeFromGroup, type: typeFromGroup, } = radioGroup || {};
-    const { checked: checkedProp, className, children, defaultChecked, disabled = disabledFromGroup || false, error = false, icon, hint, inputProps, onChange: onChangeProp, size = sizeFromGroup || 'main', type = typeFromGroup || 'radio', value, withInputConfig, ...rest } = props;
+    const { checked: checkedProp, className, children, defaultChecked, disabled = disabledFromGroup || false, error = false, icon, hint, inputProps, onChange: onChangeProp, size: sizeProp, type = typeFromGroup || 'radio', value, withInputConfig, ...rest } = props;
     const { id: inputId, name = nameFromGroup, ...restInputProps } = inputProps || {};
     const [checked, onChange] = useRadioControlValue({
         checked: checkedProp,
@@ -25,20 +55,28 @@ const Radio = forwardRef(function Radio(props, ref) {
         radioGroup,
         value,
     });
-    const [focused, setFocused] = useState(false);
+    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.focused]: focused,
                         [radioClasses.error]: error,
                     }), children: [type === 'segment' && (jsxs("span", { className: cx(radioClasses.segmentedContainer, {
-                                [radioClasses.segmentedContainerHaveMinWidth]: !!children,
                                 [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, onFocus: () => {
-                                setFocused(true);
-                            }, onBlur: () => {
-                                setFocused(false);
-                            }, name: name, type: "radio", value: value })] }), disabled: disabled, error: error, focused: focused, hint: hint, htmlFor: inputId, segmentedStyle: type === 'segment', size: size, children: type === 'radio' && children }), type === 'radio' && withInputConfig && (jsx("div", { style: { width: (_a = withInputConfig.width) !== null && _a !== void 0 ? _a : 120 }, children: jsx(Input, { ...withInputConfig, variant: "base", placeholder: (_b = withInputConfig.placeholder) !== null && _b !== void 0 ? _b : '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/Radio/RadioGroup.d.ts

@@ -1,4 +1,4 @@
-import { RadioSize } from '@mezzanine-ui/core/radio';
+import { InputCheckSize } from '@mezzanine-ui/core/_internal/input-check';
 import { ChangeEventHandler, ReactNode } from 'react';
 import { InputCheckGroupProps } from '../_internal/InputCheck/InputCheckGroup';
 import { RadioNormalProps, RadioSegmentProps } from './Radio';
@@ -38,7 +38,7 @@ export interface RadioGroupBaseProps extends Omit<InputCheckGroupProps, 'onChang
      * The size of radio group.
      * Control the size of radios in group if size not passed to radio.
      */
-    size?: RadioSize;
+    size?: InputCheckSize;
     /**
      * The value of radio group.
      */

package/Radio/RadioGroupContext.d.ts

@@ -1,9 +1,10 @@
-import { RadioSize, RadioType } from '@mezzanine-ui/core/radio';
+import { RadioType } from '@mezzanine-ui/core/radio';
+import { InputCheckSize } from '@mezzanine-ui/core/_internal/input-check';
 import { RadioGroupControlContextValue } from '../Form/useRadioControlValue';
 export interface RadioGroupContextValue extends RadioGroupControlContextValue {
     disabled?: boolean;
     name?: string;
-    size?: RadioSize;
+    size?: InputCheckSize;
     type?: RadioType;
 }
 export declare const RadioGroupContext: import("react").Context<RadioGroupContextValue | undefined>;

package/Section/SectionGroup.d.ts

@@ -0,0 +1,20 @@
+import { HTMLAttributes } from 'react';
+export interface SectionGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Additional style for the section group container.
+     */
+    className?: string;
+    /**
+     * Layout direction of the section group.
+     * @default 'vertical'
+     */
+    direction?: 'horizontal' | 'vertical';
+}
+/**
+ * The react component for `mezzanine` section group.
+ * Use this to compose multiple sections with consistent gap.
+ */
+declare const SectionGroup: import("react").ForwardRefExoticComponent<SectionGroupProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default SectionGroup;

package/Section/SectionGroup.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { sectionGroupClasses } from '@mezzanine-ui/core/section';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` section group.
+ * Use this to compose multiple sections with consistent gap.
+ */
+const SectionGroup = forwardRef(function SectionGroup(props, ref) {
+    const { children, className, direction = 'vertical', ...rest } = props;
+    return (jsx("div", { className: cx(sectionGroupClasses.host, direction === 'horizontal' && sectionGroupClasses.hostHorizontal, className), ref: ref, ...rest, children: children }));
+});
+
+export { SectionGroup as default };