@kdcloudjs/kdesign 1.0.2 → 1.1.0

package/es/input/style/mixin.less

@@ -1,59 +1,66 @@
+@import './token.less';
+
 // 输入框默认样式Mixins
 .input(@prefix) {
-	@disabled-prefix-cls: ~'@{prefix}-disabled';
-	width: 100%;
-	min-width: 0;
-	border: @input-border-width solid @strong-border-color;
-	border-radius: @radius-size;
-	color: @input-font-color;
-	box-sizing: border-box;
-	background-color: @input-background-color;
-	display: inline-block;
-	font-variant: tabular-nums;
-	list-style: none;
-	background-image: none;
-	font-feature-settings: "tnum";
+  @disabled-prefix-cls: ~'@{prefix}-disabled';
+  width: 100%;
+  min-width: 0;
+  border: @input-border-width-inner solid @input-border-color-disabled-inner;
+  border-radius: @input-border-radius-inner;
+  color: @input-font-color-inner;
+  box-sizing: border-box;
+  background-color: @input-background-color-inner;
+  display: inline-block;
+  font-variant: tabular-nums;
+  list-style: none;
+  background-image: none;
+  font-feature-settings: "tnum";
 
-	&::-webkit-input-placeholder {
-		color: @input-placeholder-color !important;
-	}
-	&::-moz-input-placeholder {
-		color: @input-placeholder-color !important;
-	}
-	&::-ms-input-placeholder {
-		color: @input-placeholder-color !important;
-	}
-	&:focus{
-		box-shadow: none;
-		outline: none;
-	}
-	&:not(.@{disabled-prefix-cls}):hover{
-		border-color: @theme-color;
-	}
-	&:not(.@{disabled-prefix-cls}):focus{
-		color: @input-focus-color;
-		border-color: @theme-color;
-	}
+  &::-webkit-input-placeholder {
+    color: @input-placeholder-color-inner !important;
+  }
+  &::-moz-input-placeholder {
+    color: @input-placeholder-color-inner !important;
+  }
+  &::-ms-input-placeholder {
+    color: @input-placeholder-color-inner !important;
+  }
+  &:focus {
+    box-shadow: none;
+    outline: none;
+  }
+  &:not(.@{disabled-prefix-cls}):hover {
+    border-color: @input-border-color-focused;
+  }
+  &:not(.@{disabled-prefix-cls}):focus {
+    color: @input-focus-color;
+    border-color: @input-border-color-focused;
+  }
 }
+
 .input-size(@height, @fonSize, @padding-vertical, @padding-horizontal) {
-	height: @height;
-	line-height: @height - (@padding-vertical * 2) - (@input-border-width * 2);
-	font-size: @fonSize;
-	padding: @padding-vertical @padding-horizontal;
+  height: @height;
+  line-height: calc(@height - (@padding-vertical * 2) - (@input-border-width * 2));
+  font-size: @fonSize;
+  padding: @padding-vertical @padding-horizontal;
 }
+
 .input-clear-icon() {
-	cursor: pointer;
-	color: @theme-color;
-	i {
-		vertical-align: middle;
-		font-size: 12px !important;
-	}
+  cursor: pointer;
+  color: @input-border-color-focused;
+  i {
+    vertical-align: middle;
+    font-size: 12px !important;
+  }
 }
+
+
 .border-less() {
-	border: none !important;
+  border: none !important;
 }
+
 .underline() {
-	border: none;
-	border-bottom: 1px solid @input-color;
-	border-radius: 0 !important;
+  border: none;
+  border-bottom: 1px solid @input-color-border;
+  border-radius: 0 !important;
 }

package/es/input/style/token.less

