@kdcloudjs/kdesign 1.8.29 → 1.8.31

package/es/menu/style/index.less

@@ -124,13 +124,13 @@
 
 // dark
 .@{menu-dark-prefix-cls} {
-
   .@{submenu-prefix-cls}-sub {
     color: @menu-sub-color;
     background: @menu-sub-inline-color-background;
   }
 
-  .@{submenu-prefix-cls}-sub-second, .@{submenu-prefix-cls}-sub-third {
+  .@{submenu-prefix-cls}-sub-second,
+  .@{submenu-prefix-cls}-sub-third {
     background: @menu-sub-color-background;
   }
 
@@ -140,29 +140,32 @@
     }
 
     &-active {
-      .menu-dark-active()
+      .menu-dark-active();
     }
   }
 
-  .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
-    .menu-dark-active()
+  .@{menuitem-prefix-cls}-active,
+  .@{submenu-prefix-cls}-active {
+    .menu-dark-active();
   }
 
-  .@{menuitem-prefix-cls}-hover, .@{submenu-prefix-cls}-hover {
-    .menu-dark-hover()
+  .@{menuitem-prefix-cls}-hover,
+  .@{submenu-prefix-cls}-hover {
+    .menu-dark-hover();
   }
 }
 
 .@{menu-inline-prefix-cls}.@{menu-dark-prefix-cls} {
-  .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
+  .@{menuitem-prefix-cls}-active,
+  .@{submenu-prefix-cls}-active {
     .@{submenu-prefix-cls}-title {
-      .menu-dark-active-inline-title()
+      .menu-dark-active-inline-title();
     }
   }
 
   .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):not(.@{submenu-prefix-cls}-active) {
     > .@{submenu-prefix-cls}-title:hover {
-      .menu-dark-active-inline-title()
+      .menu-dark-active-inline-title();
     }
   }
 }
@@ -173,9 +176,10 @@
 }
 
 .@{menu-inline-prefix-cls}.@{menu-light-prefix-cls} {
-  .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
+  .@{menuitem-prefix-cls}-active,
+  .@{submenu-prefix-cls}-active {
     .@{submenu-prefix-cls}-title {
-      .menu-light-active-inline-title()
+      .menu-light-active-inline-title();
     }
   }
 }
@@ -187,7 +191,7 @@
   }
 
   &.hidden {
-    .menu-hidden()
+    .menu-hidden();
   }
 
   .@{submenu-prefix-cls} {
@@ -197,18 +201,18 @@
       color: @menu-sub-color;
       background: @menu-sub-inline-color-background;
       box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
-      0 9px 28px 8px rgba(0, 0, 0, 0.05);
+        0 9px 28px 8px rgba(0, 0, 0, 0.05);
 
       .@{menuitem-prefix-cls} {
         &:not(.@{menuitem-prefix-cls}-disabled):not(.@{menuitem-prefix-cls}-active):hover,
         &-active {
-          .menu-dark-hover()
+          .menu-dark-hover();
         }
       }
 
       &-second,
       &-third {
-        animation: kdZoomTopLeftIn calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1) forwards;
+        animation: kdZoomTopLeftIn calc(@menu-motion-duration - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
         opacity: 1;
         visibility: visible;
         transition: opacity, visibility;
@@ -217,7 +221,7 @@
       }
 
       &-hide {
-        .menu-hidden()
+        .menu-hidden();
       }
     }
   }
@@ -227,10 +231,17 @@
   }
 }
 
-
-
-
-
-
+.@{menu-prefix-cls}-rtl {
+  direction: rtl;
+  .@{submenu-prefix-cls} {
+    direction: rtl;
+    .@{submenu-prefix-cls}-title {
+      .@{submenu-prefix-cls}-arrow {
+        margin-left: 0;
+        margin-right: auto;
+      }
+    }
+  }
+}
 
 

package/es/menu/subMenu.js

