@rainbow-oh/yee-c 0.1.0 → 0.3.0

package/dist/esm/Dropdown/dropdown.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "placement", "prefixCls", "popup", "menu", "open", "defaultOpen", "onOpenChange"];
+var _excluded = ["children", "placement", "prefixCls", "popup", "menu", "open", "defaultOpen", "arrow", "onOpenChange"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -29,6 +29,10 @@ var Dropdown = function Dropdown(baseprops) {
     menu = props.menu,
     open = props.open,
     defaultOpen = props.defaultOpen,
+    _props$arrow = props.arrow,
+    arrow = _props$arrow === void 0 ? {
+      className: "".concat(prefixCls, "-arrow")
+    } : _props$arrow,
     onOpenChange = props.onOpenChange,
     rest = _objectWithoutProperties(props, _excluded);
   var _useMergedState = useMergedState(false, {
@@ -60,6 +64,7 @@ var Dropdown = function Dropdown(baseprops) {
     return null;
   };
   return /*#__PURE__*/React.createElement(Trigger, _extends({}, rest, {
+    arrow: arrow,
     popup: renderPopup(),
     placement: placement,
     popupClassName: "".concat(prefixCls, "-popup"),

package/dist/esm/Dropdown/style/index.less

@@ -4,4 +4,10 @@
   &-popup {
     background-color: var(--yee-dropdown-bg-color);
   }
+
+  &-arrow {
+    &::after {
+      background-color: var(--yee-dropdown-bg-color);
+    }
+  }
 }

package/dist/esm/Form/Field.js

@@ -1,3 +1,6 @@
+var _excluded = ["icon"];
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -15,8 +18,10 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import clsx from 'clsx';
+import { HelpCircle } from 'lucide-react';
 import { AnimatePresence, motion } from 'motion/react';
 import React, { useContext, useLayoutEffect, useMemo, useReducer } from 'react';
+import Tooltip from "../Tooltip";
 import FieldContext from "./FieldContext";
 import FormContext from "./FormContext";
 import { ListNameContext } from "./List";
@@ -32,14 +37,21 @@ function stringifyPath(path) {
   return path.join('.');
 }
 var Field = function Field(props) {
-  var children = props.children,
+  var style = props.style,
+    className = props.className,
+    styles = props.styles,
+    classNames = props.classNames,
+    children = props.children,
     name = props.name,
     rules = props.rules,
     label = props.label,
+    tooltip = props.tooltip,
     required = props.required,
     disabled = props.disabled,
     _props$valuePropName = props.valuePropName,
     valuePropName = _props$valuePropName === void 0 ? 'value' : _props$valuePropName,
+    _props$layout = props.layout,
+    layout = _props$layout === void 0 ? 'vertical' : _props$layout,
     formatter = props.formatter;
   var _useContext = useContext(FieldContext),
     getCallbacks = _useContext.getCallbacks,
@@ -87,8 +99,34 @@ var Field = function Field(props) {
     }) || required;
   };
   var validate = getFieldValidate === null || getFieldValidate === void 0 ? void 0 : getFieldValidate(normalizedName);
+
+  // Normalize tooltip into { icon, ...tooltipProps }, or null when not provided.
+  // Everything except `icon` is forwarded to <Tooltip>, so any Tooltip prop
+  // (title, color, placement, ...) is supported automatically.
+  var tooltipConfig = useMemo(function () {
+    if (tooltip === undefined || tooltip === null || tooltip === false) return null;
+    if (_typeof(tooltip) === 'object' && ! /*#__PURE__*/React.isValidElement(tooltip) && 'title' in tooltip) {
+      var _ref = tooltip,
+        icon = _ref.icon,
+        rest = _objectWithoutProperties(_ref, _excluded);
+      return {
+        icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React.createElement(HelpCircle, {
+          size: 14
+        }),
+        tooltipProps: rest
+      };
+    }
+    return {
+      icon: /*#__PURE__*/React.createElement(HelpCircle, {
+        size: 14
+      }),
+      tooltipProps: {
+        title: tooltip
+      }
+    };
+  }, [tooltip]);
   var getControlled = function getControlled(children) {
-    var _getFieldValue, _props$dataTestid, _ref2;
+    var _getFieldValue, _props$dataTestid, _ref3;
     var props = children.props;
     var _value = (_getFieldValue = getFieldValue === null || getFieldValue === void 0 ? void 0 : getFieldValue(normalizedName)) !== null && _getFieldValue !== void 0 ? _getFieldValue : undefined;
     var value = formatter ? formatter(_value) : _value;
@@ -99,7 +137,7 @@ var Field = function Field(props) {
       formName: formName,
       id: normalizedName,
       'data-testid': (_props$dataTestid = props['data-testid']) !== null && _props$dataTestid !== void 0 ? _props$dataTestid : normalizedName,
-      disabled: (_ref2 = disabled !== null && disabled !== void 0 ? disabled : formDisabled) !== null && _ref2 !== void 0 ? _ref2 : props.disabled,
+      disabled: (_ref3 = disabled !== null && disabled !== void 0 ? disabled : formDisabled) !== null && _ref3 !== void 0 ? _ref3 : props.disabled,
       onChange: function onChange(value) {
         var _callbacks$onValuesBe, _props$onChange;
         var callbacks = getCallbacks === null || getCallbacks === void 0 ? void 0 : getCallbacks();
@@ -126,14 +164,21 @@ var Field = function Field(props) {
     });
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: clsx("".concat(prefixCls, "-item"), _defineProperty({}, "".concat(prefixCls, "-item-").concat(validate === null || validate === void 0 ? void 0 : validate.status), validate && validate.status))
+    className: clsx("".concat(prefixCls, "-item"), "".concat(prefixCls, "-item-").concat(layout), _defineProperty({}, "".concat(prefixCls, "-item-").concat(validate === null || validate === void 0 ? void 0 : validate.status), validate && validate.status), className),
+    style: style
   }, /*#__PURE__*/React.createElement("div", {
     className: clsx("".concat(prefixCls, "-item-row"))
-  }, label ? /*#__PURE__*/React.createElement("label", {
+  }, label || tooltipConfig ? /*#__PURE__*/React.createElement("label", {
     htmlFor: normalizedName,
-    className: clsx("".concat(prefixCls, "-item-label"), _defineProperty({}, "".concat(prefixCls, "-item-required"), isRequired()))
-  }, label) : null, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-item-control")
+    className: clsx("".concat(prefixCls, "-item-label"), _defineProperty({}, "".concat(prefixCls, "-item-required"), isRequired()), classNames === null || classNames === void 0 ? void 0 : classNames.label),
+    style: styles === null || styles === void 0 ? void 0 : styles.label
+  }, label, isRequired() ? /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-item-required-mark")
+  }, "*") : null, tooltipConfig ? /*#__PURE__*/React.createElement(Tooltip, tooltipConfig.tooltipProps, /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-item-tooltip-icon")
+  }, tooltipConfig.icon)) : null) : null, /*#__PURE__*/React.createElement("div", {
+    className: clsx("".concat(prefixCls, "-item-control"), classNames === null || classNames === void 0 ? void 0 : classNames.control),
+    style: styles === null || styles === void 0 ? void 0 : styles.control
   }, /*#__PURE__*/React.isValidElement(children) ? ( /*#__PURE__*/React.cloneElement(children, getControlled(children))) : /*#__PURE__*/React.createElement("span", null, children))), /*#__PURE__*/React.createElement(AnimatePresence, null, validate && /*#__PURE__*/React.createElement(motion.small, {
     initial: {
       opacity: 0,

package/dist/esm/Form/Group.js

@@ -88,7 +88,7 @@ var Group = function Group(props) {
               name: childNames,
               status: 'error',
               value: values,
-              message: rule.message
+              message: rule.message || ''
             });
           }
         }
@@ -152,7 +152,9 @@ var Group = function Group(props) {
     className: "".concat(itemCls, "-row")
   }, label && /*#__PURE__*/React.createElement("label", {
     className: clsx("".concat(itemCls, "-label"), _defineProperty({}, "".concat(itemCls, "-required"), required))
-  }, label), /*#__PURE__*/React.createElement("div", {
+  }, label, required ? /*#__PURE__*/React.createElement("span", {
+    className: "".concat(itemCls, "-required-mark")
+  }, "*") : null), /*#__PURE__*/React.createElement("div", {
     className: "".concat(itemCls, "-control")
   }, content)), /*#__PURE__*/React.createElement(AnimatePresence, null, hasError && /*#__PURE__*/React.createElement(motion.small, {
     initial: {

package/dist/esm/Form/demo/form-table.js

@@ -22,12 +22,14 @@ export default (function () {
     onFinish: onFinish,
     layout: "vertical"
   }, /*#__PURE__*/React.createElement(Form.List, {
-    name: "users",
-    initialValue: [{
-      name: '',
-      age: '',
-      address: ''
-    }]
+    name: "users"
+    // initialValue={[
+    //   {
+    //     name: '',
+    //     age: '',
+    //     address: '',
+    //   },
+    // ]}
   }, function (fields, operations) {
     // Define column config - operations are accessible here
     var columns = [{

package/dist/esm/Form/demo/tooltip.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/esm/Form/demo/tooltip.js

@@ -0,0 +1,59 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Button, Form, Grid, Input, Space, TextArea } from "../..";
+import { Info } from 'lucide-react';
+import React from 'react';
+export default (function () {
+  var _Form$useForm = Form.useForm(),
+    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+    form = _Form$useForm2[0];
+  var onFinish = function onFinish(values) {
+    console.log('Received values:', values);
+  };
+  return /*#__PURE__*/React.createElement(Form, {
+    form: form,
+    onFinish: onFinish,
+    layout: "vertical",
+    "data-testid": "tooltip-form"
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Grid.Item, null, /*#__PURE__*/React.createElement(Form.Field, {
+    name: "username",
+    label: "Username",
+    tooltip: "Used for login. 4-20 characters.",
+    rules: [{
+      required: true,
+      message: 'Please input your username!'
+    }]
+  }, /*#__PURE__*/React.createElement(Input, {
+    placeholder: "Please input your username"
+  }))), /*#__PURE__*/React.createElement(Grid.Item, null, /*#__PURE__*/React.createElement(Form.Field, {
+    name: "nickname",
+    label: "Nickname"
+    // Custom trigger icon via the object form
+    ,
+    tooltip: {
+      title: 'Shown publicly instead of your username.',
+      icon: /*#__PURE__*/React.createElement(Info, {
+        size: 14
+      })
+    }
+  }, /*#__PURE__*/React.createElement(Input, {
+    placeholder: "Please input your nickname"
+  }))), /*#__PURE__*/React.createElement(Grid.Item, null, /*#__PURE__*/React.createElement(Form.Field, {
+    name: "bio",
+    label: "Bio",
+    tooltip: "A short introduction about yourself."
+  }, /*#__PURE__*/React.createElement(TextArea, null)))), /*#__PURE__*/React.createElement(Space, {
+    style: {
+      marginTop: 16
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    htmlType: "submit"
+  }, "Submit"), /*#__PURE__*/React.createElement(Button, {
+    htmlType: "reset"
+  }, "Reset")));
+});

package/dist/esm/Form/interface.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
+import type { TooltipProps } from '../Tooltip';
 import type { DataAttributeProps } from '../utils/types';
 export type StoreValue = any;
 export type Store = Record<string, StoreValue>;
 export type Name = string;
 export type NamePath = string | string[] | number | (string | number)[];
-export type SemanticDOM = 'label' | 'control';
+export type FieldSemanticDOM = 'label' | 'control';
 export type InternalNamePath = (string | number)[];
 export interface FormProps<Values = any> extends DataAttributeProps {
     /**
@@ -211,7 +212,7 @@ export type Rule = {
     /**
      * Error message
      */
-    message: string;
+    message?: string;
     /**
      * Custom validation function, returns true for pass, false or throw for fail
      */
@@ -227,12 +228,60 @@ export type ValidateMessage = {
     value: unknown;
     status: 'error' | 'success' | 'warning' | 'info';
 };
+export type FieldConfigurableTooltip = Omit<TooltipProps, 'children'> & {
+    /**
+     * Custom trigger icon (defaults to a built-in help icon)
+     */
+    icon?: React.ReactNode;
+};
+export type FieldTooltip = React.ReactNode | FieldConfigurableTooltip;
 export type FieldProps = {
+    /**
+     * custom field root className
+     * */
+    className?: string;
+    /**
+     * custom field root style
+     * */
+    style?: React.CSSProperties;
+    /**
+     * Semantic DOM className
+     * */
+    classNames?: Partial<Record<FieldSemanticDOM, string>>;
+    /**
+     * Semantic DOM style
+     * */
+    styles?: Partial<Record<FieldSemanticDOM, React.CSSProperties>>;
+    /**
+     * Child nodes
+     * */
     children: React.ReactElement;
+    /**
+     * Field name
+     * */
     name: NamePath;
+    /**
+     * Validation rules
+     * */
     rules?: Rule[];
+    /***
+     * Field label
+     */
     label?: React.ReactNode;
+    /**
+     * Tooltip shown next to the label (a help icon).
+     * Pass a string/node to use the default icon, or an object to customize the icon.
+     * */
+    tooltip?: FieldTooltip;
+    /**
+     * Whether required (shows required mark)
+     * */
     required?: boolean;
+    /**
+     * Layout of label and control
+     * @default 'vertical'
+     * */
+    layout?: 'vertical' | 'horizontal';
     /**
      * Format value before passing to children
      * */

package/dist/esm/Form/style/index.less

@@ -18,17 +18,32 @@
     // padding-bottom: var(--yee-form-item-padding-bottom);
 
     &-label {
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
       margin-bottom: var(--yee-form-item-label-mb, 4px);
       line-height: var(--yee-form-item-label-line-height);
     }
 
-    &-required {
-      &::after {
-        color: var(--yee-input-required-font-color);
-        content: '*';
-        margin-inline-start: var(--yee-form-item-required-margin-inline-start);
-      }
+    // The required asterisk is rendered as a real node via &-required-mark so it
+    // stays glued to the label text regardless of what else sits inside the label.
+    // The `item-required` className is still applied to the label (see Field/Group)
+    // as an opt-in styling hook; the mark itself lives in &-required-mark below.
+    &-required-mark {
+      color: var(--yee-input-required-font-color);
+      margin-inline-start: var(--yee-form-item-required-margin-inline-start);
+      line-height: 1;
+    }
+
+    &-tooltip-icon {
+      display: inline-flex;
+      align-items: center;
+      margin-inline-start: 4px;
+      color: var(
+        --yee-form-item-tooltip-icon-color,
+        var(--yee-text-color-secondary, #999)
+      );
+      cursor: pointer;
     }
 
     &-control {

package/dist/esm/Menu/style/index.less

@@ -82,7 +82,7 @@
     list-style: none;
 
     &-title {
-      padding: var(--yee-menu-item-group-title-padding, 8px 16px);
+      padding: var(--yee-menu-item-group-title-padding, 4px 12px);
       color: var(
         --yee-menu-item-group-title-color,
         var(--yee-color-text-secondary)
@@ -106,7 +106,7 @@
     margin: var(--yee-menu-item-divider-margin, 4px 0);
     border-top: var(
       --yee-menu-item-divider-border,
-      1px solid var(--yee-color-border)
+      1px solid var(--yee-border-color)
     );
   }
 

package/dist/esm/Popconfirm/popconfirm.js

@@ -37,7 +37,9 @@ var Popconfirm = function Popconfirm(baseprops) {
     title = props.title,
     description = props.description,
     _props$arrow = props.arrow,
-    arrow = _props$arrow === void 0 ? true : _props$arrow,
+    arrow = _props$arrow === void 0 ? {
+      className: "".concat(prefixCls, "-arrow")
+    } : _props$arrow,
     _props$placement = props.placement,
     placement = _props$placement === void 0 ? 'top' : _props$placement,
     _props$confirmText = props.confirmText,

package/dist/esm/Popconfirm/style/index.less

@@ -20,4 +20,10 @@
   &-footer {
     margin-top: var(--yee-popconfirm-footer-margin-top);
   }
+
+  &-arrow {
+    &::after {
+      background-color: var(--yee-popconfirm-bg-font-color);
+    }
+  }
 }

package/dist/esm/Popover/popover.js

@@ -29,7 +29,9 @@ var Popover = function Popover(baseprops) {
     title = props.title,
     content = props.content,
     _props$arrow = props.arrow,
-    arrow = _props$arrow === void 0 ? true : _props$arrow,
+    arrow = _props$arrow === void 0 ? {
+      className: "".concat(prefixCls, "-arrow")
+    } : _props$arrow,
     _props$placement = props.placement,
     placement = _props$placement === void 0 ? 'top' : _props$placement,
     _props$trigger = props.trigger,

package/dist/esm/Popover/style/index.less

@@ -14,4 +14,10 @@
     line-height: var(--yee-popover-header-line-height);
     background-color: var(--yee-popover-header-bg-color);
   }
+
+  &-arrow {
+    &::after {
+      background-color: var(--yee-popover-bg-color);
+    }
+  }
 }

package/dist/esm/Progress/progress.js

@@ -1,11 +1,11 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["prefixCls", "type", "children", "status", "percent", "className", "style", "format", "onMouseEnter", "onMouseLeave", "onClick"];
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import clsx from 'clsx';
@@ -67,15 +67,15 @@ var Progress = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
   // progress
   var progress;
   if (type === 'line') {
-    progress = /*#__PURE__*/React.createElement(Line, {
+    progress = /*#__PURE__*/React.createElement(Line, _extends({}, rest, {
       prefixCls: prefixCls,
       percent: percent
-    }, progressInfo);
+    }), progressInfo);
   } else {
-    progress = /*#__PURE__*/React.createElement(Circle, {
+    progress = /*#__PURE__*/React.createElement(Circle, _extends({}, rest, {
       prefixCls: prefixCls,
       percent: percent
-    }, progressInfo);
+    }), progressInfo);
   }
   var cls = clsx(prefixCls, _defineProperty({}, "".concat(prefixCls, "-").concat(props.status), props.status), className);
   return /*#__PURE__*/React.createElement("div", _extends({

package/dist/esm/Radio/demo/button.js

@@ -44,6 +44,7 @@ export default (function () {
       return setValue2(e);
     },
     buttonStyle: "solid",
+    gap: 8,
     options: [{
       value: 'a',
       label: 'Hangzhou'

package/dist/esm/Radio/interface.d.ts

@@ -97,6 +97,10 @@ export interface RadioGroupProps {
      * Whether to toggle checked state
      */
     toggleable?: boolean;
+    /**
+     * Set the interval between radios
+     * */
+    gap?: number;
     /**
      * Callback when value changes
      */

package/dist/esm/Radio/radio-group.js

@@ -1,6 +1,8 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["prefixCls", "className", "name", "value", "defaultValue", "options", "buttonStyle", "disabled", "size", "onChange"];
+var _excluded = ["prefixCls", "className", "style", "name", "value", "defaultValue", "options", "buttonStyle", "disabled", "size", "gap", "onChange"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
@@ -27,6 +29,7 @@ var RadioGroup = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
   var _props$prefixCls = props.prefixCls,
     prefixCls = _props$prefixCls === void 0 ? 'yee-radio-group' : _props$prefixCls,
     className = props.className,
+    style = props.style,
     _props$name = props.name,
     name = _props$name === void 0 ? uid : _props$name,
     value = props.value,
@@ -35,6 +38,7 @@ var RadioGroup = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
     buttonStyle = props.buttonStyle,
     disabled = props.disabled,
     size = props.size,
+    gap = props.gap,
     onChange = props.onChange,
     rest = _objectWithoutProperties(props, _excluded);
   var _useMergedState = useMergedState('', {
@@ -44,13 +48,16 @@ var RadioGroup = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
     _useMergedState2 = _slicedToArray(_useMergedState, 2),
     mergedValue = _useMergedState2[0],
     setMergedValue = _useMergedState2[1];
-  var cls = clsx(prefixCls, _defineProperty(_defineProperty({}, "".concat(prefixCls, "-").concat(buttonStyle), buttonStyle), "".concat(prefixCls, "-").concat(size), size), className);
+  var cls = clsx(prefixCls, _defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-").concat(buttonStyle), buttonStyle), "".concat(prefixCls, "-").concat(size), size), "".concat(prefixCls, "-with-gap"), gap), className);
   var handleChange = function handleChange(event) {
     setMergedValue(event.target.value);
     onChange === null || onChange === void 0 || onChange(event.target.value, event);
   };
   return /*#__PURE__*/React.createElement("div", {
     className: cls,
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      gap: gap
+    }),
     ref: ref,
     role: "radiogroup"
   }, /*#__PURE__*/React.createElement(GroupCtx.Provider, {

package/dist/esm/Radio/radio.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["prefixCls", "className", "classNames", "styles", "label", "children", "value", "checked", "defaultChecked", "disabled", "toggleable", "onChange"];
+var _excluded = ["prefixCls", "className", "classNames", "style", "styles", "label", "children", "value", "checked", "defaultChecked", "disabled", "toggleable", "onChange"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
@@ -27,6 +27,7 @@ var Radio = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
     prefixCls = _props$prefixCls === void 0 ? 'yee-radio' : _props$prefixCls,
     className = props.className,
     classNames = props.classNames,
+    style = props.style,
     styles = props.styles,
     label = props.label,
     children = props.children,
@@ -68,6 +69,7 @@ var Radio = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
   var cls = clsx(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-wrapper"), !buttonStyle), "".concat(prefixCls, "-button-wrapper"), buttonStyle), "".concat(prefixCls, "-disabled"), disabled), "".concat(prefixCls, "-checked"), mergedChecked), className);
   return /*#__PURE__*/React.createElement("label", {
     className: cls,
+    style: style,
     onClick: handleClick
   }, /*#__PURE__*/React.createElement("span", {
     className: clsx(prefixCls, _defineProperty({}, "".concat(prefixCls, "-disabled"), disabled))

package/dist/esm/Radio/style/index.less

@@ -9,14 +9,16 @@
     gap: var(--yee-radio-group-gap);
 
     &-small {
-      @{pls} {
-        padding: var(--yee-radio-small-padding, 2px 4px);
+      @{pls}-button-wrapper {
+        font-size: var(--yee-radio-font-small-size);
+        padding: var(--yee-radio-small-padding);
       }
     }
 
     &-large {
-      @{pls} {
-        padding: var(--yee-radio-large-padding, 6px 12px);
+      @{pls}-button-wrapper {
+        font-size: var(--yee-radio-font-large-size);
+        padding: var(--yee-radio-large-padding);
       }
     }
 
@@ -61,12 +63,25 @@
           bottom: 0;
           border-color: transparent;
           border-style: solid;
-          border-width: var(--yee-radio-cornermark-border-width);
+          border-width: calc(var(--yee-radio-cornermark-border-width) / 3 * 2);
           border-right-color: var(--yee-radio-inner-checked-border-color);
           border-bottom-color: var(--yee-radio-inner-checked-border-color);
           content: '';
         }
 
+        &::before {
+          position: absolute;
+          z-index: 1;
+          right: 3px;
+          top: 18px;
+          width: 3px;
+          height: 7px;
+          border: 2px solid #fff;
+          border-width: 0 2px 2px 0;
+          transform: rotate(45deg);
+          content: '';
+        }
+
         z-index: 1;
       }
 
@@ -74,6 +89,12 @@
         margin-left: -1px;
       }
     }
+
+    &-with-gap {
+      @{pls}-button-wrapper {
+        border-radius: var(--yee-radio-button-wrapper-border-radius);
+      }
+    }
   }
 
   &-wrapper {

package/dist/esm/Segmented/demo/basic.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;