@@ -0,0 +1,46 @@
+@import "../../style/themes/token.less";
+
+@input-prefix: '--@{kd-prefix}-c-input';
+
+
+// color
+@input-font-color-inner: var(~'@{input-prefix}-color', @color-text-secondary);
+@input-placeholder-color-inner: var(~'@{input-prefix}-color-placeholder', @color-text-third);
+@input-color-border: var(~'@{input-prefix}-color-border', #999);
+@input-background-color-inner: var(~'@{input-prefix}-color-background', @color-white);
+@input-background-color-disabled-inner: var(~'@{input-prefix}-color-background-disabled', @color-background-contain-disabled);
+@input-border-color-focused: var(~'@{input-prefix}-color-border-focused', @color-theme);
+@input-border-color-disabled-inner: var(~'@{input-prefix}-color-border-disabled', @color-border-strong);
+@input-color-disabled-inner: var(~'@{input-prefix}-color-disabled', @color-disabled);
+
+// sizing
+@input-small-height-inner: var(~'@{input-prefix}-small-sizing-height', 20px);
+@input-middle-height-inner: var(~'@{input-prefix}-middle-sizing-height', 30px);
+@input-large-height-inner: var(~'@{input-prefix}-large-sizing-height', 36px);
+@input-border-width-inner: var(~'@{input-prefix}-sizing-border', 1px);
+
+// spacing
+@input-small-padding-vertical-inner: var(~'@{input-prefix}-small-spacing-padding-vertical', 3px);
+@input-small-padding-horizontal-inner: var(~'@{input-prefix}-small-spacing-padding-horizontal', 9px);
+@input-middle-padding-vertical-inner: var(~'@{input-prefix}-middle-spacing-padding-vertical', 5px);
+@input-middle-padding-horizontal-inner: var(~'@{input-prefix}-middle-spacing-padding-horizontal', 9px);
+@input-large-padding-vertical-inner: var(~'@{input-prefix}-large-spacing-padding-vertical', 8px);
+@input-large-padding-horizontal-inner: var(~'@{input-prefix}-large-spacing-padding-horizontal', 9px);
+
+// motion
+@transition-duration-inner: var(~'@{input-prefix}-motion-duration', @duration-promptly);
+
+// font
+@input-small-font-size-inner: var(~'@{input-prefix}-small-font-size', @font-size-small);
+@input-middle-font-size-inner: var(~'@{input-prefix}-middle-font-size', @font-size-middle);
+@input-large-font-size-inner: var(~'@{input-prefix}-large-font-size', @font-size-large);
+
+// radius
+@input-border-radius-inner: var(~'@{input-prefix}-radius-border', @radius-border);
+
+
+
+
+
+
+

package/es/input-number/style/css.js

@@ -1 +1,2 @@
+import '../../style/index.css';
 import './index.css';

package/es/input-number/style/index.css

@@ -92,6 +92,15 @@
 /* -----------  Avatar  ——————---- end */
 /* -----------  AdvancedSelector  ——————---- start */
 /* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
 .kd-inputNumber-baseStep {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -108,24 +117,24 @@
   cursor: pointer;
 }
 .kd-inputNumber-baseStep-small {
-  width: 20px;
+  width: var(--kd-c-input-number-sizing-height-small, 20px);
 }
 .kd-inputNumber-baseStep-middle {
-  width: 30px;
+  width: var(--kd-c-input-number-sizing-height-middle, 30px);
 }
 .kd-inputNumber-baseStep-large {
-  width: 36px;
+  width: var(--kd-c-input-number-sizing-height-large, 36px);
 }
 .kd-inputNumber-baseStep .kd-inputNumber-icon {
-  color: #666;
-  -webkit-transition: color 0.3s;
-  transition: color 0.3s;
+  color: var(--kd-c-input-number-color-text-baseStep, var(--kd-g-color-text-secondary, #666));
+  -webkit-transition: color var(--kd-g-duration, 0.3s);
+  transition: color var(--kd-g-duration, 0.3s);
 }
 .kd-inputNumber-baseStep:hover .kd-inputNumber-icon {
-  color: #87adff;
+  color: var(--kd-c-input-number-color-theme-5, var(--kd-g-color-theme-5, #87adff));
 }
 .kd-inputNumber-baseStep-decrease {
-  border-right: 1px solid #d9d9d9;
+  border-right: 1px solid var(--kd-c-input-number-color-border-strong, var(--kd-g-color-border-strong, #d9d9d9));
 }
 .kd-inputNumber-baseStep-decrease.kd-inputNumber-baseStep-small,
 .kd-inputNumber-baseStep-decrease.kd-inputNumber-embedStep-small {
@@ -140,7 +149,7 @@
   margin-left: -9px;
 }
 .kd-inputNumber-baseStep-increase {
-  border-left: 1px solid #d9d9d9;
+  border-left: 1px solid var(--kd-c-input-number-color-border-strong, var(--kd-g-color-border-strong, #d9d9d9));
 }
 .kd-inputNumber-baseStep-increase.kd-inputNumber-baseStep-small,
 .kd-inputNumber-baseStep-increase.kd-inputNumber-embedStep-small {
@@ -167,9 +176,9 @@
           justify-content: center;
   height: 100%;
   border-radius: 0 1px 1px 0;
-  background-color: #f6f7f9;
+  background-color: var(--kd-c-input-number-color-text, #f6f7f9);
   overflow: hidden;
-  border-left: 1px solid #d9d9d9;
+  border-left: 1px solid var(--kd-c-input-number-color-border-strong, var(--kd-g-color-border-strong, #d9d9d9));
   border: none;
 }
 .kd-inputNumber-embedStep.kd-inputNumber-baseStep-small,
@@ -195,17 +204,17 @@
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
-  border-left: 1px solid #d9d9d9;
-  border-bottom: 1px solid #d9d9d9;
+  border-left: 1px solid var(--kd-c-input-number-color-border-strong, var(--kd-g-color-border-strong, #d9d9d9));
+  border-bottom: 1px solid var(--kd-c-input-number-color-border-strong, var(--kd-g-color-border-strong, #d9d9d9));
   cursor: pointer;
   font-size: 12px;
 }
 .kd-inputNumber-embedStep span .kd-inputNumber-icon {
-  -webkit-transition: color 0.3s;
-  transition: color 0.3s;
+  -webkit-transition: color var(--kd-g-duration, 0.3s);
+  transition: color var(--kd-g-duration, 0.3s);
 }
 .kd-inputNumber-embedStep span:hover .kd-inputNumber-icon {
-  color: #87adff;
+  color: var(--kd-c-input-number-color-theme-5, var(--kd-g-color-theme-5, #87adff));
 }
 .kd-inputNumber-embedStep span:last-child {
   border-bottom: none;

package/es/input-number/style/index.d.ts

@@ -1 +1,2 @@
+import '../../style/index.less';
 import './index.less';

package/es/input-number/style/index.js

@@ -1 +1,2 @@
+import '../../style/index.less';
 import './index.less';

package/es/input-number/style/index.less

@@ -10,20 +10,20 @@
 		height: 100%;
 		cursor: pointer;
 		&-small {
-			.base-step-size(@input-small-height);
+			.base-step-size(@input-number-small-height);
 		}
 		&-middle {
-			.base-step-size(@input-middle-height);
+			.base-step-size(@input-number-middle-height);
 		}
 		&-large {
-			.base-step-size(@input-large-height);
+			.base-step-size(@input-number-large-height);
 		}
 		.@{inputNumber-prefix-cls}-icon {
-			color: @secondary-text-color;
-			transition: color @transition-duration;
+			color: @input-number-color-text-baseStep;
+			transition: color @duration-promptly;
 		}
 		&:hover .@{inputNumber-prefix-cls}-icon {
-			color: @theme-color-hover;
+			color:@input-number-color-theme-5;
 		}
 	}
 	&-baseStep-decrease {
@@ -38,7 +38,7 @@
 		justify-content: center;
 		height: 100%;
 		border-radius: 0 1px 1px 0;
-		background-color: @inputNumber-embedStepBtn-bg-color;
+		background-color: @input-number-color-text;
 		overflow: hidden;
 		.step-style(left, right);
 		border: none;
@@ -47,19 +47,19 @@
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			border-left: 1px solid @strong-border-color;
-			border-bottom: 1px solid @strong-border-color;
+			border-left: 1px solid @input-number-color-border-strong;
+			border-bottom: 1px solid @input-number-color-border-strong;
 			cursor: pointer;
 			font-size: 12px;
 			.@{inputNumber-prefix-cls}-icon {
-				transition: color @transition-duration;
+				transition: color @duration-promptly;
 			}
 			&:hover .@{inputNumber-prefix-cls}-icon {
-				color: @theme-color-hover;
+				color:@input-number-color-theme-5;
 			}
 			&:last-child {
 				border-bottom: none;
 			}
 		}
 	}
-}
+}

package/es/input-number/style/mixin.less

@@ -1,8 +1,10 @@
+@import './token.less';
+
 .base-step-size(@width) {
 	width: @width;
 }
 .step-style(@borderDirection, @marginDirection) {
-	border-@{borderDirection}: 1px solid @strong-border-color;
+	border-@{borderDirection}: 1px solid @input-number-color-border-strong;
 	&.@{inputNumber-prefix-cls}-baseStep-small, &.@{inputNumber-prefix-cls}-embedStep-small {
 		margin-@{marginDirection}: -@input-small-padding-horizontal;
 	}
@@ -12,4 +14,4 @@
 	&.@{inputNumber-prefix-cls}-baseStep-large, &.@{inputNumber-prefix-cls}-embedStep-large {
 		margin-@{marginDirection}: -@input-large-padding-horizontal;
 	}
-}
+}

package/es/input-number/style/token.less

@@ -0,0 +1,20 @@
+@import '../../style/themes/token.less';
+
+
+@input-number-prefix: '--@{kd-prefix}-c-input-number';
+
+// color
+@input-number-color-border-strong: var(~'@{input-number-prefix}-color-border-strong', @color-border-strong);
+@input-number-color-theme-5: var(~'@{input-number-prefix}-color-theme-5', @color-theme-5);
+@input-number-color-text: var(~'@{input-number-prefix}-color-text', #f6f7f9);
+@input-number-color-text-baseStep: var(~'@{input-number-prefix}-color-text-baseStep',@color-text-secondary);
+@input-number-color-text-baseStep-hover: var(~'@{input-number-prefix}-color-text-baseStep-hover',@color-text-secondary);
+
+// sizing
+@input-number-small-height: var(~'@{input-number-prefix}-sizing-height-small', 20px);
+@input-number-middle-height: var(~'@{input-number-prefix}-sizing-height-middle', 30px);
+@input-number-large-height: var(~'@{input-number-prefix}-sizing-height-large', 36px);
+
+
+
+

package/es/layout/style/index.css

@@ -92,6 +92,15 @@
 /* -----------  Avatar  ——————---- end */
 /* -----------  AdvancedSelector  ——————---- start */
 /* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
 /* 多行显示省略号 */
 /* 单行显示省略号 */
 /** 浮层箭头样式 **/
@@ -108,7 +117,7 @@
       -ms-flex-direction: column;
           flex-direction: column;
   min-height: 0;
-  background: #f2f2f2;
+  background: var(--kd-c-layout-body-color-background, var(--kd-g-color-background-2, #f2f2f2));
 }
 .kd-layout,
 .kd-layout * {
@@ -132,17 +141,17 @@
           flex: 0 0 auto;
 }
 .kd-layout-header {
-  height: 52px;
-  padding: 0 20px 0 35px;
-  color: #212121;
-  line-height: 52px;
-  background: #fff;
+  height: var(--kd-c-layout-header-sizing-height, 52px);
+  padding: var(--kd-c-layout-header-spacing-padding, 0 20px 0 35px);
+  color: var(--kd-c-layout-header-color-text, var(--kd-g-color-text-primary, #212121));
+  line-height: var(--kd-c-layout-header-sizing-height, 52px);
+  background: var(--kd-c-layout-header-color-background, var(--kd-g-color-background, #fff));
 }
 .kd-layout-footer {
-  padding: 24px 50px;
-  color: #212121;
-  font-size: 14px;
-  background: #f2f2f2;
+  padding: var(--kd-c-layout-footer-spacing-padding, 24px 50px);
+  color: var(--kd-g-color-text-primary, #212121);
+  font-size: var(--kd-g-font-size-middle, 14px);
+  background: var(--kd-c-layout-footer-color-background, var(--kd-g-color-background-2, #f2f2f2));
 }
 .kd-layout-content {
   -webkit-box-flex: 1;
@@ -153,7 +162,7 @@
 .kd-layout-sider {
   position: relative;
   min-width: 0;
-  background: #343848;
+  background: var(--kd-c-layout-sider-color-background, #343848);
   -webkit-transition: all 0.2s;
   transition: all 0.2s;
 }
@@ -163,7 +172,7 @@
   padding-top: 0.1px;
 }
 .kd-layout-sider-has-trigger {
-  padding-bottom: 50px;
+  padding-bottom: var(--kd-c-layout-trigger-sizing-height, 50px);
 }
 .kd-layout-sider-right {
   -webkit-box-ordinal-group: 2;
@@ -175,11 +184,11 @@
   bottom: 0;
   z-index: 1;
   padding: 0 16px;
-  color: #fff;
-  height: 50px;
-  line-height: 48px;
+  color: var(--kd-c-layout-trigger-color-text, var(--kd-g-color-white, #fff));
+  height: var(--kd-c-layout-trigger-sizing-height, 50px);
+  line-height: calc(var(--kd-c-layout-trigger-sizing-height, 50px) - 2px);
   font-size: 20px;
-  background: #343848;
+  background: var(--kd-c-layout-trigger-color-background, #343848);
   cursor: pointer;
   -webkit-transition: all 0.2s;
   transition: all 0.2s;
@@ -190,17 +199,17 @@
 }
 .kd-layout-sider-zero-width-trigger {
   position: absolute;
-  top: 52px;
-  right: -36px;
+  top: var(--kd-c-layout-header-sizing-height, 52px);
+  right: calc(-1 * var(--kd-c-layout-trigger-sizing-width, 36px));
   z-index: 1;
-  width: 36px;
-  height: 42px;
-  color: #fff;
-  font-size: 18px;
-  line-height: 42px;
+  width: var(--kd-c-layout-trigger-sizing-width, 36px);
+  height: var(--kd-c-layout-trigger-sizing-height, 42px);
+  color: var(--kd-c-layout-trigger-color-text, var(--kd-g-color-white, #fff));
+  font-size: calc(var(--kd-c-layout-trigger-sizing-width, 36px) / 2);
+  line-height: var(--kd-c-layout-trigger-sizing-height, 42px);
   text-align: center;
-  background: #343848;
-  border-radius: 0 2px 2px 0;
+  background: var(--kd-c-layout-sider-color-background, #343848);
+  border-radius: 0 var(--kd-g-radius-border, 2px) var(--kd-g-radius-border, 2px) 0;
   cursor: pointer;
   -webkit-transition: background 0.3s ease;
   transition: background 0.3s ease;
@@ -220,17 +229,17 @@
   background: rgba(255, 255, 255, 0.1);
 }
 .kd-layout-sider-zero-width-trigger-right {
-  left: -36px;
-  border-radius: 2px 0 0 2px;
+  left: calc(-1 * var(--kd-c-layout-trigger-sizing-width, 36px));
+  border-radius: var(--kd-g-radius-border, 2px) 0 0 var(--kd-g-radius-border, 2px);
 }
 .kd-layout-sider-light {
-  background: #fff;
+  background: var(--kd-c-layout-sider-color-background-light, var(--kd-g-color-background, #fff));
 }
 .kd-layout-sider-light .kd-layout-sider-trigger {
-  color: #212121;
-  background: #fff;
+  color: var(--kd-c-layout-trigger-color-text-light, var(--kd-g-color-text-primary, #212121));
+  background: var(--kd-c-layout-trigger-color-background-light, var(--kd-g-color-background, #fff));
 }
 .kd-layout-sider-light .kd-layout-sider-zero-width-trigger {
-  color: #212121;
-  background: #fff;
+  color: var(--kd-c-layout-trigger-color-text-light, var(--kd-g-color-text-primary, #212121));
+  background: var(--kd-c-layout-trigger-color-background-light, var(--kd-g-color-background, #fff));
 }

package/es/layout/style/index.less

@@ -1,5 +1,6 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
+@import './token.less';
 
 @layout-prefix-cls: ~'@{kd-prefix}-layout';
 
@@ -40,8 +41,8 @@
 
   &-footer {
     padding: @layout-footer-padding;
-    color: @primary-text-color;
-    font-size: @font-size;
+    color: @color-text-primary;
+    font-size: @font-size-middle;
     background: @layout-footer-background;
   }
 
@@ -77,7 +78,7 @@
       padding: 0 16px;
       color: @layout-trigger-color;
       height: @layout-trigger-height;
-      line-height: @layout-trigger-height - 2px;
+      line-height: calc(@layout-trigger-height - 2px);
       font-size: 20px;
       background: @layout-trigger-background;
       cursor: pointer;
@@ -93,16 +94,16 @@
       &-trigger {
         position: absolute;
         top: @layout-header-height;
-        right: -@layout-zero-trigger-width;
+        right: calc(-1 * @layout-zero-trigger-width);
         z-index: 1;
         width: @layout-zero-trigger-width;
         height: @layout-zero-trigger-height;
         color: @layout-trigger-color;
-        font-size: (@layout-zero-trigger-width / 2);
+        font-size: calc(@layout-zero-trigger-width / 2);
         line-height: @layout-zero-trigger-height;
         text-align: center;
         background: @layout-sider-background;
-        border-radius: 0 @radius-size @radius-size 0;
+        border-radius: 0 @radius-border @radius-border 0;
         cursor: pointer;
         transition: background 0.3s ease;
 
@@ -122,8 +123,8 @@
         }
 
         &-right {
-          left: -@layout-zero-trigger-width;
-          border-radius: @radius-size 0 0 @radius-size;
+          left: calc(-1 * @layout-zero-trigger-width);
+          border-radius: @radius-border 0 0 @radius-border;
         }
       }
     }

package/es/layout/style/token.less

@@ -0,0 +1,30 @@
+@import '../../style/themes/token.less';
+
+@layout-custom-prefix: ~'--@{kd-prefix}-c-layout';
+
+// color
+@layout-body-background: var(~'@{layout-custom-prefix}-body-color-background', @color-background-2);
+
+@layout-header-background: var(~'@{layout-custom-prefix}-header-color-background', @color-background);
+@layout-header-color: var(~'@{layout-custom-prefix}-header-color-text', @color-text-primary);
+
+@layout-footer-background: var(~'@{layout-custom-prefix}-footer-color-background', @color-background-2);
+
+@layout-sider-background: var(~'@{layout-custom-prefix}-sider-color-background', #343848);
+
+@layout-trigger-background: var(~'@{layout-custom-prefix}-trigger-color-background', #343848);
+@layout-trigger-color: var(~'@{layout-custom-prefix}-trigger-color-text', @color-white);
+
+@layout-sider-background-light: var(~'@{layout-custom-prefix}-sider-color-background-light', @color-background);
+@layout-trigger-background-light: var(~'@{layout-custom-prefix}-trigger-color-background-light', @color-background);
+@layout-trigger-color-light: var(~'@{layout-custom-prefix}-trigger-color-text-light', @color-text-primary);
+
+// spacing
+@layout-header-padding: var(~'@{layout-custom-prefix}-header-spacing-padding', 0 20px 0 35px);
+@layout-footer-padding: var(~'@{layout-custom-prefix}-footer-spacing-padding', 24px 50px);
+
+// sizing
+@layout-header-height: var(~'@{layout-custom-prefix}-header-sizing-height', 52px);
+@layout-trigger-height: var(~'@{layout-custom-prefix}-trigger-sizing-height', 50px);
+@layout-zero-trigger-width: var(~'@{layout-custom-prefix}-trigger-sizing-width', 36px);
+@layout-zero-trigger-height: var(~'@{layout-custom-prefix}-trigger-sizing-height', 42px);

package/es/link/index.d.ts

@@ -0,0 +1,3 @@
+import Link from './link';
+export * from './link';
+export default Link;

package/es/link/index.js

@@ -0,0 +1,3 @@
+import Link from './link';
+export * from './link';
+export default Link;

package/es/link/link.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export declare const LinkSizes: ["large", "middle", "small"];
+export declare type LinkSize = typeof LinkSizes[number];
+export interface ILinkProps {
+    size?: LinkSize;
+    style?: Record<string, unknown>;
+    className?: string;
+    target?: string;
+    href?: string;
+    underscore?: boolean;
+    disabled?: boolean;
+    children?: React.ReactNode;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+}
+declare const Link: React.ForwardRefExoticComponent<ILinkProps & React.RefAttributes<unknown>>;
+export default Link;