@@ -29,7 +29,8 @@ var SubMenu = function SubMenu(props) {
   var _React$useContext = React.useContext(ConfigContext),
     getPrefixCls = _React$useContext.getPrefixCls,
     pkgPrefixCls = _React$useContext.prefixCls,
-    userDefaultProps = _React$useContext.compDefaultProps;
+    userDefaultProps = _React$useContext.compDefaultProps,
+    direction = _React$useContext.direction;
   var _a = getCompProps('MenuSubMenu', userDefaultProps, props),
     customPrefixcls = _a.prefixCls,
     theme = _a.theme,
@@ -226,9 +227,10 @@ var SubMenu = function SubMenu(props) {
     onMouseEnter: handleOnMouseEnter,
     onClick: handleOnClickSubMenu
   };
+  var isRtl = direction === 'rtl';
   var titleStyle = {
-    paddingRight: "".concat(curPaddingRight, "px"),
-    paddingLeft: "".concat(curPaddingLeft, "px")
+    paddingRight: isRtl ? "".concat(curPaddingLeft, "px") : "".concat(curPaddingRight, "px"),
+    paddingLeft: isRtl ? "".concat(curPaddingRight, "px") : "".concat(curPaddingLeft, "px")
   };
   var verticalView = usePopper(React.createElement("li", _extends({
     className: classNames(prefixCls, className, (_classNames2 = {}, _defineProperty(_classNames2, "light", theme === 'light'), _defineProperty(_classNames2, "".concat(prefixCls, "-collapsed"), collapsed), _defineProperty(_classNames2, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames2, "".concat(prefixCls, "-hover"), !disabled && Array.isArray(openKeys) && _includesInstanceProperty(openKeys).call(openKeys, keyValue)), _defineProperty(_classNames2, "".concat(prefixCls, "-active"), Array.isArray(selectedKeyPath) && _includesInstanceProperty(selectedKeyPath).call(selectedKeyPath, keyValue)), _classNames2)),
@@ -275,7 +277,7 @@ var SubMenu = function SubMenu(props) {
     });
   }))), {
     arrow: false,
-    placement: 'rightTop',
+    placement: direction === 'rtl' ? 'leftTop' : 'rightTop',
     gap: 0,
     visible: isVertical && !disabled ? visible : false,
     disabled: isVertical ? undefined : true,

package/es/modal/modal.js

@@ -54,7 +54,8 @@ var InternalModal = function InternalModal(props, ref) {
   var _useContext = useContext(ConfigContext),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
-    userDefaultProps = _useContext.compDefaultProps;
+    userDefaultProps = _useContext.compDefaultProps,
+    direction = _useContext.direction;
   var modalProps = getCompProps('Modal', userDefaultProps, props);
   var body = modalProps.body,
     bodyClassName = modalProps.bodyClassName,
@@ -108,6 +109,7 @@ var InternalModal = function InternalModal(props, ref) {
   var wrapperRef = useRef(null);
   var containerRef = ref || innerRef;
   var modalPrefixCls = getPrefixCls(prefixCls, 'modal', customPrefixcls);
+  var rtlCls = direction === 'rtl' ? "".concat(modalPrefixCls, "-rtl") : null;
   devWarning(ModalTypes.indexOf(type) === -1, 'modal', "cannot found modal type '".concat(type, "'"));
   var modalContainer = typeof getContainer === 'function' ? getContainer() : getContainer;
   if (modalContainer !== false && !(modalContainer instanceof HTMLElement)) {
@@ -372,7 +374,7 @@ var InternalModal = function InternalModal(props, ref) {
     }
   };
   var isHidden = !destroyOnClose && !(isForceController ? visible : innerVisible);
-  var modalClasses = classNames(modalPrefixCls, className, (_classNames3 = {}, _defineProperty(_classNames3, "".concat(modalPrefixCls, "-container"), true), _defineProperty(_classNames3, "".concat(modalPrefixCls, "-container-ie"), isIE), _defineProperty(_classNames3, "".concat(modalPrefixCls, "-container-hidden"), isHidden), _defineProperty(_classNames3, "".concat(modalPrefixCls, "-container-show"), !isHidden), _classNames3));
+  var modalClasses = classNames(modalPrefixCls, rtlCls, className, (_classNames3 = {}, _defineProperty(_classNames3, "".concat(modalPrefixCls, "-container"), true), _defineProperty(_classNames3, "".concat(modalPrefixCls, "-container-ie"), isIE), _defineProperty(_classNames3, "".concat(modalPrefixCls, "-container-hidden"), isHidden), _defineProperty(_classNames3, "".concat(modalPrefixCls, "-container-show"), !isHidden), _classNames3));
   var headerClass = classNames("".concat(modalPrefixCls, "-header"), titleClassName);
   var container = React.createElement("div", {
     className: classNames((_classNames4 = {}, _defineProperty(_classNames4, "".concat(modalPrefixCls, "-container-box"), true), _defineProperty(_classNames4, "".concat(modalPrefixCls, "-has-container-box"), modalContainer && !overroll), _defineProperty(_classNames4, "".concat(modalPrefixCls, "-showline"), showline), _classNames4)),

package/es/modal/style/index.css

@@ -347,3 +347,10 @@
 .kd-modal-showline .kd-modal-footer {
   border-top: var(--kd-c-modal-sizing-border, 1px) solid var(--kd-c-modal-color-border, var(--kd-g-color-border-strong-2, #d9d9d9));
 }
+.kd-modal-rtl {
+  direction: rtl;
+}
+.kd-modal-rtl .kd-modal-container-box .kd-modal-footer .kd-modal-cancel-node .kd-modal-margin-btn {
+  margin-left: var(--kd-c-modal-footer-button-spacing, 12px);
+  margin-right: 0;
+}

package/es/modal/style/index.less

@@ -226,3 +226,17 @@
     border-top: @modal-border-width solid @modal-border-color;
   }
 }
+
+.@{modal-prefix-cls}-rtl {
+  direction: rtl;
+  .@{modal-prefix-cls}-container-box {
+    .@{modal-prefix-cls}-footer {
+      .@{modal-prefix-cls}-cancel-node {
+        .@{modal-prefix-cls}-margin-btn {
+          margin-left: @modal-footer-button-spacing;
+          margin-right: 0;
+        }
+      }
+    }
+  }
+}

package/es/pagination/pagination.js

@@ -21,7 +21,8 @@ var Pagination = function Pagination(props) {
     getPrefixCls = _React$useContext.getPrefixCls,
     pkgPrefixCls = _React$useContext.prefixCls,
     userDefaultProps = _React$useContext.compDefaultProps,
-    locale = _React$useContext.locale;
+    locale = _React$useContext.locale,
+    direction = _React$useContext.direction;
   var paginationLangMsg = locale.getCompLangMsg({
     componentName: 'Pagination'
   });
@@ -48,6 +49,7 @@ var Pagination = function Pagination(props) {
     customPrefixcls = _getCompProps.prefixCls;
   devWarning(PageTypes.indexOf(pageType) === -1, 'Pagination', "cannot found pageType '".concat(pageType, "'"));
   var prefixCls = getPrefixCls(pkgPrefixCls, 'pagination', customPrefixcls);
+  var rtlCls = direction === 'rtl' ? "".concat(prefixCls, "-rtl") : null;
   var _React$useState = React.useState(pageSize || defaultPageSize),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     size = _React$useState2[0],
@@ -77,25 +79,25 @@ var Pagination = function Pagination(props) {
     setIsOpen = _React$useState8[1];
   var innerIcon = _extends({
     first: React.createElement(Icon, {
-      type: "first"
+      type: "".concat(direction === 'rtl' ? 'last' : 'first')
     }),
     last: React.createElement(Icon, {
-      type: "last"
+      type: "".concat(direction === 'rtl' ? 'first' : 'last')
     }),
     prev: React.createElement(Icon, {
-      type: "arrow-left"
+      type: "arrow-".concat(direction === 'rtl' ? 'right' : 'left')
     }),
     next: React.createElement(Icon, {
-      type: "arrow-right"
+      type: "arrow-".concat(direction === 'rtl' ? 'left' : 'right')
     }),
     down: React.createElement(Icon, {
       type: "arrow-down"
     }),
     jumpPrev: React.createElement(Icon, {
-      type: "double-arrow-left"
+      type: "double-arrow-".concat(direction === 'rtl' ? 'right' : 'left')
     }),
     jumpNext: React.createElement(Icon, {
-      type: "double-arrow-right"
+      type: "double-arrow-".concat(direction === 'rtl' ? 'left' : 'right')
     })
   }, icons || {});
   var handleChangeSize = function handleChangeSize(key) {
@@ -193,7 +195,7 @@ var Pagination = function Pagination(props) {
     className: "".concat(prefixCls, "-total")
   }, mapTotalText[showTotal]);
   var normalPagination = React.createElement("div", {
-    className: classNames(prefixCls, className),
+    className: classNames(prefixCls, rtlCls, className),
     style: style
   }, Total, showJumper && React.createElement("span", {
     className: "".concat(prefixCls, "-current")
@@ -228,7 +230,7 @@ var Pagination = function Pagination(props) {
     selectedKey: size,
     menu: sizeOptions,
     trigger: "click",
-    placement: "bottomRight",
+    placement: direction === 'rtl' ? 'bottomRight' : 'bottomLeft',
     disabled: disabled,
     prefix: "".concat(prefixCls, "-dropdown"),
     popperStyle: {
@@ -246,7 +248,7 @@ var Pagination = function Pagination(props) {
     size: size
   })), innerIcon.down))));
   var simplePagination = React.createElement("div", {
-    className: classNames(prefixCls, 'simple', className),
+    className: classNames(prefixCls, rtlCls, 'simple', className),
     style: style
   }, Total, React.createElement("ul", {
     className: classNames("".concat(prefixCls, "-action"), {
@@ -276,7 +278,7 @@ var Pagination = function Pagination(props) {
   var lessPagination = null;
   if (pageType === 'less') {
     lessPagination = React.createElement("div", {
-      className: classNames(prefixCls, 'less', {
+      className: classNames(prefixCls, rtlCls, 'less', {
         bordered: bordered,
         disabled: disabled
       }, className),
@@ -314,7 +316,7 @@ var Pagination = function Pagination(props) {
     page >= 5 && nicetyPages.unshift(1, '<<');
   }
   var nicetyPagination = React.createElement("div", {
-    className: classNames(prefixCls, 'nicety', {
+    className: classNames(prefixCls, rtlCls, 'nicety', {
       bordered: bordered,
       disabled: disabled
     }, className),
@@ -371,7 +373,8 @@ var Pagination = function Pagination(props) {
       onItemClick: handleChangeSize,
       getPopupContainer: function getPopupContainer(triggerNode) {
         return triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.parentElement;
-      }
+      },
+      placement: direction === 'rtl' ? 'bottomRight' : 'bottomLeft'
     }, dropdownProps, {
       onVisibleChange: dropdownVisibleChange
     }), React.createElement("button", {

package/es/pagination/style/index.css

@@ -815,3 +815,75 @@
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
 }
+.kd-pagination-rtl {
+  direction: rtl;
+}
+.kd-pagination-rtl .kd-pagination-total {
+  margin-left: 12px;
+  margin-right: 0;
+}
+.kd-pagination-rtl .kd-pagination-current {
+  margin-right: 0;
+  margin-left: 12px;
+}
+.kd-pagination-rtl .kd-pagination-action .kd-pagination-action-item.bordered {
+  margin-left: calc(2 * var(--kd-c-pagination-button-spacing, 4px));
+  margin-right: 0;
+}
+.kd-pagination-rtl .kd-pagination-action .kd-pagination-action-item.bordered:last-child {
+  margin-left: 0;
+}
+.kd-pagination-rtl .kd-pagination-selector {
+  margin-right: 20px;
+  margin-left: 0;
+}
+.kd-pagination-rtl .kd-pagination-selector .kd-pagination-selector-size i {
+  margin-left: 0;
+  margin-right: 4px;
+}
+.kd-pagination-rtl.simple .kd-pagination-action-item .kd-pagination-current {
+  margin-right: 0;
+  margin-left: 2px;
+}
+.kd-pagination-rtl.simple .kd-pagination-action-item .kd-pagination-total {
+  margin-left: 0;
+  margin-right: 2px;
+}
+.kd-pagination-rtl.less .kd-pagination-pages-item {
+  margin-left: var(--kd-c-pagination-button-spacing, 4px);
+  margin-right: 0;
+}
+.kd-pagination-rtl.less .kd-pagination-pages-item:last-child {
+  margin-left: 0;
+}
+.kd-pagination-rtl.nicety .kd-pagination-pages-item {
+  margin-left: var(--kd-c-pagination-button-spacing, 4px);
+  margin-right: 0;
+}
+.kd-pagination-rtl.nicety .kd-pagination-pages-item:last-child {
+  margin-left: 0;
+}
+.kd-pagination-rtl.nicety .kd-pagination-jumper {
+  margin-right: var(--kd-c-pagination-button-spacing, 4px);
+  margin-left: 0;
+}
+.kd-pagination-rtl.nicety .kd-pagination-jumper .kd-pagination-jumper-button {
+  margin-right: var(--kd-c-pagination-button-spacing, 4px);
+  margin-left: 0;
+}
+.kd-pagination-rtl.nicety .kd-pagination-options {
+  margin-right: 22px;
+  margin-left: 0;
+}
+.kd-pagination-rtl.nicety .kd-pagination-options .kd-pagination-options-size {
+  margin-right: 0;
+  margin-left: 8px;
+  padding: 0 4px 0 24px;
+}
+.kd-pagination-rtl.nicety .kd-pagination-options .kd-pagination-options-size i {
+  left: 5px;
+  right: auto;
+}
+.kd-pagination-rtl.nicety .kd-pagination-options .kd-dropdown-menu-item > span {
+  text-align: right;
+}

package/es/pagination/style/index.less

@@ -617,3 +617,102 @@
     }
   }
 }
+
+.@{pagination-prefix-cls}-rtl {
+  direction: rtl;
+  .@{pagination-prefix-cls}-total {
+    margin-left: 12px;
+    margin-right: 0;
+  }
+  .@{pagination-prefix-cls}-current {
+    margin-right: 0;
+    margin-left: 12px;
+  }
+  .@{pagination-action-prefix-cls} {
+    .@{pagination-action-prefix-cls}-item {
+      &.bordered {
+        margin-left: calc(2 * @pagination-button-spacing);
+        margin-right: 0;
+        &:last-child {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+  .@{pagination-selector-prefix-cls} {
+    margin-right: 20px;
+    margin-left: 0;
+    .@{pagination-selector-prefix-cls}-size {
+      i {
+        margin-left: 0;
+        margin-right: 4px;
+      }
+    }
+  }
+  &.simple {
+    .@{pagination-prefix-cls}-action {
+      &-item {
+        .@{pagination-prefix-cls}-current {
+          margin-right: 0;
+          margin-left: 2px;
+        }
+        .@{pagination-prefix-cls}-total {
+          margin-left: 0;
+          margin-right: 2px;
+        }
+      }
+    }
+  }
+  &.less {
+    .@{pagination-pages-prefix-cls} {
+      &-item {
+        margin-left: @pagination-button-spacing;
+        margin-right: 0;
+        &:last-child {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+  &.nicety {
+    .@{pagination-pages-prefix-cls} {
+      &-item {
+        margin-left: @pagination-button-spacing;
+        margin-right: 0;
+        &:last-child {
+          margin-left: 0;
+        }
+      }
+    }
+    .@{pagination-jumper-prefix-cls} {
+      margin-right: @pagination-button-spacing;
+      margin-left: 0;
+      .@{pagination-jumper-prefix-cls}-button {
+        margin-right: @pagination-button-spacing;
+        margin-left: 0;
+      }
+    }
+    .@{pagination-options-prefix-cls} {
+      margin-right: 22px;
+      margin-left: 0;
+      .@{pagination-options-prefix-cls}-size {
+        margin-right: 0;
+        margin-left: 8px;
+        padding: 0 4px 0 24px;
+        i {
+          left: 5px;
+          right: auto;
+        }
+      }
+      .@{kd-prefix}-dropdown {
+        &-menu {
+          &-item {
+            & > span {
+              text-align: right;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/es/qr-code/qr-code.js

@@ -18,7 +18,8 @@ var QRCode = function QRCode(props) {
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
     userDefaultProps = _useContext.compDefaultProps,
-    getCompLangMsg = _useContext.locale.getCompLangMsg;
+    getCompLangMsg = _useContext.locale.getCompLangMsg,
+    direction = _useContext.direction;
   var qrCodeProps = getCompProps('QRCode', userDefaultProps, props);
   var value = qrCodeProps.value,
     size = qrCodeProps.size,
@@ -37,7 +38,8 @@ var QRCode = function QRCode(props) {
   var className = qrCodeProps.className,
     customPrefixcls = qrCodeProps.prefixCls;
   var qrCodePrefixCls = getPrefixCls(prefixCls, 'qrcode', customPrefixcls);
-  var qrCodeClass = classNames(qrCodePrefixCls, className, _defineProperty({}, "".concat(qrCodePrefixCls, "-borderless"), !bordered));
+  var rtlCls = direction === 'rtl' ? "".concat(qrCodePrefixCls, "-rtl") : null;
+  var qrCodeClass = classNames(qrCodePrefixCls, rtlCls, className, _defineProperty({}, "".concat(qrCodePrefixCls, "-borderless"), !bordered));
   var qrCodeLangMsg = getCompLangMsg({
     componentName: 'QRCode'
   });

package/es/qr-code/style/index.css

@@ -152,3 +152,6 @@
 .kd-qrcode-borderless {
   border: none;
 }
+.kd-qrcode-rtl {
+  direction: rtl;
+}

package/es/qr-code/style/index.less

@@ -19,11 +19,11 @@
   list-style: none;
   overflow: hidden;
 
-  &-expired{
+  &-expired {
     margin-bottom: @qrcode-spacing-margin-vertical;
   }
 
-  &-mask{
+  &-mask {
     position: absolute;
     z-index: 10;
     display: flex;
@@ -36,7 +36,11 @@
     background: @qrcode-color-background;
     text-align: center;
   }
-  &-borderless{
+  &-borderless {
     border: none;
   }
 }
+
+.@{qrcode-prefix-cls}-rtl {
+  direction: rtl;
+}

package/es/radio/group.js

@@ -11,7 +11,8 @@ var RadioGroup = React.forwardRef(function (props, ref) {
   var _React$useContext = React.useContext(ConfigContext),
     getPrefixCls = _React$useContext.getPrefixCls,
     prefixCls = _React$useContext.prefixCls,
-    userDefaultProps = _React$useContext.compDefaultProps;
+    userDefaultProps = _React$useContext.compDefaultProps,
+    direction = _React$useContext.direction;
   var initValue = typeof props.value === 'undefined' ? props.defaultValue : props.value;
   var _React$useState = React.useState(initValue),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -43,6 +44,7 @@ var RadioGroup = React.forwardRef(function (props, ref) {
       optionType = _getCompProps.optionType,
       customPrefixcls = _getCompProps.prefixCls;
     var groupPrefixCls = getPrefixCls === null || getPrefixCls === void 0 ? void 0 : getPrefixCls(prefixCls, "radio-group", customPrefixcls);
+    var rtlCls = direction === 'rtl' ? "".concat(groupPrefixCls, "-rtl") : null;
     var radioPrefixCls = getPrefixCls === null || getPrefixCls === void 0 ? void 0 : getPrefixCls(prefixCls, "radio", customPrefixcls);
     var childrenToRender = children;
     if (options && options.length > 0) {
@@ -69,7 +71,7 @@ var RadioGroup = React.forwardRef(function (props, ref) {
       });
     }
     return React.createElement("div", {
-      className: classNames(groupPrefixCls, className),
+      className: classNames(groupPrefixCls, rtlCls, className),
       style: style,
       id: id,
       ref: ref

package/es/radio/radio.js

@@ -25,7 +25,8 @@ var InternalRadio = function InternalRadio(props, ref) {
   var _React$useContext = React.useContext(ConfigContext),
     getPrefixCls = _React$useContext.getPrefixCls,
     prefixCls = _React$useContext.prefixCls,
-    userDefaultProps = _React$useContext.compDefaultProps;
+    userDefaultProps = _React$useContext.compDefaultProps,
+    direction = _React$useContext.direction;
   var innerRef = React.useRef();
   var mergedRef = ref || innerRef;
   var _a = getCompProps('Radio', userDefaultProps, props),
@@ -47,6 +48,7 @@ var InternalRadio = function InternalRadio(props, ref) {
     return "radio".concat(radioType === 'square' ? "-".concat(radioType) : '');
   };
   var radioPrefixCls = getPrefixCls === null || getPrefixCls === void 0 ? void 0 : getPrefixCls(prefixCls, getPrefix(radioType), customPrefixcls);
+  var rtlCls = direction === 'rtl' ? "".concat(radioPrefixCls, "-rtl") : null;
   var _React$useState = React.useState(initValue),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isChecked = _React$useState2[0],
@@ -67,7 +69,7 @@ var InternalRadio = function InternalRadio(props, ref) {
       context.onChange(e, value);
     }
   };
-  var classString = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(radioPrefixCls), true), _defineProperty(_classNames, "".concat(radioPrefixCls, "-disabled"), disabled), _defineProperty(_classNames, "".concat(radioPrefixCls, "-checked"), isChecked), _classNames), className);
+  var classString = classNames(rtlCls, (_classNames = {}, _defineProperty(_classNames, "".concat(radioPrefixCls), true), _defineProperty(_classNames, "".concat(radioPrefixCls, "-disabled"), disabled), _defineProperty(_classNames, "".concat(radioPrefixCls, "-checked"), isChecked), _classNames), className);
   useEffect(function () {
     var _a;
     var handleRepeatClick = function handleRepeatClick(e) {

package/es/radio/style/index.css

@@ -454,3 +454,41 @@
   display: block;
   line-height: 1.5;
 }
+.kd-radio-rtl {
+  direction: rtl;
+}
+.kd-radio-button-rtl {
+  direction: rtl;
+}
+.kd-radio-button-rtl.kd-radio-button {
+  border: var(--kd-c-radio-radius-border-width, 1px) solid var(--kd-c-radio-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+  border-right: none;
+}
+.kd-radio-button-rtl.kd-radio-button.kd-radio-button:first-child {
+  border-radius: 0 2px 2px 0;
+  border-right: var(--kd-c-radio-radius-border-width, 1px) solid var(--kd-c-radio-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+}
+.kd-radio-button-rtl.kd-radio-button.kd-radio-button:first-child::before {
+  content: none;
+}
+.kd-radio-button-rtl.kd-radio-button.kd-radio-button:last-child {
+  border-radius: 2px 0 0 2px;
+}
+.kd-radio-square-rtl {
+  direction: rtl;
+}
+.kd-radio-square-rtl.kd-radio-square {
+  margin-left: var(--kd-c-radio-spacing-margin-right, 8px);
+  margin-right: 0;
+}
+.kd-radio-square-rtl.kd-radio-square.kd-radio-square::after {
+  left: calc(-1 * (var(--kd-c-radio-square-sizing-height, 32px) - 10px) / 2);
+  right: auto;
+}
+.kd-radio-square-rtl.kd-radio-square.kd-radio-square-checked::after {
+  left: calc(-1 * (var(--kd-c-radio-square-sizing-height, 32px) - 10px) / 2);
+  right: auto;
+}
+.kd-radio-group-rtl {
+  direction: rtl;
+}