@nutui/nutui-react-taro 1.5.2-beta.0 → 1.5.2-beta.1

package/dist/esm/popup.taro-01676bff.js

@@ -0,0 +1,137 @@
+import React__default, { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { CSSTransition } from 'react-transition-group';
+import classNames from 'classnames';
+import { d as defaultOverlayProps, O as Overlay } from './overlay.taro-21e87fb1.js';
+import { I as Icon } from './icon.taro-296a1bec.js';
+import { c as cn } from './bem-350c1702.js';
+import { C as ComponentDefaults } from './typings-b9828dba.js';
+
+const defaultProps = {
+    ...ComponentDefaults,
+    position: 'center',
+    transition: '',
+    style: {},
+    popClass: '',
+    closeable: false,
+    closeIconPosition: 'top-right',
+    closeIcon: 'close',
+    closeIconSize: '12px',
+    destroyOnClose: true,
+    teleport: null,
+    overlay: true,
+    round: false,
+    onOpen: () => { },
+    onClose: () => { },
+    onOpened: (e) => { },
+    onClosed: (e) => { },
+    onClickOverlay: (e) => { },
+    onClickCloseIcon: (e) => { },
+    ...defaultOverlayProps,
+};
+let _zIndex = 2000;
+const Popup = (props) => {
+    const { children, visible, overlay, closeOnClickOverlay, overlayStyle, overlayClass, zIndex, lockScroll, duration, closeable, closeIconPosition, closeIcon, style, transition, round, position, popClass, className, destroyOnClose, teleport, onOpen, onClose, onClickOverlay, onClickCloseIcon, onOpened, onClosed, onClick, iconClassPrefix, iconFontClassName, closeIconSize, } = props;
+    const [index, setIndex] = useState(zIndex || _zIndex);
+    const [innerVisible, setInnerVisible] = useState(visible);
+    const [showChildren, setShowChildren] = useState(true);
+    const [transitionName, setTransitionName] = useState('');
+    const b = cn('popup');
+    const baseStyle = {
+        zIndex: index,
+        animationDuration: `${duration}s`,
+    };
+    const overlayStyles = {
+        ...overlayStyle,
+        ...baseStyle,
+    };
+    const popStyles = {
+        ...style,
+        ...baseStyle,
+    };
+    const classes = classNames({
+        round,
+        [`nut-popup-${position}`]: true,
+        [`${popClass}`]: true,
+        [`${className || ''}`]: true,
+    }, b(''));
+    const closeClasses = classNames({
+        'nut-popup__close-icon': true,
+        [`nut-popup__close-icon--${closeIconPosition}`]: true,
+    });
+    const open = () => {
+        if (!innerVisible) {
+            setInnerVisible(true);
+            setIndex(++_zIndex);
+        }
+        if (destroyOnClose) {
+            setShowChildren(true);
+        }
+        onOpen && onOpen();
+    };
+    const close = () => {
+        if (innerVisible) {
+            setInnerVisible(false);
+            if (destroyOnClose) {
+                setTimeout(() => {
+                    setShowChildren(false);
+                    onClose && onClose();
+                }, Number(duration) * 1000);
+            }
+        }
+    };
+    const onHandleClickOverlay = (e) => {
+        if (closeOnClickOverlay) {
+            onClickOverlay && onClickOverlay(e);
+            close();
+        }
+    };
+    const onHandleClick = (e) => {
+        onClick && onClick(e);
+    };
+    const onHandleClickCloseIcon = (e) => {
+        onClickCloseIcon && onClickCloseIcon(e);
+        close();
+    };
+    const onHandleOpened = (e) => {
+        onOpened && onOpened(e);
+    };
+    const onHandleClosed = (e) => {
+        onClosed && onClosed(e);
+    };
+    const resolveContainer = (getContainer) => {
+        const container = typeof getContainer === 'function' ? getContainer() : getContainer;
+        return container || document.body;
+    };
+    const renderToContainer = (getContainer, node) => {
+        if (getContainer) {
+            const container = resolveContainer(getContainer);
+            return createPortal(node, container);
+        }
+        return node;
+    };
+    const renderPop = () => {
+        return (React__default.createElement(CSSTransition, { classNames: transitionName, unmountOnExit: true, timeout: 500, in: innerVisible, onEntered: onHandleOpened, onExited: onHandleClosed },
+            React__default.createElement("div", { style: popStyles, className: classes, onClick: onHandleClick },
+                showChildren ? children : '',
+                closeable ? (React__default.createElement("div", { className: closeClasses, onClick: onHandleClickCloseIcon },
+                    React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: closeIcon, size: closeIconSize }))) : (''))));
+    };
+    const renderNode = () => {
+        return (React__default.createElement(React__default.Fragment, null, overlay ? (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Overlay, { style: overlayStyles, overlayClass: overlayClass, visible: innerVisible, closeOnClickOverlay: closeOnClickOverlay, zIndex: zIndex, lockScroll: lockScroll, duration: duration, onClick: onHandleClickOverlay }),
+            renderPop())) : (React__default.createElement(React__default.Fragment, null, renderPop()))));
+    };
+    useEffect(() => {
+        visible && open();
+        !visible && close();
+    }, [visible]);
+    useEffect(() => {
+        setTransitionName(transition || `nut-popup-slide-${position}`);
+    }, [position]);
+    return React__default.createElement(React__default.Fragment, null, renderToContainer(teleport, renderNode()));
+};
+Popup.defaultProps = defaultProps;
+Popup.displayName = 'NutPopup';
+
+export { Popup as P };

