@rainbow-oh/yee-c 0.2.0 → 0.4.0

package/dist/cjs/Button/button.js

@@ -114,7 +114,7 @@ var Button = (0, import_react.forwardRef)(
     if (type) {
       switch (type) {
         case "default":
-          mergedColor = "primary";
+          mergedColor = "default";
           mergedVariant = "outlined";
           break;
         case "primary":
@@ -122,7 +122,7 @@ var Button = (0, import_react.forwardRef)(
           mergedVariant = "solid";
           break;
         case "dashed":
-          mergedColor = "primary";
+          mergedColor = "default";
           mergedVariant = "dashed";
           break;
         case "link":

package/dist/cjs/Button/style/index.less

@@ -41,18 +41,18 @@
     border: none;
 
     &:not(@{pls}-disabled):hover {
-      background-color: var(--m-btn-hover-color);
+      background-color: var(--m-btn-hover-bg-color);
     }
 
     &:not(@{pls}-disabled):active {
-      background-color: var(--m-btn-active-color);
+      background-color: var(--m-btn-active-bg-color);
     }
   }
 
   &-dashed {
     color: var(--m-btn-color);
     background-color: transparent;
-    border: var(--yee-btn-border-width) dashed var(--m-btn-color);
+    border: var(--yee-btn-border-width) dashed var(--m-btn-border-color);
 
     &:not(@{pls}-disabled):hover {
       color: var(--m-btn-hover-color);
@@ -84,7 +84,19 @@
   &-outlined {
     color: var(--m-btn-color);
     background-color: transparent;
-    border: var(--yee-btn-border-width) solid var(--m-btn-color);
+    border: var(--yee-btn-border-width) solid var(--m-btn-border-color);
+
+    &:not(@{pls}-disabled) {
+      &:hover {
+        color: var(--m-btn-hover-color);
+        border-color: var(--m-btn-border-hover-color);
+      }
+
+      &:active {
+        color: var(--m-btn-active-color);
+        border-color: var(--m-btn-border-active-color);
+      }
+    }
   }
 
   &-ghost {
@@ -134,11 +146,14 @@
   // ---- color ------
   &-default {
     --m-btn-color: var(--yee-text-color);
-    --m-btn-hover-color: var(--yee-text-color-auxiliary);
-    --m-btn-active-color: var(--yee-btn-default-active-color);
+    --m-btn-hover-color: var(--yee-primary-color);
+    --m-btn-border-color: var(--yee-border-color);
+    --m-btn-border-hover-color: var(--yee-primary-color);
     --m-btn-bg-color: var(--yee-btn-default-bg-color);
-    --m-btn-hover-bg-color: var(--yee-btn-default-bg-color);
-    --m-btn-active-bg-color: var(--yee-btn-default-bg-color);
+    --m-btn-hover-bg-color: var(--yee-text-color-auxiliary);
+    --m-btn-border-active-color: var(--yee-primary-color-active);
+    --m-btn-active-color: var(--yee-primary-color-active);
+    --m-btn-active-bg-color: var(--yee-text-color-auxiliary);
   }
 
   &-primary {

package/dist/cjs/Card/demo/collapsible.js

@@ -41,7 +41,8 @@ var collapsible_default = () => {
       title: "Card title",
       expanded: false,
       extra: /* @__PURE__ */ import_react.default.createElement("a", { href: "#" }, "More"),
-      style: { width: 300 }
+      style: { width: 300 },
+      bordered: true
     },
     /* @__PURE__ */ import_react.default.createElement("p", null, "Card content"),
     /* @__PURE__ */ import_react.default.createElement("p", null, "Card content"),

package/dist/cjs/Carousel/demo/arrows.js

@@ -35,7 +35,7 @@ module.exports = __toCommonJS(arrows_exports);
 var import_yee_c = require("../..");
 var import_react = __toESM(require("react"));
 var arrows_default = () => {
-  return /* @__PURE__ */ import_react.default.createElement(import_yee_c.Carousel, { style: { width: "500px", height: "300px" }, arrows: "always" }, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(import_yee_c.Carousel, { style: { width: "100%", height: "300px" }, arrows: "always" }, /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
       style: {

package/dist/cjs/Carousel/demo/autoplay.js

@@ -38,7 +38,7 @@ var autoplay_default = () => {
   return /* @__PURE__ */ import_react.default.createElement(
     import_yee_c.Carousel,
     {
-      style: { width: "500px", height: "300px" },
+      style: { width: "100%", height: "300px" },
       autoplay: true,
       autoplaySpeed: 1e3
     },

package/dist/cjs/Carousel/demo/effect.js

@@ -38,7 +38,7 @@ var effect_default = () => {
   return /* @__PURE__ */ import_react.default.createElement(
     import_yee_c.Carousel,
     {
-      style: { width: "500px", height: "300px" },
+      style: { width: "100%", height: "300px" },
       effect: "fade",
       autoplay: true,
       autoplaySpeed: 2e3

package/dist/cjs/Carousel/demo/position.js

@@ -38,7 +38,7 @@ var position_default = () => {
   return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
     import_yee_c.Carousel,
     {
-      style: { width: "500px", height: "300px", marginBottom: "20px" },
+      style: { width: "100%", height: "300px", marginBottom: "20px" },
       dotPosition: "top",
       dots: true
     },

package/dist/cjs/Config-Provider/interface.d.ts

@@ -38,6 +38,7 @@ import { RadioGroupProps, RadioProps } from '../Radio';
 import { RangePickerProps } from '../RangePicker';
 import { RateProps } from '../Rate';
 import { SearchProps } from '../Search';
+import { SegmentedProps } from '../Segmented';
 import { SelectProps } from '../Select';
 import { SkeletonProps } from '../Skeleton';
 import { SliderProps } from '../Slider';
@@ -53,6 +54,7 @@ import { TextAreaProps } from '../TextArea';
 import { SpinProps } from '../Spin';
 import { TimelineProps } from '../Timeline';
 import { TooltipProps } from '../Tooltip';
+import { TourProps } from '../Tour';
 import { TransferProps } from '../Transfer';
 import { TreeProps } from '../Tree';
 import { TreeSelectProps } from '../TreeSelect';
@@ -105,6 +107,7 @@ export type GlobalCtxType = {
     rate?: RateProps;
     search?: SearchProps;
     select?: SelectProps;
+    segmented?: SegmentedProps;
     skeleton?: SkeletonProps;
     slider?: SliderProps;
     space?: SpaceProps;
@@ -121,6 +124,7 @@ export type GlobalCtxType = {
     timeline?: TimelineProps;
     highlight?: HighlightProps;
     tooltip?: TooltipProps;
+    tour?: TourProps;
     transfer?: TransferProps;
     tree?: TreeProps<unknown>;
     treeselect?: TreeSelectProps;

package/dist/cjs/Form/Field.js

@@ -81,6 +81,10 @@ function stringifyPath(path) {
 }
 var Field = (props) => {
   const {
+    style,
+    className,
+    styles,
+    classNames,
     children,
     name,
     rules,
@@ -178,25 +182,43 @@ var Field = (props) => {
   return /* @__PURE__ */ import_react2.default.createElement(
     "div",
     {
-      className: (0, import_clsx.default)(`${prefixCls}-item`, `${prefixCls}-item-${layout}`, {
-        [`${prefixCls}-item-${validate == null ? void 0 : validate.status}`]: validate && validate.status
-      })
+      className: (0, import_clsx.default)(
+        `${prefixCls}-item`,
+        `${prefixCls}-item-${layout}`,
+        {
+          [`${prefixCls}-item-${validate == null ? void 0 : validate.status}`]: validate && validate.status
+        },
+        className
+      ),
+      style
     },
     /* @__PURE__ */ import_react2.default.createElement("div", { className: (0, import_clsx.default)(`${prefixCls}-item-row`) }, label || tooltipConfig ? /* @__PURE__ */ import_react2.default.createElement(
       "label",
       {
         htmlFor: normalizedName,
-        className: (0, import_clsx.default)(`${prefixCls}-item-label`, {
-          [`${prefixCls}-item-required`]: isRequired()
-        })
+        className: (0, import_clsx.default)(
+          `${prefixCls}-item-label`,
+          {
+            [`${prefixCls}-item-required`]: isRequired()
+          },
+          classNames == null ? void 0 : classNames.label
+        ),
+        style: styles == null ? void 0 : styles.label
       },
       label,
       isRequired() ? /* @__PURE__ */ import_react2.default.createElement("span", { className: `${prefixCls}-item-required-mark` }, "*") : null,
       tooltipConfig ? /* @__PURE__ */ import_react2.default.createElement(import_Tooltip.default, __spreadValues({}, tooltipConfig.tooltipProps), /* @__PURE__ */ import_react2.default.createElement("span", { className: `${prefixCls}-item-tooltip-icon` }, tooltipConfig.icon)) : null
-    ) : null, /* @__PURE__ */ import_react2.default.createElement("div", { className: `${prefixCls}-item-control` }, import_react2.default.isValidElement(children) ? import_react2.default.cloneElement(
-      children,
-      getControlled(children)
-    ) : /* @__PURE__ */ import_react2.default.createElement("span", null, children))),
+    ) : null, /* @__PURE__ */ import_react2.default.createElement(
+      "div",
+      {
+        className: (0, import_clsx.default)(`${prefixCls}-item-control`, classNames == null ? void 0 : classNames.control),
+        style: styles == null ? void 0 : styles.control
+      },
+      import_react2.default.isValidElement(children) ? import_react2.default.cloneElement(
+        children,
+        getControlled(children)
+      ) : /* @__PURE__ */ import_react2.default.createElement("span", null, children)
+    )),
     /* @__PURE__ */ import_react2.default.createElement(import_react.AnimatePresence, null, validate && /* @__PURE__ */ import_react2.default.createElement(
       import_react.motion.small,
       {

package/dist/cjs/Form/demo/basic.js

@@ -39,87 +39,62 @@ var basic_default = () => {
   const onFinish = (values) => {
     console.log("Received values:", values);
   };
-  const [, setState] = import_react.default.useState({});
-  (0, import_react.useEffect)(() => {
-    setTimeout(() => {
-      form.setFieldsValue({
-        address: [
-          {
-            one: "123 Main St"
-          }
-        ]
-      });
-    }, 2e3);
-  }, []);
-  return /* @__PURE__ */ import_react.default.createElement(
-    import_yee_c.Form,
+  return /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form, { form, onFinish, "data-testid": "basic-form" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid, null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid.Item, null, /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Form.Field,
     {
-      form,
-      onFinish,
-      layout: "vertical",
-      "data-testid": "basic-form",
-      onValuesChange: (field) => {
-        setState(field);
-      }
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid, null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid.Item, null, /* @__PURE__ */ import_react.default.createElement(
-      import_yee_c.Form.Field,
-      {
-        name: "username",
-        label: "Username",
-        rules: [
-          {
-            required: true,
-            message: "Please input your username!",
-            validateTrigger: ["onChange", "onSubmit"]
+      name: "username",
+      label: "Username",
+      rules: [
+        {
+          required: true,
+          message: "Please input your username!",
+          validateTrigger: ["onChange", "onSubmit"]
+        },
+        {
+          validateTrigger: "onBlur",
+          validator: (value) => {
+            console.log("Validating username:", value);
+            if (typeof value === "string" && value.length < 5) {
+              return false;
+            }
+            return true;
           },
-          {
-            validateTrigger: "onBlur",
-            validator: (value) => {
-              console.log("Validating username:", value);
-              if (typeof value === "string" && value.length < 5) {
-                return false;
-              }
-              return true;
-            },
-            message: "Username must be at least 5 characters long"
-          }
-        ]
-      },
-      /* @__PURE__ */ import_react.default.createElement(import_yee_c.Input, { placeholder: "Please input your username" })
-    )), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid.Item, null, /* @__PURE__ */ import_react.default.createElement(
-      import_yee_c.Form.Field,
-      {
-        name: "password",
-        label: "Password",
-        rules: [
-          { required: true, message: "Please input your password!" },
-          {
-            minLength: 10,
-            validateTrigger: "onBlur",
-            message: "Password length must be longer than 10"
-          }
-        ]
-      },
-      /* @__PURE__ */ import_react.default.createElement(import_yee_c.Input.Password, { placeholder: "Please input your password" })
-    )), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid.Item, null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: "gender", label: "Gender", initialValue: "male" }, /* @__PURE__ */ import_react.default.createElement(
-      import_yee_c.Select,
-      {
-        options: [
-          { label: "male", value: "male" },
-          { label: "female", value: "female" },
-          { label: "other", value: "other" }
-        ]
-      }
-    ))), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid.Item, null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: "birthday", label: "Birthday" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.DatePicker, null))), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid.Item, null, /* @__PURE__ */ import_react.default.createElement(
-      import_yee_c.Form.Field,
-      {
-        name: ["address", 0, "one"],
-        label: "Address",
-        initialValue: "zzz"
-      },
-      /* @__PURE__ */ import_react.default.createElement(import_yee_c.TextArea, null)
-    ))),
-    /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { style: { marginTop: 16 } }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, { type: "primary", htmlType: "submit", "data-testid": "submit-btn" }, "Submit"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, { htmlType: "reset", "data-testid": "reset-btn" }, "Reset"))
-  );
+          message: "Username must be at least 5 characters long"
+        }
+      ]
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_yee_c.Input, { placeholder: "Please input your username" })
+  )), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid.Item, null, /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Form.Field,
+    {
+      name: "password",
+      label: "Password",
+      rules: [
+        { required: true, message: "Please input your password!" },
+        {
+          minLength: 10,
+          validateTrigger: "onBlur",
+          message: "Password length must be longer than 10"
+        }
+      ]
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_yee_c.Input.Password, { placeholder: "Please input your password" })
+  )), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid.Item, null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: "gender", label: "Gender", initialValue: "male" }, /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Select,
+    {
+      options: [
+        { label: "male", value: "male" },
+        { label: "female", value: "female" },
+        { label: "other", value: "other" }
+      ]
+    }
+  ))), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid.Item, null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: "birthday", label: "Birthday" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.DatePicker, null))), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid.Item, null, /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Form.Field,
+    {
+      name: ["address", 0, "one"],
+      label: "Address",
+      initialValue: "zzz"
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_yee_c.TextArea, null)
+  ))), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { style: { marginTop: 16 } }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, { type: "primary", htmlType: "submit", "data-testid": "submit-btn" }, "Submit"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, { htmlType: "reset", "data-testid": "reset-btn" }, "Reset")));
 };

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

