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

package/Popper/Popper.js

@@ -1,30 +1,101 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useImperativeHandle } from 'react';
-import { usePopper } from 'react-popper';
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useRef, useImperativeHandle, useEffect, useCallback } from 'react';
+import { useFloating, arrow } from '@floating-ui/react-dom';
+import { spacingPrefix } from '@mezzanine-ui/system/spacing';
 import { getElement } from '../utils/getElement.js';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import { getCSSVariableValue } from '../utils/get-css-variable-value.js';
 import Portal from '../Portal/Portal.js';
 
 const Popper = forwardRef(function Popper(props, ref) {
-    const { anchor, children, container, controllerRef, disablePortal, open = false, options, style, ...rest } = props;
-    const [popperEl, setPopperEl] = useState(null);
-    const composedRef = useComposeRefs([ref, setPopperEl]);
+    var _a, _b, _c, _d;
+    const { anchor, arrow: arrow$1, children, container, controllerRef, disablePortal, open = false, options, style, ...rest } = props;
+    const arrowRef = useRef(null);
     const anchorEl = getElement(anchor);
-    const { attributes, forceUpdate, state, styles, update } = usePopper(anchorEl, popperEl, options);
-    useImperativeHandle(controllerRef, () => ({
-        attributes,
-        forceUpdate,
-        state,
-        styles,
-        update,
-    }));
+    const floatingReturn = useFloating({
+        ...options,
+        middleware: [
+            ...((_a = options === null || options === void 0 ? void 0 : options.middleware) !== null && _a !== void 0 ? _a : []),
+            (arrow$1 === null || arrow$1 === void 0 ? void 0 : arrow$1.enabled)
+                ? arrow({
+                    element: arrowRef.current,
+                    padding: arrow$1.padding || 0,
+                })
+                : null,
+        ],
+        elements: {
+            reference: anchorEl,
+        },
+    });
+    const { refs, floatingStyles, update } = floatingReturn;
+    const composedRef = useComposeRefs([ref, refs.setFloating]);
+    useImperativeHandle(controllerRef, () => floatingReturn, [floatingReturn]);
+    useEffect(() => {
+        if (anchorEl) {
+            refs.setReference(anchorEl);
+        }
+    }, [anchorEl, refs]);
+    useEffect(() => {
+        if (open && update) {
+            update();
+        }
+    }, [open, update]);
+    // 計算箭頭的位置和旋轉角度
+    const arrowX = (_b = floatingReturn.middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.x;
+    const arrowY = (_c = floatingReturn.middlewareData.arrow) === null || _c === void 0 ? void 0 : _c.y;
+    const placement = floatingReturn.placement;
+    // 根據 placement 決定箭頭的靜態位置和旋轉
+    const getArrowStyles = useCallback(() => {
+        const staticSide = {
+            top: {
+                property: 'bottom',
+                value: '-6px',
+            },
+            right: {
+                property: 'left',
+                value: '-8px',
+            },
+            bottom: {
+                property: 'top',
+                value: '-6px',
+            },
+            left: {
+                property: 'right',
+                value: '-8px',
+            },
+        }[placement.split('-')[0]];
+        const arrowStyles = {
+            width: getCSSVariableValue(`--${spacingPrefix}-size-element-slim`),
+            height: getCSSVariableValue(`--${spacingPrefix}-size-element-tight`),
+            transformOrigin: 'center',
+            position: 'absolute',
+            left: typeof arrowX === 'number' ? `${arrowX}px` : undefined,
+            top: typeof arrowY === 'number' ? `${arrowY}px` : undefined,
+            [staticSide.property]: staticSide.value,
+        };
+        // 根據 placement 旋轉箭頭
+        const rotation = {
+            top: '0deg',
+            right: '90deg',
+            bottom: '180deg',
+            left: '-90deg',
+        }[placement.split('-')[0]];
+        if (rotation) {
+            arrowStyles.transform = `rotate(${rotation})`;
+        }
+        return arrowStyles;
+    }, [arrowX, arrowY, placement]);
     if (!open) {
         return null;
     }
-    return (jsx(Portal, { container: container, disablePortal: disablePortal, children: jsx("div", { ...rest, ref: composedRef, style: {
+    return (jsx(Portal, { container: container, disablePortal: disablePortal, children: jsxs("div", { ...rest, ref: composedRef, "data-popper-placement": floatingReturn.placement, style: {
                 ...style,
-                ...styles.popper,
-            }, ...attributes.popper, children: children }) }));
+                ...floatingStyles,
+                visibility: ((_d = floatingReturn.middlewareData.hide) === null || _d === void 0 ? void 0 : _d.referenceHidden)
+                    ? 'hidden'
+                    : 'visible',
+            }, children: [(arrow$1 === null || arrow$1 === void 0 ? void 0 : arrow$1.enabled) ? (jsx("svg", { viewBox: "0 0 12 6", fill: "none", ref: arrowRef, className: arrow$1 === null || arrow$1 === void 0 ? void 0 : arrow$1.className, style: getArrowStyles(), children: jsx("path", { d: "M6.70711 5.29289C6.31658 5.68342 5.68342 5.68342 5.29289 5.29289L0 0L12 6.05683e-07L6.70711 5.29289Z", fill: "currentColor" }) })) : null, children] }) }));
 });
 
 export { Popper as default };

package/Popper/index.d.ts

@@ -1 +1,2 @@
-export { PopperPlacement, PopperPositionStrategy, PopperOptions, PopperController, PopperProps, default, } from './Popper';
+export { default } from './Popper';
+export type { PopperPlacement, PopperPositionStrategy, PopperController, PopperProps, } from './Popper';

package/Portal/Portal.d.ts

@@ -1,5 +1,5 @@
-import { FC, ReactNode } from 'react';
-import { ElementGetter } from '../utils/getElement';
+import { ReactNode, RefObject } from 'react';
+import { type PortalLayer } from './portalRegistry';
 export interface PortalProps {
     /**
      * The element you want to portal.
@@ -7,14 +7,22 @@ export interface PortalProps {
     children?: ReactNode;
     /**
      * The destination where to portal.
+     * If provided, it will override the default portal container.
+     * Accepts HTMLElement, RefObject, or null.
      */
-    container?: ElementGetter;
+    container?: HTMLElement | RefObject<HTMLElement | null> | RefObject<HTMLElement> | null;
     /**
      * Whether to disable portal.
      * If true, it will be a normal component.
      * @default false
      */
     disablePortal?: boolean;
+    /**
+     * The portal layer to use.
+     * - 'alert': Portal to alert container (above root, sticky)
+     * - 'default': Portal to default container (inside root, fixed)
+     * @default 'default'
+     */
+    layer?: PortalLayer;
 }
-declare const Portal: FC<PortalProps>;
-export default Portal;
+export default function Portal({ children, container: containerProp, disablePortal, layer, }: PortalProps): import("react/jsx-runtime").JSX.Element | null;

package/Portal/Portal.js

@@ -1,23 +1,38 @@
+'use client';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import { getElement } from '../utils/getElement.js';
+import { getContainer } from './portalRegistry.js';
 
-const Portal = (props) => {
-    const { children, container, disablePortal = false } = props;
-    const [portalElement, setPortalElement] = useState(() => disablePortal ? null : getElement(container));
+function Portal({ children, container: containerProp, disablePortal = false, layer = 'default', }) {
+    const [container, setContainer] = useState(null);
+    // Extract ref.current for dependency tracking
+    const refCurrent = containerProp && 'current' in containerProp
+        ? containerProp.current
+        : undefined;
     useEffect(() => {
-        if (!disablePortal) {
-            setPortalElement(getElement(container) || document.body);
+        if (disablePortal)
+            return;
+        if (containerProp) {
+            // Handle RefObject
+            if ('current' in containerProp) {
+                setContainer(containerProp.current);
+                return;
+            }
+            // Handle HTMLElement
+            setContainer(containerProp);
+            return;
         }
-    }, [container, disablePortal]);
+        const targetContainer = getContainer(layer);
+        setContainer(targetContainer);
+    }, [containerProp, disablePortal, layer, refCurrent]);
     /** This element is fully client side, so `return null` on server side */
     if (typeof window === 'undefined')
         return null;
-    if (disablePortal || !portalElement) {
+    if (disablePortal || !container) {
         return jsx(Fragment, { children: children });
     }
-    return createPortal(children, portalElement);
-};
+    return createPortal(children, container);
+}
 
 export { Portal as default };

package/Portal/index.d.ts

@@ -1 +1,4 @@
-export { PortalProps, default } from './Portal';
+export type { PortalProps } from './Portal';
+export type { PortalLayer } from './portalRegistry';
+export { default } from './Portal';
+export { getContainer, getRootElement, initializePortals, resetPortals, } from './portalRegistry';

package/Portal/index.js

@@ -1 +1,2 @@
 export { default } from './Portal.js';
+export { getContainer, getRootElement, initializePortals, resetPortals } from './portalRegistry.js';

package/Portal/portalRegistry.d.ts

@@ -0,0 +1,17 @@
+export type PortalLayer = 'alert' | 'default';
+/**
+ * Initialize portal containers.
+ * This function can be called manually in your app's entry point,
+ * or it will be called automatically when the first Portal is rendered.
+ *
+ * @param rootSelector - Optional root element or selector string.
+ *                       Defaults to document.body
+ */
+export declare function initializePortals(rootSelector?: string | HTMLElement): void;
+export declare function getContainer(layer: PortalLayer): HTMLElement | null;
+export declare function getRootElement(): HTMLElement | null;
+/**
+ * Reset portal system state. Only for testing purposes.
+ * @internal
+ */
+export declare function resetPortals(): void;

package/Portal/portalRegistry.js

@@ -0,0 +1,92 @@
+// Module-level state
+let containers = {
+    alert: null,
+    default: null,
+};
+let rootElement = null;
+let initialized = false;
+function findRootElement(rootProp) {
+    if (rootProp instanceof HTMLElement)
+        return rootProp;
+    if (typeof rootProp === 'string') {
+        const element = document.querySelector(rootProp);
+        if (element instanceof HTMLElement)
+            return element;
+    }
+    return document.body;
+}
+function observeAlertHeight() {
+    if (!containers.alert || !containers.default)
+        return;
+    const updatePortalTop = () => {
+        if (!containers.alert || !containers.default)
+            return;
+        containers.alert.offsetHeight;
+    };
+    // Use ResizeObserver to track alert container height changes
+    const observer = new ResizeObserver(updatePortalTop);
+    observer.observe(containers.alert);
+    // Initial update
+    updatePortalTop();
+}
+function createContainers() {
+    if (!rootElement)
+        return;
+    const alertContainer = document.createElement('div');
+    alertContainer.id = 'mzn-alert-container';
+    alertContainer.className = 'mzn-portal-alert';
+    const portalContainer = document.createElement('div');
+    portalContainer.id = 'mzn-portal-container';
+    portalContainer.className = 'mzn-portal-default';
+    rootElement.insertBefore(alertContainer, rootElement.firstChild);
+    rootElement.appendChild(portalContainer);
+    containers = {
+        alert: alertContainer,
+        default: portalContainer,
+    };
+    // Observe alert height changes and update portal container position
+    observeAlertHeight();
+}
+/**
+ * Initialize portal containers.
+ * This function can be called manually in your app's entry point,
+ * or it will be called automatically when the first Portal is rendered.
+ *
+ * @param rootSelector - Optional root element or selector string.
+ *                       Defaults to document.body
+ */
+function initializePortals(rootSelector) {
+    if (initialized || typeof window === 'undefined')
+        return;
+    initialized = true;
+    rootElement = findRootElement(rootSelector);
+    if (!rootElement)
+        return;
+    createContainers();
+}
+function getContainer(layer) {
+    if (!initialized && typeof window !== 'undefined') {
+        initializePortals();
+    }
+    return containers[layer];
+}
+function getRootElement() {
+    if (!initialized && typeof window !== 'undefined') {
+        initializePortals();
+    }
+    return rootElement;
+}
+/**
+ * Reset portal system state. Only for testing purposes.
+ * @internal
+ */
+function resetPortals() {
+    containers = {
+        alert: null,
+        default: null,
+    };
+    rootElement = null;
+    initialized = false;
+}
+
+export { getContainer, getRootElement, initializePortals, resetPortals };

package/Progress/Progress.d.ts

@@ -1,53 +1,46 @@
-import { ProgressType, ProgressStatus } from '@mezzanine-ui/core/progress';
-import { Size } from '@mezzanine-ui/system/size';
+import { ProgressStatus, ProgressType } from '@mezzanine-ui/core/progress';
+import { IconDefinition } from '@mezzanine-ui/icons';
 import { TypographyProps } from '../Typography';
-import { IconProps } from '../Icon';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 export interface ProgressProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'title' | 'children'> {
     /**
-     * Customize circle.
-     * circle radius = (size - strokeWidth) / 2
-     * @default size=80,strokeWidth=8
-     */
-    circleProps?: {
-        size: number;
-        strokeWidth: number;
+     * Custom icons for different statuses.
+     * If not provided, defaults to CheckedFilledIcon for success and DangerousFilledIcon for error.
+     */
+    icons?: {
+        /**
+         * Custom icon when status is 'error'.
+         * If not provided, defaults to DangerousFilledIcon.
+         */
+        error?: IconDefinition;
+        /**
+         * Custom icon when status is 'success'.
+         * If not provided, defaults to CheckedFilledIcon.
+         */
+        success?: IconDefinition;
     };
-    /**
-     * Icon props when status is 'error'.
-     */
-    errorIconProps?: Omit<IconProps, 'className'>;
     /**
      * The progress percent(0~100).
      * @default 0
      */
     percent?: number;
     /**
-     * Percent text props when status is 'normal'.
+     * Percent text props when status is 'enabled'.
      */
     percentProps?: Omit<TypographyProps, 'className' | 'children'>;
     /**
      * Force mark the progress status. automatically set if not defined.
-     * (normal(0~99) or success(100) depending on percent)
+     * (enabled(0~99) or success(100) depending on percent)
      */
     status?: ProgressStatus;
     /**
-     * The size of line type progress.
-     * @default 'medium'
-     */
-    size?: Size;
-    /**
-     * Display the progress info(percent and icon) or not.
-     * @default true
-     */
-    showInfo?: boolean;
-    /**
-     * Icon props when status is 'success'.
+     * The tick of progress.
+     * @default 0
      */
-    successIconProps?: Omit<IconProps, 'className'>;
+    tick?: number;
     /**
-     * The type of progress.
-     * @default 'line'
+     * The type of progress display.
+     * @default 'progress'
      */
     type?: ProgressType;
 }

package/Progress/Progress.js

@@ -1,9 +1,9 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext } from 'react';
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { ProgressStatuses, ProgressTypes, progressClasses } from '@mezzanine-ui/core/progress';
-import { CheckCircleFilledIcon, CheckIcon, TimesCircleFilledIcon, TimesIcon } from '@mezzanine-ui/icons';
+import { CheckedFilledIcon, DangerousFilledIcon } from '@mezzanine-ui/icons';
+import { forwardRef, useMemo, useRef, useState, useEffect } from 'react';
 import Typography from '../Typography/Typography.js';
-import { MezzanineConfig } from '../Provider/context.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
@@ -11,24 +11,74 @@ import cx from 'clsx';
  * The react component for `mezzanine` progress.
  */
 const Progress = forwardRef(function Progress(props, ref) {
-    const { size: globalSize } = useContext(MezzanineConfig);
-    const { circleProps, className, errorIconProps, percent = 0, percentProps, showInfo = true, size = globalSize, status = percent < 100
-        ? ProgressStatuses.normal
-        : ProgressStatuses.success, successIconProps, type = ProgressTypes.line, ...rest } = props;
+    const { className, icons, percent = 0, percentProps, status = percent < 100
+        ? ProgressStatuses.enabled
+        : ProgressStatuses.success, tick, type = 'progress', } = props;
     const percentLimited = Math.max(0, Math.min(100, percent));
-    const defaultSuccessIcon = type === ProgressTypes.line ? CheckCircleFilledIcon : CheckIcon;
-    const defaultErrorIcon = type === ProgressTypes.line ? TimesCircleFilledIcon : TimesIcon;
-    const renderInfo = (variant) => (jsx("div", { className: progressClasses.info, children: status === ProgressStatuses.normal ? (
-        /** percent text */ jsx(Typography, { className: progressClasses.infoPercent, variant: variant, ...percentProps, children: `${percentLimited}%` })) : (jsxs(Fragment, { children: [status === ProgressStatuses.success && (jsx(Icon, { className: progressClasses.infoIcon, icon: defaultSuccessIcon, ...successIconProps })), status === ProgressStatuses.error && (jsx(Icon, { className: progressClasses.infoIcon, icon: defaultErrorIcon, ...errorIconProps }))] })) }));
-    const renderLine = () => (jsxs(Fragment, { children: [jsx("div", { className: progressClasses.lineBg, children: jsx("div", { style: { width: `${percentLimited}%` } }) }), showInfo && renderInfo('input3')] }));
-    const renderCircle = () => {
-        const { size: circleSize = 80, strokeWidth = 8 } = circleProps || {};
-        const radius = (circleSize - strokeWidth) / 2;
-        const progressLength = percent > 0 ? percent * radius * Math.PI * 0.02 : 0.00001;
-        const circleXY = circleSize / 2;
-        return (jsxs(Fragment, { children: [jsxs("svg", { style: { boxSizing: 'border-box' }, height: circleSize, width: circleSize, children: [jsx("circle", { className: progressClasses.circleBg, cx: circleXY, cy: circleXY, r: radius, strokeWidth: strokeWidth }), jsx("circle", { className: progressClasses.circleFiller, cx: circleXY, cy: circleXY, r: radius, strokeWidth: strokeWidth, strokeDasharray: `${progressLength.toString()} 999` })] }), showInfo && renderInfo('button3')] }));
-    };
-    return (jsxs("div", { ref: ref, className: cx(progressClasses.host, className, status === ProgressStatuses.success && progressClasses.success, status === ProgressStatuses.error && progressClasses.error, type === ProgressTypes.line && progressClasses.lineVariant, type === ProgressTypes.circle && progressClasses.circleVariant, progressClasses.size(size)), ...rest, children: [type === ProgressTypes.line && renderLine(), type === ProgressTypes.circle && renderCircle()] }));
+    const icon = useMemo(() => {
+        var _a, _b;
+        if (status === ProgressStatuses.success) {
+            return (_a = icons === null || icons === void 0 ? void 0 : icons.success) !== null && _a !== void 0 ? _a : CheckedFilledIcon;
+        }
+        return (_b = icons === null || icons === void 0 ? void 0 : icons.error) !== null && _b !== void 0 ? _b : DangerousFilledIcon;
+    }, [status, icons]);
+    const isSuccessStatus = useMemo(() => status === ProgressStatuses.success && type === ProgressTypes.icon, [status, type]);
+    const isErrorStatus = useMemo(() => status === ProgressStatuses.error && type === ProgressTypes.icon, [status, type]);
+    const isActiveTick = useMemo(() => tick !== undefined && tick > 0 && tick < 100, [tick]);
+    const tickPosition = useMemo(() => {
+        if (!isActiveTick || tick === undefined)
+            return undefined;
+        return Math.max(0, Math.min(100, tick));
+    }, [isActiveTick, tick]);
+    const lineRef = useRef(null);
+    const [tickLeft, setTickLeft] = useState(undefined);
+    useEffect(() => {
+        if (!isActiveTick || tickPosition === undefined || !lineRef.current) {
+            setTickLeft(undefined);
+            return;
+        }
+        const lineElement = lineRef.current;
+        const containerElement = lineElement.parentElement;
+        if (!containerElement) {
+            setTickLeft(undefined);
+            return;
+        }
+        const updateTickPosition = () => {
+            const lineRect = lineElement.getBoundingClientRect();
+            const containerRect = containerElement.getBoundingClientRect();
+            // 計算 line 相對於容器的位置和寬度
+            const lineLeft = lineRect.left - containerRect.left;
+            const lineWidth = lineRect.width;
+            // 計算 tick 在 line 中的位置（百分比轉換為像素）
+            const tickOffsetInLine = (tickPosition / 100) * lineWidth;
+            // 計算 tick 相對於容器的絕對位置
+            const tickAbsoluteLeft = lineLeft + tickOffsetInLine;
+            // 轉換為百分比（相對於容器）
+            const containerWidth = containerRect.width;
+            const tickPercent = (tickAbsoluteLeft / containerWidth) * 100;
+            setTickLeft(`${tickPercent}%`);
+        };
+        // 初始計算
+        updateTickPosition();
+        window.addEventListener('resize', updateTickPosition);
+        if (typeof ResizeObserver !== 'undefined') {
+            const resizeObserver = new ResizeObserver(() => {
+                updateTickPosition();
+            });
+            resizeObserver.observe(lineElement);
+            resizeObserver.observe(containerElement);
+            return () => {
+                resizeObserver.disconnect();
+                window.removeEventListener('resize', updateTickPosition);
+            };
+        }
+        return () => {
+            window.removeEventListener('resize', updateTickPosition);
+        };
+    }, [isActiveTick, tickPosition, type, percentLimited]);
+    return (jsxs("div", { ref: ref, className: cx(progressClasses.host, progressClasses.type(type), status === ProgressStatuses.success && progressClasses.success, status === ProgressStatuses.error && progressClasses.error, className), children: [jsx("div", { ref: lineRef, className: progressClasses.lineVariant, children: jsx("i", { className: progressClasses.lineBg, style: { width: `${percentLimited}%` } }) }), type === ProgressTypes.percent && (jsx(Typography, { variant: "input", ...percentProps, className: progressClasses.infoPercent, children: `${percentLimited}%` })), (isSuccessStatus || isErrorStatus) && (jsx(Icon, { className: progressClasses.infoIcon, icon: icon })), isActiveTick && tickLeft !== undefined && (jsx("div", { className: progressClasses.tick, style: {
+                    '--tick-position': tickLeft,
+                } }))] }));
 });
 
 export { Progress as default };

package/Progress/index.d.ts

@@ -1,2 +1,3 @@
-export type { ProgressType, ProgressTypes, ProgressStatus, ProgressStatuses, } from '@mezzanine-ui/core/progress';
-export { ProgressProps, default } from './Progress';
+export type { ProgressStatus, ProgressStatuses, ProgressType, } from '@mezzanine-ui/core/progress';
+export { default } from './Progress';
+export type { ProgressProps } from './Progress';

package/Provider/ConfigProvider.d.ts

@@ -4,5 +4,6 @@ export interface ConfigProviderProps {
     children?: ReactNode;
     size?: MezzanineConfigContext['size'];
 }
+/** @deprecated 未來不提供此設定 */
 declare function ConfigProvider(props: ConfigProviderProps): JSX.Element;
 export default ConfigProvider;

package/Provider/ConfigProvider.js

@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { MezzanineConfig } from './context.js';
 
+/** @deprecated 未來不提供此設定 */
 function ConfigProvider(props) {
     const { children, size } = props;
     const context = useMemo(() => ({

package/Provider/context.js

@@ -1,3 +1,4 @@
+'use client';
 import { createContext } from 'react';
 
 const MezzanineConfig = createContext({

package/Radio/Radio.d.ts

@@ -1,8 +1,10 @@
 import { ChangeEventHandler } from 'react';
 import { RadioSize } from '@mezzanine-ui/core/radio';
-import { InputCheckProps } from '../_internal/InputCheck';
+import { IconDefinition } from '@mezzanine-ui/icons';
+import { InputCheckProps } from '../_internal/InputCheck/InputCheck';
+import { BaseInputProps } from '../Input';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface RadioProps extends Omit<InputCheckProps, 'control' | 'htmlFor'> {
+export interface RadioBaseProps extends Omit<InputCheckProps, 'control' | 'htmlFor'> {
     /**
      * Whether the radio is checked.
      */
@@ -26,7 +28,7 @@ export interface RadioProps extends Omit<InputCheckProps, 'control' | 'htmlFor'>
     onChange?: ChangeEventHandler<HTMLInputElement>;
     /**
      * The size of radio.
-     * @default 'medium'
+     * @default 'main'
      */
     size?: RadioSize;
     /**
@@ -34,8 +36,39 @@ export interface RadioProps extends Omit<InputCheckProps, 'control' | 'htmlFor'>
      */
     value?: string;
 }
+export interface RadioNormalProps extends RadioBaseProps {
+    icon?: never;
+    hint?: string;
+    /**
+     * The type of radio.
+     * @default 'radio'
+     */
+    type?: 'radio';
+    /**
+     * When `withInputConfig` is provided, an `Input` component is rendered alongside the
+     * radio using the passed props. By default, this input has a width of 120px unless you
+     * override it via the `width` property below.
+     */
+    withInputConfig?: Pick<BaseInputProps, 'aria-disabled' | 'disabled' | 'onChange' | 'placeholder' | 'value'> & {
+        width?: number;
+    };
+}
+export interface RadioSegmentProps extends RadioBaseProps {
+    /**
+     * The icon in radio prefix.
+     */
+    icon?: IconDefinition;
+    hint?: never;
+    /**
+     * The type of radio.
+     * @default 'radio'
+     */
+    type: 'segment';
+    withInputConfig?: never;
+}
+export type RadioProps = RadioNormalProps | RadioSegmentProps;
 /**
  * The react component for `mezzanine` radio.
  */
-declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLLabelElement>>;
+declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Radio;