package/dist/esm/price.taro-776ed16e.js

@@ -0,0 +1,83 @@
+import React__default from 'react';
+import { c as cn } from './bem-350c1702.js';
+
+const defaultProps = {
+    price: 0,
+    needSymbol: true,
+    symbol: '¥',
+    decimalDigits: 2,
+    thousands: false,
+    position: 'before',
+    size: 'large',
+    className: '',
+};
+const Price = (props) => {
+    const { price, needSymbol, symbol, decimalDigits, thousands, position, size, className, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const b = cn('price');
+    const replaceSpecialChar = (url) => {
+        url = url.replace(/"/g, '"');
+        url = url.replace(/&/g, '&');
+        url = url.replace(/&lt;/g, '<');
+        url = url.replace(/&gt;/g, '>');
+        url = url.replace(/&nbsp;/g, ' ');
+        url = url.replace(/&yen;/g, '￥');
+        return url;
+    };
+    const showSymbol = () => {
+        return { __html: needSymbol ? replaceSpecialChar(symbol) : '' };
+    };
+    const checkPoint = (price) => {
+        return String(price).indexOf('.') > 0;
+    };
+    const formatThousands = (num) => {
+        if (Number(num) === 0) {
+            num = 0;
+        }
+        if (checkPoint(num)) {
+            num = Number(num).toFixed(decimalDigits);
+            num =
+                typeof num.split('.') === 'string' ? num.split('.') : num.split('.')[0];
+        }
+        else {
+            num = num.toString();
+        }
+        if (thousands) {
+            return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
+        }
+        return num;
+    };
+    const formatDecimal = (decimalNum) => {
+        if (Number(decimalNum) === 0) {
+            decimalNum = 0;
+        }
+        if (checkPoint(decimalNum)) {
+            decimalNum = Number(decimalNum).toFixed(decimalDigits);
+            decimalNum =
+                typeof decimalNum.split('.') === 'string'
+                    ? 0
+                    : decimalNum.split('.')[1] || 0;
+        }
+        else {
+            decimalNum = 0;
+        }
+        const result = `0.${decimalNum}`;
+        const resultFixed = Number(result).toFixed(decimalDigits);
+        return String(resultFixed).substring(2, resultFixed.length);
+    };
+    const renderSymbol = () => {
+        return (React__default.createElement("div", { className: `${b('symbol')} ${b(`symbol-${size}`)}`, dangerouslySetInnerHTML: showSymbol() }));
+    };
+    return (React__default.createElement("div", { className: `${b()} ${className}`, ...rest },
+        needSymbol && position === 'before' ? renderSymbol() : null,
+        React__default.createElement("div", { className: `${b('integer')} ${b(`integer-${size}`)}` }, formatThousands(price)),
+        decimalDigits !== 0 ? (React__default.createElement("div", { className: `${b('decimal')} ${b(`decimal-${size}`)}` }, ".")) : null,
+        React__default.createElement("div", { className: `${b('decimal')} ${b(`decimal-${size}`)}` }, formatDecimal(price)),
+        needSymbol && position === 'after' ? renderSymbol() : null));
+};
+Price.defaultProps = defaultProps;
+Price.displayName = 'NutPrice';
+
+export { Price as P };

package/dist/esm/progress.taro-f0ce38e9.js

@@ -0,0 +1,90 @@
+import React__default from 'react';
+import classNames from 'classnames';
+import { I as Icon } from './icon.taro-296a1bec.js';
+import { c as cn } from './bem-350c1702.js';
+import { C as ComponentDefaults } from './typings-b9828dba.js';
+
+const defaultProps = {
+    ...ComponentDefaults,
+    className: '',
+    style: {},
+    isShowPercentage: true,
+    percentage: 0,
+    fillColor: '#f3f3f3',
+    strokeColor: 'linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)',
+    strokeWidth: '',
+    textColor: '',
+    textWidth: '',
+    showText: true,
+    textInside: false,
+    textBackground: 'linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)',
+    textType: 'text',
+    status: false,
+    iconName: 'checked',
+    iconColor: '#439422',
+    iconSize: '16px',
+    children: undefined,
+};
+const Progress = (props) => {
+    const { className, style, isShowPercentage, percentage, fillColor, strokeColor, strokeWidth, size, textColor, textWidth, showText, textInside, textBackground, textType, status, iconName, iconColor, iconSize, children, iconClassPrefix, iconFontClassName, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const b = cn('progress');
+    const classes = classNames(b(''));
+    const classesOuter = classNames({
+        [`${b('')}-outer`]: true,
+        [`${b('')}-${size || 'base'}`]: true,
+    });
+    const classesInner = classNames({
+        [`${b('')}-inner`]: true,
+        [`${b('')}-active`]: status,
+    });
+    const classesText = classNames({
+        [`${b('')}-text`]: true,
+    });
+    const classesInsideText = classNames({
+        [`${b('')}-text`]: true,
+        [`${b('')}-insidetext`]: true,
+    });
+    const classesTextInner = classNames({
+        [`${b('')}-text__inner`]: true,
+    });
+    const stylesOuter = {
+        height: `${strokeWidth}px`,
+        // eslint-disable-next-line no-nested-ternary
+        background: `${fillColor}`,
+    };
+    const stylesInner = {
+        width: `${percentage}%`,
+        // eslint-disable-next-line no-nested-ternary
+        background: `${strokeColor}`,
+    };
+    const stylesInsideText = {
+        width: `${textWidth}px`,
+        left: `${percentage}%`,
+        background: textBackground || strokeColor,
+    };
+    const stylesInsideIcon = {
+        width: `${textWidth}px`,
+        left: `${percentage}%`,
+    };
+    const stylesText = {
+        width: `${textWidth}px`,
+    };
+    return (React__default.createElement("div", { className: `${classes} ${className}`, style: style, ...rest },
+        React__default.createElement("div", { className: classesOuter, style: stylesOuter },
+            React__default.createElement("div", { className: classesInner, style: stylesInner }, showText && textInside && (React__default.createElement(React__default.Fragment, null, children ? (React__default.createElement("div", { className: classesInsideText, style: stylesInsideIcon }, children)) : (React__default.createElement("div", { className: classesInsideText, style: stylesInsideText },
+                React__default.createElement("span", { className: classesTextInner, style: { color: textColor } },
+                    percentage,
+                    isShowPercentage ? '%' : ''))))))),
+        showText && !textInside && (React__default.createElement("div", { className: classesText, style: stylesText },
+            textType === 'text' && (React__default.createElement("span", { className: classesTextInner, style: { color: textColor } },
+                percentage,
+                isShowPercentage ? '%' : '')),
+            textType === 'icon' && (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, size: iconSize, name: iconName, color: iconColor }))))));
+};
+Progress.defaultProps = defaultProps;
+Progress.displayName = 'NutProgress';
+
+export { Progress as P };

package/dist/esm/pulltorefresh.taro-a294f656.js

@@ -0,0 +1,181 @@
+import React__default, { useState, useRef, useEffect } from 'react';
+import { useDrag } from '@use-gesture/react';
+import { useSpring, animated } from '@react-spring/web';
+import { u as useConfig } from './configprovider.taro-8d71eb49.js';
+import { g as getScrollParent } from './get-scroll-parent-b4a07e65.js';
+import { p as passiveSupported } from './supports-passive-c85ef996.js';
+
+function bound(position, min, max) {
+    let ret = position;
+    if (min !== undefined) {
+        ret = Math.max(position, min);
+    }
+    if (max !== undefined) {
+        ret = Math.min(ret, max);
+    }
+    return ret;
+}
+
+function rubberband(distance, dimension, constant) {
+    return (distance * dimension * constant) / (dimension + constant * distance);
+}
+function rubberbandIfOutOfBounds(position, min, max, dimension, constant = 0.15) {
+    if (constant === 0)
+        return bound(position, min, max);
+    if (position < min)
+        return -rubberband(min - position, dimension, constant) + min;
+    if (position > max)
+        return +rubberband(position - max, dimension, constant) + max;
+    return position;
+}
+
+const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time));
+
+const defaultProps = {
+    pullingText: '',
+    canReleaseText: '',
+    refreshingText: '',
+    completeText: '',
+    completeDelay: 500,
+    disabled: false,
+    headHeight: 40,
+    threshold: 60,
+    onRefresh: () => { },
+};
+const PullToRefresh = (p) => {
+    const { locale } = useConfig();
+    const props = {
+        ...defaultProps,
+        ...p,
+        ...{
+            pullingText: p.pullingText || locale.pullToRefresh.pullingText,
+            canReleaseText: p.canReleaseText || locale.pullToRefresh.canReleaseText,
+            refreshingText: p.refreshingText || locale.pullToRefresh.refreshingText,
+            completeText: p.completeText || locale.pullToRefresh.completeText,
+        },
+    };
+    const headHeight = props.headHeight;
+    const threshold = props.threshold;
+    const [status, setStatus] = useState('pulling');
+    const [springStyles, api] = useSpring(() => ({
+        from: { height: 0 },
+        config: {
+            tension: 300,
+            friction: 30,
+            clamp: true,
+        },
+    }));
+    const elementRef = useRef(null);
+    const pullingRef = useRef(false);
+    useEffect(() => {
+        elementRef.current?.addEventListener('touchmove', () => { });
+    }, []);
+    async function doRefresh() {
+        api.start({ height: headHeight });
+        setStatus('refreshing');
+        try {
+            await props.onRefresh();
+            setStatus('complete');
+        }
+        catch (e) {
+            api.start({
+                to: async (next) => {
+                    await next({ height: 0 });
+                    setStatus('pulling');
+                },
+            });
+            throw e;
+        }
+        if (props.completeDelay > 0) {
+            await sleep(props.completeDelay);
+        }
+        api.start({
+            to: async (next) => {
+                await next({ height: 0 });
+                setStatus('pulling');
+            },
+        });
+    }
+    useDrag((state) => {
+        if (status === 'refreshing' || status === 'complete')
+            return;
+        const { event } = state;
+        // 最后一个事件，检查是否可以刷新或是否是开始状态（第一个状态也是最后一个状态）
+        if (state.last) {
+            pullingRef.current = false;
+            if (status === 'canRelease') {
+                doRefresh();
+            }
+            else {
+                api.start({ height: 0 });
+            }
+            return;
+        }
+        function getScrollTop(element) {
+            return 'scrollTop' in element ? element.scrollTop : element.scrollY;
+        }
+        // 手指位置
+        const [, y] = state.movement;
+        // 第一个事件，并且手指位置大于0
+        if (state.first && y > 0) {
+            const target = state.event.target;
+            if (!target || !(target instanceof Element))
+                return;
+            let scrollParent = getScrollParent(target);
+            while (true) {
+                if (!scrollParent)
+                    return;
+                const scrollTop = getScrollTop(scrollParent);
+                if (scrollTop > 0) {
+                    return;
+                }
+                // 查找到 window 说明到顶了
+                if (scrollParent instanceof Window) {
+                    break;
+                }
+                // 递归查找
+                scrollParent = getScrollParent(scrollParent.parentNode);
+            }
+            pullingRef.current = true;
+        }
+        if (!pullingRef.current)
+            return;
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+        event.stopPropagation();
+        const height = Math.max(rubberbandIfOutOfBounds(y, 0, 0, headHeight * 5, 0.5), 0);
+        api.start({ height });
+        setStatus(height > threshold ? 'canRelease' : 'pulling');
+    }, {
+        pointer: { touch: true },
+        axis: 'y',
+        target: elementRef,
+        enabled: !props.disabled,
+        eventOptions: (passiveSupported
+            ? { passive: false }
+            : false),
+    });
+    const renderStatusText = () => {
+        if (props.renderText) {
+            return props.renderText?.(status);
+        }
+        if (status === 'pulling')
+            return props.pullingText;
+        if (status === 'canRelease')
+            return props.canReleaseText;
+        if (status === 'refreshing')
+            return props.refreshingText;
+        if (status === 'complete')
+            return props.completeText;
+        return '';
+    };
+    return (React__default.createElement(animated.div, { ref: elementRef, className: "nut-pulltorefresh" },
+        React__default.createElement(animated.div, { style: springStyles, className: "nut-pulltorefresh-head" },
+            React__default.createElement("div", { className: "nut-pulltorefresh-head-content", style: { height: headHeight } }, renderStatusText())),
+        React__default.createElement("div", { className: "nut-pulltorefresh-content" }, props.children)));
+};
+PullToRefresh.defaultProps = defaultProps;
+PullToRefresh.displayName = 'NutPullToRefresh';
+
+export { PullToRefresh as P };