@@ -39,73 +39,74 @@ var form_table_default = () => {
   const onFinish = (values) => {
     console.log("Form Values:", values);
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react.default.createElement("h2", null, "Form + Table Dynamic Form Example"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form, { form, onFinish, layout: "vertical" }, /* @__PURE__ */ import_react.default.createElement(
-    import_yee_c.Form.List,
-    {
-      name: "users"
-    },
-    (fields, operations) => {
-      const columns = [
-        {
-          title: "Name",
-          dataIndex: "name",
-          key: "name",
-          width: "30%",
-          render: (_record, index) => /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: [index, "name"], required: true }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Input, { placeholder: "Please enter name" }))
-        },
-        {
-          title: "Age",
-          dataIndex: "age",
-          key: "age",
-          width: "20%",
-          render: (_record, index) => /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: [index, "age"], required: true }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Input, { placeholder: "Please enter age", type: "number" }))
-        },
-        {
-          title: "Address",
-          dataIndex: "address",
-          key: "address",
-          width: "40%",
-          render: (_record, index) => /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: [index, "address"] }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Input, { placeholder: "Please enter address" }))
-        },
-        {
-          title: "Action",
-          key: "action",
-          width: "10%",
-          render: (_record, index) => /* @__PURE__ */ import_react.default.createElement(
-            import_yee_c.Button,
-            {
-              type: "link",
-              color: "danger",
-              onClick: () => operations.remove(index)
-            },
-            "Delete"
-          )
-        }
-      ];
-      return /* @__PURE__ */ import_react.default.createElement(
-        import_yee_c.Table,
-        {
-          columns,
-          dataSource: fields,
-          rowKey: "key",
-          pagination: false,
-          footer: () => /* @__PURE__ */ import_react.default.createElement(
-            import_yee_c.Button,
-            {
-              type: "dashed",
-              onClick: () => operations.add({
-                name: "",
-                age: "",
-                address: ""
-              }),
-              block: true
-            },
-            "+ Add Row"
-          )
-        }
-      );
-    }
-  ), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { style: { marginTop: "24px" } }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, { type: "primary", htmlType: "submit" }, "Submit"), /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react.default.createElement("h2", null, "Form + Table Dynamic Form Example"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form, { form, onFinish, layout: "vertical" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.List, { name: "users" }, (fields, operations) => {
+    const columns = [
+      {
+        title: "Name",
+        dataIndex: "name",
+        key: "name",
+        width: "30%",
+        render: (_record, index) => /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: [index, "name"], required: true }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Input, { placeholder: "Please enter name" }))
+      },
+      {
+        title: "Age",
+        dataIndex: "age",
+        key: "age",
+        width: "20%",
+        render: (_record, index) => /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: [index, "age"], required: true }, /* @__PURE__ */ import_react.default.createElement(
+          import_yee_c.InputNumber,
+          {
+            controls: false,
+            placeholder: "Please enter age",
+            type: "number"
+          }
+        ))
+      },
+      {
+        title: "Address",
+        dataIndex: "address",
+        key: "address",
+        width: "40%",
+        render: (_record, index) => /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: [index, "address"] }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.TextArea, { placeholder: "Please enter address" }))
+      },
+      {
+        title: "Action",
+        key: "action",
+        width: "10%",
+        render: (_record, index) => /* @__PURE__ */ import_react.default.createElement(
+          import_yee_c.Button,
+          {
+            type: "link",
+            color: "danger",
+            onClick: () => operations.remove(index)
+          },
+          "Delete"
+        )
+      }
+    ];
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_yee_c.Table,
+      {
+        columns,
+        dataSource: fields,
+        rowKey: "key",
+        pagination: false,
+        footer: () => /* @__PURE__ */ import_react.default.createElement(
+          import_yee_c.Button,
+          {
+            type: "dashed",
+            onClick: () => operations.add({
+              name: "",
+              age: "",
+              address: ""
+            }),
+            block: true
+          },
+          "+ Add Row"
+        )
+      }
+    );
+  }), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { style: { marginTop: "24px" } }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, { type: "primary", htmlType: "submit" }, "Submit"), /* @__PURE__ */ import_react.default.createElement(
     import_yee_c.Button,
     {
       style: { marginLeft: "8px" },

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

@@ -5,7 +5,7 @@ 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 {
     /**
@@ -236,6 +236,22 @@ export type FieldConfigurableTooltip = Omit<TooltipProps, 'children'> & {
 };
 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
      * */

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

@@ -30,6 +30,7 @@
   // -------- item --------
   &-item {
     display: flex;
+    flex-shrink: 0;
     align-items: center;
     box-sizing: border-box;
     width: 100%;
@@ -82,7 +83,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 +107,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)
     );
   }
 
@@ -119,6 +120,7 @@
     &-title {
       display: flex;
       align-items: center;
+      flex-shrink: 0;
       justify-content: space-between;
       padding: var(--yee-menu-item-padding);
       border-radius: var(--yee-menu-item-border-radius);

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

@@ -59,6 +59,7 @@ var button_default = () => {
       value: value2,
       onChange: (e) => setValue2(e),
       buttonStyle: "solid",
+      gap: 8,
       options: [
         { value: "a", label: "Hangzhou" },
         { value: "b", label: "Shanghai" },

package/dist/cjs/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
      */