feat: export all component props definitions (#3214)

* feat: export all component props definitions

* feat: export props definitions from index file

* Update src/_internal/scrollbar/src/Scrollbar.tsx

* Update src/carousel/src/CarouselDots.tsx

* Apply suggestions from code review

Co-authored-by: 07akioni <07akioni2@gmail.com>

CHANGELOG.en-US.md

@@ -18,6 +18,7 @@
 - `n-avatar` adds `intersection-observer-options` prop.
 - `n-number-animation` adds `on-finish` prop.
 - `n-notification` supports RTL.
+- Export all components' props object.
 
 ## 2.30.8
 

CHANGELOG.zh-CN.md

@@ -18,6 +18,7 @@
 - `n-avatar` 新增 `intersection-observer-options` 属性
 - `n-number-animation` 新增 `on-finish` 属性
 - `n-notification` 支持 RTL
+- 导出所有组件的 props 对象
 
 ## 2.30.8
 

src/affix/index.ts

@@ -1,2 +1,2 @@
-export { default as NAffix } from './src/Affix'
+export { default as NAffix, affixProps } from './src/Affix'
 export type { AffixProps } from './src/Affix'

src/alert/index.ts

@@ -1,2 +1,2 @@
-export { default as NAlert } from './src/Alert'
+export { default as NAlert, alertProps } from './src/Alert'
 export type { AlertProps } from './src/Alert'

src/alert/src/Alert.tsx

@@ -30,7 +30,7 @@ import { alertLight } from '../styles'
 import type { AlertTheme } from '../styles'
 import style from './styles/index.cssr'
 
-const alertProps = {
+export const alertProps = {
   ...(useTheme.props as ThemeProps<AlertTheme>),
   title: String,
   showIcon: {

src/anchor/index.ts

@@ -1,4 +1,4 @@
-export { default as NAnchor } from './src/AnchorAdapter'
+export { default as NAnchor, anchorProps } from './src/AnchorAdapter'
 export type { AnchorInst, AnchorProps } from './src/AnchorAdapter'
-export { default as NAnchorLink } from './src/Link'
+export { default as NAnchorLink, anchorLinkProps } from './src/Link'
 export type { AnchorLinkProps } from './src/Link'

src/anchor/src/AnchorAdapter.tsx

@@ -15,7 +15,7 @@ export interface AnchorInst {
   scrollTo: (href: string) => void
 }
 
-const anchorProps = {
+export const anchorProps = {
   ...(useTheme.props as ThemeProps<AnchorTheme>),
   affix: Boolean,
   ...affixProps,

src/anchor/src/Link.tsx

@@ -22,7 +22,7 @@ export interface AnchorInjection {
 export const anchorInjectionKey =
   createInjectionKey<AnchorInjection>('n-anchor')
 
-const anchorLinkProps = {
+export const anchorLinkProps = {
   title: String,
   href: String
 } as const

src/auto-complete/index.ts

@@ -1,4 +1,4 @@
-export { default as NAutoComplete } from './src/AutoComplete'
+export { default as NAutoComplete, autoCompleteProps } from './src/AutoComplete'
 export type { AutoCompleteProps } from './src/AutoComplete'
 export type {
   AutoCompleteOption,

src/auto-complete/src/AutoComplete.tsx

@@ -52,7 +52,7 @@ import type {
 } from './interface'
 import style from './styles/index.cssr'
 
-const autoCompleteProps = {
+export const autoCompleteProps = {
   ...(useTheme.props as ThemeProps<AutoCompleteTheme>),
   to: useAdjustedTo.propTo,
   bordered: {

src/avatar-group/index.ts

@@ -1,2 +1,2 @@
-export { default as NAvatarGroup } from './src/AvatarGroup'
+export { default as NAvatarGroup, avatarGroupProps } from './src/AvatarGroup'
 export type { AvatarGroupProps } from './src/AvatarGroup'

src/avatar-group/src/AvatarGroup.tsx

@@ -24,7 +24,7 @@ interface AvatarOption {
   src: string
 }
 
-const avatarGroupProps = {
+export const avatarGroupProps = {
   ...(useTheme.props as ThemeProps<AvatarGroupTheme>),
   max: Number,
   maxStyle: [Object, String] as PropType<CSSProperties | string>,

src/avatar/index.ts

@@ -1,2 +1,2 @@
-export { default as NAvatar } from './src/Avatar'
+export { default as NAvatar, avatarProps } from './src/Avatar'
 export type { AvatarProps } from './src/Avatar'

src/back-top/index.ts

@@ -1,2 +1,2 @@
-export { default as NBackTop } from './src/BackTop'
+export { default as NBackTop, backTopProps } from './src/BackTop'
 export type { BackTopProps } from './src/BackTop'

src/back-top/src/BackTop.tsx

@@ -33,7 +33,7 @@ import type { BackTopTheme } from '../styles'
 import BackTopIcon from './BackTopIcon'
 import style from './styles/index.cssr'
 
-const backTopProps = {
+export const backTopProps = {
   ...(useTheme.props as ThemeProps<BackTopTheme>),
   show: {
     type: Boolean as PropType<boolean | undefined>,

src/badge/index.ts

@@ -1,2 +1,2 @@
-export { default as NBadge } from './src/Badge'
+export { default as NBadge, badgeProps } from './src/Badge'
 export type { BadgeProps } from './src/Badge'

src/badge/src/Badge.tsx

@@ -24,7 +24,7 @@ import type { BadgeTheme } from '../styles'
 import style from './styles/index.cssr'
 import useRtl from '../../_mixins/use-rtl'
 
-const badgeProps = {
+export const badgeProps = {
   ...(useTheme.props as ThemeProps<BadgeTheme>),
   value: [String, Number] as PropType<string | number>,
   max: Number,

src/breadcrumb/index.ts

@@ -1,4 +1,7 @@
-export { default as NBreadcrumb } from './src/Breadcrumb'
-export { default as NBreadcrumbItem } from './src/BreadcrumbItem'
+export { default as NBreadcrumb, breadcrumbProps } from './src/Breadcrumb'
+export {
+  default as NBreadcrumbItem,
+  breadcrumbItemProps
+} from './src/BreadcrumbItem'
 export type { BreadcrumbProps } from './src/Breadcrumb'
 export type { BreadcrumbItemProps } from './src/BreadcrumbItem'

src/breadcrumb/src/Breadcrumb.tsx

@@ -22,7 +22,7 @@ export interface BreadcrumbInjection {
 export const breadcrumbInjectionKey =
   createInjectionKey<BreadcrumbInjection>('n-breadcrumb')
 
-const breadcrumbProps = {
+export const breadcrumbProps = {
   ...(useTheme.props as ThemeProps<BreadcrumbTheme>),
   separator: {
     type: String,

src/breadcrumb/src/BreadcrumbItem.tsx

@@ -10,7 +10,7 @@ import { resolveSlot, warn } from '../../_utils'
 import { useBrowserLocation } from '../../_utils/composable/use-browser-location'
 import { breadcrumbInjectionKey } from './Breadcrumb'
 
-const breadcrumbItemProps = {
+export const breadcrumbItemProps = {
   separator: String,
   href: String,
   clickable: {

src/button-group/index.ts

@@ -1,2 +1,2 @@
-export { default as NButtonGroup } from './src/ButtonGroup'
+export { default as NButtonGroup, buttonGroupProps } from './src/ButtonGroup'
 export type { ButtonGroupProps } from './src/ButtonGroup'

src/button-group/src/ButtonGroup.tsx

@@ -10,7 +10,7 @@ export interface ButtonGroupInjection {
   size?: Size | undefined
 }
 
-const buttonGroupProps = {
+export const buttonGroupProps = {
   size: {
     type: String as PropType<Size | undefined>,
     default: undefined

src/button/index.ts

@@ -1,2 +1,6 @@
-export { default as NButton, XButton as NxButton } from './src/Button'
+export {
+  default as NButton,
+  XButton as NxButton,
+  buttonProps
+} from './src/Button'
 export type { ButtonProps } from './src/Button'

src/button/src/Button.tsx

@@ -38,7 +38,7 @@ import type { Type, Size } from './interface'
 import style from './styles/index.cssr'
 import useRtl from '../../_mixins/use-rtl'
 
-const buttonProps = {
+export const buttonProps = {
   ...(useTheme.props as ThemeProps<ButtonTheme>),
   color: String,
   textColor: String,

src/calendar/index.ts

@@ -1,2 +1,2 @@
-export { default as NCalendar } from './src/Calendar'
+export { default as NCalendar, calendarProps } from './src/Calendar'
 export type { CalendarProps } from './src/Calendar'

src/calendar/src/Calendar.tsx

@@ -31,7 +31,7 @@ import type { CalendarTheme } from '../styles'
 import type { OnUpdateValue, DateItem, OnPanelChange } from './interface'
 import style from './styles/index.cssr'
 
-const calendarProps = {
+export const calendarProps = {
   ...(useTheme.props as ThemeProps<CalendarTheme>),
   isDateDisabled: Function as PropType<(date: number) => boolean | undefined>,
   value: Number,

src/card/index.ts

@@ -1,2 +1,2 @@
-export { default as NCard } from './src/Card'
+export { default as NCard, cardProps } from './src/Card'
 export type { CardProps } from './src/Card'

src/card/src/Card.tsx

@@ -46,7 +46,7 @@ export const cardBaseProps = {
 
 export const cardBasePropKeys = keysOf(cardBaseProps)
 
-const cardProps = {
+export const cardProps = {
   ...(useTheme.props as ThemeProps<CardTheme>),
   ...cardBaseProps
 }

src/carousel/index.ts

@@ -1,3 +1,3 @@
-export { default as NCarousel } from './src/Carousel'
+export { default as NCarousel, carouselProps } from './src/Carousel'
 export { default as NCarouselItem } from './src/CarouselItem'
 export type { CarouselProps } from './src/Carousel'

src/carousel/src/Carousel.tsx

@@ -51,7 +51,7 @@ type TransitionStyle = Partial<
 Pick<CSSProperties, ElementOf<typeof transitionProperties>>
 >
 
-const carouselProps = {
+export const carouselProps = {
   ...(useTheme.props as ThemeProps<CarouselTheme>),
   defaultIndex: {
     type: Number,

src/cascader/index.ts

@@ -1,3 +1,3 @@
-export { default as NCascader } from './src/Cascader'
+export { default as NCascader, cascaderProps } from './src/Cascader'
 export type { CascaderProps } from './src/Cascader'
 export type { CascaderOption, CascaderInst } from './src/interface'

src/cascader/src/Cascader.tsx

@@ -64,7 +64,7 @@ import type {
 import { cascaderInjectionKey } from './interface'
 import style from './styles/index.cssr'
 
-const cascaderProps = {
+export const cascaderProps = {
   ...(useTheme.props as ThemeProps<CascaderTheme>),
   allowCheckingNotLoaded: Boolean,
   to: useAdjustedTo.propTo,

src/checkbox/index.ts

@@ -1,5 +1,8 @@
-export { default as NCheckbox } from './src/Checkbox'
-export { default as NCheckboxGroup } from './src/CheckboxGroup'
+export { default as NCheckbox, checkboxProps } from './src/Checkbox'
+export {
+  default as NCheckboxGroup,
+  checkboxGroupProps
+} from './src/CheckboxGroup'
 export type { CheckboxProps } from './src/Checkbox'
 export type { CheckboxGroupProps } from './src/CheckboxGroup'
 export type { CheckboxInst } from './src/interface'

src/checkbox/src/Checkbox.tsx

@@ -35,7 +35,7 @@ import type {
 import style from './styles/index.cssr'
 import useRtl from '../../_mixins/use-rtl'
 
-const checkboxProps = {
+export const checkboxProps = {
   ...(useTheme.props as ThemeProps<CheckboxTheme>),
   size: String as PropType<'small' | 'medium' | 'large'>,
   checked: {

src/checkbox/src/CheckboxGroup.tsx

@@ -27,7 +27,7 @@ export interface CheckboxGroupInjection {
 export const checkboxGroupInjectionKey =
   createInjectionKey<CheckboxGroupInjection>('n-checkbox-group')
 
-const checkboxGroupProps = {
+export const checkboxGroupProps = {
   min: Number,
   max: Number,
   size: String as PropType<'small' | 'medium' | 'large'>,

src/code/index.ts

@@ -1,2 +1,2 @@
-export { default as NCode } from './src/Code'
+export { default as NCode, codeProps } from './src/Code'
 export type { CodeProps } from './src/Code'

src/code/src/Code.tsx

@@ -21,7 +21,7 @@ import type { CodeTheme } from '../styles'
 import style from './styles/index.cssr'
 import type { ExtractPublicPropTypes } from '../../_utils'
 
-const codeProps = {
+export const codeProps = {
   ...(useTheme.props as ThemeProps<CodeTheme>),
   language: String,
   code: {

src/collapse-transition/index.ts

@@ -1,2 +1,5 @@
-export { default as NCollapseTransition } from './src/CollapseTransition'
+export {
+  default as NCollapseTransition,
+  collapseTransitionProps
+} from './src/CollapseTransition'
 export type { CollapseTransitionProps } from './src/CollapseTransition'

src/collapse-transition/src/CollapseTransition.tsx

@@ -16,7 +16,7 @@ import style from './styles/index.cssr'
 import { collapseTransitionLight } from '../styles'
 import { NFadeInExpandTransition } from '../../_internal'
 
-const collapseProps = {
+export const collapseTransitionProps = {
   ...(useTheme.props as ThemeProps<CollapseTransitionTheme>),
   show: {
     type: Boolean,
@@ -34,12 +34,12 @@ const collapseProps = {
 } as const
 
 export type CollapseTransitionProps = ExtractPublicPropTypes<
-  typeof collapseProps
+  typeof collapseTransitionProps
 >
 
 export default defineComponent({
   name: 'CollapseTransition',
-  props: collapseProps,
+  props: collapseTransitionProps,
   inheritAttrs: false,
   setup (props) {
     if (__DEV__) {

src/collapse/index.ts

@@ -1,4 +1,4 @@
-export { default as NCollapse } from './src/Collapse'
-export { default as NCollapseItem } from './src/CollapseItem'
+export { default as NCollapse, collapseProps } from './src/Collapse'
+export { default as NCollapseItem, collapseItemProps } from './src/CollapseItem'
 export type { CollapseProps } from './src/Collapse'
 export type { CollapseItemProps } from './src/CollapseItem'

src/collapse/src/Collapse.tsx

@@ -31,7 +31,7 @@ import {
   OnItemHeaderClickImpl
 } from './interface'
 
-const collapseProps = {
+export const collapseProps = {
   ...(useTheme.props as ThemeProps<CollapseTheme>),
   defaultExpandedNames: {
     type: [Array, String] as PropType<

src/collapse/src/CollapseItem.tsx

@@ -12,7 +12,7 @@ import NCollapseItemContent from './CollapseItemContent'
 import useRtl from '../../_mixins/use-rtl'
 import { useConfig } from '../../_mixins'
 
-const collapseItemProps = {
+export const collapseItemProps = {
   title: String,
   name: [String, Number] as PropType<string | number>,
   displayDirective: String as PropType<'if' | 'show'>

src/color-picker/index.ts

@@ -1,2 +1,2 @@
-export { default as NColorPicker } from './src/ColorPicker'
+export { default as NColorPicker, colorPickerProps } from './src/ColorPicker'
 export type { ColorPickerProps } from './src/ColorPicker'

src/color-picker/src/ColorPicker.tsx

@@ -71,7 +71,7 @@ import ColorPreview from './ColorPreview'
 import { colorPickerInjectionKey } from './context'
 import style from './styles/index.cssr'
 
-export const colorPickerPanelProps = {
+export const colorPickerProps = {
   ...(useTheme.props as ThemeProps<ColorPickerTheme>),
   value: String as PropType<string | null>,
   show: {
@@ -119,13 +119,11 @@ export const colorPickerPanelProps = {
   onUpdateValue: [Function, Array] as PropType<MaybeArray<OnUpdateValue>>
 } as const
 
-export type ColorPickerProps = ExtractPublicPropTypes<
-  typeof colorPickerPanelProps
->
+export type ColorPickerProps = ExtractPublicPropTypes<typeof colorPickerProps>
 
 export default defineComponent({
   name: 'ColorPicker',
-  props: colorPickerPanelProps,
+  props: colorPickerProps,
   setup (props, { slots }) {
     const selfRef = ref<HTMLElement | null>(null)
     let upcomingValue: string | null = null

src/countdown/index.ts

@@ -1,2 +1,2 @@
-export { default as NCountdown } from './src/Countdown'
+export { default as NCountdown, countdownProps } from './src/Countdown'
 export type { CountdownProps, CountdownTimeInfo } from './src/Countdown'

src/countdown/src/Countdown.tsx

@@ -16,7 +16,7 @@ export interface CountdownTimeInfo {
   milliseconds: number
 }
 
-const countdownProps = {
+export const countdownProps = {
   duration: {
     type: Number,
     default: 0

src/data-table/index.ts

@@ -1,4 +1,4 @@
-export { default as NDataTable } from './src/DataTable'
+export { default as NDataTable, dataTableProps } from './src/DataTable'
 export type { DataTableProps } from './src/DataTable'
 export type {
   RowKey as DataTableRowKey,

src/date-picker/index.ts

@@ -1,3 +1,3 @@
-export { default as NDatePicker } from './src/DatePicker'
+export { default as NDatePicker, datePickerProps } from './src/DatePicker'
 export type { DatePickerProps } from './src/DatePicker'
 export type { DatePickerInst } from './src/interface'

src/date-picker/src/DatePicker.tsx

@@ -79,7 +79,7 @@ import MonthPanel from './panel/month'
 import MonthRangePanel from './panel/monthrange'
 import style from './styles/index.cssr'
 
-const datePickerProps = {
+export const datePickerProps = {
   ...(useTheme.props as ThemeProps<DatePickerTheme>),
   to: useAdjustedTo.propTo,
   bordered: {

src/descriptions/index.ts

@@ -1,4 +1,7 @@
-export { default as NDescriptions } from './src/Descriptions'
-export { default as NDescriptionsItem } from './src/DescriptionsItem'
+export { default as NDescriptions, descriptionsProps } from './src/Descriptions'
+export {
+  default as NDescriptionsItem,
+  descriptionsItemProps
+} from './src/DescriptionsItem'
 export type { DescriptionsProps, DescriptionProps } from './src/Descriptions'
 export type { DescriptionItemProps } from './src/DescriptionsItem'

src/descriptions/src/Descriptions.tsx

@@ -22,7 +22,7 @@ import type { DescriptionsTheme } from '../styles'
 import { isDescriptionsItem } from './utils'
 import style from './styles/index.cssr'
 
-const descriptionProps = {
+export const descriptionsProps = {
   ...(useTheme.props as ThemeProps<DescriptionsTheme>),
   title: String,
   column: {
@@ -51,13 +51,13 @@ const descriptionProps = {
   contentStyle: [Object, String] as PropType<string | CSSProperties>
 } as const
 
-export type DescriptionsProps = ExtractPublicPropTypes<typeof descriptionProps>
+export type DescriptionsProps = ExtractPublicPropTypes<typeof descriptionsProps>
 /** @deprecated You should use `DescriptionsProps` */
 export type DescriptionProps = DescriptionsProps
 
 export default defineComponent({
   name: 'Descriptions',
-  props: descriptionProps,
+  props: descriptionsProps,
   setup (props) {
     const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props)
     const themeRef = useTheme(

src/descriptions/src/DescriptionsItem.ts

@@ -1,12 +1,8 @@
-import {
-  defineComponent,
-  PropType,
-  CSSProperties
-} from 'vue'
+import { defineComponent, PropType, CSSProperties } from 'vue'
 import type { ExtractPublicPropTypes } from '../../_utils'
 import { DESCRIPTION_ITEM_FLAG } from './utils'
 
-const descriptionItemProps = {
+export const descriptionsItemProps = {
   label: String,
   span: {
     type: Number,
@@ -17,13 +13,13 @@ const descriptionItemProps = {
 } as const
 
 export type DescriptionItemProps = ExtractPublicPropTypes<
-  typeof descriptionItemProps
+  typeof descriptionsItemProps
 >
 
 export default defineComponent({
   name: 'DescriptionsItem',
   [DESCRIPTION_ITEM_FLAG]: true,
-  props: descriptionItemProps,
+  props: descriptionsItemProps,
   render () {
     return null
   }

src/dialog/index.ts

@@ -1,6 +1,7 @@
 export { NDialog } from './src/Dialog'
+export { dialogProps } from './src/dialogProps'
 export type { DialogProps } from './src/dialogProps'
-export { NDialogProvider } from './src/DialogProvider'
+export { NDialogProvider, dialogProviderProps } from './src/DialogProvider'
 export type {
   DialogProviderProps,
   DialogProviderInst,

src/dialog/src/DialogProvider.ts

@@ -58,7 +58,7 @@ interface DialogInst {
 
 export type DialogProviderInst = DialogApiInjection
 
-const dialogProviderProps = {
+export const dialogProviderProps = {
   injectionKey: String,
   to: [String, Object] as PropType<string | HTMLElement>
 }

src/divider/index.ts

@@ -1,2 +1,2 @@
-export { default as NDivider } from './src/Divider'
+export { default as NDivider, dividerProps } from './src/Divider'
 export type { DividerProps } from './src/Divider'

src/divider/src/Divider.tsx

@@ -13,7 +13,7 @@ import { dividerLight } from '../styles'
 import type { DividerTheme } from '../styles'
 import style from './styles/index.cssr'
 
-const dividerProps = {
+export const dividerProps = {
   ...(useTheme.props as ThemeProps<DividerTheme>),
   titlePlacement: {
     type: String as PropType<'left' | 'center' | 'right'>,

src/drawer/index.ts

@@ -1,5 +1,8 @@
-export { default as NDrawer } from './src/Drawer'
+export { default as NDrawer, drawerProps } from './src/Drawer'
 export type { DrawerProps } from './src/Drawer'
-export { default as NDrawerContent } from './src/DrawerContent'
+export {
+  default as NDrawerContent,
+  drawerContentProps
+} from './src/DrawerContent'
 export type { DrawerContentProps } from './src/DrawerContent'
 export type { Placement as DrawerPlacement } from './src/DrawerBodyWrapper'

src/drawer/src/Drawer.tsx

@@ -29,7 +29,7 @@ import type { Placement } from './DrawerBodyWrapper'
 import { drawerInjectionKey } from './interface'
 import style from './styles/index.cssr'
 
-const drawerProps = {
+export const drawerProps = {
   ...(useTheme.props as ThemeProps<DrawerTheme>),
   show: Boolean,
   width: {

src/drawer/src/DrawerContent.tsx

@@ -5,7 +5,7 @@ import { throwError } from '../../_utils'
 import type { ExtractPublicPropTypes } from '../../_utils'
 import { drawerInjectionKey } from './interface'
 
-const drawerContentProps = {
+export const drawerContentProps = {
   title: {
     type: String
   },

src/dropdown/index.ts

@@ -1,4 +1,4 @@
-export { default as NDropdown } from './src/Dropdown'
+export { default as NDropdown, dropdownProps } from './src/Dropdown'
 export type { DropdownProps } from './src/Dropdown'
 export type {
   DropdownOption,

src/dropdown/src/Dropdown.tsx

@@ -115,7 +115,7 @@ const popoverPropKeys = Object.keys(popoverBaseProps) as Array<
 keyof typeof popoverBaseProps
 >
 
-const dropdownProps = {
+export const dropdownProps = {
   ...popoverBaseProps,
   ...dropdownBaseProps,
   ...(useTheme.props as ThemeProps<DropdownTheme>)

src/dynamic-input/index.ts

@@ -1,2 +1,2 @@
-export { default as NDynamicInput } from './src/DynamicInput'
+export { default as NDynamicInput, dynamicInputProps } from './src/DynamicInput'
 export type { DynamicInputProps } from './src/DynamicInput'

src/dynamic-input/src/DynamicInput.tsx

@@ -40,7 +40,7 @@ import useRtl from '../../_mixins/use-rtl'
 
 const globalDataKeyMap = new WeakMap()
 
-const dynamicInputProps = {
+export const dynamicInputProps = {
   ...(useTheme.props as ThemeProps<DynamicInputTheme>),
   max: Number,
   min: {

src/dynamic-tags/index.ts

@@ -1,2 +1,2 @@
-export { default as NDynamicTags } from './src/DynamicTags'
+export { default as NDynamicTags, dynamicTagsProps } from './src/DynamicTags'
 export type { DynamicTagsProps } from './src/DynamicTags'

src/dynamic-tags/src/DynamicTags.tsx

@@ -39,7 +39,7 @@ import type {
 } from './interface'
 import style from './styles/index.cssr'
 
-const dynamicTagsProps = {
+export const dynamicTagsProps = {
   ...(useTheme.props as ThemeProps<DynamicTagsTheme>),
   ...commonProps,
   size: {

src/element/index.ts

@@ -1,3 +1,3 @@
-export { default as NElement } from './src/Element'
+export { default as NElement, elementProps } from './src/Element'
 export { default as NEl } from './src/Element'
 export type { ElementProps } from './src/Element'

src/element/src/Element.ts

@@ -6,7 +6,7 @@ import type { ExtractPublicPropTypes } from '../../_utils'
 import { elementLight } from '../styles'
 import type { ElementTheme } from '../styles'
 
-const elementProps = {
+export const elementProps = {
   ...(useTheme.props as ThemeProps<ElementTheme>),
   tag: {
     type: String,

src/ellipsis/index.ts

@@ -1,2 +1,2 @@
-export { default as NEllipsis } from './src/Ellipsis'
+export { default as NEllipsis, ellipsisProps } from './src/Ellipsis'
 export type { EllipsisProps } from './src/Ellipsis'

src/ellipsis/src/Ellipsis.tsx

@@ -17,7 +17,7 @@ function createCursorClass (clsPrefix: string, cursor: string): string {
   return `${clsPrefix}-ellipsis--cursor-${cursor}`
 }
 
-const ellipsisProps = {
+export const ellipsisProps = {
   ...(useTheme.props as ThemeProps<EllipsisTheme>),
   expandTrigger: String as PropType<'click'>,
   lineClamp: [Number, String] as PropType<string | number>,

src/empty/index.ts

@@ -1,2 +1,2 @@
-export { default as NEmpty } from './src/Empty'
+export { default as NEmpty, emptyProps } from './src/Empty'
 export type { EmptyProps } from './src/Empty'

src/empty/src/Empty.tsx

@@ -10,7 +10,7 @@ import { emptyLight } from '../styles'
 import type { EmptyTheme } from '../styles'
 import style from './styles/index.cssr'
 
-const emptyProps = {
+export const emptyProps = {
   ...(useTheme.props as ThemeProps<EmptyTheme>),
   description: String,
   showDescription: {

src/form/index.ts

@@ -1,10 +1,12 @@
-export { default as NForm } from './src/Form'
+export { default as NForm, formProps } from './src/Form'
 export type { FormProps } from './src/Form'
-export { default as NFormItem } from './src/FormItem'
+export { default as NFormItem, formItemProps } from './src/FormItem'
 export type { FormItemProps } from './src/FormItem'
 export {
   default as NFormItemGridItem,
-  default as NFormItemGi
+  default as NFormItemGi,
+  formItemGiProps,
+  formItemGiProps as formItemGridItemProps
 } from './src/FormItemGridItem'
 export type {
   FormItemGiProps,

src/form/src/Form.tsx

@@ -26,7 +26,7 @@ import type {
 import { ExtractPublicPropTypes, keysOf } from '../../_utils'
 import { formInjectionKey, formItemInstsInjectionKey } from './context'
 
-const formProps = {
+export const formProps = {
   ...(useTheme.props as ThemeProps<FormTheme>),
   inline: Boolean,
   labelWidth: [Number, String] as PropType<number | string>,

src/form/src/FormItemRow.ts

@@ -8,7 +8,7 @@ import NFormItemCol, {
 } from './FormItemCol'
 import { FormItemColRef } from './interface'
 
-const formItemRowProps = {
+export const formItemRowProps = {
   ...rowProps,
   ...formItemColProps
 }

src/gradient-text/index.ts

@@ -1,2 +1,2 @@
-export { default as NGradientText } from './src/GradientText'
+export { default as NGradientText, gradientTextProps } from './src/GradientText'
 export type { GradientTextProps } from './src/GradientText'

src/gradient-text/src/GradientText.tsx

@@ -15,7 +15,7 @@ type Gradient =
     to: string
   }
 
-const gradientTextProps = {
+export const gradientTextProps = {
   ...(useTheme.props as ThemeProps<GradientTextTheme>),
   size: [String, Number] as PropType<string | number>,
   fontSize: [String, Number] as PropType<string | number>,

src/grid/index.ts

@@ -1,5 +1,5 @@
-export { default as NGrid } from './src/Grid'
+export { default as NGrid, gridProps } from './src/Grid'
 export type { GridProps } from './src/Grid'
-export { default as NGridItem } from './src/GridItem'
-export { default as NGi } from './src/GridItem'
+export { default as NGridItem, gridItemProps } from './src/GridItem'
+export { default as NGi, gridItemProps as giProps } from './src/GridItem'
 export type { GridItemProps } from './src/GridItem'

src/grid/src/Grid.tsx

@@ -32,7 +32,7 @@ const defaultCols = 24
 
 const SSR_ATTR_NAME = '__ssr__'
 
-const gridProps = {
+export const gridProps = {
   responsive: {
     type: [String, Boolean] as PropType<'self' | 'screen'>,
     default: 'self'

src/icon-wrapper/index.ts

@@ -1,2 +1,2 @@
-export { NIconWrapper } from './src/IconWrapper'
+export { NIconWrapper, iconWrapperProps } from './src/IconWrapper'
 export type { IconWrapperProps } from './src/IconWrapper'

src/icon-wrapper/src/IconWrapper.tsx

@@ -6,7 +6,7 @@ import { iconWrapperLight } from '../styles'
 import type { IconWrapperTheme } from '../styles'
 import style from './styles/index.cssr'
 
-const iconWrapperProps = {
+export const iconWrapperProps = {
   ...(useTheme.props as ThemeProps<IconWrapperTheme>),
   size: {
     type: Number,

src/icon/index.ts

@@ -1,2 +1,2 @@
-export { NIcon } from './src/Icon'
+export { NIcon, iconProps } from './src/Icon'
 export type { IconProps } from './src/Icon'

src/icon/src/Icon.ts

@@ -15,7 +15,7 @@ import style from './styles/index.cssr'
 
 export type Depth = 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5' | undefined
 
-const iconProps = {
+export const iconProps = {
   ...(useTheme.props as ThemeProps<IconTheme>),
   depth: [String, Number] as PropType<Depth>,
   size: [Number, String] as PropType<number | string>,

src/image/index.ts

@@ -1,4 +1,4 @@
-export { default as NImage } from './src/Image'
+export { default as NImage, imageProps } from './src/Image'
 export type { ImageProps } from './src/Image'
-export { default as NImageGroup } from './src/ImageGroup'
+export { default as NImageGroup, imageGroupProps } from './src/ImageGroup'
 export type { ImageGroupProps } from './src/ImageGroup'

src/image/src/Image.tsx

@@ -24,7 +24,7 @@ export interface ImageInst {
   click: () => void
 }
 
-const imageProps = {
+export const imageProps = {
   alt: String,
   height: [String, Number] as PropType<string | number>,
   imgProps: Object as PropType<ImgHTMLAttributes>,

src/image/src/ImageGroup.tsx

@@ -13,7 +13,7 @@ ImagePreviewInst & {
 }
 >('n-image-group')
 
-const imageGroupProps = imagePreviewSharedProps
+export const imageGroupProps = imagePreviewSharedProps
 
 export type ImageGroupProps = ExtractPublicPropTypes<typeof imageGroupProps>
 

src/input-number/index.ts

@@ -1,3 +1,3 @@
-export { default as NInputNumber } from './src/InputNumber'
+export { default as NInputNumber, inputNumberProps } from './src/InputNumber'
 export type { InputNumberProps } from './src/InputNumber'
 export type { InputNumberInst } from './src/interface'

src/input-number/src/InputNumber.tsx

@@ -38,7 +38,7 @@ import useRtl from '../../_mixins/use-rtl'
 const HOLDING_CHANGE_THRESHOLD = 800
 const HOLDING_CHANGE_INTERVAL = 100
 
-const inputNumberProps = {
+export const inputNumberProps = {
   ...(useTheme.props as ThemeProps<InputNumberTheme>),
   autofocus: Boolean,
   loading: {

src/input/index.ts

@@ -1,7 +1,10 @@
-export { default as NInput } from './src/Input'
+export { default as NInput, inputProps } from './src/Input'
 export type { InputInst } from './src/interface'
 export type { InputProps } from './src/Input'
-export { default as NInputGroup } from './src/InputGroup'
-export { default as NInputGroupLabel } from './src/InputGroupLabel'
+export { default as NInputGroup, inputGroupProps } from './src/InputGroup'
+export {
+  default as NInputGroupLabel,
+  inputGroupLabelProps
+} from './src/InputGroupLabel'
 export type { InputGroupProps } from './src/InputGroup'
 export type { InputGroupLabelProps } from './src/InputGroupLabel'

src/input/src/Input.tsx

@@ -62,7 +62,7 @@ import { isEmptyInputValue, useCursor } from './utils'
 import WordCount from './WordCount'
 import style from './styles/input.cssr'
 
-const inputProps = {
+export const inputProps = {
   ...(useTheme.props as ThemeProps<InputTheme>),
   bordered: {
     type: Boolean as PropType<boolean | undefined>,

src/input/src/InputGroup.tsx

@@ -3,7 +3,7 @@ import { useConfig, useStyle } from '../../_mixins'
 import type { ExtractPublicPropTypes } from '../../_utils'
 import style from './styles/input-group.cssr'
 
-const inputGroupProps: { [key in any]: never } = {}
+export const inputGroupProps: { [key in any]: never } = {}
 
 export type InputGroupProps = ExtractPublicPropTypes<typeof inputGroupProps>
 

src/input/src/InputGroupLabel.tsx

@@ -8,7 +8,7 @@ import type { InputTheme } from '../styles'
 import style from './styles/input-group-label.cssr'
 import type { Size } from './interface'
 
-const inputGroupLabelProps = {
+export const inputGroupLabelProps = {
   ...(useTheme.props as ThemeProps<InputTheme>),
   size: {
     type: String as PropType<Size>,

src/layout/index.ts

@@ -1,8 +1,15 @@
-export { default as NLayout } from './src/Layout'
+export {
+  default as NLayout,
+  layoutProps,
+  layoutProps as layoutContentProps
+} from './src/Layout'
 export { default as NLayoutContent } from './src/LayoutContent'
-export { default as NLayoutHeader } from './src/LayoutHeader'
-export { default as NLayoutFooter } from './src/LayoutFooter'
-export { default as NLayoutSider } from './src/LayoutSider'
+export {
+  default as NLayoutHeader,
+  headerProps as layoutHeaderProps
+} from './src/LayoutHeader'
+export { default as NLayoutFooter, layoutFooterProps } from './src/LayoutFooter'
+export { default as NLayoutSider, layoutSiderProps } from './src/LayoutSider'
 export type {
   LayoutProps,
   LayoutProps as LayoutContentProps

src/layout/src/Layout.tsx

@@ -20,7 +20,7 @@ import type { LayoutInst } from './interface'
 import { positionProp } from './interface'
 import style from './styles/layout.cssr'
 
-const layoutProps = {
+export const layoutProps = {
   embedded: Boolean,
   position: positionProp,
   nativeScrollbar: {

src/layout/src/LayoutFooter.tsx

@@ -7,7 +7,7 @@ import { positionProp } from './interface'
 import style from './styles/layout-footer.cssr'
 import type { ExtractPublicPropTypes } from '../../_utils'
 
-const layoutFooterProps = {
+export const layoutFooterProps = {
   ...(useTheme.props as ThemeProps<LayoutTheme>),
   inverted: Boolean,
   position: positionProp,

src/layout/src/LayoutHeader.tsx

@@ -7,7 +7,7 @@ import { positionProp } from './interface'
 import style from './styles/layout-header.cssr'
 import { ExtractPublicPropTypes } from '../../_utils'
 
-const headerProps = {
+export const headerProps = {
   position: positionProp,
   inverted: Boolean,
   bordered: {

src/layout/src/LayoutSider.tsx

@@ -28,7 +28,7 @@ import {
 } from './interface'
 import { layoutInjectionKey } from './Layout'
 
-const layoutSiderProps = {
+export const layoutSiderProps = {
   position: positionProp,
   bordered: Boolean,
   collapsedWidth: {

src/legacy-grid/index.ts

@@ -1,4 +1,4 @@
-export { default as NRow } from './src/Row'
-export { default as NCol } from './src/Col'
+export { default as NRow, rowProps } from './src/Row'
+export { default as NCol, colProps } from './src/Col'
 export type { RowProps } from './src/Row'
 export type { ColProps } from './src/Col'

src/list/index.ts

@@ -1,3 +1,3 @@
-export { default as NList } from './src/List'
+export { default as NList, listProps } from './src/List'
 export type { ListProps } from './src/List'
 export { default as NListItem } from './src/ListItem'

src/list/src/List.tsx

@@ -14,7 +14,7 @@ import { listLight } from '../styles'
 import type { ListTheme } from '../styles'
 import style from './styles/index.cssr'
 
-const listProps = {
+export const listProps = {
   ...(useTheme.props as ThemeProps<ListTheme>),
   size: {
     type: String as PropType<'small' | 'medium' | 'large'>,

src/loading-bar/index.ts

@@ -1,4 +1,7 @@
-export { default as NLoadingBarProvider } from './src/LoadingBarProvider'
+export {
+  default as NLoadingBarProvider,
+  loadingBarProviderProps
+} from './src/LoadingBarProvider'
 export type {
   LoadingBarProviderInst,
   LoadingBarProviderProps,