naive-ui 2.32.2 → 2.33.2

package/es/form/src/FormItem.js

@@ -249,8 +249,15 @@ export default defineComponent({
         };
         const labelElementRef = ref(null);
         onMounted(() => {
-            if (labelElementRef.value !== null) {
-                NForm === null || NForm === void 0 ? void 0 : NForm.deriveMaxChildLabelWidth(Number(getComputedStyle(labelElementRef.value).width.slice(0, -2)));
+            if (!formItemMiscRefs.isAutoLabelWidth.value)
+                return;
+            const labelElement = labelElementRef.value;
+            if (labelElement !== null) {
+                const memoizedWhitespace = labelElement.style.whiteSpace;
+                labelElement.style.whiteSpace = 'nowrap';
+                labelElement.style.width = '';
+                NForm === null || NForm === void 0 ? void 0 : NForm.deriveMaxChildLabelWidth(Number(getComputedStyle(labelElement).width.slice(0, -2)));
+                labelElement.style.whiteSpace = memoizedWhitespace;
             }
         });
         const cssVarsRef = computed(() => {
@@ -290,34 +297,36 @@ export default defineComponent({
         return Object.assign(Object.assign(Object.assign(Object.assign({ labelElementRef, mergedClsPrefix: mergedClsPrefixRef, mergedRequired: mergedRequiredRef, feedbackId: feedbackIdRef, renderExplains: renderExplainsRef }, formItemMiscRefs), formItemSizeRefs), exposedRef), { cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender });
     },
     render() {
-        var _a;
         const { $slots, mergedClsPrefix, mergedShowLabel, mergedShowRequireMark, mergedRequireMarkPlacement, onRender } = this;
         const renderedShowRequireMark = mergedShowRequireMark !== undefined
             ? mergedShowRequireMark
             : this.mergedRequired;
         onRender === null || onRender === void 0 ? void 0 : onRender();
+        const renderLabel = () => {
+            const labelText = this.$slots.label ? this.$slots.label() : this.label;
+            if (!labelText)
+                return null;
+            const textNode = (h("span", { class: `${mergedClsPrefix}-form-item-label__text` }, labelText));
+            const markNode = renderedShowRequireMark ? (h("span", { class: `${mergedClsPrefix}-form-item-label__asterisk` }, mergedRequireMarkPlacement !== 'left' ? '\u00A0*' : '*\u00A0')) : (mergedRequireMarkPlacement === 'right-hanging' && (h("span", { class: `${mergedClsPrefix}-form-item-label__asterisk-placeholder` }, '\u00A0*')));
+            const { labelProps } = this;
+            return (h("label", Object.assign({}, labelProps, { class: [
+                    labelProps === null || labelProps === void 0 ? void 0 : labelProps.class,
+                    `${mergedClsPrefix}-form-item-label`,
+                    `${mergedClsPrefix}-form-item-label--${mergedRequireMarkPlacement}-mark`
+                ], style: this.mergedLabelStyle, ref: "labelElementRef" }), mergedRequireMarkPlacement === 'left'
+                ? [markNode, textNode]
+                : [textNode, markNode]));
+        };
         return (h("div", { class: [
                 `${mergedClsPrefix}-form-item`,
                 this.themeClass,
                 `${mergedClsPrefix}-form-item--${this.mergedSize}-size`,
                 `${mergedClsPrefix}-form-item--${this.mergedLabelPlacement}-labelled`,
+                this.isAutoLabelWidth &&
+                    `${mergedClsPrefix}-form-item--auto-label-width`,
                 !mergedShowLabel && `${mergedClsPrefix}-form-item--no-label`
             ], style: this.cssVars },
-            mergedShowLabel && (this.label || $slots.label) ? (h("label", Object.assign({}, this.labelProps, { class: [
-                    (_a = this.labelProps) === null || _a === void 0 ? void 0 : _a.class,
-                    `${mergedClsPrefix}-form-item-label`
-                ], style: this.mergedLabelStyle, ref: "labelElementRef" }),
-                mergedRequireMarkPlacement !== 'left'
-                    ? $slots.label
-                        ? $slots.label()
-                        : this.label
-                    : null,
-                renderedShowRequireMark ? (h("span", { class: `${mergedClsPrefix}-form-item-label__asterisk` }, mergedRequireMarkPlacement !== 'left' ? '\u00A0*' : '*\u00A0')) : (mergedRequireMarkPlacement === 'right-hanging' && (h("span", { class: `${mergedClsPrefix}-form-item-label__asterisk-placeholder` }, '\u00A0*'))),
-                mergedRequireMarkPlacement === 'left'
-                    ? $slots.label
-                        ? $slots.label()
-                        : this.label
-                    : null)) : null,
+            mergedShowLabel && renderLabel(),
             h("div", { class: [
                     `${mergedClsPrefix}-form-item-blank`,
                     this.mergedValidationStatus &&

package/es/form/src/styles/form-item.cssr.js

@@ -17,61 +17,83 @@ import { fadeDownTransition } from '../../../_styles/transitions/fade-down.cssr'
 // --n-label-text-align
 // --n-label-padding
 
-export default cB('form-item', {
-  display: 'grid',
-  lineHeight: 'var(--n-line-height)'
-}, [cB('form-item-label', `
+export default cB('form-item', `
+ display: grid;
+ line-height: var(--n-line-height);
+`, [cB('form-item-label', `
  grid-area: label;
  align-items: center;
  line-height: 1.25;
  text-align: var(--n-label-text-align);
  font-size: var(--n-label-font-size);
- height: var(--n-label-height);
+ min-height: var(--n-label-height);
  padding: var(--n-label-padding);
  color: var(--n-label-text-color);
  transition: color .3s var(--n-bezier);
  box-sizing: border-box;
  `, [cE('asterisk', `
+ white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  color: var(--n-asterisk-color);
  transition: color .3s var(--n-bezier);
  `), cE('asterisk-placeholder', `
+ grid-area: mark;
  user-select: none;
  -webkit-user-select: none;
  visibility: hidden; 
- `)]), cB('form-item-blank', {
-  gridArea: 'blank',
-  minHeight: 'var(--n-blank-height)'
-}), cM('left-labelled', `
+ `)]), cB('form-item-blank', `
+ grid-area: blank;
+ min-height: var(--n-blank-height);
+ `), cM('auto-label-width', [cB('form-item-label', 'white-space: nowrap;')]), cM('left-labelled', `
  grid-template-areas:
  "label blank"
  "label feedback";
  grid-template-columns: auto minmax(0, 1fr);
+ grid-template-rows: auto 1fr;
+ align-items: start;
  `, [cB('form-item-label', `
- height: var(--n-blank-height);
- line-height: var(--n-blank-height);
+ display: grid;
+ grid-template-columns: 1fr auto;
+ min-height: var(--n-blank-height);
+ height: auto;
  box-sizing: border-box;
- white-space: nowrap;
  flex-shrink: 0;
  flex-grow: 0;
- `)]), cM('top-labelled', `
+ `, [cM('left-mark', `
+ grid-template-areas:
+ "mark text"
+ ". text";
+ `), cM('right-mark', `
+ grid-template-areas: 
+ "text mark"
+ "text .";
+ `), cM('right-hanging-mark', `
+ grid-template-areas: 
+ "text mark"
+ "text .";
+ `), cE('text', `
+ grid-area: text; 
+ `), cE('asterisk', `
+ grid-area: mark; 
+ align-self: end;
+ `)])]), cM('top-labelled', `
  grid-template-areas:
  "label"
  "blank"
  "feedback";
- grid-template-rows: var(--n-label-height) 1fr;
+ grid-template-rows: minmax(var(--n-label-height), auto) 1fr;
  grid-template-columns: minmax(0, 100%);
  `, [cM('no-label', `
  grid-template-areas:
  "blank"
  "feedback";
  grid-template-rows: 1fr;
- `), cB('form-item-label', {
-  display: 'flex',
-  alignItems: 'flex-end',
-  justifyContent: 'var(--n-label-text-align)'
-})]), cB('form-item-blank', `
+ `), cB('form-item-label', `
+ display: flex;
+ align-items: flex-start;
+ justify-content: var(--n-label-text-align);
+ `)]), cB('form-item-blank', `
  box-sizing: border-box;
  display: flex;
  align-items: center;

package/es/form/src/utils.d.ts

@@ -14,6 +14,7 @@ export declare function formItemMisc(props: FormItemSetupProps): {
     mergedValidationStatus: ComputedRef<"error" | "success" | "warning" | undefined>;
     mergedShowFeedback: ComputedRef<boolean>;
     mergedShowLabel: ComputedRef<boolean>;
+    isAutoLabelWidth: ComputedRef<boolean>;
 };
 export declare function formItemRule(props: FormItemSetupProps): {
     mergedRules: ComputedRef<FormItemRule[]>;

package/es/form/src/utils.js

@@ -17,6 +17,18 @@ export function formItemSize(props) {
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function formItemMisc(props) {
     const NForm = inject(formInjectionKey, null);
+    const mergedLabelPlacementRef = computed(() => {
+        const { labelPlacement } = props;
+        if (labelPlacement !== undefined)
+            return labelPlacement;
+        if (NForm === null || NForm === void 0 ? void 0 : NForm.props.labelPlacement)
+            return NForm.props.labelPlacement;
+        return 'top';
+    });
+    const isAutoLabelWidthRef = computed(() => {
+        return (mergedLabelPlacementRef.value === 'left' &&
+            (props.labelWidth === 'auto' || (NForm === null || NForm === void 0 ? void 0 : NForm.props.labelWidth) === 'auto'));
+    });
     const mergedLabelWidthRef = computed(() => {
         if (mergedLabelPlacementRef.value === 'top')
             return;
@@ -24,7 +36,7 @@ export function formItemMisc(props) {
         if (labelWidth !== undefined && labelWidth !== 'auto') {
             return formatLength(labelWidth);
         }
-        if (labelWidth === 'auto' || (NForm === null || NForm === void 0 ? void 0 : NForm.props.labelWidth) === 'auto') {
+        if (isAutoLabelWidthRef.value) {
             const autoComputedWidth = NForm === null || NForm === void 0 ? void 0 : NForm.maxChildLabelWidthRef.value;
             if (autoComputedWidth !== undefined) {
                 return formatLength(autoComputedWidth);
@@ -38,14 +50,6 @@ export function formItemMisc(props) {
         }
         return undefined;
     });
-    const mergedLabelPlacementRef = computed(() => {
-        const { labelPlacement } = props;
-        if (labelPlacement !== undefined)
-            return labelPlacement;
-        if (NForm === null || NForm === void 0 ? void 0 : NForm.props.labelPlacement)
-            return NForm.props.labelPlacement;
-        return 'top';
-    });
     const mergedLabelAlignRef = computed(() => {
         const { labelAlign } = props;
         if (labelAlign)
@@ -110,7 +114,8 @@ export function formItemMisc(props) {
         mergedRequireMarkPlacement: mergedRequireMarkPlacementRef,
         mergedValidationStatus: mergedValidationStatusRef,
         mergedShowFeedback: mergedShowFeedbackRef,
-        mergedShowLabel: mergedShowLabelRef
+        mergedShowLabel: mergedShowLabelRef,
+        isAutoLabelWidth: isAutoLabelWidthRef
     };
 }
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type

package/es/input/src/utils.js

@@ -14,7 +14,7 @@ export function useCursor(inputElRef) {
     const selectionRef = ref(null);
     function recordCursor() {
         const { value: input } = inputElRef;
-        if (!input || !input.focus) {
+        if (!(input === null || input === void 0 ? void 0 : input.focus)) {
             reset();
             return;
         }

package/es/locales/common/frFR.js

@@ -41,9 +41,8 @@ const frFR = {
         endDatePlaceholder: 'Date de fin',
         startDatetimePlaceholder: 'Date et heure de début',
         endDatetimePlaceholder: 'Date et heure de fin',
-        // FIXME: translation needed
-        startMonthPlaceholder: 'Start Month',
-        endMonthPlaceholder: 'End Month',
+        startMonthPlaceholder: 'Mois de début',
+        endMonthPlaceholder: 'Mois de fin',
         monthBeforeYear: true,
         firstDayOfWeek: 1,
         today: "Aujourd'hui"
@@ -58,13 +57,12 @@ const frFR = {
         sourceTitle: 'Source',
         targetTitle: 'Cible'
     },
-    // TODO: translation
     Transfer: {
-        selectAll: 'Select all',
-        unselectAll: 'Unselect all',
-        clearAll: 'Clear',
-        total: (num) => `Total ${num} items`,
-        selected: (num) => `${num} items selected`
+        selectAll: 'Sélectionner tout',
+        unselectAll: 'Désélectionner tout',
+        clearAll: 'Effacer',
+        total: (num) => `Total ${num} éléments`,
+        selected: (num) => `${num} éléments sélectionnés`
     },
     Empty: {
         description: 'Aucune donnée'
@@ -115,8 +113,7 @@ const frFR = {
         tipZoomOut: 'Dézoomer',
         tipZoomIn: 'Zoomer',
         tipClose: 'Fermer (Échap.)',
-        // TODO: translation
-        tipOriginalSize: 'Zoom to original size'
+        tipOriginalSize: 'Zoom à la taille originale'
     }
 };
 export default frFR;

package/es/menu/src/Menu.d.ts

@@ -42,6 +42,10 @@ export declare const menuProps: {
         readonly type: StringConstructor;
         readonly default: "children";
     };
+    readonly disabledField: {
+        readonly type: StringConstructor;
+        readonly default: "disabled";
+    };
     readonly defaultExpandAll: BooleanConstructor;
     readonly defaultExpandedKeys: PropType<Key[]>;
     readonly expandedKeys: PropType<Key[]>;
@@ -648,6 +652,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: StringConstructor;
         readonly default: "children";
     };
+    readonly disabledField: {
+        readonly type: StringConstructor;
+        readonly default: "disabled";
+    };
     readonly defaultExpandAll: BooleanConstructor;
     readonly defaultExpandedKeys: PropType<Key[]>;
     readonly expandedKeys: PropType<Key[]>;
@@ -1585,6 +1593,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: StringConstructor;
         readonly default: "children";
     };
+    readonly disabledField: {
+        readonly type: StringConstructor;
+        readonly default: "disabled";
+    };
     readonly defaultExpandAll: BooleanConstructor;
     readonly defaultExpandedKeys: PropType<Key[]>;
     readonly expandedKeys: PropType<Key[]>;
@@ -2163,6 +2175,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly defaultExpandAll: boolean;
     readonly indent: number;
     readonly inverted: boolean;
+    readonly disabledField: string;
     readonly accordion: boolean;
     readonly collapsed: boolean | undefined;
     readonly collapsedWidth: number;

package/es/menu/src/Menu.js

@@ -36,6 +36,9 @@ export const menuProps = Object.assign(Object.assign({}, useTheme.props), { opti
     }, childrenField: {
         type: String,
         default: 'children'
+    }, disabledField: {
+        type: String,
+        default: 'disabled'
     }, defaultExpandAll: Boolean, defaultExpandedKeys: Array, expandedKeys: Array, value: [String, Number], defaultValue: {
         type: [String, Number],
         default: null
@@ -78,11 +81,14 @@ export default defineComponent({
             return false;
         });
         const treeMateRef = computed(() => {
-            const { keyField, childrenField } = props;
+            const { keyField, childrenField, disabledField } = props;
             return createTreeMate(props.items || props.options, {
                 getChildren(node) {
                     return node[childrenField];
                 },
+                getDisabled(node) {
+                    return node[disabledField];
+                },
                 getKey(node) {
                     var _a;
                     return (_a = node[keyField]) !== null && _a !== void 0 ? _a : node.name;

package/es/modal/src/BodyWrapper.d.ts

@@ -441,6 +441,8 @@ declare const _default: import("vue").DefineComponent<{
                 colorPopover: string;
                 colorTarget: string;
                 colorEmbedded: string;
+                colorEmbeddedModal: string;
+                colorEmbeddedPopover: string;
                 textColor: string;
                 titleTextColor: string;
                 borderColor: string;

package/es/modal/src/Modal.d.ts

@@ -347,6 +347,8 @@ export declare const modalProps: {
             colorPopover: string;
             colorTarget: string;
             colorEmbedded: string;
+            colorEmbeddedModal: string;
+            colorEmbeddedPopover: string;
             textColor: string;
             titleTextColor: string;
             borderColor: string;
@@ -629,6 +631,8 @@ export declare const modalProps: {
             colorPopover: string;
             colorTarget: string;
             colorEmbedded: string;
+            colorEmbeddedModal: string;
+            colorEmbeddedPopover: string;
             textColor: string;
             titleTextColor: string;
             borderColor: string;
@@ -911,6 +915,8 @@ export declare const modalProps: {
             colorPopover: string;
             colorTarget: string;
             colorEmbedded: string;
+            colorEmbeddedModal: string;
+            colorEmbeddedPopover: string;
             textColor: string;
             titleTextColor: string;
             borderColor: string;
@@ -1289,6 +1295,8 @@ declare const _default: import("vue").DefineComponent<{
             colorPopover: string;
             colorTarget: string;
             colorEmbedded: string;
+            colorEmbeddedModal: string;
+            colorEmbeddedPopover: string;
             textColor: string;
             titleTextColor: string;
             borderColor: string;
@@ -1571,6 +1579,8 @@ declare const _default: import("vue").DefineComponent<{
             colorPopover: string;
             colorTarget: string;
             colorEmbedded: string;
+            colorEmbeddedModal: string;
+            colorEmbeddedPopover: string;
             textColor: string;
             titleTextColor: string;
             borderColor: string;
@@ -1853,6 +1863,8 @@ declare const _default: import("vue").DefineComponent<{
             colorPopover: string;
             colorTarget: string;
             colorEmbedded: string;
+            colorEmbeddedModal: string;
+            colorEmbeddedPopover: string;
             textColor: string;
             titleTextColor: string;
             borderColor: string;
@@ -2251,6 +2263,8 @@ declare const _default: import("vue").DefineComponent<{
             colorPopover: string;
             colorTarget: string;
             colorEmbedded: string;
+            colorEmbeddedModal: string;
+            colorEmbeddedPopover: string;
             textColor: string;
             titleTextColor: string;
             borderColor: string;
@@ -2533,6 +2547,8 @@ declare const _default: import("vue").DefineComponent<{
             colorPopover: string;
             colorTarget: string;
             colorEmbedded: string;
+            colorEmbeddedModal: string;
+            colorEmbeddedPopover: string;
             textColor: string;
             titleTextColor: string;
             borderColor: string;
@@ -2815,6 +2831,8 @@ declare const _default: import("vue").DefineComponent<{
             colorPopover: string;
             colorTarget: string;
             colorEmbedded: string;
+            colorEmbeddedModal: string;
+            colorEmbeddedPopover: string;
             textColor: string;
             titleTextColor: string;
             borderColor: string;

package/es/modal/src/presetProps.d.ts

@@ -41,5 +41,5 @@ declare const presetProps: {
     hoverable: BooleanConstructor;
     role: StringConstructor;
 };
-declare const presetPropsKeys: ("type" | "content" | "size" | "icon" | "title" | "role" | "action" | "positiveText" | "negativeText" | "loading" | "bordered" | "showIcon" | "closable" | "contentStyle" | "onClose" | "headerStyle" | "footerStyle" | "iconPlacement" | "hoverable" | "headerExtraStyle" | "embedded" | "segmented" | "positiveButtonProps" | "negativeButtonProps" | "onPositiveClick" | "onNegativeClick")[];
+declare const presetPropsKeys: ("type" | "content" | "size" | "icon" | "title" | "role" | "action" | "positiveText" | "negativeText" | "loading" | "bordered" | "showIcon" | "closable" | "contentStyle" | "onClose" | "headerStyle" | "footerStyle" | "iconPlacement" | "hoverable" | "embedded" | "headerExtraStyle" | "segmented" | "positiveButtonProps" | "negativeButtonProps" | "onPositiveClick" | "onNegativeClick")[];
 export { presetProps, presetPropsKeys };

package/es/modal/styles/light.d.ts

@@ -258,6 +258,8 @@ declare const modalLight: import("../../_mixins").Theme<"Modal", {
         colorPopover: string;
         colorTarget: string;
         colorEmbedded: string;
+        colorEmbeddedModal: string;
+        colorEmbeddedPopover: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;

package/es/pagination/src/Pagination.js

@@ -92,10 +92,14 @@ export default defineComponent({
         const showFastForwardMenuRef = ref(false);
         const showFastBackwardMenuRef = ref(false);
         const handleFastForwardMouseenter = () => {
+            if (props.disabled)
+                return;
             fastForwardActiveRef.value = true;
             disableTransitionOneTick();
         };
         const handleFastForwardMouseleave = () => {
+            if (props.disabled)
+                return;
             fastForwardActiveRef.value = false;
             disableTransitionOneTick();
         };
@@ -501,7 +505,7 @@ export default defineComponent({
                                             ? 'fast-backward'
                                             : 'fast-forward'
                                         : pageItem.type;
-                                    return (h(NPopselect, { key: key, trigger: "hover", virtualScroll: true, style: { width: '60px' }, theme: mergedTheme.peers.Popselect, themeOverrides: mergedTheme.peerOverrides.Popselect, builtinThemeOverrides: {
+                                    return (h(NPopselect, { key: key, disabled: disabled, trigger: "hover", virtualScroll: true, style: { width: '60px' }, theme: mergedTheme.peers.Popselect, themeOverrides: mergedTheme.peerOverrides.Popselect, builtinThemeOverrides: {
                                             peers: {
                                                 InternalSelectMenu: {
                                                     height: 'calc(var(--n-option-height) * 4.6)'

package/es/radio/src/Radio.d.ts

@@ -1,35 +1,11 @@
 import type { ExtractPublicPropTypes } from '../../_utils';
-import useRadio from './use-radio';
-export declare const radioProps: {
-    readonly name: StringConstructor;
-    readonly value: {
-        readonly type: import("vue").PropType<string | number>;
-        readonly default: "on";
-    };
-    readonly checked: {
-        readonly type: import("vue").PropType<boolean | undefined>;
-        readonly default: undefined;
-    };
-    readonly defaultChecked: BooleanConstructor;
-    readonly disabled: {
-        readonly type: import("vue").PropType<boolean | undefined>;
-        readonly default: undefined;
-    };
-    readonly label: StringConstructor;
-    readonly size: import("vue").PropType<"small" | "medium" | "large">;
-    readonly onUpdateChecked: import("vue").PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
-    readonly 'onUpdate:checked': import("vue").PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
-    readonly checkedValue: {
-        readonly type: import("vue").PropType<boolean | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-};
-export declare type RadioProps = ExtractPublicPropTypes<typeof useRadio.props>;
+import { radioProps } from './use-radio';
+export { radioProps };
+export declare type RadioProps = ExtractPublicPropTypes<typeof radioProps>;
 declare const _default: import("vue").DefineComponent<{
     name: StringConstructor;
     value: {
-        readonly type: import("vue").PropType<string | number>;
+        readonly type: import("vue").PropType<string | number | boolean>;
         readonly default: "on";
     };
     checked: {
@@ -47,7 +23,6 @@ declare const _default: import("vue").DefineComponent<{
     'onUpdate:checked': import("vue").PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
     checkedValue: {
         readonly type: import("vue").PropType<boolean | undefined>;
-        readonly validator: () => boolean;
         readonly default: undefined;
     };
     theme: import("vue").PropType<import("../../_mixins").Theme<"Radio", {
@@ -65,6 +40,7 @@ declare const _default: import("vue").DefineComponent<{
         boxShadowDisabled: string;
         color: string;
         colorDisabled: string;
+        colorActive: string;
         textColor: string;
         textColorDisabled: string;
         dotColorActive: string;
@@ -102,6 +78,7 @@ declare const _default: import("vue").DefineComponent<{
         boxShadowDisabled: string;
         color: string;
         colorDisabled: string;
+        colorActive: string;
         textColor: string;
         textColorDisabled: string;
         dotColorActive: string;
@@ -139,6 +116,7 @@ declare const _default: import("vue").DefineComponent<{
         boxShadowDisabled: string;
         color: string;
         colorDisabled: string;
+        colorActive: string;
         textColor: string;
         textColorDisabled: string;
         dotColorActive: string;
@@ -172,6 +150,7 @@ declare const _default: import("vue").DefineComponent<{
         '--n-box-shadow-focus': string;
         '--n-box-shadow-hover': string;
         '--n-color': string;
+        '--n-color-active': string;
         '--n-color-disabled': string;
         '--n-dot-color-active': string;
         '--n-dot-color-disabled': string;
@@ -186,7 +165,7 @@ declare const _default: import("vue").DefineComponent<{
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     name: StringConstructor;
     value: {
-        readonly type: import("vue").PropType<string | number>;
+        readonly type: import("vue").PropType<string | number | boolean>;
         readonly default: "on";
     };
     checked: {
@@ -204,7 +183,6 @@ declare const _default: import("vue").DefineComponent<{
     'onUpdate:checked': import("vue").PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
     checkedValue: {
         readonly type: import("vue").PropType<boolean | undefined>;
-        readonly validator: () => boolean;
         readonly default: undefined;
     };
     theme: import("vue").PropType<import("../../_mixins").Theme<"Radio", {
@@ -222,6 +200,7 @@ declare const _default: import("vue").DefineComponent<{
         boxShadowDisabled: string;
         color: string;
         colorDisabled: string;
+        colorActive: string;
         textColor: string;
         textColorDisabled: string;
         dotColorActive: string;
@@ -259,6 +238,7 @@ declare const _default: import("vue").DefineComponent<{
         boxShadowDisabled: string;
         color: string;
         colorDisabled: string;
+        colorActive: string;
         textColor: string;
         textColorDisabled: string;
         dotColorActive: string;
@@ -296,6 +276,7 @@ declare const _default: import("vue").DefineComponent<{
         boxShadowDisabled: string;
         color: string;
         colorDisabled: string;
+        colorActive: string;
         textColor: string;
         textColorDisabled: string;
         dotColorActive: string;
@@ -319,7 +300,7 @@ declare const _default: import("vue").DefineComponent<{
         labelPadding: string;
     }, any>>>;
 }>>, {
-    value: string | number;
+    value: string | number | boolean;
     disabled: boolean | undefined;
     checked: boolean | undefined;
     defaultChecked: boolean;

package/es/radio/src/Radio.js

@@ -1,20 +1,20 @@
 import { h, defineComponent, computed } from 'vue';
+import { useRtl } from '../../_mixins/use-rtl';
 import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { createKey, resolveWrappedSlot } from '../../_utils';
 import { radioLight } from '../styles';
-import useRadio from './use-radio';
+import { setup, radioProps } from './use-radio';
 import style from './styles/radio.cssr';
-import { useRtl } from '../../_mixins/use-rtl';
-export const radioProps = useRadio.props;
+export { radioProps };
 export default defineComponent({
     name: 'Radio',
-    props: Object.assign(Object.assign({}, useTheme.props), useRadio.props),
+    props: Object.assign(Object.assign({}, useTheme.props), radioProps),
     setup(props) {
-        const radio = useRadio(props);
+        const radio = setup(props);
         const themeRef = useTheme('Radio', '-radio', style, radioLight, props, radio.mergedClsPrefix);
         const cssVarsRef = computed(() => {
             const { mergedSize: { value: size } } = radio;
-            const { common: { cubicBezierEaseInOut }, self: { boxShadow, boxShadowActive, boxShadowDisabled, boxShadowFocus, boxShadowHover, color, colorDisabled, textColor, textColorDisabled, dotColorActive, dotColorDisabled, labelPadding, labelLineHeight, [createKey('fontSize', size)]: fontSize, [createKey('radioSize', size)]: radioSize } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { boxShadow, boxShadowActive, boxShadowDisabled, boxShadowFocus, boxShadowHover, color, colorDisabled, colorActive, textColor, textColorDisabled, dotColorActive, dotColorDisabled, labelPadding, labelLineHeight, [createKey('fontSize', size)]: fontSize, [createKey('radioSize', size)]: radioSize } } = themeRef.value;
             return {
                 '--n-bezier': cubicBezierEaseInOut,
                 '--n-label-line-height': labelLineHeight,
@@ -24,6 +24,7 @@ export default defineComponent({
                 '--n-box-shadow-focus': boxShadowFocus,
                 '--n-box-shadow-hover': boxShadowHover,
                 '--n-color': color,
+                '--n-color-active': colorActive,
                 '--n-color-disabled': colorDisabled,
                 '--n-dot-color-active': dotColorActive,
                 '--n-dot-color-disabled': dotColorDisabled,