diff --git a/src/_base/clear/index.js b/src/_base/clear/index.js
deleted file mode 100644
index b9d4e2222..000000000
--- a/src/_base/clear/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-/* istanbul ignore file */
-export { default } from './src/Clear.vue'
diff --git a/src/_base/clear/index.ts b/src/_base/clear/index.ts
new file mode 100644
index 000000000..c464f7e2f
--- /dev/null
+++ b/src/_base/clear/index.ts
@@ -0,0 +1,2 @@
+/* istanbul ignore file */
+export { default } from './src/Clear'
diff --git a/src/_base/clear/src/Clear.tsx b/src/_base/clear/src/Clear.tsx
new file mode 100644
index 000000000..c99692094
--- /dev/null
+++ b/src/_base/clear/src/Clear.tsx
@@ -0,0 +1,59 @@
+import { h, defineComponent, PropType } from 'vue'
+import { useStyle } from '../../../_mixins'
+import { DismissCircleIcon } from '../../icons'
+import NBaseIcon from '../../icon'
+import NIconSwitchTransition from '../../icon-switch-transition'
+import style from './styles/index.cssr'
+
+export default defineComponent({
+ name: 'BaseClear',
+ components: {
+ NBaseIcon,
+ DismissCircleIcon,
+ NIconSwitchTransition
+ },
+ props: {
+ show: {
+ type: Boolean,
+ default: false
+ },
+ onClear: {
+ type: Function as PropType<((e: MouseEvent) => void) | undefined>,
+ default: undefined
+ }
+ },
+ setup () {
+ useStyle('BaseClear', style)
+ return {
+ handleMouseDown (e: MouseEvent) {
+ e.preventDefault()
+ }
+ }
+ },
+ render () {
+ return (
+
+
+ {{
+ default: () => {
+ return this.show ? (
+
+
+
+ ) : (
+
+
+
+ )
+ }
+ }}
+
+
+ )
+ }
+})
diff --git a/src/_base/clear/src/Clear.vue b/src/_base/clear/src/Clear.vue
deleted file mode 100644
index 5f5b87882..000000000
--- a/src/_base/clear/src/Clear.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-
-
-
-
-
diff --git a/src/_base/clear/src/styles/index.cssr.ts b/src/_base/clear/src/styles/index.cssr.ts
new file mode 100644
index 000000000..f40334fe2
--- /dev/null
+++ b/src/_base/clear/src/styles/index.cssr.ts
@@ -0,0 +1,58 @@
+import { cB, c, cE } from '../../../../_utils/cssr'
+import createIconSwitchTransition from '../../../../_styles/transitions/icon-switch'
+
+// vars:
+// --bezier
+// --color
+// --size
+// --color-hover
+// --color-pressed
+export default cB(
+ 'base-clear',
+ {
+ flexShrink: 0,
+ height: '1em',
+ width: '1em',
+ position: 'relative'
+ },
+ [
+ c('>', [
+ cE(
+ 'clear',
+ {
+ fontSize: 'var(--size)',
+ cursor: 'pointer',
+ color: 'var(--color)',
+ transition: 'color .3s var(--bezier)'
+ },
+ [
+ c('&:hover', {
+ color: 'var(--color-hover)!important'
+ }),
+ c('&:active', {
+ color: 'var(--color-pressed)!important'
+ })
+ ]
+ ),
+ cE('placeholder', {
+ display: 'flex'
+ }),
+ cE(
+ 'clear, placeholder',
+ {
+ position: 'absolute',
+ left: '50%',
+ top: '50%',
+ transform: 'translateX(-50%) translateY(-50%)'
+ },
+ [
+ createIconSwitchTransition({
+ originalTransform: 'translateX(-50%) translateY(-50%)',
+ left: '50%',
+ top: '50%'
+ })
+ ]
+ )
+ ])
+ ]
+)
diff --git a/src/_base/clear/styles/_common.js b/src/_base/clear/styles/_common.js
deleted file mode 100644
index 3a5aa2f41..000000000
--- a/src/_base/clear/styles/_common.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
- size: '18px'
-}
diff --git a/src/_base/clear/styles/dark.js b/src/_base/clear/styles/dark.js
deleted file mode 100644
index d39038caa..000000000
--- a/src/_base/clear/styles/dark.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import commonVariables from './_common'
-import { scaleColor } from 'seemly'
-import { commonDark } from '../../../_styles/new-common'
-
-export default {
- name: 'BaseClear',
- common: commonDark,
- self (vars) {
- const { textColor4Overlay } = vars
- return {
- ...commonVariables,
- color: textColor4Overlay,
- colorHover: scaleColor(textColor4Overlay, { alpha: 1.25 }),
- colorPressed: scaleColor(textColor4Overlay, { alpha: 0.75 })
- }
- }
-}
diff --git a/src/_base/clear/styles/index.js b/src/_base/clear/styles/index.js
deleted file mode 100644
index 0e86cf179..000000000
--- a/src/_base/clear/styles/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as baseClearLight } from './light'
-export { default as baseClearDark } from './dark'
diff --git a/src/_base/clear/styles/light.js b/src/_base/clear/styles/light.js
deleted file mode 100644
index b5a8ad008..000000000
--- a/src/_base/clear/styles/light.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import commonVariables from './_common'
-import { scaleColor } from 'seemly'
-import { commonLight } from '../../../_styles/new-common'
-
-export default {
- name: 'BaseClear',
- common: commonLight,
- self (vars) {
- const { textColor4Overlay } = vars
- return {
- ...commonVariables,
- color: textColor4Overlay,
- colorHover: scaleColor(textColor4Overlay, { alpha: 0.75 }),
- colorPressed: scaleColor(textColor4Overlay, { alpha: 1.25 })
- }
- }
-}