├── .dumi ├── components │ └── SemanticPreview.tsx ├── hooks │ ├── useLayoutState.ts │ ├── useLocation.ts │ └── useMenu.tsx ├── loading.js ├── pages │ ├── 404 │ │ └── index.tsx │ ├── index-cn │ │ └── index.ts │ └── index │ │ ├── ComponentsBlock.tsx │ │ ├── ContentPlaceholder.tsx │ │ └── index.tsx ├── rehypePlugin.ts ├── remarkPlugin.ts ├── theme │ ├── SiteContext.ts │ ├── builtins │ │ ├── Container │ │ │ └── index.tsx │ │ ├── DemoGrid │ │ │ └── index.tsx │ │ ├── IconSearch │ │ │ ├── CopyableIcon.tsx │ │ │ ├── Icons.tsx │ │ │ ├── fields.ts │ │ │ └── index.tsx │ │ ├── InstallDependencies │ │ │ ├── bun.tsx │ │ │ ├── index.tsx │ │ │ ├── npm.tsx │ │ │ ├── pnpm.tsx │ │ │ └── yarn.tsx │ │ ├── IntroduceIcon.tsx │ │ ├── Previewer │ │ │ ├── Actions.tsx │ │ │ ├── SourceCode.tsx │ │ │ └── index.tsx │ │ └── SourceCodeWrapper │ │ │ └── index.tsx │ ├── common │ │ ├── CommonHelmet.tsx │ │ ├── Link.tsx │ │ ├── Loading.tsx │ │ └── PrevAndNext.tsx │ ├── icons │ │ ├── CodeExpandIcon.tsx │ │ ├── CodeIcon.tsx │ │ ├── CodeSandboxIcon.tsx │ │ ├── ExternalLinkIcon.tsx │ │ └── StackBlitzIcon.tsx │ ├── layouts │ │ ├── DocLayout.tsx │ │ ├── GlobalLayout.tsx │ │ ├── IndexLayout.tsx │ │ └── SidebarLayout.tsx │ ├── locales │ │ ├── en-US.json │ │ └── zh-CN.json │ ├── plugin.ts │ ├── slots │ │ ├── Content │ │ │ ├── DocAnchor.tsx │ │ │ ├── InViewSuspense.tsx │ │ │ ├── NavBreadcrumb.tsx │ │ │ └── index.tsx │ │ ├── Footer │ │ │ └── index.tsx │ │ ├── Header │ │ │ ├── GithubIcon.tsx │ │ │ ├── LangSwitch.tsx │ │ │ ├── Logo.tsx │ │ │ ├── Navigation.tsx │ │ │ ├── SearchBar.tsx │ │ │ ├── SearchResult.tsx │ │ │ ├── ThemeSwitch.tsx │ │ │ └── index.tsx │ │ └── Sidebar │ │ │ └── index.tsx │ ├── styles │ │ ├── code.css │ │ ├── index.css │ │ ├── markdown.css │ │ ├── nprogress.css │ │ └── reset.css │ └── utils.ts └── tsconfig.json ├── .dumirc.ts ├── .editorconfig ├── .eslintrc.js ├── .fatherrc.ts ├── .github └── workflows │ └── deploy-docs.yml ├── .gitignore ├── .husky ├── commit-msg └── pre-commit ├── .prettierignore ├── .prettierrc.js ├── CHANGELOG.en-US.md ├── CHANGELOG.zh-CN.md ├── LICENSE ├── README.md ├── docs ├── i18n.en-US.md ├── i18n.zh-CN.md ├── installation.en-US.md ├── installation.zh-CN.md ├── introduce.en-US.md ├── introduce.zh-CN.md ├── semantic-class.en-US.md ├── semantic-class.zh-CN.md ├── style-override.en-US.md ├── style-override.zh-CN.md ├── theme.en-US.md ├── theme.zh-CN.md ├── use-with-next.en-US.md ├── use-with-next.zh-CN.md ├── use-with-umi.en-US.md ├── use-with-umi.zh-CN.md ├── use-with-vite.en-US.md └── use-with-vite.zh-CN.md ├── package.json ├── patches ├── @rc-component__context@1.4.0.patch └── rc-overflow@1.3.1.patch ├── plugins ├── compiled │ ├── babel-plugin-transform-use-client.js │ └── dumi-plugin-tailwindcss.js ├── dumi-plugin-tailwindcss.ts └── father-plugin-generate-locale.ts ├── pnpm-lock.yaml ├── public ├── favicon.ico └── logo.svg ├── scripts ├── release.js └── sort-api-table.js ├── src ├── components │ ├── _util │ │ ├── ActionButton.tsx │ │ ├── ContextIsolator.tsx │ │ ├── ExpandIcon.tsx │ │ ├── FastColor.tsx │ │ ├── ZIndexContext.ts │ │ ├── aria-data-attrs.ts │ │ ├── classNameUtils.ts │ │ ├── colors.ts │ │ ├── extendsObject.ts │ │ ├── getDataOrAriaProps.ts │ │ ├── getRenderPropValue.ts │ │ ├── hooks │ │ │ ├── useBreakpoint.tsx │ │ │ ├── useClosable.tsx │ │ │ ├── useEffectState.ts │ │ │ ├── useForceUpdate.ts │ │ │ ├── useInterval.ts │ │ │ ├── useIsMounted.ts │ │ │ ├── useLatestValue.ts │ │ │ ├── useMultipleSelect.ts │ │ │ ├── usePatchElement.ts │ │ │ ├── usePlaceholder.ts │ │ │ ├── usePrevious.ts │ │ │ ├── useSemanticCls.ts │ │ │ ├── useSyncRefs.ts │ │ │ ├── useSyncState.ts │ │ │ ├── useUrlState.tsx │ │ │ └── useZIndex.ts │ │ ├── index.en-US.md │ │ ├── index.zh-CN.md │ │ ├── isBrowser.ts │ │ ├── isNil.ts │ │ ├── isNumeric.ts │ │ ├── isPrimitive.ts │ │ ├── placementArrow.ts │ │ ├── placements.ts │ │ ├── platform.ts │ │ ├── reactNode.ts │ │ ├── rect.ts │ │ ├── responsiveObserver.ts │ │ ├── scroll.ts │ │ ├── statusUtils.tsx │ │ ├── styleChecker.tsx │ │ ├── throttleByAnimationFrame.ts │ │ ├── toArray.ts │ │ ├── transition.ts │ │ ├── type.ts │ │ └── warning.ts │ ├── affix │ │ ├── demo │ │ │ ├── basic.tsx │ │ │ ├── debug.tsx │ │ │ ├── on-change.tsx │ │ │ └── target.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ ├── index.zh-CN.md │ │ └── utils.ts │ ├── alert │ │ ├── Alert.tsx │ │ ├── ErrorBoundary.tsx │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── action.tsx │ │ │ ├── banner.tsx │ │ │ ├── basic.tsx │ │ │ ├── closable.tsx │ │ │ ├── custom-icon.tsx │ │ │ ├── description.tsx │ │ │ ├── error-boundary.tsx │ │ │ ├── icon.tsx │ │ │ ├── loop-banner.tsx │ │ │ ├── smooth-closed.tsx │ │ │ └── style.tsx │ │ ├── index.en-US.md │ │ ├── index.ts │ │ └── index.zh-CN.md │ ├── anchor │ │ ├── Anchor.tsx │ │ ├── AnchorLink.tsx │ │ ├── context.ts │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── basic.tsx │ │ │ ├── customize-highlight.tsx │ │ │ ├── horizontal.tsx │ │ │ ├── on-change.tsx │ │ │ ├── on-click.tsx │ │ │ ├── replace.tsx │ │ │ ├── static.tsx │ │ │ └── target-offset.tsx │ │ ├── index.en-US.md │ │ ├── index.ts │ │ └── index.zh-CN.md │ ├── auto-complete │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── allow-clear.tsx │ │ │ ├── basic.tsx │ │ │ ├── certain-category.tsx │ │ │ ├── custom.tsx │ │ │ ├── non-case-sensitive.tsx │ │ │ ├── options.tsx │ │ │ ├── request-pagination.tsx │ │ │ ├── request.tsx │ │ │ ├── status.tsx │ │ │ ├── uncertain-category.tsx │ │ │ └── variant.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ └── index.zh-CN.md │ ├── avatar │ │ ├── Avatar.tsx │ │ ├── Group.tsx │ │ ├── SizeContext.tsx │ │ ├── demo │ │ │ ├── _semantic_basic.tsx │ │ │ ├── _semantic_group.tsx │ │ │ ├── badge.tsx │ │ │ ├── basic.tsx │ │ │ ├── dynamic.tsx │ │ │ ├── fallback.tsx │ │ │ ├── group.tsx │ │ │ ├── toggle.tsx │ │ │ └── type.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ └── index.zh-CN.md │ ├── badge │ │ ├── Ribbon.tsx │ │ ├── ScrollNumber.tsx │ │ ├── SingleNumber.tsx │ │ ├── demo │ │ │ ├── _semantic_basic.tsx │ │ │ ├── _semantic_ribbon.tsx │ │ │ ├── basic.tsx │ │ │ ├── change.tsx │ │ │ ├── colorful.tsx │ │ │ ├── dot.tsx │ │ │ ├── link.tsx │ │ │ ├── mix.tsx │ │ │ ├── no-wrapper.tsx │ │ │ ├── offset.tsx │ │ │ ├── overflow.tsx │ │ │ ├── ribbon-debug.tsx │ │ │ ├── ribbon.tsx │ │ │ ├── size.tsx │ │ │ ├── status.tsx │ │ │ └── title.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ └── index.zh-CN.md │ ├── breadcrumb │ │ ├── Breadcrumb.tsx │ │ ├── BreadcrumbItem.tsx │ │ ├── BreadcrumbSeparator.tsx │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── basic.tsx │ │ │ ├── overlay.tsx │ │ │ ├── separator.tsx │ │ │ └── withIcon.tsx │ │ ├── index.en-US.md │ │ ├── index.ts │ │ ├── index.zh-CN.md │ │ └── useItemRender.tsx │ ├── button │ │ ├── Button.tsx │ │ ├── LoadingIcon.tsx │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── basic.tsx │ │ │ ├── danger.tsx │ │ │ ├── disabled.tsx │ │ │ ├── icon.tsx │ │ │ ├── loading.tsx │ │ │ ├── no-space.tsx │ │ │ └── size.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ ├── index.zh-CN.md │ │ └── utils.tsx │ ├── calendar │ │ ├── Header.tsx │ │ ├── Panel │ │ │ ├── DayPanel.tsx │ │ │ ├── MonthPanel.tsx │ │ │ ├── WeekPanel.tsx │ │ │ ├── YearPanel.tsx │ │ │ ├── components │ │ │ │ ├── AllDayEvent.tsx │ │ │ │ ├── TimeEvent.tsx │ │ │ │ └── TimeGrid │ │ │ │ │ ├── TimeEvent.tsx │ │ │ │ │ └── index.tsx │ │ │ ├── hooks │ │ │ │ └── useWinClick.ts │ │ │ └── index.tsx │ │ ├── constant.ts │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── basic.tsx │ │ │ ├── events.tsx │ │ │ └── lunar.tsx │ │ ├── generateCalendar.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ ├── index.zh-CN.md │ │ ├── interface.tsx │ │ ├── locale │ │ │ ├── en_US.ts │ │ │ └── zh_CN.ts │ │ └── util.ts │ ├── card │ │ ├── Card.tsx │ │ ├── Meta.tsx │ │ ├── demo │ │ │ ├── _semantic_basic.tsx │ │ │ ├── _semantic_meta.tsx │ │ │ ├── basic.tsx │ │ │ ├── border-less.tsx │ │ │ ├── flexible-content.tsx │ │ │ ├── in-column.tsx │ │ │ ├── loading.tsx │ │ │ ├── meta.tsx │ │ │ └── simple.tsx │ │ ├── index.en-US.md │ │ ├── index.ts │ │ └── index.zh-CN.md │ ├── carousel │ │ ├── arrow.tsx │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── arrows.tsx │ │ │ ├── autoplay.tsx │ │ │ ├── basic.tsx │ │ │ ├── card.tsx │ │ │ ├── fade.tsx │ │ │ └── position.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ ├── index.zh-CN.md │ │ ├── indicator.tsx │ │ └── interface.ts │ ├── cascader │ │ ├── Cascader.tsx │ │ ├── OptionList │ │ │ ├── CacheContent.tsx │ │ │ ├── Column.tsx │ │ │ ├── RawOptionList.tsx │ │ │ ├── index.tsx │ │ │ ├── useActive.ts │ │ │ └── useKeyboard.ts │ │ ├── context.ts │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── basic.tsx │ │ │ ├── change-on-select.tsx │ │ │ ├── custom-dropdown.tsx │ │ │ ├── custom-render.tsx │ │ │ ├── default-value.tsx │ │ │ ├── disabled-option.tsx │ │ │ ├── fields-name.tsx │ │ │ ├── hover.tsx │ │ │ ├── lazy.tsx │ │ │ ├── multiple.tsx │ │ │ ├── placement.tsx │ │ │ ├── request.tsx │ │ │ ├── search.tsx │ │ │ ├── services.ts │ │ │ ├── show-checked-strategy.tsx │ │ │ ├── size.tsx │ │ │ ├── status.tsx │ │ │ └── suffix.tsx │ │ ├── hooks │ │ │ ├── useColumnIcons.tsx │ │ │ ├── useDisplayValues.ts │ │ │ ├── useEntities.ts │ │ │ ├── useFilterOptions.tsx │ │ │ ├── useOptions.ts │ │ │ ├── useRequest.ts │ │ │ ├── useSelect.ts │ │ │ └── useValues.ts │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ ├── index.zh-CN.md │ │ ├── interface.ts │ │ └── utils │ │ │ ├── commonUtil.ts │ │ │ ├── treeUtil.ts │ │ │ └── warningPropsUtil.ts │ ├── checkbox │ │ ├── Checkbox.tsx │ │ ├── CheckedIcon.tsx │ │ ├── Group.tsx │ │ ├── demo │ │ │ ├── _semantic_basic.tsx │ │ │ ├── _semantic_group.tsx │ │ │ ├── basic.tsx │ │ │ ├── check-all.tsx │ │ │ ├── controller.tsx │ │ │ ├── disabled.tsx │ │ │ ├── group.tsx │ │ │ └── layout.tsx │ │ ├── index.en-US.md │ │ ├── index.ts │ │ └── index.zh-CN.md │ ├── collapse │ │ ├── Collapse.tsx │ │ ├── CollapsePanel.tsx │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── accordion.tsx │ │ │ ├── basic.tsx │ │ │ ├── borderless.tsx │ │ │ ├── collapsible.tsx │ │ │ ├── custom.tsx │ │ │ ├── extra.tsx │ │ │ ├── ghost.tsx │ │ │ ├── mix.tsx │ │ │ └── noarrow.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ ├── index.zh-CN.md │ │ └── interface.ts │ ├── color-picker │ │ ├── ColorPicker.tsx │ │ ├── ColorPickerPanel.tsx │ │ ├── color.ts │ │ ├── components │ │ │ ├── ColorBlock.tsx │ │ │ ├── ColorClear.tsx │ │ │ ├── ColorInput │ │ │ │ ├── AlphaInput.tsx │ │ │ │ ├── HexInput.tsx │ │ │ │ ├── HsbInput.tsx │ │ │ │ ├── RgbInput.tsx │ │ │ │ ├── Steppers.tsx │ │ │ │ └── index.tsx │ │ │ ├── ColorTrigger.tsx │ │ │ ├── Picker.tsx │ │ │ ├── Presets.tsx │ │ │ └── Slider.tsx │ │ ├── context.ts │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── allow-clear.tsx │ │ │ ├── base.tsx │ │ │ ├── controlled.tsx │ │ │ ├── disabled-alpha.tsx │ │ │ ├── disabled.tsx │ │ │ ├── format.tsx │ │ │ ├── line-gradient.tsx │ │ │ ├── panel-render.tsx │ │ │ ├── presets.tsx │ │ │ ├── size.tsx │ │ │ ├── text-render.tsx │ │ │ ├── trigger-event.tsx │ │ │ └── trigger.tsx │ │ ├── hooks │ │ │ ├── useColorDrag.ts │ │ │ └── useMode.ts │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ ├── index.zh-CN.md │ │ ├── interface.ts │ │ └── util.ts │ ├── config-provider │ │ ├── DisabledContext.tsx │ │ ├── SizeContext.tsx │ │ ├── context.tsx │ │ ├── defaultRenderEmpty.tsx │ │ ├── demo │ │ │ ├── holder-render.tsx │ │ │ ├── locale.tsx │ │ │ ├── prefix-cls.tsx │ │ │ ├── size.tsx │ │ │ ├── style-override.tsx │ │ │ ├── theme.tsx │ │ │ └── use-config.tsx │ │ ├── hooks │ │ │ ├── useConfig.ts │ │ │ └── useSize.ts │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ └── index.zh-CN.md │ ├── date-picker │ │ ├── PickerInput │ │ │ ├── Popup │ │ │ │ ├── Footer.tsx │ │ │ │ ├── PopupPanel.tsx │ │ │ │ ├── PresetPanel.tsx │ │ │ │ └── index.tsx │ │ │ ├── RangePicker.tsx │ │ │ ├── Selector │ │ │ │ ├── Icon.tsx │ │ │ │ ├── Input.tsx │ │ │ │ ├── MaskFormat.ts │ │ │ │ ├── RangeSelector.tsx │ │ │ │ ├── SeparatorIcon.tsx │ │ │ │ ├── SingleSelector │ │ │ │ │ ├── MultipleDates.tsx │ │ │ │ │ └── index.tsx │ │ │ │ ├── hooks │ │ │ │ │ └── useInputProps.ts │ │ │ │ └── util.ts │ │ │ ├── SinglePicker.tsx │ │ │ ├── context.tsx │ │ │ └── hooks │ │ │ │ ├── useCellRender.ts │ │ │ │ ├── useDelayState.ts │ │ │ │ ├── useDisabledBoundary.ts │ │ │ │ ├── useFieldFormat.ts │ │ │ │ ├── useFieldsInvalidate.ts │ │ │ │ ├── useFilledProps.tsx │ │ │ │ ├── useInputReadOnly.ts │ │ │ │ ├── useInvalidate.ts │ │ │ │ ├── useLockEffect.ts │ │ │ │ ├── useOpen.ts │ │ │ │ ├── usePickerRef.ts │ │ │ │ ├── useRangeActive.ts │ │ │ │ ├── useRangeDisabledDate.ts │ │ │ │ ├── useRangePickerValue.ts │ │ │ │ ├── useRangeValue.ts │ │ │ │ └── useShowNow.ts │ │ ├── PickerPanel │ │ │ ├── DatePanel │ │ │ │ └── index.tsx │ │ │ ├── DateTimePanel │ │ │ │ └── index.tsx │ │ │ ├── DecadePanel │ │ │ │ └── index.tsx │ │ │ ├── MonthPanel │ │ │ │ └── index.tsx │ │ │ ├── PanelBody.tsx │ │ │ ├── PanelHeader.tsx │ │ │ ├── QuarterPanel │ │ │ │ └── index.tsx │ │ │ ├── TimePanel │ │ │ │ ├── TimePanelBody │ │ │ │ │ ├── TimeColumn.tsx │ │ │ │ │ ├── index.tsx │ │ │ │ │ ├── useScrollTo.ts │ │ │ │ │ └── util.ts │ │ │ │ └── index.tsx │ │ │ ├── WeekPanel │ │ │ │ └── index.tsx │ │ │ ├── YearPanel │ │ │ │ └── index.tsx │ │ │ ├── context.ts │ │ │ └── index.tsx │ │ ├── PickerTrigger │ │ │ ├── index.tsx │ │ │ └── util.ts │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── allow-empty.tsx │ │ │ ├── basic.tsx │ │ │ ├── buddhist-era.tsx │ │ │ ├── cell-render.tsx │ │ │ ├── components.tsx │ │ │ ├── date-range.tsx │ │ │ ├── disabled-date.tsx │ │ │ ├── disabled.tsx │ │ │ ├── extra-footer.tsx │ │ │ ├── format.tsx │ │ │ ├── mask.tsx │ │ │ ├── mode.tsx │ │ │ ├── multiple-debug.tsx │ │ │ ├── multiple.tsx │ │ │ ├── need-confirm.tsx │ │ │ ├── placement.tsx │ │ │ ├── preset-ranges.tsx │ │ │ ├── range-picker.tsx │ │ │ ├── select-in-range.tsx │ │ │ ├── size.tsx │ │ │ ├── start-end.tsx │ │ │ ├── status.tsx │ │ │ ├── style-debug.tsx │ │ │ ├── suffix.tsx │ │ │ ├── switchable.tsx │ │ │ ├── time.tsx │ │ │ └── variant.tsx │ │ ├── generate │ │ │ ├── config │ │ │ │ └── dayjs.ts │ │ │ ├── generateRangePicker.tsx │ │ │ ├── generateSinglePicker.tsx │ │ │ └── index.tsx │ │ ├── hooks │ │ │ ├── useSyncState.ts │ │ │ ├── useTimeConfig.ts │ │ │ ├── useTimeInfo.ts │ │ │ └── useToggleDates.ts │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ ├── index.zh-CN.md │ │ ├── interface.tsx │ │ ├── locale │ │ │ ├── common.ts │ │ │ ├── en_US.ts │ │ │ └── zh_CN.ts │ │ └── utils │ │ │ ├── dateUtil.ts │ │ │ ├── miscUtil.ts │ │ │ └── uiUtil.ts │ ├── descriptions │ │ ├── Cell.tsx │ │ ├── Row.tsx │ │ ├── constant.ts │ │ ├── context.ts │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── basic.tsx │ │ │ ├── border.tsx │ │ │ ├── padding.tsx │ │ │ ├── responsive.tsx │ │ │ ├── size.tsx │ │ │ ├── style.tsx │ │ │ ├── text.tsx │ │ │ ├── vertical-border.tsx │ │ │ └── vertical.tsx │ │ ├── hooks │ │ │ ├── useItems.ts │ │ │ └── useRow.ts │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ └── index.zh-CN.md │ ├── divider │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── customize-style.tsx │ │ │ ├── horizontal.tsx │ │ │ ├── plain.tsx │ │ │ ├── vertical.tsx │ │ │ └── with-text.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ └── index.zh-CN.md │ ├── drawer │ │ ├── Drawer.tsx │ │ ├── Panel.tsx │ │ ├── context.ts │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── basic-right.tsx │ │ │ ├── config-provider.tsx │ │ │ ├── custom-style.tsx │ │ │ ├── form-in-drawer.tsx │ │ │ ├── loading.tsx │ │ │ ├── multi-level-drawer.tsx │ │ │ ├── no-mask.tsx │ │ │ ├── placement.tsx │ │ │ ├── render-in-current.tsx │ │ │ └── scroll-debug.tsx │ │ ├── index.en-US.md │ │ ├── index.ts │ │ ├── index.zh-CN.md │ │ └── interface.ts │ ├── dropdown │ │ ├── Dropdown.tsx │ │ ├── DropdownButton.tsx │ │ ├── Overlay.tsx │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── arrow-center.tsx │ │ │ ├── arrow.tsx │ │ │ ├── basic.tsx │ │ │ ├── context-menu.tsx │ │ │ ├── custom-dropdown.tsx │ │ │ ├── dropdown-button.tsx │ │ │ ├── event.tsx │ │ │ ├── icon-debug.tsx │ │ │ ├── item.tsx │ │ │ ├── loading.tsx │ │ │ ├── menu-full.tsx │ │ │ ├── overlay-open.tsx │ │ │ ├── placement.tsx │ │ │ ├── selectable.tsx │ │ │ ├── sub-menu.tsx │ │ │ └── trigger.tsx │ │ ├── hooks │ │ │ └── useAccessibility.ts │ │ ├── index.en-US.md │ │ ├── index.ts │ │ └── index.zh-CN.md │ ├── empty │ │ ├── EmptyImage.tsx │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── basic.tsx │ │ │ ├── config-provider.tsx │ │ │ ├── customize.tsx │ │ │ └── description.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ └── index.zh-CN.md │ ├── float-button │ │ ├── BackTop.tsx │ │ ├── FloatButton.tsx │ │ ├── FloatButtonGroup.tsx │ │ ├── context.ts │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── back-top.tsx │ │ │ ├── badge.tsx │ │ │ ├── basic.tsx │ │ │ ├── controlled.tsx │ │ │ ├── description.tsx │ │ │ ├── group-menu.tsx │ │ │ ├── group.tsx │ │ │ ├── placement.tsx │ │ │ ├── shape.tsx │ │ │ ├── tooltip.tsx │ │ │ └── type.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ ├── index.zh-CN.md │ │ ├── interface.ts │ │ └── util.ts │ ├── form │ │ ├── ErrorList.tsx │ │ ├── Field │ │ │ ├── Cascader │ │ │ │ └── index.tsx │ │ │ ├── Checkbox │ │ │ │ └── index.tsx │ │ │ ├── DatePicker │ │ │ │ └── index.tsx │ │ │ ├── DateRangePicker │ │ │ │ └── index.tsx │ │ │ ├── Digit │ │ │ │ └── index.tsx │ │ │ ├── DigitRange │ │ │ │ └── index.tsx │ │ │ ├── FromNow │ │ │ │ └── index.tsx │ │ │ ├── Image │ │ │ │ └── index.tsx │ │ │ ├── IndexColumn │ │ │ │ └── index.tsx │ │ │ ├── Money │ │ │ │ └── index.tsx │ │ │ ├── MoneyRange │ │ │ │ └── index.tsx │ │ │ ├── Password │ │ │ │ └── index.tsx │ │ │ ├── Percent │ │ │ │ └── index.tsx │ │ │ ├── PercentRange │ │ │ │ └── index.tsx │ │ │ ├── Progress │ │ │ │ └── index.tsx │ │ │ ├── Radio │ │ │ │ └── index.tsx │ │ │ ├── Rate │ │ │ │ └── index.tsx │ │ │ ├── Segmented │ │ │ │ └── index.tsx │ │ │ ├── Select │ │ │ │ └── index.tsx │ │ │ ├── Slider │ │ │ │ └── index.tsx │ │ │ ├── Switch │ │ │ │ └── index.tsx │ │ │ ├── Tag │ │ │ │ └── index.tsx │ │ │ ├── Text │ │ │ │ └── index.tsx │ │ │ ├── TextArea │ │ │ │ └── index.tsx │ │ │ ├── TimePicker │ │ │ │ └── index.tsx │ │ │ ├── TimeRangePicker │ │ │ │ └── index.tsx │ │ │ ├── index.tsx │ │ │ └── util.tsx │ │ ├── Form.tsx │ │ ├── FormItem │ │ │ ├── ItemErrorPopover.tsx │ │ │ ├── ItemHolder.tsx │ │ │ ├── ItemInput.tsx │ │ │ ├── ItemLabel.tsx │ │ │ ├── StatusProvider.tsx │ │ │ └── index.tsx │ │ ├── FormList.tsx │ │ ├── context.tsx │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── basic.tsx │ │ │ ├── complex-form-control.tsx │ │ │ ├── control-hooks.tsx │ │ │ ├── custom-feedback-icons.tsx │ │ │ ├── customized-form-controls.tsx │ │ │ ├── disabled-input-debug.tsx │ │ │ ├── disabled.tsx │ │ │ ├── dynamic-form-item.tsx │ │ │ ├── dynamic-form-items-complex.tsx │ │ │ ├── dynamic-form-items-no-style.tsx │ │ │ ├── dynamic-form-items.tsx │ │ │ ├── dynamic-rule.tsx │ │ │ ├── form-context.tsx │ │ │ ├── form-dependencies.tsx │ │ │ ├── form-in-modal.tsx │ │ │ ├── form-item-path.tsx │ │ │ ├── getValueProps-normalize.tsx │ │ │ ├── global-state.tsx │ │ │ ├── inline-login.tsx │ │ │ ├── json-schema.tsx │ │ │ ├── label-debug.tsx │ │ │ ├── layout-can-wrap.tsx │ │ │ ├── layout-grid.tsx │ │ │ ├── layout-multiple.tsx │ │ │ ├── layout.tsx │ │ │ ├── login.tsx │ │ │ ├── nest-messages.tsx │ │ │ ├── ref-item.tsx │ │ │ ├── register.tsx │ │ │ ├── required-mark.tsx │ │ │ ├── size.tsx │ │ │ ├── use-watch.tsx │ │ │ ├── validate-only.tsx │ │ │ ├── validate-other.tsx │ │ │ ├── validate-scroll-to-field.tsx │ │ │ ├── validate-static.tsx │ │ │ ├── validate-trigger.tsx │ │ │ ├── variant.tsx │ │ │ ├── warning-only.tsx │ │ │ └── without-form-create.tsx │ │ ├── hooks │ │ │ ├── useChildren.ts │ │ │ ├── useDebounce.ts │ │ │ ├── useForm.ts │ │ │ ├── useFormInstance.ts │ │ │ ├── useFormItemStatus.ts │ │ │ ├── useFormLabelWidth.ts │ │ │ ├── useFormWarning.ts │ │ │ ├── useFrameState.ts │ │ │ ├── useItemRef.ts │ │ │ ├── useValueEnum.ts │ │ │ └── useVariant.ts │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ ├── index.zh-CN.md │ │ ├── interface.ts │ │ ├── util.ts │ │ └── validateMessagesContext.tsx │ ├── icon │ │ ├── index.en-US.md │ │ └── index.zh-CN.md │ ├── image │ │ ├── Image.tsx │ │ ├── Operations.tsx │ │ ├── Preview.tsx │ │ ├── PreviewGroup.tsx │ │ ├── constant.ts │ │ ├── context.ts │ │ ├── demo │ │ │ ├── _semantic_basic.tsx │ │ │ ├── _semantic_group.tsx │ │ │ ├── basic.tsx │ │ │ ├── controlled-preview.tsx │ │ │ ├── fallback.tsx │ │ │ ├── image-render.tsx │ │ │ ├── nested.tsx │ │ │ ├── placeholder.tsx │ │ │ ├── preview-group-top-progress.tsx │ │ │ ├── preview-group-visible.tsx │ │ │ ├── preview-group.tsx │ │ │ ├── preview-imgInfo.tsx │ │ │ ├── preview-mask.tsx │ │ │ ├── preview-src.tsx │ │ │ └── toolbar-render.tsx │ │ ├── hooks │ │ │ ├── useImageTransform.ts │ │ │ ├── useMouseEvent.ts │ │ │ ├── usePreviewItems.ts │ │ │ ├── useRegisterImage.ts │ │ │ ├── useStatus.ts │ │ │ └── useTouchEvent.ts │ │ ├── index.en-US.md │ │ ├── index.ts │ │ ├── index.zh-CN.md │ │ ├── interface.ts │ │ └── util.ts │ ├── index.ts │ ├── input-number │ │ ├── InputNumber.tsx │ │ ├── StepHandler.tsx │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── addon.tsx │ │ │ ├── basic.tsx │ │ │ ├── change-on-wheel.tsx │ │ │ ├── controls.tsx │ │ │ ├── digit.tsx │ │ │ ├── disabled.tsx │ │ │ ├── formatter.tsx │ │ │ ├── keyboard.tsx │ │ │ ├── out-of-range.tsx │ │ │ ├── prefix.tsx │ │ │ ├── size.tsx │ │ │ ├── status.tsx │ │ │ ├── styles-debug.tsx │ │ │ └── variant.tsx │ │ ├── hooks │ │ │ ├── useCursor.ts │ │ │ └── useFrame.ts │ │ ├── index.en-US.md │ │ ├── index.ts │ │ ├── index.zh-CN.md │ │ └── utils.ts │ ├── input │ │ ├── BaseInput.tsx │ │ ├── Input.tsx │ │ ├── Password.tsx │ │ ├── ResizableTextArea.tsx │ │ ├── TextArea.tsx │ │ ├── demo │ │ │ ├── _semantic_input.tsx │ │ │ ├── _semantic_textarea.tsx │ │ │ ├── addon.tsx │ │ │ ├── allow-clear.tsx │ │ │ ├── autosize-textarea.tsx │ │ │ ├── basic.tsx │ │ │ ├── compact-style.tsx │ │ │ ├── focus.tsx │ │ │ ├── password-input.tsx │ │ │ ├── presuffix.tsx │ │ │ ├── show-count.tsx │ │ │ ├── size.tsx │ │ │ ├── status.tsx │ │ │ ├── styles-debug.tsx │ │ │ ├── textarea-resize-debug.tsx │ │ │ ├── textarea.tsx │ │ │ ├── tooltip.tsx │ │ │ └── variant.tsx │ │ ├── hooks │ │ │ ├── useCount.ts │ │ │ └── useRemovePasswordTimeout.ts │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ ├── index.zh-CN.md │ │ ├── interface.ts │ │ └── utils.ts │ ├── layout │ │ ├── Layout.tsx │ │ ├── Sider.tsx │ │ ├── demo │ │ │ ├── basic.tsx │ │ │ ├── components │ │ │ │ └── ContentPlaceholder.tsx │ │ │ ├── custom-trigger.tsx │ │ │ ├── fixed-sider.tsx │ │ │ ├── fixed.tsx │ │ │ ├── responsive.tsx │ │ │ ├── side.tsx │ │ │ ├── top-side-2.tsx │ │ │ ├── top-side.tsx │ │ │ └── top.tsx │ │ ├── index.en-US.md │ │ ├── index.ts │ │ └── index.zh-CN.md │ ├── list │ │ ├── Item.tsx │ │ ├── context.ts │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── basic.tsx │ │ │ ├── remote-load.tsx │ │ │ ├── scroll-load.tsx │ │ │ └── virtual-list.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ ├── index.zh-CN.md │ │ └── useRequest.ts │ ├── locale │ │ ├── context.ts │ │ ├── en_US.ts │ │ ├── index.tsx │ │ ├── useLocale.ts │ │ └── zh_CN.ts │ ├── mentions │ │ ├── DropdownMenu.tsx │ │ ├── KeywordTrigger.tsx │ │ ├── Mentions.tsx │ │ ├── context.ts │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── allow-clear.tsx │ │ │ ├── async.tsx │ │ │ ├── auto-size.tsx │ │ │ ├── basic.tsx │ │ │ ├── form.tsx │ │ │ ├── placement.tsx │ │ │ ├── prefix.tsx │ │ │ ├── readonly.tsx │ │ │ ├── status.tsx │ │ │ └── variant.tsx │ │ ├── index.en-US.md │ │ ├── index.ts │ │ ├── index.zh-CN.md │ │ └── util.ts │ ├── menu │ │ ├── Icon.tsx │ │ ├── Menu.tsx │ │ ├── MenuDivider.tsx │ │ ├── MenuItem.tsx │ │ ├── MenuItemGroup.tsx │ │ ├── SubMenu │ │ │ ├── InlineSubMenuList.tsx │ │ │ ├── PopupTrigger.tsx │ │ │ ├── SubMenuList.tsx │ │ │ └── index.tsx │ │ ├── context │ │ │ ├── IdContext.ts │ │ │ ├── MenuContext.tsx │ │ │ ├── OverrideContext.tsx │ │ │ └── PathContext.tsx │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── horizontal-dark.tsx │ │ │ ├── horizontal.tsx │ │ │ ├── inline-collapsed.tsx │ │ │ ├── inline.tsx │ │ │ ├── sider-current.tsx │ │ │ ├── submenu-theme.tsx │ │ │ ├── switch-mode.tsx │ │ │ ├── theme.tsx │ │ │ └── vertical.tsx │ │ ├── hooks │ │ │ ├── useAccessibility.ts │ │ │ ├── useActive.ts │ │ │ ├── useKeyRecords.ts │ │ │ └── useUUID.ts │ │ ├── index.en-US.md │ │ ├── index.ts │ │ ├── index.zh-CN.md │ │ ├── interface.ts │ │ ├── placements.ts │ │ └── utils │ │ │ ├── commonUtil.ts │ │ │ ├── nodeUtil.tsx │ │ │ ├── timeUtil.ts │ │ │ └── transitionUtil.ts │ ├── message │ │ ├── PurePanel.tsx │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── custom-style.tsx │ │ │ ├── duration.tsx │ │ │ ├── hooks.tsx │ │ │ ├── info.tsx │ │ │ ├── loading.tsx │ │ │ ├── other.tsx │ │ │ ├── thenable.tsx │ │ │ └── update.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ ├── index.zh-CN.md │ │ ├── interface.ts │ │ ├── useMessage.tsx │ │ └── util.ts │ ├── modal │ │ ├── ConfirmModal.tsx │ │ ├── Footer.tsx │ │ ├── Mask.tsx │ │ ├── Modal.tsx │ │ ├── Panel.tsx │ │ ├── components │ │ │ ├── ConfirmCancelBtn.tsx │ │ │ ├── ConfirmOkBtn.tsx │ │ │ ├── NormalCancelBtn.tsx │ │ │ └── NormalOkBtn.tsx │ │ ├── confirm.tsx │ │ ├── context.ts │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── async.tsx │ │ │ ├── basic.tsx │ │ │ ├── button-props.tsx │ │ │ ├── classNames.tsx │ │ │ ├── confirm-router.tsx │ │ │ ├── confirm.tsx │ │ │ ├── footer-render.tsx │ │ │ ├── footer.tsx │ │ │ ├── hooks.tsx │ │ │ ├── loading.tsx │ │ │ ├── locale.tsx │ │ │ ├── manual.tsx │ │ │ ├── modal-render.tsx │ │ │ ├── nested.tsx │ │ │ ├── position.tsx │ │ │ ├── size.tsx │ │ │ └── static-info.tsx │ │ ├── destroyFns.ts │ │ ├── index.en-US.md │ │ ├── index.ts │ │ ├── index.zh-CN.md │ │ ├── interface.tsx │ │ ├── locale.ts │ │ └── useModal │ │ │ ├── HookModal.tsx │ │ │ └── index.tsx │ ├── notification │ │ ├── Notice.tsx │ │ ├── NoticeList.tsx │ │ ├── NotificationHolder.tsx │ │ ├── Notifications.tsx │ │ ├── PurePanel.tsx │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── basic.tsx │ │ │ ├── custom-icon.tsx │ │ │ ├── custom-style.tsx │ │ │ ├── duration.tsx │ │ │ ├── hooks.tsx │ │ │ ├── placement.tsx │ │ │ ├── show-with-progress.tsx │ │ │ ├── stack.tsx │ │ │ ├── update.tsx │ │ │ ├── with-btn.tsx │ │ │ └── with-icon.tsx │ │ ├── hooks │ │ │ ├── useNotification.tsx │ │ │ └── useStack.ts │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ ├── index.zh-CN.md │ │ ├── interface.ts │ │ └── util.ts │ ├── pagination │ │ ├── Options.tsx │ │ ├── Pager.tsx │ │ ├── Pagination.tsx │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── all.tsx │ │ │ ├── basic.tsx │ │ │ ├── changer.tsx │ │ │ ├── controlled.tsx │ │ │ ├── item-render.tsx │ │ │ ├── jump.tsx │ │ │ ├── more.tsx │ │ │ ├── simple.tsx │ │ │ ├── size.tsx │ │ │ └── total.tsx │ │ ├── index.en-US.md │ │ ├── index.ts │ │ ├── index.zh-CN.md │ │ └── interface.ts │ ├── popconfirm │ │ ├── Overlay.tsx │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── async.tsx │ │ │ ├── basic.tsx │ │ │ ├── dynamic-trigger.tsx │ │ │ ├── icon.tsx │ │ │ ├── locale.tsx │ │ │ ├── placement.tsx │ │ │ └── promise.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ └── index.zh-CN.md │ ├── popover │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── arrow.tsx │ │ │ ├── basic.tsx │ │ │ ├── control.tsx │ │ │ ├── hover-with-click.tsx │ │ │ ├── placement.tsx │ │ │ └── trigger-type.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ └── index.zh-CN.md │ ├── progress │ │ ├── Circle.tsx │ │ ├── Line.tsx │ │ ├── Progress.tsx │ │ ├── Steps.tsx │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── circle-micro.tsx │ │ │ ├── circle-mini.tsx │ │ │ ├── circle-steps.tsx │ │ │ ├── circle.tsx │ │ │ ├── dashboard.tsx │ │ │ ├── dynamic.tsx │ │ │ ├── format.tsx │ │ │ ├── gradient-line.tsx │ │ │ ├── info-position.tsx │ │ │ ├── line-mini.tsx │ │ │ ├── line.tsx │ │ │ ├── linecap.tsx │ │ │ ├── segment.tsx │ │ │ ├── size.tsx │ │ │ └── steps.tsx │ │ ├── index.en-US.md │ │ ├── index.ts │ │ ├── index.zh-CN.md │ │ └── utils.ts │ ├── qr-code │ │ ├── QRCodeCanvas.tsx │ │ ├── QRCodeSVG.tsx │ │ ├── QRCodeStatus.tsx │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── base.tsx │ │ │ ├── custom-color.tsx │ │ │ ├── custom-size.tsx │ │ │ ├── custom-status-render.tsx │ │ │ ├── download.tsx │ │ │ ├── error-level.tsx │ │ │ ├── icon.tsx │ │ │ ├── popover.tsx │ │ │ ├── status.tsx │ │ │ └── type.tsx │ │ ├── hooks │ │ │ └── useQRCode.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ ├── index.zh-CN.md │ │ ├── interface.ts │ │ ├── libs │ │ │ └── qrcodegen.ts │ │ └── utils.tsx │ ├── radio │ │ ├── CheckedIcon.tsx │ │ ├── Context.tsx │ │ ├── Group.tsx │ │ ├── Radio.tsx │ │ ├── demo │ │ │ ├── _semantic_basic.tsx │ │ │ ├── _semantic_group.tsx │ │ │ ├── basic.tsx │ │ │ ├── disabled.tsx │ │ │ ├── radiogroup-more.tsx │ │ │ ├── radiogroup-options.tsx │ │ │ ├── radiogroup-with-name.tsx │ │ │ └── radiogroup.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ ├── index.zh-CN.md │ │ └── interface.tsx │ ├── rate │ │ ├── Star.tsx │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── basic.tsx │ │ │ ├── character-function.tsx │ │ │ ├── character.tsx │ │ │ ├── clear.tsx │ │ │ ├── disabled.tsx │ │ │ ├── half.tsx │ │ │ └── text.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ ├── index.zh-CN.md │ │ ├── useRefs.ts │ │ └── util.ts │ ├── result │ │ ├── NoFound.tsx │ │ ├── ServerError.tsx │ │ ├── Unauthorized.tsx │ │ ├── demo │ │ │ ├── 403.tsx │ │ │ ├── 404.tsx │ │ │ ├── 500.tsx │ │ │ ├── _semantic.tsx │ │ │ ├── customIcon.tsx │ │ │ ├── error.tsx │ │ │ ├── info.tsx │ │ │ ├── success.tsx │ │ │ └── warning.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ └── index.zh-CN.md │ ├── scrollbar │ │ ├── Scrollbar.tsx │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── auto-height.tsx │ │ │ ├── horizontal.tsx │ │ │ └── vertical.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ ├── index.zh-CN.md │ │ ├── interface.ts │ │ └── utils │ │ │ ├── getInnerHeight.ts │ │ │ └── getInnerWidth.ts │ ├── segmented │ │ ├── MotionThumb.tsx │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── basic.tsx │ │ │ ├── block.tsx │ │ │ ├── controlled.tsx │ │ │ ├── disabled.tsx │ │ │ ├── dynamic.tsx │ │ │ ├── icon-only.tsx │ │ │ ├── size.tsx │ │ │ └── with-icon.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ └── index.zh-CN.md │ ├── select │ │ ├── BaseSelect.tsx │ │ ├── OptionList.tsx │ │ ├── Select.tsx │ │ ├── SelectTrigger.tsx │ │ ├── Selector │ │ │ ├── Input.tsx │ │ │ ├── MultipleSelector.tsx │ │ │ ├── SingleSelector.tsx │ │ │ └── index.tsx │ │ ├── TransBtn.tsx │ │ ├── context.ts │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── automatic-tokenization.tsx │ │ │ ├── basic.tsx │ │ │ ├── big-data.tsx │ │ │ ├── coordinate.tsx │ │ │ ├── custom-display-render.tsx │ │ │ ├── custom-dropdown-menu.tsx │ │ │ ├── custom-tag-render.tsx │ │ │ ├── debug-flip-shift.tsx │ │ │ ├── hide-selected.tsx │ │ │ ├── multiple.tsx │ │ │ ├── optgroup.tsx │ │ │ ├── option-render.tsx │ │ │ ├── placement.tsx │ │ │ ├── request-lazy-load.tsx │ │ │ ├── request.tsx │ │ │ ├── responsive.tsx │ │ │ ├── search-box.tsx │ │ │ ├── search-sort.tsx │ │ │ ├── search.tsx │ │ │ ├── services.ts │ │ │ ├── size.tsx │ │ │ ├── status.tsx │ │ │ ├── styles-debug.tsx │ │ │ ├── suffix.tsx │ │ │ ├── tags.tsx │ │ │ └── variant.tsx │ │ ├── hooks │ │ │ ├── useBaseProps.ts │ │ │ ├── useBuiltinPlacements.tsx │ │ │ ├── useCache.ts │ │ │ ├── useDelayReset.ts │ │ │ ├── useFilterOptions.ts │ │ │ ├── useIcons.tsx │ │ │ ├── useId.ts │ │ │ ├── useLock.ts │ │ │ ├── useOptions.ts │ │ │ ├── useRequest.ts │ │ │ └── useSelectTriggerControl.ts │ │ ├── index.en-US.md │ │ ├── index.ts │ │ ├── index.zh-CN.md │ │ ├── interface.ts │ │ └── utils │ │ │ ├── commonUtil.ts │ │ │ ├── keyUtil.ts │ │ │ ├── valueUtil.ts │ │ │ └── warningPropsUtil.ts │ ├── skeleton │ │ ├── Avatar.tsx │ │ ├── Button.tsx │ │ ├── Element.tsx │ │ ├── Image.tsx │ │ ├── Input.tsx │ │ ├── Paragraph.tsx │ │ ├── Skeleton.tsx │ │ ├── Title.tsx │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── active.tsx │ │ │ ├── basic.tsx │ │ │ ├── children.tsx │ │ │ ├── complex.tsx │ │ │ └── element.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ └── index.zh-CN.md │ ├── slider │ │ ├── Handles │ │ │ ├── Handle.tsx │ │ │ ├── Tooltip.tsx │ │ │ └── index.tsx │ │ ├── Marks │ │ │ ├── Mark.tsx │ │ │ └── index.tsx │ │ ├── Slider.tsx │ │ ├── SliderTooltip.tsx │ │ ├── Steps │ │ │ ├── Dot.tsx │ │ │ └── index.tsx │ │ ├── Tracks │ │ │ ├── Track.tsx │ │ │ └── index.tsx │ │ ├── context.ts │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── basic.tsx │ │ │ ├── draggable-track.tsx │ │ │ ├── event.tsx │ │ │ ├── icon-slider.tsx │ │ │ ├── input-number.tsx │ │ │ ├── mark.tsx │ │ │ ├── multiple.tsx │ │ │ ├── reverse.tsx │ │ │ ├── show-tooltip.tsx │ │ │ ├── tip-formatter.tsx │ │ │ └── vertical.tsx │ │ ├── hooks │ │ │ ├── useDrag.ts │ │ │ ├── useOffset.ts │ │ │ └── useRafLock.ts │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ ├── index.zh-CN.md │ │ ├── interface.ts │ │ └── util.ts │ ├── space │ │ ├── Compact.tsx │ │ ├── demo │ │ │ ├── align.tsx │ │ │ ├── base.tsx │ │ │ ├── compact-button-vertical.tsx │ │ │ ├── compact-buttons.tsx │ │ │ ├── compact-debug.tsx │ │ │ ├── compact-nested.tsx │ │ │ ├── compact.tsx │ │ │ ├── debug.tsx │ │ │ ├── gap-in-line.tsx │ │ │ ├── size.tsx │ │ │ ├── split.tsx │ │ │ ├── vertical.tsx │ │ │ └── wrap.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ └── index.zh-CN.md │ ├── spin │ │ ├── Indicator.tsx │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── basic.tsx │ │ │ ├── delay-and-debounce.tsx │ │ │ ├── fullscreen.tsx │ │ │ ├── nested.tsx │ │ │ ├── size.tsx │ │ │ └── tip.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ └── index.zh-CN.md │ ├── splitter │ │ ├── Panel.tsx │ │ ├── SplitBar.tsx │ │ ├── Splitter.tsx │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── collapsible.tsx │ │ │ ├── control.tsx │ │ │ ├── debug.tsx │ │ │ ├── group.tsx │ │ │ ├── multiple.tsx │ │ │ ├── nested-in-tabs.tsx │ │ │ ├── size.tsx │ │ │ └── vertical.tsx │ │ ├── hooks │ │ │ ├── useItems.ts │ │ │ ├── useResizable.ts │ │ │ ├── useResize.ts │ │ │ └── useSizes.ts │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ ├── index.zh-CN.md │ │ └── interface.ts │ ├── statistic │ │ ├── Countdown.tsx │ │ ├── Group.tsx │ │ ├── Number.tsx │ │ ├── Statistic.tsx │ │ ├── demo │ │ │ ├── _semantic_basic.tsx │ │ │ ├── _semantic_countdown.tsx │ │ │ ├── _semantic_group.tsx │ │ │ ├── animated.tsx │ │ │ ├── basic.tsx │ │ │ ├── card.tsx │ │ │ ├── countdown.tsx │ │ │ ├── group.tsx │ │ │ └── unit.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ ├── index.zh-CN.md │ │ └── utils.ts │ ├── steps │ │ ├── Step.tsx │ │ ├── Steps.tsx │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── basic.tsx │ │ │ ├── clickable.tsx │ │ │ ├── error.tsx │ │ │ ├── icon.tsx │ │ │ ├── inline.tsx │ │ │ ├── nav.tsx │ │ │ ├── progress-debug.tsx │ │ │ ├── progress.tsx │ │ │ ├── simple.tsx │ │ │ ├── small-size.tsx │ │ │ ├── step-next.tsx │ │ │ ├── steps-in-steps.tsx │ │ │ ├── vertical-small.tsx │ │ │ └── vertical.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ └── index.zh-CN.md │ ├── switch │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── basic.tsx │ │ │ ├── disabled.tsx │ │ │ ├── loading.tsx │ │ │ ├── size.tsx │ │ │ └── text.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ └── index.zh-CN.md │ ├── table │ │ ├── Body │ │ │ ├── BodyRow.tsx │ │ │ ├── ExpandedRow.tsx │ │ │ ├── MeasureCell.tsx │ │ │ ├── MeasureRow.tsx │ │ │ └── index.tsx │ │ ├── Cell │ │ │ ├── index.tsx │ │ │ ├── useCellRender.tsx │ │ │ └── useHoverState.ts │ │ ├── ColGroup.tsx │ │ ├── FixedHolder │ │ │ └── index.tsx │ │ ├── Footer │ │ │ ├── Cell.tsx │ │ │ ├── Row.tsx │ │ │ ├── Summary.tsx │ │ │ ├── contexts.tsx │ │ │ └── index.tsx │ │ ├── Header │ │ │ ├── Header.tsx │ │ │ └── HeaderRow.tsx │ │ ├── InternalTable.tsx │ │ ├── SearchForm │ │ │ └── index.tsx │ │ ├── StickyScrollBar.tsx │ │ ├── Table.tsx │ │ ├── Toolbar │ │ │ ├── ColumnSetting.tsx │ │ │ ├── FullscreenButton.tsx │ │ │ └── index.tsx │ │ ├── constant.ts │ │ ├── context │ │ │ └── TableContext.tsx │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── basic.tsx │ │ │ ├── colspan-rowspan.tsx │ │ │ ├── custom-empty.tsx │ │ │ ├── custom-filter-panel.tsx │ │ │ ├── drag-column-sorting.tsx │ │ │ ├── drag-sorting.tsx │ │ │ ├── dynamic-settings.tsx │ │ │ ├── edit-row.tsx │ │ │ ├── ellipsis-custom-tooltip.tsx │ │ │ ├── ellipsis.tsx │ │ │ ├── expand.tsx │ │ │ ├── extra-content.tsx │ │ │ ├── filter-in-tree.tsx │ │ │ ├── filter-search.tsx │ │ │ ├── filter-value-type.tsx │ │ │ ├── fixed-columns-header.tsx │ │ │ ├── fixed-columns.tsx │ │ │ ├── fixed-gapped-columns.tsx │ │ │ ├── fixed-header.tsx │ │ │ ├── grouping-columns.tsx │ │ │ ├── head.tsx │ │ │ ├── hidden-columns.tsx │ │ │ ├── multiple-sorter.tsx │ │ │ ├── narrow.tsx │ │ │ ├── nest-table-border-debug.tsx │ │ │ ├── nested-table.tsx │ │ │ ├── order-column.tsx │ │ │ ├── pagination.tsx │ │ │ ├── request.tsx │ │ │ ├── reset-filter.tsx │ │ │ ├── resizable-column.tsx │ │ │ ├── responsive.tsx │ │ │ ├── row-selection-and-operation.tsx │ │ │ ├── row-selection-custom-debug.tsx │ │ │ ├── row-selection-custom.tsx │ │ │ ├── row-selection-debug.tsx │ │ │ ├── row-selection.tsx │ │ │ ├── search-form.tsx │ │ │ ├── selections-debug.tsx │ │ │ ├── services.ts │ │ │ ├── size.tsx │ │ │ ├── sticky.tsx │ │ │ ├── summary.tsx │ │ │ ├── sync-to-url.tsx │ │ │ ├── toolbar.tsx │ │ │ ├── tree-data.tsx │ │ │ ├── tree-table-ellipsis.tsx │ │ │ ├── tree-table-preserveSelectedRowKeys.tsx │ │ │ ├── value-type.tsx │ │ │ └── vertical-line.tsx │ │ ├── hooks │ │ │ ├── useColumns │ │ │ │ ├── index.tsx │ │ │ │ ├── useColumnsPos.ts │ │ │ │ ├── useStickyOffsets.ts │ │ │ │ └── useWidthColumns.tsx │ │ │ ├── useColumnsState.ts │ │ │ ├── useEditable.tsx │ │ │ ├── useExpand.tsx │ │ │ ├── useFilter │ │ │ │ ├── FilterContent.tsx │ │ │ │ ├── FilterDropdown.tsx │ │ │ │ ├── FilterSearch.tsx │ │ │ │ ├── FilterWrapper.tsx │ │ │ │ └── index.tsx │ │ │ ├── useFixedInfo.ts │ │ │ ├── useFlattenRecords.ts │ │ │ ├── useFrame.ts │ │ │ ├── useHover.ts │ │ │ ├── useLazyKVMap.ts │ │ │ ├── usePagination.ts │ │ │ ├── useRequest.ts │ │ │ ├── useRowInfo.tsx │ │ │ ├── useSelection.tsx │ │ │ ├── useSorter.tsx │ │ │ ├── useSticky.ts │ │ │ └── useStickyOffsets.ts │ │ ├── index.en-US.md │ │ ├── index.ts │ │ ├── index.zh-CN.md │ │ ├── interface.ts │ │ └── utils │ │ │ ├── expandUtil.tsx │ │ │ ├── filterUtil.ts │ │ │ ├── fixUtil.ts │ │ │ └── valueUtil.tsx │ ├── tabs │ │ ├── TabNavList │ │ │ ├── AddButton.tsx │ │ │ ├── ExtraContent.tsx │ │ │ ├── OperationNode.tsx │ │ │ ├── TabNode.tsx │ │ │ ├── Wrapper.tsx │ │ │ └── index.tsx │ │ ├── TabPanelList │ │ │ ├── TabPanel.tsx │ │ │ └── index.tsx │ │ ├── Tabs.tsx │ │ ├── context.ts │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── animated.tsx │ │ │ ├── basic.tsx │ │ │ ├── card.tsx │ │ │ ├── custom-add-trigger.tsx │ │ │ ├── custom-indicator.tsx │ │ │ ├── custom-tab-bar-node.tsx │ │ │ ├── custom-tab-bar.tsx │ │ │ ├── disabled.tsx │ │ │ ├── editable.tsx │ │ │ ├── extra.tsx │ │ │ ├── icon.tsx │ │ │ ├── nest.tsx │ │ │ ├── pills.tsx │ │ │ ├── position.tsx │ │ │ ├── size.tsx │ │ │ └── slide.tsx │ │ ├── hooks │ │ │ ├── useAnimateConfig.ts │ │ │ ├── useIndicator.ts │ │ │ ├── useOffsets.ts │ │ │ ├── useTouchMove.ts │ │ │ ├── useUpdate.ts │ │ │ └── useVisibleRange.ts │ │ ├── index.en-US.md │ │ ├── index.ts │ │ ├── index.zh-CN.md │ │ ├── interface.ts │ │ └── util.ts │ ├── tag │ │ ├── CheckableTag.tsx │ │ ├── demo │ │ │ ├── _semantic_basic.tsx │ │ │ ├── _semantic_checkable.tsx │ │ │ ├── basic.tsx │ │ │ ├── borderless.tsx │ │ │ ├── checkable.tsx │ │ │ ├── colorful.tsx │ │ │ ├── control.tsx │ │ │ ├── draggable.tsx │ │ │ ├── icon.tsx │ │ │ └── status.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ └── index.zh-CN.md │ ├── theme │ │ └── useTheme.ts │ ├── time-picker │ │ ├── demo │ │ │ ├── 12hours.tsx │ │ │ ├── _semantic.tsx │ │ │ ├── addon.tsx │ │ │ ├── basic.tsx │ │ │ ├── change-on-scroll.tsx │ │ │ ├── disabled.tsx │ │ │ ├── hide-column.tsx │ │ │ ├── interval-options.tsx │ │ │ ├── need-confirm.tsx │ │ │ ├── range-picker.tsx │ │ │ ├── size.tsx │ │ │ ├── status.tsx │ │ │ ├── suffix.tsx │ │ │ ├── value.tsx │ │ │ └── variant.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ └── index.zh-CN.md │ ├── timeline │ │ ├── Timeline.tsx │ │ ├── TimelineItem.tsx │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── basic.tsx │ │ │ ├── color.tsx │ │ │ ├── custom.tsx │ │ │ └── pending.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ └── index.zh-CN.md │ ├── tooltip │ │ ├── Popup.tsx │ │ ├── Tooltip.tsx │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── arrow.tsx │ │ │ ├── auto-adjust-overflow.tsx │ │ │ ├── basic.tsx │ │ │ ├── colorful.tsx │ │ │ ├── destroy-tooltip-on-hide.tsx │ │ │ ├── placement.tsx │ │ │ └── shift.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ ├── index.zh-CN.md │ │ ├── interface.ts │ │ └── util.ts │ ├── tour │ │ ├── Mask.tsx │ │ ├── Panel.tsx │ │ ├── Tour.tsx │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── basic.tsx │ │ │ ├── gap.tsx │ │ │ ├── indicator.tsx │ │ │ ├── mask.tsx │ │ │ ├── non-modal.tsx │ │ │ └── placement.tsx │ │ ├── hooks │ │ │ └── useTarget.ts │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ ├── index.zh-CN.md │ │ ├── interface.ts │ │ └── util.ts │ ├── transfer │ │ ├── Button.tsx │ │ ├── List.tsx │ │ ├── ListBody.tsx │ │ ├── ListItem.tsx │ │ ├── Operation.tsx │ │ ├── Search.tsx │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── advanced.tsx │ │ │ ├── basic.tsx │ │ │ ├── custom-item.tsx │ │ │ ├── custom-select-all-labels.tsx │ │ │ ├── large-data.tsx │ │ │ ├── one-way.tsx │ │ │ ├── search.tsx │ │ │ ├── status.tsx │ │ │ ├── table-transfer.tsx │ │ │ └── tree-transfer.tsx │ │ ├── hooks │ │ │ ├── useData.ts │ │ │ └── useSelection.ts │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ ├── index.zh-CN.md │ │ ├── interface.ts │ │ └── util.ts │ ├── transition │ │ ├── DomWrapper.tsx │ │ ├── Transition.tsx │ │ ├── TransitionList.tsx │ │ ├── demo │ │ │ ├── basic.tsx │ │ │ └── list.tsx │ │ ├── hooks │ │ │ ├── useDomEvents.ts │ │ │ ├── useNextFrame.ts │ │ │ ├── useStatus.ts │ │ │ └── useStepQueue.ts │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ ├── index.zh-CN.md │ │ ├── interface.ts │ │ └── util │ │ │ ├── diff.ts │ │ │ └── style.ts │ ├── tree │ │ ├── Indent.tsx │ │ ├── NodeList.tsx │ │ ├── SwitcherIcon.tsx │ │ ├── Tree.tsx │ │ ├── TreeNode.tsx │ │ ├── context.ts │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── basic-checkable.tsx │ │ │ ├── basic-controlled.tsx │ │ │ ├── basic.tsx │ │ │ ├── big-data.tsx │ │ │ ├── customized-icon.tsx │ │ │ ├── drag-debug.tsx │ │ │ ├── draggable.tsx │ │ │ ├── dynamic.tsx │ │ │ ├── line.tsx │ │ │ ├── multiple-line.tsx │ │ │ ├── remote.tsx │ │ │ ├── search.tsx │ │ │ ├── services.ts │ │ │ ├── switcher-icon.tsx │ │ │ └── virtual-scroll.tsx │ │ ├── hooks │ │ │ ├── useDraggableConfig.tsx │ │ │ ├── useEventData.ts │ │ │ ├── useFilledProps.ts │ │ │ ├── useRequest.ts │ │ │ └── useUnmount.ts │ │ ├── index.en-US.md │ │ ├── index.ts │ │ ├── index.zh-CN.md │ │ ├── interface.tsx │ │ └── utils │ │ │ ├── conductUtil.ts │ │ │ ├── diffUtil.ts │ │ │ ├── keyUtil.ts │ │ │ ├── miscUtil.ts │ │ │ └── treeUtil.ts │ ├── trigger │ │ ├── Context.ts │ │ ├── Popup │ │ │ ├── Arrow.tsx │ │ │ ├── Mask.tsx │ │ │ ├── PopupContent.tsx │ │ │ └── index.tsx │ │ ├── TriggerWrapper.tsx │ │ ├── hooks │ │ │ ├── useAction.ts │ │ │ ├── useAlign.ts │ │ │ ├── useWatch.ts │ │ │ └── useWinClick.ts │ │ ├── index.tsx │ │ ├── interface.ts │ │ ├── mock.tsx │ │ └── util.ts │ ├── upload │ │ ├── Dragger.tsx │ │ ├── Upload.tsx │ │ ├── UploadList │ │ │ ├── ListItem.tsx │ │ │ └── index.tsx │ │ ├── demo │ │ │ ├── _semantic.tsx │ │ │ ├── avatar.tsx │ │ │ ├── basic.tsx │ │ │ ├── customize-progress-bar.tsx │ │ │ ├── debug-disabled.tsx │ │ │ ├── default-file-list.tsx │ │ │ ├── directory.tsx │ │ │ ├── drag-sorting.tsx │ │ │ ├── drag.tsx │ │ │ ├── file-list.tsx │ │ │ ├── file-type.tsx │ │ │ ├── max-count.tsx │ │ │ ├── picture-card.tsx │ │ │ ├── picture-circle.tsx │ │ │ ├── picture-style.tsx │ │ │ ├── preview-file.tsx │ │ │ ├── transform-file.tsx │ │ │ ├── upload-custom-action-icon.tsx │ │ │ ├── upload-manually.tsx │ │ │ └── upload-png-only.tsx │ │ ├── index.en-US.md │ │ ├── index.ts │ │ ├── index.zh-CN.md │ │ ├── interface.tsx │ │ ├── request.ts │ │ └── util.ts │ ├── virtual-list │ │ ├── Scroller.tsx │ │ ├── VirtualList.tsx │ │ ├── context.ts │ │ ├── index.ts │ │ └── interface.ts │ └── watermark │ │ ├── context.ts │ │ ├── demo │ │ ├── basic.tsx │ │ ├── custom.tsx │ │ ├── image.tsx │ │ ├── multi-line.tsx │ │ └── portal.tsx │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ ├── index.zh-CN.md │ │ ├── useClips.ts │ │ ├── useRafDebounce.ts │ │ ├── useWatermark.ts │ │ └── utils.ts ├── plugin │ ├── base.ts │ ├── config.ts │ ├── constants.ts │ └── index.ts └── theme │ ├── colorPalette.ts │ ├── colors.ts │ ├── index.ts │ ├── themes.ts │ └── util.ts ├── tailwind.css ├── tsconfig.json └── tsconfig.node.json /.dumi/hooks/useLayoutState.ts: -------------------------------------------------------------------------------- 1 | import { startTransition, useState } from 'react'; 2 | 3 | const useLayoutState: typeof useState = ( 4 | ...args: Parameters> 5 | ): ReturnType> => { 6 | const [state, setState] = useState(...args); 7 | 8 | const setLayoutState: typeof setState = (...setStateArgs) => { 9 | startTransition(() => { 10 | setState(...setStateArgs); 11 | }); 12 | }; 13 | 14 | return [state, setLayoutState]; 15 | }; 16 | 17 | export default useLayoutState; 18 | -------------------------------------------------------------------------------- /.dumi/loading.js: -------------------------------------------------------------------------------- 1 | // must be .js file, can't modify to be .ts file! 2 | 3 | export { default } from './theme/common/Loading'; 4 | -------------------------------------------------------------------------------- /.dumi/pages/index-cn/index.ts: -------------------------------------------------------------------------------- 1 | import Homepage from '../index/index'; 2 | 3 | export default Homepage; 4 | -------------------------------------------------------------------------------- /.dumi/remarkPlugin.ts: -------------------------------------------------------------------------------- 1 | import { unistUtilVisit } from 'dumi'; 2 | import type { UnifiedTransformer } from 'dumi'; 3 | 4 | function remarkMeta(): UnifiedTransformer { 5 | return (tree, vFile) => { 6 | // read frontmatter 7 | unistUtilVisit.visit(tree, 'yaml', (node) => { 8 | if (!/(^|[\n\r])description:/.test(node.value)) { 9 | (vFile.data.frontmatter as any).__autoDescription = true; 10 | } 11 | }); 12 | }; 13 | } 14 | 15 | export default remarkMeta; 16 | -------------------------------------------------------------------------------- /.dumi/theme/SiteContext.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { ThemeName } from './slots/Header/ThemeSwitch'; 3 | 4 | export interface SiteContextProps { 5 | theme: ThemeName; 6 | updateSiteConfig: (props: Partial) => void; 7 | } 8 | 9 | const SiteContext = React.createContext({ 10 | theme: 'system', 11 | updateSiteConfig: () => {}, 12 | }); 13 | 14 | export default SiteContext; 15 | -------------------------------------------------------------------------------- /.dumi/theme/builtins/Container/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Alert } from 'metis-ui'; 3 | 4 | interface ContainerProps { 5 | type: 'info' | 'warning' | 'success' | 'error'; 6 | title?: string; 7 | } 8 | 9 | const Container: React.FC> = ({ 10 | type, 11 | title, 12 | children, 13 | }) => { 14 | return ( 15 | 22 | ); 23 | }; 24 | 25 | export default Container; 26 | -------------------------------------------------------------------------------- /.dumi/theme/builtins/IconSearch/fields.ts: -------------------------------------------------------------------------------- 1 | import * as MetisIcons from '@metisjs/icons'; 2 | import groupBy from 'lodash/groupBy'; 3 | 4 | export default groupBy(Object.keys(MetisIcons), (item) => 5 | item.endsWith('Outline') ? 'Outline' : 'Solid', 6 | ); 7 | -------------------------------------------------------------------------------- /.dumi/theme/icons/CodeSandboxIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const CodeSandboxIcon = ({ className }: { className?: string }) => ( 4 | 5 | 6 | 7 | ); 8 | 9 | export default CodeSandboxIcon; 10 | -------------------------------------------------------------------------------- /.dumi/theme/icons/StackBlitzIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const StackBlitzIcon = ({ className }: { className?: string }) => ( 4 | 16 | ); 17 | 18 | export default StackBlitzIcon; 19 | -------------------------------------------------------------------------------- /.dumi/theme/layouts/SidebarLayout.tsx: -------------------------------------------------------------------------------- 1 | import type { PropsWithChildren } from 'react'; 2 | import React from 'react'; 3 | import CommonHelmet from '../common/CommonHelmet'; 4 | import Content from '../slots/Content'; 5 | import Sidebar from '../slots/Sidebar'; 6 | 7 | const SidebarLayout: React.FC = ({ children }) => { 8 | return ( 9 |
10 | 11 | 12 | {children} 13 |
14 | ); 15 | }; 16 | 17 | export default SidebarLayout; 18 | -------------------------------------------------------------------------------- /.dumi/theme/locales/zh-CN.json: -------------------------------------------------------------------------------- 1 | { 2 | "app.title": "Metis UI - 一套基于 Tailwind CSS 的 React 组件库", 3 | "app.description": "基于 Tailwind CSS 设计体系的 React UI 组件库，用于研发企业级中后台产品。", 4 | "app.banner.title": "一套企业级 React-Tailwind 组件库", 5 | "app.banner.desc": "结合 Ant Design 的全面组件库与 Tailwind CSS 的灵活性和实用优先的设计方法，轻松构建现代化、可扩展且视觉惊艳的用户界面。", 6 | "app.nav.docs": "指南", 7 | "app.nav.components": "组件", 8 | "app.home.getting-started": "开始使用", 9 | "app.docs.components.icon.search.placeholder": "在此搜索图标，点击图标可复制代码" 10 | } 11 | -------------------------------------------------------------------------------- /.dumi/theme/slots/Footer/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { type FC } from 'react'; 2 | import dayjs from 'dayjs'; 3 | import { clsx } from 'metis-ui'; 4 | 5 | export interface FooterProps { 6 | className?: string; 7 | } 8 | 9 | const Footer: FC = ({ className }) => { 10 | return ( 11 |
12 |
13 | Copyright © {dayjs().year()} Metis Labs 14 |
15 |
16 | ); 17 | }; 18 | 19 | export default Footer; 20 | -------------------------------------------------------------------------------- /.dumi/theme/slots/Header/Logo.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Link from '../../common/Link'; 3 | import * as utils from '../../utils'; 4 | 5 | const Logo = () => { 6 | const { pathname, search } = location; 7 | 8 | const isZhCN = utils.isZhCN(pathname); 9 | 10 | return ( 11 | 12 | logo 13 | metisui 14 | 15 | ); 16 | }; 17 | 18 | export default Logo; 19 | -------------------------------------------------------------------------------- /.dumi/theme/styles/nprogress.css: -------------------------------------------------------------------------------- 1 | #nprogress .bar { 2 | @apply bg-primary; 3 | } 4 | 5 | #nprogress .peg { 6 | @apply shadow-primary shadow-lg; 7 | } 8 | 9 | #nprogress .spinner-icon { 10 | @apply border-t-primary border-l-primary; 11 | } 12 | -------------------------------------------------------------------------------- /.dumi/theme/styles/reset.css: -------------------------------------------------------------------------------- 1 | body { 2 | @apply bg-white dark:bg-gray-950; 3 | } 4 | 5 | :where([id]) { 6 | scroll-margin-top: calc(var(--spacing) * 20); 7 | } 8 | 9 | iframe body { 10 | @apply bg-white dark:bg-gray-950/50; 11 | } 12 | 13 | .dumi-default-source-code { 14 | @apply focus-within:inset-ring-primary rounded-lg! bg-white/10! inset-ring! inset-ring-white/10! dark:bg-white/5! dark:inset-ring-white/5!; 15 | } 16 | 17 | .dumi-default-source-code-editor:focus-within::after { 18 | box-shadow: none !important; 19 | } 20 | 21 | .dumi-default-source-code-copy { 22 | @apply mt-0! rounded-md!; 23 | } 24 | 25 | .dumi-default-source-code-language { 26 | display: none; 27 | } 28 | -------------------------------------------------------------------------------- /.dumi/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "resolveJsonModule": true 5 | }, 6 | "include": ["**/*", "../typings/index.d.ts"] 7 | } 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: require.resolve('@umijs/lint/dist/config/eslint'), 3 | overrides: [ 4 | { 5 | files: ['*.ts', '*.tsx'], 6 | rules: { 7 | '@typescript-eslint/no-unused-vars': [2, { args: 'none' }], 8 | '@typescript-eslint/no-unused-expressions': 2, 9 | '@typescript-eslint/consistent-type-imports': [2, { disallowTypeAnnotations: false }], 10 | }, 11 | }, 12 | ], 13 | ignorePatterns: ['plugins/compiled/*'], 14 | }; 15 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npx commitlint --edit "${1}" 5 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npx lint-staged 5 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | **/*.png 2 | **/*.svg 3 | CODEOWNERS 4 | .dockerignore 5 | Dockerfile.ui-test 6 | package.json 7 | .dumi/tmp 8 | .dumi/tmp-production 9 | AUTHORS.txt 10 | lib/ 11 | es/ 12 | dist/ 13 | _site/ 14 | server 15 | .dumi/tmp 16 | coverage/ 17 | CNAME 18 | LICENSE 19 | yarn.lock 20 | netlify.toml 21 | yarn-error.log 22 | *.sh 23 | *.snap 24 | components/*/*.js 25 | components/*/*.jsx 26 | .gitignore 27 | .npmignore 28 | .prettierignore 29 | .DS_Store 30 | .editorconfig 31 | .eslintignore 32 | .history 33 | **/*.yml 34 | plugins/compiled/* 35 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | 'prettier-plugin-packagejson', 4 | '@ianvs/prettier-plugin-sort-imports', 5 | 'prettier-plugin-tailwindcss', 6 | ], 7 | importOrder: ['^(react|react-dom)$', '^([a-z]|@[a-z])', '.*'], 8 | tailwindFunctions: ['clsx'], 9 | printWidth: 100, 10 | proseWrap: 'never', 11 | singleQuote: true, 12 | trailingComma: 'all', 13 | jsxSingleQuote: false, 14 | }; 15 | -------------------------------------------------------------------------------- /CHANGELOG.zh-CN.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 更新日志 4 | timeline: true 5 | --- 6 | 7 | 遵循 [Semantic Versioning 2.0.0](http://semver.org/lang/zh-CN/) 语义化版本规范。 8 | 9 | ## 1.0.2 10 | 11 | `2025-05-21` 12 | 13 | - 🐞 修复 `Modal.confirm` 自定义 `footer` 错误。[#6](https://github.com/metisjs/metis-ui/issues/6) 14 | - 💄 修复 `QRCode` 暗色主题下遮罩样式问题。 15 | - 💄 修复 `Notification` 部分样式问题。 16 | 17 | ## 1.0.1 18 | 19 | `2025-04-29` 20 | 21 | - 🐞 修复 `TimePicker` 样式问题。[#2](https://github.com/metisjs/metis-ui/issues/2) 22 | 23 | ## 1.0.0 24 | 25 | `2025-04-28` 26 | 27 | - 🎉 🎉 🎉 经过长达1年的开发，1.0终于发布了。项目会一直维护迭代，有问题一定及时处理，快来一起使用吧。 28 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/metisjs/metis-ui/b303b6bcd824c11426a55a69ea4587aa77ab164d/public/favicon.ico -------------------------------------------------------------------------------- /src/components/_util/ZIndexContext.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const ZIndexContext = React.createContext(undefined); 4 | 5 | if (process.env.NODE_ENV !== 'production') { 6 | ZIndexContext.displayName = 'ZIndexContext'; 7 | } 8 | 9 | export default ZIndexContext; 10 | -------------------------------------------------------------------------------- /src/components/_util/aria-data-attrs.ts: -------------------------------------------------------------------------------- 1 | import type * as React from 'react'; 2 | 3 | export type HTMLAriaDataAttributes = React.AriaAttributes & { 4 | [key: `data-${string}`]: unknown; 5 | } & Pick, 'role'>; 6 | -------------------------------------------------------------------------------- /src/components/_util/extendsObject.ts: -------------------------------------------------------------------------------- 1 | import type { AnyObject } from './type'; 2 | 3 | const extendsObject = (...list: T[]) => { 4 | const result: AnyObject = { ...list[0] }; 5 | 6 | for (let i = 1; i < list.length; i++) { 7 | const obj = list[i]; 8 | if (obj) { 9 | Object.keys(obj).forEach((key) => { 10 | const val = obj[key]; 11 | if (val !== undefined) { 12 | result[key] = val; 13 | } 14 | }); 15 | } 16 | } 17 | 18 | return result as T; 19 | }; 20 | 21 | export default extendsObject; 22 | -------------------------------------------------------------------------------- /src/components/_util/getDataOrAriaProps.ts: -------------------------------------------------------------------------------- 1 | export default function getDataOrAriaProps(props: any) { 2 | return Object.keys(props).reduce((prev: any, key: string) => { 3 | if ( 4 | (key.startsWith('data-') || key.startsWith('aria-') || key === 'role') && 5 | !key.startsWith('data-__') 6 | ) { 7 | prev[key] = props[key]; 8 | } 9 | return prev; 10 | }, {}); 11 | } 12 | -------------------------------------------------------------------------------- /src/components/_util/getRenderPropValue.ts: -------------------------------------------------------------------------------- 1 | import type * as React from 'react'; 2 | 3 | export type RenderFunction = () => React.ReactNode; 4 | 5 | export const getRenderPropValue = ( 6 | propValue?: React.ReactNode | RenderFunction, 7 | ): React.ReactNode => { 8 | if (!propValue) { 9 | return null; 10 | } 11 | 12 | if (typeof propValue === 'function') { 13 | return propValue(); 14 | } 15 | 16 | return propValue; 17 | }; 18 | -------------------------------------------------------------------------------- /src/components/_util/hooks/useForceUpdate.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export default function useForceUpdate() { 4 | const [, forceUpdate] = React.useReducer((x) => x + 1, 0); 5 | return forceUpdate; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/_util/hooks/useIsMounted.ts: -------------------------------------------------------------------------------- 1 | import { useRef } from 'react'; 2 | import useLayoutEffect from '@rc-component/util/es/hooks/useLayoutEffect'; 3 | 4 | export default function useIsMounted() { 5 | let mounted = useRef(false); 6 | 7 | useLayoutEffect(() => { 8 | mounted.current = true; 9 | 10 | return () => { 11 | mounted.current = false; 12 | }; 13 | }, []); 14 | 15 | return mounted; 16 | } 17 | -------------------------------------------------------------------------------- /src/components/_util/hooks/useLatestValue.ts: -------------------------------------------------------------------------------- 1 | import { useRef } from 'react'; 2 | 3 | function useLatestValue(value: T) { 4 | const ref = useRef(value); 5 | ref.current = value; 6 | 7 | return ref; 8 | } 9 | 10 | export default useLatestValue; 11 | -------------------------------------------------------------------------------- /src/components/_util/hooks/usePlaceholder.ts: -------------------------------------------------------------------------------- 1 | import { useLocale } from '../../locale'; 2 | 3 | export default function usePlaceholder(type: 'select' | 'input', placeholder?: T) { 4 | const [locale] = useLocale('global'); 5 | return placeholder ?? (type === 'input' ? locale.inputPlaceholder : locale.selectPlaceholder); 6 | } 7 | -------------------------------------------------------------------------------- /src/components/_util/hooks/usePrevious.ts: -------------------------------------------------------------------------------- 1 | import { useRef } from 'react'; 2 | 3 | export type ShouldUpdateFunc = (prev?: T, next?: T) => boolean; 4 | 5 | const defaultShouldUpdate = (a?: T, b?: T) => !Object.is(a, b); 6 | 7 | function usePrevious( 8 | state: T, 9 | shouldUpdate: ShouldUpdateFunc = defaultShouldUpdate, 10 | ): T | undefined { 11 | const prevRef = useRef(undefined); 12 | const curRef = useRef(undefined); 13 | 14 | if (shouldUpdate(curRef.current, state)) { 15 | prevRef.current = curRef.current; 16 | curRef.current = state; 17 | } 18 | 19 | return prevRef.current; 20 | } 21 | 22 | export default usePrevious; 23 | -------------------------------------------------------------------------------- /src/components/_util/isBrowser.ts: -------------------------------------------------------------------------------- 1 | const isNode = typeof process !== 'undefined' && process.versions && process.versions.node; 2 | 3 | export default () => { 4 | if (typeof process !== 'undefined' && process.env.NODE_ENV === 'TEST') { 5 | return true; 6 | } 7 | 8 | return ( 9 | typeof window !== 'undefined' && 10 | typeof window.document !== 'undefined' && 11 | typeof window.matchMedia !== 'undefined' && 12 | !isNode 13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /src/components/_util/isNil.ts: -------------------------------------------------------------------------------- 1 | export const isNil = (value: any): value is null | undefined => 2 | value === null || value === undefined; 3 | -------------------------------------------------------------------------------- /src/components/_util/isNumeric.ts: -------------------------------------------------------------------------------- 1 | const isNumeric = (value: any): boolean => !isNaN(parseFloat(value)) && isFinite(value); 2 | 3 | export default isNumeric; 4 | -------------------------------------------------------------------------------- /src/components/_util/isPrimitive.ts: -------------------------------------------------------------------------------- 1 | const isPrimitive = (value: unknown) => 2 | (typeof value !== 'object' && typeof value !== 'function') || value === null; 3 | 4 | export default isPrimitive; 5 | -------------------------------------------------------------------------------- /src/components/_util/platform.ts: -------------------------------------------------------------------------------- 1 | /* istanbul ignore file */ 2 | export function isPlatformMac(): boolean { 3 | return /(mac\sos|macintosh)/i.test(navigator.appVersion); 4 | } 5 | -------------------------------------------------------------------------------- /src/components/_util/styleChecker.tsx: -------------------------------------------------------------------------------- 1 | import canUseDom from '@rc-component/util/es/Dom/canUseDom'; 2 | import { isStyleSupport } from '@rc-component/util/es/Dom/styleChecker'; 3 | 4 | export const canUseDocElement = () => canUseDom() && window.document.documentElement; 5 | 6 | export { isStyleSupport }; 7 | -------------------------------------------------------------------------------- /src/components/_util/throttleByAnimationFrame.ts: -------------------------------------------------------------------------------- 1 | import raf from '@rc-component/util/es/raf'; 2 | 3 | function throttleByAnimationFrame(fn: (...args: T) => void) { 4 | let requestId: number | null; 5 | 6 | const later = (args: T) => () => { 7 | requestId = null; 8 | fn(...args); 9 | }; 10 | 11 | const throttled = (...args: T) => { 12 | // eslint-disable-next-line eqeqeq 13 | if (requestId == null) { 14 | requestId = raf(later(args)); 15 | } 16 | }; 17 | 18 | throttled.cancel = () => { 19 | raf.cancel(requestId!); 20 | requestId = null; 21 | }; 22 | 23 | return throttled; 24 | } 25 | 26 | export default throttleByAnimationFrame; 27 | -------------------------------------------------------------------------------- /src/components/_util/toArray.ts: -------------------------------------------------------------------------------- 1 | export default function toArray(candidate?: T | T[] | false | null, skipEmpty = true): T[] { 2 | if (skipEmpty && (candidate === undefined || candidate === false || candidate === null)) 3 | return []; 4 | 5 | return Array.isArray(candidate) ? candidate : [candidate as T]; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/_util/transition.ts: -------------------------------------------------------------------------------- 1 | import type { TransitionProps } from '../transition'; 2 | 3 | const collapseTransition: TransitionProps = { 4 | enter: 'transition-all ease-in overflow-hidden', 5 | enterFrom: 'opacity-0 h-0', 6 | enterTo: (node) => ({ className: 'opacity-100', style: { height: node?.scrollHeight } }), 7 | leave: 'transition-all ease-in overflow-hidden', 8 | leaveFrom: (node) => ({ className: 'opacity-100', style: { height: node?.scrollHeight } }), 9 | leaveTo: 'opacity-0 h-0', 10 | deadline: 500, 11 | }; 12 | 13 | export { collapseTransition }; 14 | -------------------------------------------------------------------------------- /src/components/affix/demo/debug.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Affix, Button } from 'metis-ui'; 3 | 4 | const App: React.FC = () => { 5 | const [top, setTop] = useState(10); 6 | 7 | return ( 8 |
9 |
Top
10 | 11 |
12 | 15 |
16 | 17 |
Bottom
18 |
19 | ); 20 | }; 21 | 22 | export default App; 23 | -------------------------------------------------------------------------------- /src/components/affix/demo/on-change.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Affix, Button } from 'metis-ui'; 3 | 4 | const App: React.FC = () => ( 5 | console.log(affixed)}> 6 | 7 | 8 | ); 9 | 10 | export default App; 11 | -------------------------------------------------------------------------------- /src/components/alert/demo/banner.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Alert, Space } from 'metis-ui'; 3 | 4 | const App: React.FC = () => ( 5 | 6 | 7 | 12 | 13 | 14 | 15 | ); 16 | 17 | export default App; 18 | -------------------------------------------------------------------------------- /src/components/alert/demo/basic.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Alert } from 'metis-ui'; 3 | 4 | const App: React.FC = () => ; 5 | 6 | export default App; 7 | -------------------------------------------------------------------------------- /src/components/alert/demo/error-boundary.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Alert, Button } from 'metis-ui'; 3 | 4 | const { ErrorBoundary } = Alert; 5 | const ThrowError: React.FC = () => { 6 | const [error, setError] = useState(); 7 | const onClick = () => { 8 | setError(new Error('An Uncaught Error')); 9 | }; 10 | 11 | if (error) { 12 | throw error; 13 | } 14 | return ( 15 | 18 | ); 19 | }; 20 | 21 | const App: React.FC = () => ( 22 | 23 | 24 | 25 | ); 26 | 27 | export default App; 28 | -------------------------------------------------------------------------------- /src/components/alert/demo/loop-banner.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Alert } from 'metis-ui'; 3 | import Marquee from 'react-fast-marquee'; 4 | 5 | const App: React.FC = () => ( 6 | 10 | I can be a React component, multiple React components, or just some text. 11 | 12 | } 13 | /> 14 | ); 15 | 16 | export default App; 17 | -------------------------------------------------------------------------------- /src/components/alert/demo/smooth-closed.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Alert, Space, Switch } from 'metis-ui'; 3 | 4 | const App: React.FC = () => { 5 | const [visible, setVisible] = useState(true); 6 | 7 | const handleClose = () => { 8 | setVisible(false); 9 | }; 10 | 11 | return ( 12 | 13 | {visible && ( 14 | 15 | )} 16 |

click the close button to see the effect

17 | 18 | 19 | ); 20 | }; 21 | 22 | export default App; 23 | -------------------------------------------------------------------------------- /src/components/alert/demo/style.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Alert, Space } from 'metis-ui'; 3 | 4 | const App: React.FC = () => ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | ); 12 | 13 | export default App; 14 | -------------------------------------------------------------------------------- /src/components/alert/index.ts: -------------------------------------------------------------------------------- 1 | import InternalAlert from './Alert'; 2 | import ErrorBoundary from './ErrorBoundary'; 3 | 4 | export type { AlertProps } from './Alert'; 5 | 6 | type CompoundedComponent = typeof InternalAlert & { 7 | ErrorBoundary: typeof ErrorBoundary; 8 | }; 9 | 10 | const Alert = InternalAlert as CompoundedComponent; 11 | 12 | Alert.ErrorBoundary = ErrorBoundary; 13 | 14 | export default Alert; 15 | -------------------------------------------------------------------------------- /src/components/anchor/context.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import type { AntAnchor } from './Anchor'; 3 | 4 | const AnchorContext = React.createContext(undefined); 5 | 6 | export default AnchorContext; 7 | -------------------------------------------------------------------------------- /src/components/anchor/index.ts: -------------------------------------------------------------------------------- 1 | import Anchor from './Anchor'; 2 | 3 | export type { AnchorProps } from './Anchor'; 4 | export type { AnchorLinkProps } from './AnchorLink'; 5 | 6 | export default Anchor; 7 | -------------------------------------------------------------------------------- /src/components/auto-complete/demo/non-case-sensitive.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AutoComplete } from 'metis-ui'; 3 | 4 | const options = [ 5 | { value: 'Burns Bay Road' }, 6 | { value: 'Downing Street' }, 7 | { value: 'Wall Street' }, 8 | ]; 9 | 10 | const App: React.FC = () => ( 11 | 16 | option!.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1 17 | } 18 | /> 19 | ); 20 | 21 | export default App; 22 | -------------------------------------------------------------------------------- /src/components/auto-complete/demo/request-pagination.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AutoComplete } from 'metis-ui'; 3 | import { fetchDataWithPagination } from '../../select/demo/services'; 4 | 5 | export default () => ( 6 | console.log(...arg)} 13 | className="w-[320px]" 14 | /> 15 | ); 16 | -------------------------------------------------------------------------------- /src/components/auto-complete/demo/request.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AutoComplete } from 'metis-ui'; 3 | import { fetchData } from '../../select/demo/services'; 4 | 5 | export default () => ( 6 | console.log(...arg)} 12 | className="w-[320px]" 13 | /> 14 | ); 15 | -------------------------------------------------------------------------------- /src/components/avatar/SizeContext.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export type AvatarSize = 'large' | 'small' | 'default' | number; 4 | 5 | const SizeContext = React.createContext('default'); 6 | 7 | export interface SizeContextProps { 8 | size?: AvatarSize; 9 | children?: React.ReactNode; 10 | } 11 | 12 | export const SizeContextProvider: React.FC = ({ children, size }) => ( 13 | 14 | {(originSize) => ( 15 | {children} 16 | )} 17 | 18 | ); 19 | 20 | export default SizeContext; 21 | -------------------------------------------------------------------------------- /src/components/avatar/demo/_semantic_basic.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { UserSolid } from '@metisjs/icons'; 3 | import { Avatar } from 'metis-ui'; 4 | import SemanticPreview from '../../../../.dumi/components/SemanticPreview'; 5 | 6 | const App: React.FC = () => ( 7 | 8 | } /> 9 | 10 | ); 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /src/components/avatar/demo/badge.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { UserSolid } from '@metisjs/icons'; 3 | import { Avatar, Badge, Space } from 'metis-ui'; 4 | 5 | const App: React.FC = () => ( 6 | 7 | 8 | } /> 9 | 10 | 11 | } /> 12 | 13 | 14 | ); 15 | 16 | export default App; 17 | -------------------------------------------------------------------------------- /src/components/avatar/demo/fallback.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Avatar, Space } from 'metis-ui'; 3 | 4 | const App: React.FC = () => ( 5 | 6 | 7 | A 8 | 9 | 10 | ABC 11 | 12 | 13 | ); 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /src/components/avatar/index.tsx: -------------------------------------------------------------------------------- 1 | import type { ForwardRefExoticComponent, RefAttributes } from 'react'; 2 | import type { AvatarProps } from './Avatar'; 3 | import InternalAvatar from './Avatar'; 4 | import Group from './Group'; 5 | 6 | export type { AvatarProps } from './Avatar'; 7 | export type { GroupProps } from './Group'; 8 | export { Group }; 9 | 10 | type CompoundedComponent = ForwardRefExoticComponent< 11 | AvatarProps & RefAttributes 12 | > & { 13 | Group: typeof Group; 14 | }; 15 | 16 | const Avatar = InternalAvatar as CompoundedComponent; 17 | 18 | Avatar.Group = Group; 19 | 20 | export default Avatar; 21 | -------------------------------------------------------------------------------- /src/components/badge/demo/_semantic_basic.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Avatar, Badge } from 'metis-ui'; 3 | import SemanticPreview from '../../../../.dumi/components/SemanticPreview'; 4 | 5 | const App: React.FC = () => ( 6 | 7 | 8 | 9 | 10 | 11 | ); 12 | 13 | export default App; 14 | -------------------------------------------------------------------------------- /src/components/badge/demo/_semantic_ribbon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Badge, Card } from 'metis-ui'; 3 | import SemanticPreview from '../../../../.dumi/components/SemanticPreview'; 4 | 5 | const App: React.FC = () => ( 6 | 7 | 8 | 9 | and raises the spyglass. 10 | 11 | 12 | 13 | ); 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /src/components/badge/demo/basic.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ClockOutline } from '@metisjs/icons'; 3 | import { Avatar, Badge, Space } from 'metis-ui'; 4 | 5 | const App: React.FC = () => ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | }> 14 | 15 | 16 | 17 | ); 18 | 19 | export default App; 20 | -------------------------------------------------------------------------------- /src/components/badge/demo/dot.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { BellAlertOutline } from '@metisjs/icons'; 3 | import { Badge, Space } from 'metis-ui'; 4 | 5 | const App: React.FC = () => ( 6 | 7 | 8 | 9 | 10 | 11 | Link something 12 | 13 | 14 | ); 15 | 16 | export default App; 17 | -------------------------------------------------------------------------------- /src/components/badge/demo/link.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Avatar, Badge } from 'metis-ui'; 3 | 4 | const App: React.FC = () => ( 5 | 6 | 7 | 8 | 9 | 10 | ); 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /src/components/badge/demo/no-wrapper.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { ClockOutline } from '@metisjs/icons'; 3 | import { Badge, Space, Switch } from 'metis-ui'; 4 | 5 | const App: React.FC = () => { 6 | const [show, setShow] = useState(true); 7 | 8 | return ( 9 | 10 | setShow(!show)} /> 11 | 12 | 13 | : 0} /> 14 | 15 | 16 | ); 17 | }; 18 | 19 | export default App; 20 | -------------------------------------------------------------------------------- /src/components/badge/demo/offset.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Avatar, Badge } from 'metis-ui'; 3 | 4 | const App: React.FC = () => ( 5 | 6 | 7 | 8 | ); 9 | 10 | export default App; 11 | -------------------------------------------------------------------------------- /src/components/badge/demo/overflow.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Avatar, Badge, Space } from 'metis-ui'; 3 | 4 | const App: React.FC = () => ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | ); 20 | 21 | export default App; 22 | -------------------------------------------------------------------------------- /src/components/badge/demo/size.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Avatar, Badge, Space } from 'metis-ui'; 3 | 4 | const App: React.FC = () => ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | ); 20 | 21 | export default App; 22 | -------------------------------------------------------------------------------- /src/components/badge/demo/title.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Avatar, Badge, Space } from 'metis-ui'; 3 | 4 | const App: React.FC = () => ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | ); 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /src/components/breadcrumb/BreadcrumbSeparator.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { clsx } from '@util/classNameUtils'; 3 | 4 | const BreadcrumbSeparator: React.FC< 5 | React.PropsWithChildren<{ prefixCls?: string; className?: string }> 6 | > = ({ prefixCls, className, children }) => { 7 | return ( 8 | 18 | ); 19 | }; 20 | 21 | export default BreadcrumbSeparator; 22 | -------------------------------------------------------------------------------- /src/components/breadcrumb/demo/basic.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Breadcrumb } from 'metis-ui'; 3 | 4 | const App: React.FC = () => ( 5 | 23 | ); 24 | 25 | export default App; 26 | -------------------------------------------------------------------------------- /src/components/breadcrumb/demo/separator.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Breadcrumb } from 'metis-ui'; 3 | 4 | const App: React.FC = () => ( 5 | 24 | ); 25 | 26 | export default App; 27 | -------------------------------------------------------------------------------- /src/components/breadcrumb/demo/withIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { HomeOutline, UserOutline } from '@metisjs/icons'; 3 | import { Breadcrumb } from 'metis-ui'; 4 | 5 | const App: React.FC = () => ( 6 | , 11 | }, 12 | { 13 | href: '', 14 | icon: , 15 | title: 'Application List', 16 | }, 17 | { 18 | title: 'Application', 19 | }, 20 | ]} 21 | /> 22 | ); 23 | 24 | export default App; 25 | -------------------------------------------------------------------------------- /src/components/breadcrumb/index.ts: -------------------------------------------------------------------------------- 1 | import Breadcrumb from './Breadcrumb'; 2 | 3 | export type { BreadcrumbProps } from './Breadcrumb'; 4 | export type { BreadcrumbItemProps, SeparatorType } from './BreadcrumbItem'; 5 | 6 | export default Breadcrumb; 7 | -------------------------------------------------------------------------------- /src/components/button/demo/_semantic.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { MagnifyingGlassOutline } from '@metisjs/icons'; 3 | import { Button } from 'metis-ui'; 4 | import SemanticPreview from '../../../../.dumi/components/SemanticPreview'; 5 | 6 | const App: React.FC = () => ( 7 | 8 | 11 | 12 | ); 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /src/components/button/demo/basic.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button, Space } from 'metis-ui'; 3 | 4 | const App: React.FC = () => ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | ); 12 | 13 | export default App; 14 | -------------------------------------------------------------------------------- /src/components/button/demo/danger.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button, Space } from 'metis-ui'; 3 | 4 | const App: React.FC = () => ( 5 | 6 | 9 | 10 | 13 | 16 | 17 | ); 18 | 19 | export default App; 20 | -------------------------------------------------------------------------------- /src/components/button/demo/no-space.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button, Space } from 'metis-ui'; 3 | 4 | const App: React.FC = () => ( 5 | 6 | 9 | 12 | 13 | ); 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /src/components/button/index.tsx: -------------------------------------------------------------------------------- 1 | import Button from './Button'; 2 | 3 | export type { SizeType as ButtonSize } from '../config-provider/SizeContext'; 4 | export type { ButtonProps, ButtonShape, ButtonType } from './Button'; 5 | 6 | export default Button; 7 | -------------------------------------------------------------------------------- /src/components/calendar/Panel/hooks/useWinClick.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export default function useWinClick(callback: () => void) { 4 | React.useEffect(() => { 5 | addEventListener('click', callback); 6 | addEventListener('contextmenu', callback); 7 | 8 | return () => { 9 | removeEventListener('click', callback); 10 | removeEventListener('contextmenu', callback); 11 | }; 12 | }, []); 13 | } 14 | -------------------------------------------------------------------------------- /src/components/calendar/constant.ts: -------------------------------------------------------------------------------- 1 | export const EVENT_HEIGHT = 20; 2 | 3 | export const EVENT_GAP = 1; 4 | 5 | export const CELL_ONE_HOUR_HEIGHT = 60; 6 | 7 | export const TIME_EVENT_INDENT = EVENT_GAP * 8; 8 | 9 | /** 10 | * TimeEvent 视图下，分栏显示的时间间隔（分钟） 11 | */ 12 | export const TIME_EVENT_MULTI_COLUMN_DIFF = 20; 13 | -------------------------------------------------------------------------------- /src/components/calendar/demo/basic.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button, Calendar } from 'metis-ui'; 3 | 4 | const App: React.FC = () => { 5 | return Add Event} className="h-[768px]" />; 6 | }; 7 | 8 | export default App; 9 | -------------------------------------------------------------------------------- /src/components/calendar/demo/lunar.tsx: -------------------------------------------------------------------------------- 1 | import dayjs from 'dayjs'; 2 | import 'dayjs/locale/zh-cn'; 3 | import React from 'react'; 4 | import { Calendar, ConfigProvider } from 'metis-ui'; 5 | import zhCN from 'metis-ui/es/locale/zh_CN'; 6 | 7 | dayjs.locale('zh-cn'); 8 | 9 | const App: React.FC = () => { 10 | return ( 11 | 12 | 13 | 14 | ); 15 | }; 16 | 17 | export default App; 18 | -------------------------------------------------------------------------------- /src/components/calendar/index.tsx: -------------------------------------------------------------------------------- 1 | import type { Dayjs } from 'dayjs'; 2 | import dayjsGenerateConfig from '../date-picker/generate/config/dayjs'; 3 | import generateCalendar from './generateCalendar'; 4 | import type { CalendarProps } from './interface'; 5 | 6 | const Calendar = generateCalendar(dayjsGenerateConfig); 7 | 8 | export type CalendarType = typeof Calendar & { 9 | generateCalendar: typeof generateCalendar; 10 | }; 11 | 12 | (Calendar as CalendarType).generateCalendar = generateCalendar; 13 | 14 | export type { CalendarProps }; 15 | export default Calendar as CalendarType; 16 | -------------------------------------------------------------------------------- /src/components/card/demo/_semantic_meta.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Avatar, Card } from 'metis-ui'; 3 | import SemanticPreview from '../../../../.dumi/components/SemanticPreview'; 4 | 5 | const App: React.FC = () => ( 6 | 9 | } 12 | title="Card title" 13 | description="This is the description" 14 | /> 15 | 16 | ); 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /src/components/card/demo/basic.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Card, Space } from 'metis-ui'; 3 | 4 | const App: React.FC = () => ( 5 | 6 | More} className="w-75"> 7 |