package/dist/esm/radio.taro-a6eff96c.js

@@ -0,0 +1,168 @@
+import React__default, { useState, useEffect, useCallback, useContext } from 'react';
+import { I as Icon } from './icon.taro-296a1bec.js';
+import { C as ComponentDefaults } from './typings-b9828dba.js';
+import { c as cn } from './bem-350c1702.js';
+
+const radioContext = {
+    onChange: (val) => { },
+};
+var RadioContext = React__default.createContext(radioContext);
+
+const defaultProps$1 = {
+    value: null,
+    textPosition: 'right',
+    onChange: (value) => { },
+    direction: 'vertical',
+    options: [],
+};
+const RadioGroup = React__default.forwardRef((props, ref) => {
+    const { children } = { ...defaultProps$1, ...props };
+    cn('RadioGroup');
+    const { className, value, onChange, textPosition, direction, options, ...rest } = props;
+    const [val2State, setVal2State] = useState(value);
+    // useImperativeHandle(ref, () => ({
+    //   toggleAll(state: boolean) {
+    //     console.log(state)
+    //     if (state === false) {
+    //       setInnerValue([])
+    //     } else {
+    //       const childrenLabel: string[] = []
+    //       React.Children.map(children, (child) => {
+    //         const childProps = (child as any).props
+    //         childrenLabel.push(childProps.label || (child as any).children)
+    //       })
+    //       setInnerValue(childrenLabel)
+    //     }
+    //   },
+    // }))
+    useEffect(() => {
+        setVal2State(value);
+    }, [value]);
+    // function handleChildChange(state: boolean, label: string) {
+    //   if (innerValue) {
+    //     let clippedValue = []
+    //     if (state) {
+    //       clippedValue = [...innerValue, label]
+    //     } else {
+    //       innerValue?.splice(innerValue?.indexOf(label), 1)
+    //       clippedValue = [...innerValue]
+    //     }
+    //     setInnerValue(clippedValue)
+    //     onChange && onChange(clippedValue)
+    //   }
+    // }
+    function validateChildChecked(child) {
+        if (val2State === null)
+            return false;
+        return val2State === child.props.value;
+    }
+    function validateChecked(value) {
+        if (val2State === null)
+            return false;
+        return val2State === value;
+    }
+    function cloneChildren() {
+        return React__default.Children.map(children, (child, index) => {
+            const childChecked = validateChildChecked(child);
+            if (child.type.displayName !== 'NutRadio') {
+                return React__default.cloneElement(child);
+            }
+            return React__default.cloneElement(child, {
+                textPosition,
+                checked: childChecked,
+                // onChange: handleChildChange,
+            });
+        });
+    }
+    const renderOptionsChildren = useCallback(() => {
+        return options?.map(({ label, value, disabled, onChange, ...rest }) => {
+            const childChecked = validateChecked(value);
+            return (React__default.createElement(Radio, { key: value?.toString(), children: label, value: value, disabled: disabled, onChange: onChange, ...rest, textPosition: textPosition, checked: childChecked }));
+        });
+    }, [val2State, options]);
+    return (React__default.createElement(RadioContext.Provider, { value: {
+            onChange: (val) => {
+                setVal2State(val);
+                onChange && onChange(val);
+            },
+        } },
+        React__default.createElement("div", { className: `nut-radiogroup nut-radiogroup--${props.direction} ${className || ''}`, ...rest }, options?.length ? renderOptionsChildren() : cloneChildren())));
+});
+RadioGroup.defaultProps = defaultProps$1;
+RadioGroup.displayName = 'NutRadioGroup';
+
+const defaultProps = {
+    ...ComponentDefaults,
+    className: '',
+    style: {},
+    disabled: false,
+    checked: false,
+    shape: 'round',
+    value: '',
+    textPosition: 'right',
+    iconName: 'check-normal',
+    iconActiveName: 'check-checked',
+    iconSize: 18,
+    onChange: (e) => { },
+};
+const Radio = (props) => {
+    const { children } = {
+        ...defaultProps,
+        ...props,
+    };
+    const { className, disabled, checked, shape, textPosition, value, iconName, iconActiveName, iconSize, onChange, iconClassPrefix, iconFontClassName, ...rest } = props;
+    const componentName = 'nut-radio';
+    const [checkedStatement, setCheckedStatement] = useState(checked);
+    const [valueStatement, setValueStatement] = useState(value);
+    const [disabledStatement, setDisabledStatement] = useState(disabled);
+    const context = useContext(RadioContext);
+    useEffect(() => {
+        setDisabledStatement(disabled);
+        setValueStatement(value);
+        setCheckedStatement(checked);
+    }, [disabled, value, checked]);
+    const renderLabel = () => {
+        return (React__default.createElement("div", { className: `${componentName}__label ${disabledStatement ? `${componentName}__label--disabled` : ''}` }, children));
+    };
+    const renderButton = () => {
+        return (React__default.createElement("div", { className: `${componentName}__button ${!disabledStatement &&
+                checkedStatement &&
+                `${componentName}__button--active`} ${disabledStatement ? `${componentName}__button--disabled` : ''}` }, children));
+    };
+    const color = () => {
+        if (disabledStatement) {
+            return 'nut-radio__icon--disable';
+        }
+        if (checkedStatement) {
+            return 'nut-radio__icon';
+        }
+        return 'nut-radio__icon--unchecked';
+    };
+    const renderIcon = () => {
+        const { iconName, iconSize, iconActiveName } = props;
+        return (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: !disabledStatement && checkedStatement ? iconActiveName : iconName, size: iconSize, className: color() }));
+    };
+    const reverseState = textPosition === 'left';
+    const renderRadioItem = () => {
+        if (shape === 'button') {
+            return renderButton();
+        }
+        if (reverseState) {
+            return [renderLabel(), renderIcon()];
+        }
+        return [renderIcon(), renderLabel()];
+    };
+    const handleClick = (e) => {
+        if (disabledStatement || checkedStatement)
+            return;
+        setCheckedStatement(!checkedStatement);
+        onChange && onChange(e);
+        context && context.onChange(valueStatement);
+    };
+    return (React__default.createElement("div", { className: `nut-radio ${className} ${reverseState ? `${componentName}--reverse` : ''}`, onClick: handleClick, ...rest }, renderRadioItem()));
+};
+Radio.defaultProps = defaultProps;
+Radio.displayName = 'NutRadio';
+Radio.RadioGroup = RadioGroup;
+
+export { Radio as R, RadioGroup as a };