Card content

8 |

Card content

9 |

Card content

10 | 11 | More} className="w-75"> 12 |

Card content

13 |

Card content

14 |

Card content

15 | 16 | 17 | ); 18 | 19 | export default App; 20 | -------------------------------------------------------------------------------- /src/components/card/demo/border-less.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Card } from 'metis-ui'; 3 | 4 | const App: React.FC = () => ( 5 |
6 | 7 |

Card content

8 |

Card content

9 |

Card content

10 | 11 |
12 | ); 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /src/components/card/demo/flexible-content.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Card } from 'metis-ui'; 3 | 4 | const { Meta } = Card; 5 | 6 | const App: React.FC = () => ( 7 | } 11 | > 12 | 13 | 14 | ); 15 | 16 | export default App; 17 | -------------------------------------------------------------------------------- /src/components/card/demo/in-column.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Card } from 'metis-ui'; 3 | 4 | const App: React.FC = () => ( 5 |
6 |
7 | 8 | Card content 9 | 10 |
11 |
12 | 13 | Card content 14 | 15 |
16 |
17 | 18 | Card content 19 | 20 |
21 |
22 | ); 23 | 24 | export default App; 25 | -------------------------------------------------------------------------------- /src/components/card/demo/simple.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Card } from 'metis-ui'; 3 | 4 | const App: React.FC = () => ( 5 | 6 |

Card content

7 |

Card content

8 |

Card content

9 | 10 | ); 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /src/components/card/index.ts: -------------------------------------------------------------------------------- 1 | import InternalCard from './Card'; 2 | import Meta from './Meta'; 3 | 4 | export type { CardProps } from './Card'; 5 | export type { CardMetaProps } from './Meta'; 6 | 7 | type InternalCardType = typeof InternalCard; 8 | 9 | export interface CardInterface extends InternalCardType { 10 | Meta: typeof Meta; 11 | } 12 | 13 | const Card = InternalCard as CardInterface; 14 | 15 | Card.Meta = Meta; 16 | 17 | if (process.env.NODE_ENV !== 'production') { 18 | Card.displayName = 'Card'; 19 | } 20 | 21 | export default Card; 22 | -------------------------------------------------------------------------------- /src/components/carousel/demo/autoplay.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Carousel } from 'metis-ui'; 3 | 4 | const contentCls = 'h-40 bg-indigo-800 text-center text-white text-lg leading-[160px]'; 5 | 6 | const App: React.FC = () => ( 7 | 8 |
1
9 |
2
10 |
3
11 |
4
12 | 13 | ); 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /src/components/carousel/demo/basic.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Carousel } from 'metis-ui'; 3 | 4 | const contentCls = 'h-40 bg-indigo-800 text-center text-white text-lg leading-[160px]'; 5 | 6 | const App: React.FC = () => { 7 | const onChange = (currentSlide: number) => { 8 | console.log(currentSlide); 9 | }; 10 | 11 | return ( 12 | 13 |
1
14 |
2
15 |
3
16 |
4
17 | 18 | ); 19 | }; 20 | 21 | export default App; 22 | -------------------------------------------------------------------------------- /src/components/carousel/demo/fade.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Carousel } from 'metis-ui'; 3 | 4 | const contentCls = 'h-40 bg-indigo-800 text-center text-white text-lg leading-[160px]'; 5 | 6 | const App: React.FC = () => ( 7 | 8 |
1
9 |
2
10 |
3
11 |
4
12 | 13 | ); 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /src/components/cascader/OptionList/CacheContent.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export interface CacheContentProps { 4 | children?: React.ReactNode; 5 | open?: boolean; 6 | } 7 | 8 | const CacheContent = React.memo( 9 | ({ children }: CacheContentProps) => children as React.ReactElement, 10 | (_, next) => !next.open, 11 | ); 12 | 13 | if (process.env.NODE_ENV !== 'production') { 14 | CacheContent.displayName = 'CacheContent'; 15 | } 16 | 17 | export default CacheContent; 18 | -------------------------------------------------------------------------------- /src/components/cascader/OptionList/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { useBaseProps } from '../../select'; 3 | import type { RefOptionListProps } from '../../select/BaseSelect'; 4 | import RawOptionList from './RawOptionList'; 5 | 6 | const RefOptionList = React.forwardRef((props, ref) => { 7 | const baseProps = useBaseProps(); 8 | 9 | // >>>>> Render 10 | return ; 11 | }); 12 | 13 | export default RefOptionList; 14 | -------------------------------------------------------------------------------- /src/components/cascader/demo/lazy.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Cascader } from 'metis-ui'; 3 | import { fetchChildrenData } from './services'; 4 | 5 | export default () => ( 6 | console.log(...arg)} 13 | className="w-72" 14 | /> 15 | ); 16 | -------------------------------------------------------------------------------- /src/components/cascader/demo/request.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Cascader } from 'metis-ui'; 3 | import { fetchData } from './services'; 4 | 5 | export default () => ( 6 | console.log(...arg)} 12 | className="w-72" 13 | /> 14 | ); 15 | -------------------------------------------------------------------------------- /src/components/cascader/demo/status.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Cascader, Space } from 'metis-ui'; 3 | 4 | const App: React.FC = () => ( 5 | 6 | 7 | 8 | 9 | ); 10 | 11 | export default App; 12 | -------------------------------------------------------------------------------- /src/components/cascader/hooks/useColumnIcons.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { ChevronRightOutline, LoadingOutline } from '@metisjs/icons'; 3 | 4 | export default function useColumnIcons(expandIcon?: React.ReactNode) { 5 | let mergedExpandIcon = expandIcon; 6 | if (!expandIcon) { 7 | mergedExpandIcon = ; 8 | } 9 | 10 | const loadingIcon = ; 11 | 12 | return [mergedExpandIcon, loadingIcon]; 13 | } 14 | -------------------------------------------------------------------------------- /src/components/cascader/index.tsx: -------------------------------------------------------------------------------- 1 | import Cascader from './Cascader'; 2 | 3 | export type { CascaderRef } from './Cascader'; 4 | 5 | export type { BaseOptionType, CascaderProps, DefaultOptionType, FieldNames } from './interface'; 6 | 7 | export default Cascader; 8 | -------------------------------------------------------------------------------- /src/components/checkbox/CheckedIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import type { SVGProps } from 'react'; 3 | 4 | const CheckedIcon = (props: SVGProps) => ( 5 | 13 | 14 | 15 | ); 16 | export default CheckedIcon; 17 | -------------------------------------------------------------------------------- /src/components/checkbox/demo/_semantic_basic.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Checkbox } from 'metis-ui'; 3 | import SemanticPreview from '../../../../.dumi/components/SemanticPreview'; 4 | 5 | const App: React.FC = () => ( 6 | 13 | Checkbox 14 | 15 | ); 16 | 17 | export default App; 18 | -------------------------------------------------------------------------------- /src/components/checkbox/demo/basic.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Checkbox } from 'metis-ui'; 3 | 4 | const onChange = (checked: boolean) => { 5 | console.log(`checked = ${checked}`); 6 | }; 7 | 8 | const App: React.FC = () => Checkbox; 9 | 10 | export default App; 11 | -------------------------------------------------------------------------------- /src/components/checkbox/demo/disabled.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Checkbox } from 'metis-ui'; 3 | 4 | const App: React.FC = () => ( 5 | <> 6 | 7 | Checkbox 8 | 9 |
10 | 11 | Checkbox 12 | 13 |
14 | 15 | Checkbox 16 | 17 | 18 | ); 19 | 20 | export default App; 21 | -------------------------------------------------------------------------------- /src/components/collapse/index.tsx: -------------------------------------------------------------------------------- 1 | import Collapse from './Collapse'; 2 | 3 | export type { CollapsePanelProps, CollapseProps } from './interface'; 4 | 5 | export default Collapse; 6 | -------------------------------------------------------------------------------- /src/components/color-picker/demo/allow-clear.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ColorPicker } from 'metis-ui'; 3 | 4 | export default () => { 5 | const [color, setColor] = React.useState('#4f46e5'); 6 | 7 | return ( 8 | { 12 | setColor(c.toHexString()); 13 | }} 14 | /> 15 | ); 16 | }; 17 | -------------------------------------------------------------------------------- /src/components/color-picker/demo/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ColorPicker } from 'metis-ui'; 3 | 4 | const Demo = () => ; 5 | 6 | export default Demo; 7 | -------------------------------------------------------------------------------- /src/components/color-picker/demo/controlled.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { ColorPicker } from 'metis-ui'; 3 | import type { ColorPickerProps, GetProp } from 'metis-ui'; 4 | 5 | type Color = GetProp; 6 | 7 | const Demo: React.FC = () => { 8 | const [color, setColor] = useState('#4f46e5'); 9 | return ; 10 | }; 11 | 12 | export default Demo; 13 | -------------------------------------------------------------------------------- /src/components/color-picker/demo/disabled-alpha.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ColorPicker } from 'metis-ui'; 3 | 4 | const Demo = () => ; 5 | 6 | export default Demo; 7 | -------------------------------------------------------------------------------- /src/components/color-picker/demo/disabled.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ColorPicker } from 'metis-ui'; 3 | 4 | export default () => ; 5 | -------------------------------------------------------------------------------- /src/components/color-picker/demo/presets.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { upperFirst } from 'lodash'; 3 | import { ColorPicker, useTheme } from 'metis-ui'; 4 | import twColors from 'tailwindcss/colors'; 5 | 6 | const colors = ['amber', 'lime', 'teal', 'sky', 'indigo', 'rose']; 7 | 8 | const Demo: React.FC = () => { 9 | const theme = useTheme(); 10 | 11 | const presets = colors.map((color) => ({ 12 | label: upperFirst(color), 13 | colors: Object.values(twColors[color as keyof typeof twColors]), 14 | })); 15 | 16 | return ; 17 | }; 18 | 19 | export default Demo; 20 | -------------------------------------------------------------------------------- /src/components/color-picker/demo/trigger-event.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ColorPicker } from 'metis-ui'; 3 | 4 | const Demo = () => ; 5 | 6 | export default Demo; 7 | -------------------------------------------------------------------------------- /src/components/color-picker/index.tsx: -------------------------------------------------------------------------------- 1 | import ColorPicker from './ColorPicker'; 2 | 3 | export type { ColorPickerProps } from './interface'; 4 | export type { AggregationColor as Color } from './color'; 5 | 6 | export default ColorPicker; 7 | -------------------------------------------------------------------------------- /src/components/config-provider/DisabledContext.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export type DisabledType = true | false | undefined; 4 | 5 | const DisabledContext = React.createContext(false); 6 | 7 | export interface DisabledContextProps { 8 | disabled?: DisabledType; 9 | children?: React.ReactNode; 10 | } 11 | 12 | export const DisabledContextProvider: React.FC = ({ children, disabled }) => { 13 | const originDisabled = React.useContext(DisabledContext); 14 | return ( 15 | 16 | {children} 17 | 18 | ); 19 | }; 20 | 21 | export default DisabledContext; 22 | -------------------------------------------------------------------------------- /src/components/config-provider/SizeContext.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export type SizeType = 'mini' | 'small' | 'middle' | 'large' | undefined; 4 | 5 | const SizeContext = React.createContext(undefined); 6 | 7 | export interface SizeContextProps { 8 | size?: SizeType; 9 | children?: React.ReactNode; 10 | } 11 | 12 | export const SizeContextProvider: React.FC = ({ children, size }) => { 13 | const originSize = React.useContext(SizeContext); 14 | return {children}; 15 | }; 16 | 17 | export default SizeContext; 18 | -------------------------------------------------------------------------------- /src/components/config-provider/demo/style-override.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { PlusOutline } from '@metisjs/icons'; 3 | import { Button, ConfigProvider, Input, Space } from 'metis-ui'; 4 | 5 | const App: React.FC = () => { 6 | return ( 7 | 11 | 12 | 13 | 16 | 17 | 18 | ); 19 | }; 20 | 21 | export default App; 22 | -------------------------------------------------------------------------------- /src/components/config-provider/hooks/useConfig.ts: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react'; 2 | import DisabledContext from '../DisabledContext'; 3 | import SizeContext from '../SizeContext'; 4 | 5 | function useConfig() { 6 | const componentDisabled = useContext(DisabledContext); 7 | const componentSize = useContext(SizeContext); 8 | 9 | return { 10 | componentDisabled, 11 | componentSize, 12 | }; 13 | } 14 | 15 | export default useConfig; 16 | -------------------------------------------------------------------------------- /src/components/date-picker/PickerInput/Selector/SeparatorIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const SeparatorIcon = () => ( 4 | 15 | ); 16 | 17 | export default SeparatorIcon; 18 | -------------------------------------------------------------------------------- /src/components/date-picker/PickerInput/Selector/util.ts: -------------------------------------------------------------------------------- 1 | import type { FormatKey } from './MaskFormat'; 2 | 3 | export function getMaskRange(key: string): [startVal: number, endVal: number, defaultVal?: number] { 4 | const PresetRange: Record = { 5 | YYYY: [0, 9999, new Date().getFullYear()], 6 | MM: [1, 12], 7 | DD: [1, 31], 8 | HH: [0, 23], 9 | mm: [0, 59], 10 | ss: [0, 59], 11 | SSS: [0, 999], 12 | }; 13 | 14 | return PresetRange[key]; 15 | } 16 | -------------------------------------------------------------------------------- /src/components/date-picker/PickerInput/context.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import type { Components, GenerateConfig, Locale } from '../interface'; 3 | 4 | export interface PickerContextProps { 5 | prefixCls: string; 6 | locale: Locale; 7 | generateConfig: GenerateConfig; 8 | /** Customize button component */ 9 | input?: Components['input']; 10 | } 11 | 12 | const PickerContext = React.createContext(null!); 13 | 14 | export default PickerContext; 15 | -------------------------------------------------------------------------------- /src/components/date-picker/PickerInput/hooks/useInputReadOnly.ts: -------------------------------------------------------------------------------- 1 | import type { FormatType } from '../../interface'; 2 | 3 | export default function useInputReadOnly( 4 | formatList: FormatType[], 5 | inputReadOnly?: boolean, 6 | multiple?: boolean, 7 | ) { 8 | if (typeof formatList[0] === 'function' || multiple) { 9 | return true; 10 | } 11 | 12 | return inputReadOnly; 13 | } 14 | -------------------------------------------------------------------------------- /src/components/date-picker/PickerInput/hooks/useShowNow.ts: -------------------------------------------------------------------------------- 1 | import type { InternalMode, PanelMode } from '../../interface'; 2 | 3 | export default function useShowNow( 4 | picker: InternalMode, 5 | mode: PanelMode, 6 | showNow?: boolean, 7 | rangePicker?: boolean, 8 | ) { 9 | if (mode !== 'date' && mode !== 'time') { 10 | return false; 11 | } 12 | 13 | if (showNow !== undefined) { 14 | return showNow; 15 | } 16 | 17 | return !rangePicker && (picker === 'date' || picker === 'time'); 18 | } 19 | -------------------------------------------------------------------------------- /src/components/date-picker/PickerTrigger/util.ts: -------------------------------------------------------------------------------- 1 | import type { SharedPickerProps } from '../interface'; 2 | import { pickProps, transPlacement2PopupAlign } from '../utils/miscUtil'; 3 | 4 | export function pickTriggerProps( 5 | props: Omit, 6 | ) { 7 | return { 8 | popupAlign: transPlacement2PopupAlign(props.placement), 9 | ...pickProps(props, ['placement', 'builtinPlacements', 'popupAlign', 'getPopupContainer']), 10 | }; 11 | } 12 | -------------------------------------------------------------------------------- /src/components/date-picker/demo/allow-empty.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { DatePicker } from 'metis-ui'; 3 | 4 | const App: React.FC = () => ( 5 | { 9 | console.log(dateString, date); 10 | }} 11 | /> 12 | ); 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /src/components/date-picker/demo/basic.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import type { DatePickerProps } from 'metis-ui'; 3 | import { DatePicker, Space } from 'metis-ui'; 4 | 5 | const onChange: DatePickerProps['onChange'] = (dateString, date) => { 6 | console.log(dateString, date); 7 | }; 8 | 9 | const App: React.FC = () => ( 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | 19 | export default App; 20 | -------------------------------------------------------------------------------- /src/components/date-picker/demo/date-range.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { DatePicker } from 'metis-ui'; 3 | 4 | const App: React.FC = () => ( 5 | 6 | ); 7 | 8 | export default App; 9 | -------------------------------------------------------------------------------- /src/components/date-picker/demo/disabled.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { DatePicker, Space } from 'metis-ui'; 3 | 4 | const { RangePicker } = DatePicker; 5 | 6 | const App: React.FC = () => ( 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | 16 | export default App; 17 | -------------------------------------------------------------------------------- /src/components/date-picker/demo/extra-footer.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { DatePicker, Space } from 'metis-ui'; 3 | 4 | const { RangePicker } = DatePicker; 5 | 6 | const App: React.FC = () => ( 7 | 8 | 'extra footer'} /> 9 | 'extra footer'} showTime /> 10 | 'extra footer'} /> 11 | 'extra footer'} showTime /> 12 | 'extra footer'} picker="month" /> 13 | 14 | ); 15 | 16 | export default App; 17 | -------------------------------------------------------------------------------- /src/components/date-picker/demo/multiple-debug.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import dayjs from 'dayjs'; 3 | import { DatePicker, Space } from 'metis-ui'; 4 | 5 | const defaultValue = new Array(10).fill(0).map((_, index) => dayjs('2000-01-01').add(index, 'day')); 6 | 7 | const App: React.FC = () => ( 8 | 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | 16 | export default App; 17 | -------------------------------------------------------------------------------- /src/components/date-picker/demo/need-confirm.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import type { DatePickerProps } from 'metis-ui'; 3 | import { DatePicker } from 'metis-ui'; 4 | 5 | const onChange: DatePickerProps['onChange'] = (dateString, date) => { 6 | console.log(dateString, date); 7 | }; 8 | 9 | const App: React.FC = () => ; 10 | 11 | export default App; 12 | -------------------------------------------------------------------------------- /src/components/date-picker/demo/status.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { DatePicker, Space } from 'metis-ui'; 3 | 4 | const App: React.FC = () => ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | ); 12 | 13 | export default App; 14 | -------------------------------------------------------------------------------- /src/components/date-picker/locale/common.ts: -------------------------------------------------------------------------------- 1 | import type { Locale } from '../interface'; 2 | 3 | export const commonLocale: Partial = { 4 | yearFormat: 'YYYY', 5 | cellMeridiemFormat: 'A', 6 | monthBeforeYear: true, 7 | }; 8 | -------------------------------------------------------------------------------- /src/components/descriptions/constant.ts: -------------------------------------------------------------------------------- 1 | import type { Breakpoint } from '@util/responsiveObserver'; 2 | 3 | export const DEFAULT_COLUMN_MAP: Record = { 4 | '2xl': 3, 5 | xl: 3, 6 | lg: 3, 7 | md: 3, 8 | sm: 2, 9 | xs: 1, 10 | }; 11 | -------------------------------------------------------------------------------- /src/components/descriptions/context.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import type { ItemClassNameType } from '.'; 3 | 4 | export interface DescriptionsContextProps { 5 | size?: 'middle' | 'small' | 'default'; 6 | itemClassName?: ItemClassNameType; 7 | } 8 | 9 | const DescriptionsContext = React.createContext({}); 10 | 11 | export { DescriptionsContext }; 12 | -------------------------------------------------------------------------------- /src/components/descriptions/hooks/useItems.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import type { ScreenMap } from '@util/responsiveObserver'; 3 | import { matchScreen } from '@util/responsiveObserver'; 4 | import type { DescriptionsItemType, InternalDescriptionsItemType } from '..'; 5 | 6 | export default function useItems(screens: ScreenMap, items: DescriptionsItemType[] = []) { 7 | const responsiveItems = React.useMemo( 8 | () => 9 | items.map(({ span, ...restItem }) => ({ 10 | ...restItem, 11 | span: typeof span === 'number' ? span : matchScreen(screens, span), 12 | })), 13 | [items, screens], 14 | ); 15 | 16 | return responsiveItems; 17 | } 18 | -------------------------------------------------------------------------------- /src/components/divider/demo/_semantic.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Divider } from 'metis-ui'; 3 | import SemanticPreview from '../../../../.dumi/components/SemanticPreview'; 4 | 5 | const App: React.FC = () => ( 6 | 7 | Text 8 | 9 | ); 10 | 11 | export default App; 12 | -------------------------------------------------------------------------------- /src/components/divider/demo/vertical.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Divider } from 'metis-ui'; 3 | 4 | const App: React.FC = () => ( 5 | <> 6 | Text 7 | 8 | Link 9 | 10 | Link 11 | 12 | ); 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /src/components/drawer/context.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | const noop = () => {}; 4 | 5 | export interface DrawerContextProps { 6 | pushDistance?: number | string; 7 | push: VoidFunction; 8 | pull: VoidFunction; 9 | } 10 | 11 | const DrawerContext = React.createContext({ pull: noop, push: noop }); 12 | 13 | export default DrawerContext; 14 | -------------------------------------------------------------------------------- /src/components/drawer/index.ts: -------------------------------------------------------------------------------- 1 | import Drawer from './Drawer'; 2 | import type { DrawerProps } from './interface'; 3 | 4 | export type { DrawerProps }; 5 | 6 | export default Drawer; 7 | -------------------------------------------------------------------------------- /src/components/dropdown/demo/icon-debug.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ChevronDownOutline } from '@metisjs/icons'; 3 | import { Dropdown, Space } from 'metis-ui'; 4 | 5 | const App: React.FC = () => ( 6 | 7 | } menu={{ items: [] }}> 8 | Submit 9 | 10 | 11 | ); 12 | 13 | export default App; 14 | -------------------------------------------------------------------------------- /src/components/dropdown/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import InternalDropdown from './Dropdown'; 4 | import DropdownButton from './DropdownButton'; 5 | 6 | export type { DropdownProps as DropDownProps, DropdownProps } from './Dropdown'; 7 | export type { DropdownButtonProps, DropdownButtonType } from './DropdownButton'; 8 | 9 | const Dropdown = InternalDropdown as typeof InternalDropdown & { 10 | Button: typeof DropdownButton; 11 | }; 12 | Dropdown.Button = DropdownButton; 13 | 14 | export default Dropdown; 15 | -------------------------------------------------------------------------------- /src/components/empty/demo/_semantic.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button, Empty } from 'metis-ui'; 3 | import SemanticPreview from '../../../../.dumi/components/SemanticPreview'; 4 | 5 | const App: React.FC = () => ( 6 | 9 | 10 | 11 | 12 | 13 | ); 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /src/components/empty/demo/basic.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Empty } from 'metis-ui'; 3 | 4 | const App: React.FC = () => ; 5 | 6 | export default App; 7 | -------------------------------------------------------------------------------- /src/components/empty/demo/customize.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button, Empty } from 'metis-ui'; 3 | 4 | const App: React.FC = () => ( 5 | 10 | Customize Description 11 | 12 | } 13 | > 14 | 15 | 16 | ); 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /src/components/empty/demo/description.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Empty } from 'metis-ui'; 3 | 4 | const App: React.FC = () => ; 5 | 6 | export default App; 7 | -------------------------------------------------------------------------------- /src/components/float-button/context.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import type { FloatButtonShape } from './interface'; 3 | 4 | const FloatButtonGroupContext = React.createContext(undefined); 5 | 6 | export const { Provider: FloatButtonGroupProvider } = FloatButtonGroupContext; 7 | 8 | export default FloatButtonGroupContext; 9 | -------------------------------------------------------------------------------- /src/components/float-button/demo/back-top.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { FloatButton } from 'metis-ui'; 3 | 4 | const App: React.FC = () => ( 5 |
6 |
Scroll to bottom
7 |
Scroll to bottom
8 |
Scroll to bottom
9 |
Scroll to bottom
10 |
Scroll to bottom
11 |
Scroll to bottom
12 |
Scroll to bottom
13 | 14 |
15 | ); 16 | 17 | export default App; 18 | -------------------------------------------------------------------------------- /src/components/float-button/demo/basic.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { FloatButton } from 'metis-ui'; 3 | 4 | const App: React.FC = () => console.log('onClick')} />; 5 | 6 | export default App; 7 | -------------------------------------------------------------------------------- /src/components/float-button/demo/description.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { QuestionMarkCircleOutline } from '@metisjs/icons'; 3 | import { FloatButton } from 'metis-ui'; 4 | 5 | const App: React.FC = () => ( 6 | <> 7 | } 9 | description="HELP INFO" 10 | shape="square" 11 | className="end-6" 12 | /> 13 | 14 | } 16 | description="HELP" 17 | shape="square" 18 | className="end-44" 19 | /> 20 | 21 | ); 22 | 23 | export default App; 24 | -------------------------------------------------------------------------------- /src/components/float-button/demo/shape.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ChatBubbleBottomCenterTextOutline } from '@metisjs/icons'; 3 | import { FloatButton } from 'metis-ui'; 4 | 5 | const App: React.FC = () => ( 6 | <> 7 | } 12 | /> 13 | } 18 | /> 19 | 20 | ); 21 | 22 | export default App; 23 | -------------------------------------------------------------------------------- /src/components/float-button/demo/tooltip.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { FloatButton } from 'metis-ui'; 3 | 4 | const App: React.FC = () => Documents} />; 5 | 6 | export default App; 7 | -------------------------------------------------------------------------------- /src/components/float-button/demo/type.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { QuestionMarkCircleOutline } from '@metisjs/icons'; 3 | import { FloatButton } from 'metis-ui'; 4 | 5 | const App: React.FC = () => ( 6 | <> 7 | } type="primary" className="end-6" /> 8 | } type="default" className="end-24" /> 9 | 10 | ); 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /src/components/float-button/index.tsx: -------------------------------------------------------------------------------- 1 | import BackTop from './BackTop'; 2 | import FloatButton from './FloatButton'; 3 | import FloatButtonGroup from './FloatButtonGroup'; 4 | 5 | FloatButton.BackTop = BackTop; 6 | FloatButton.Group = FloatButtonGroup; 7 | 8 | export default FloatButton; 9 | -------------------------------------------------------------------------------- /src/components/float-button/util.ts: -------------------------------------------------------------------------------- 1 | const getOffset = (radius: number): number => { 2 | if (radius === 0) { 3 | return 0; 4 | } 5 | // 如果要考虑通用性，这里应该用三角函数 Math.sin(45) 6 | // 但是这个场景比较特殊，始终是等腰直角三角形，所以直接用 Math.sqrt() 开方即可 7 | return radius - Math.sqrt(radius ** 2 / 2); 8 | }; 9 | 10 | export default getOffset; 11 | -------------------------------------------------------------------------------- /src/components/form/hooks/useChildren.ts: -------------------------------------------------------------------------------- 1 | import toArray from '@rc-component/util/es/Children/toArray'; 2 | import type { FormItemProps } from '../FormItem'; 3 | 4 | export default function useChildren( 5 | children?: FormItemProps['children'], 6 | ): FormItemProps['children'] { 7 | if (typeof children === 'function') { 8 | return children; 9 | } 10 | 11 | const childList = toArray(children); 12 | return childList.length <= 1 ? childList[0] : childList; 13 | } 14 | -------------------------------------------------------------------------------- /src/components/form/hooks/useDebounce.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export default function useDebounce(value: T[]): T[] { 4 | const [cacheValue, setCacheValue] = React.useState(value); 5 | React.useEffect(() => { 6 | const timeout = setTimeout( 7 | () => { 8 | setCacheValue(value); 9 | }, 10 | value.length ? 0 : 10, 11 | ); 12 | 13 | return () => { 14 | clearTimeout(timeout); 15 | }; 16 | }, [value]); 17 | 18 | return cacheValue; 19 | } 20 | -------------------------------------------------------------------------------- /src/components/form/hooks/useFormInstance.ts: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react'; 2 | import { FormContext } from '../context'; 3 | import type { FormInstance } from './useForm'; 4 | 5 | export default function useFormInstance(): FormInstance { 6 | const { form } = useContext(FormContext); 7 | 8 | return form!; 9 | } 10 | -------------------------------------------------------------------------------- /src/components/form/validateMessagesContext.tsx: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react'; 2 | import type { ValidateMessages } from 'rc-field-form/lib/interface'; 3 | 4 | // We export single file here since 5 | // ConfigProvider use this which will make loop deps 6 | // to import whole `rc-field-form` 7 | export default createContext(undefined); 8 | -------------------------------------------------------------------------------- /src/components/icon/index.en-US.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Icon 3 | description: Semantic vector graphics. 4 | group: General 5 | --- 6 | 7 | > Extended from [heroicons](https://heroicons.com/) 8 | 9 | Before use icons, you need to install [`@metisjs/icons`](https://github.com/metisjs/metis-icons) package: 10 | 11 | ```bash 12 | npm install --save @metisjs/icons 13 | ``` 14 | 15 | ## List of icons 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/components/icon/index.zh-CN.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Icon 3 | subtitle: 图标 4 | description: 语义化的矢量图形。 5 | group: 通用 6 | --- 7 | 8 | > 由 [heroicons](https://heroicons.com/) 扩展而来 9 | 10 | 使用图标组件，你需要安装 [`@metisjs/icons`](https://github.com/metisjs/metis-icons) 图标组件包： 11 | 12 | 13 | 14 | ## 图标列表 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/components/image/constant.ts: -------------------------------------------------------------------------------- 1 | import type { ImageElementProps } from './interface'; 2 | 3 | export const COMMON_PROPS: (keyof Omit)[] = [ 4 | 'crossOrigin', 5 | 'decoding', 6 | 'draggable', 7 | 'loading', 8 | 'referrerPolicy', 9 | 'sizes', 10 | 'srcSet', 11 | 'useMap', 12 | 'alt', 13 | ]; 14 | 15 | /** Scale the ratio base */ 16 | export const BASE_SCALE_RATIO = 1; 17 | /** The maximum zoom ratio when the mouse zooms in, adjustable */ 18 | export const WHEEL_MAX_SCALE_RATIO = 1; 19 | -------------------------------------------------------------------------------- /src/components/image/context.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import type { ImageProps, OnGroupPreview, RegisterImage } from './interface'; 3 | 4 | export interface PreviewGroupContextProps { 5 | register: RegisterImage; 6 | onPreview: OnGroupPreview; 7 | imageClassName: ImageProps['className']; 8 | } 9 | 10 | export const PreviewGroupContext = React.createContext(null); 11 | -------------------------------------------------------------------------------- /src/components/image/demo/basic.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Image } from 'metis-ui'; 3 | 4 | const App: React.FC = () => ( 5 | 9 | ); 10 | 11 | export default App; 12 | -------------------------------------------------------------------------------- /src/components/image/demo/image-render.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Image } from 'metis-ui'; 3 | 4 | const App: React.FC = () => ( 5 | ( 10 |