@rainbow-oh/yee-c 0.1.0 → 0.3.0

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/Dropdown/demo/placement.js

@@ -42,7 +42,8 @@ var placement_default = () => {
         { key: "1", label: "Option 1" },
         { key: "2", label: "Option 2" },
         { key: "3", label: "Option 3" }
-      ]
+      ],
+      keyboard: true
     }
   );
   return /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { wrap: true }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Dropdown, { popup: menu, placement: "bottomLeft" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, null, "Bottom Left")), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Dropdown, { popup: menu, placement: "bottom" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, null, "Bottom Center")), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Dropdown, { popup: menu, placement: "bottomRight" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, null, "Bottom Right")), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Dropdown, { popup: menu, placement: "topLeft" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, null, "Top Left")), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Dropdown, { popup: menu, placement: "top" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, null, "Top Center")), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Dropdown, { popup: menu, placement: "topRight" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, null, "Top Right")));

package/dist/cjs/Dropdown/dropdown.js

@@ -80,6 +80,7 @@ var Dropdown = (baseprops) => {
     menu,
     open,
     defaultOpen,
+    arrow = { className: `${prefixCls}-arrow` },
     onOpenChange
   } = _a, rest = __objRest(_a, [
     "children",
@@ -89,6 +90,7 @@ var Dropdown = (baseprops) => {
     "menu",
     "open",
     "defaultOpen",
+    "arrow",
     "onOpenChange"
   ]);
   const [mergedOpen, setMergedOpen] = (0, import_useMergedState.default)(false, {
@@ -115,6 +117,7 @@ var Dropdown = (baseprops) => {
   return /* @__PURE__ */ import_react.default.createElement(
     import_Trigger.default,
     __spreadProps(__spreadValues({}, rest), {
+      arrow,
       popup: renderPopup(),
       placement,
       popupClassName: `${prefixCls}-popup`,

package/dist/cjs/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/cjs/Form/Field.js

@@ -21,6 +21,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -50,8 +62,10 @@ __export(Field_exports, {
 });
 module.exports = __toCommonJS(Field_exports);
 var import_clsx = __toESM(require("clsx"));
+var import_lucide_react = require("lucide-react");
 var import_react = require("motion/react");
 var import_react2 = __toESM(require("react"));
+var import_Tooltip = __toESM(require("../Tooltip"));
 var import_FieldContext = __toESM(require("./FieldContext"));
 var import_FormContext = __toESM(require("./FormContext"));
 var import_List = require("./List");
@@ -67,13 +81,19 @@ function stringifyPath(path) {
 }
 var Field = (props) => {
   const {
+    style,
+    className,
+    styles,
+    classNames,
     children,
     name,
     rules,
     label,
+    tooltip,
     required,
     disabled,
     valuePropName = "value",
+    layout = "vertical",
     formatter
   } = props;
   const {
@@ -110,6 +130,18 @@ var Field = (props) => {
     return Array.isArray(rules) && rules.find((rule) => rule.required) || required;
   };
   const validate = getFieldValidate == null ? void 0 : getFieldValidate(normalizedName);
+  const tooltipConfig = (0, import_react2.useMemo)(() => {
+    if (tooltip === void 0 || tooltip === null || tooltip === false)
+      return null;
+    if (typeof tooltip === "object" && !import_react2.default.isValidElement(tooltip) && "title" in tooltip) {
+      const _a = tooltip, { icon } = _a, rest = __objRest(_a, ["icon"]);
+      return { icon: icon != null ? icon : /* @__PURE__ */ import_react2.default.createElement(import_lucide_react.HelpCircle, { size: 14 }), tooltipProps: rest };
+    }
+    return {
+      icon: /* @__PURE__ */ import_react2.default.createElement(import_lucide_react.HelpCircle, { size: 14 }),
+      tooltipProps: { title: tooltip }
+    };
+  }, [tooltip]);
   const getControlled = (children2) => {
     var _a, _b, _c;
     const props2 = children2.props;
@@ -150,23 +182,43 @@ var Field = (props) => {
   return /* @__PURE__ */ import_react2.default.createElement(
     "div",
     {
-      className: (0, import_clsx.default)(`${prefixCls}-item`, {
-        [`${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 ? /* @__PURE__ */ import_react2.default.createElement(
+    /* @__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: (0, import_clsx.default)(`${prefixCls}-item-control`, classNames == null ? void 0 : classNames.control),
+        style: styles == null ? void 0 : styles.control
       },
-      label
-    ) : 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))),
+      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/Group.js

@@ -85,7 +85,7 @@ var Group = (props) => {
               name: childNames,
               status: "error",
               value: values,
-              message: rule.message
+              message: rule.message || ""
             });
           }
         }
@@ -143,7 +143,8 @@ var Group = (props) => {
           [`${itemCls}-required`]: required
         })
       },
-      label
+      label,
+      required ? /* @__PURE__ */ import_react2.default.createElement("span", { className: `${itemCls}-required-mark` }, "*") : null
     ), /* @__PURE__ */ import_react2.default.createElement("div", { className: `${itemCls}-control` }, content)),
     /* @__PURE__ */ import_react2.default.createElement(import_react.AnimatePresence, null, hasError && /* @__PURE__ */ import_react2.default.createElement(
       import_react.motion.small,

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

@@ -42,14 +42,7 @@ var form_table_default = () => {
   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",
-      initialValue: [
-        {
-          name: "",
-          age: "",
-          address: ""
-        }
-      ]
+      name: "users"
     },
     (fields, operations) => {
       const columns = [

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

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

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

@@ -0,0 +1,84 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Form/demo/tooltip.tsx
+var tooltip_exports = {};
+__export(tooltip_exports, {
+  default: () => tooltip_default
+});
+module.exports = __toCommonJS(tooltip_exports);
+var import_yee_c = require("../..");
+var import_lucide_react = require("lucide-react");
+var import_react = __toESM(require("react"));
+var tooltip_default = () => {
+  const [form] = import_yee_c.Form.useForm();
+  const onFinish = (values) => {
+    console.log("Received values:", values);
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Form,
+    {
+      form,
+      onFinish,
+      layout: "vertical",
+      "data-testid": "tooltip-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,
+      {
+        name: "username",
+        label: "Username",
+        tooltip: "Used for login. 4-20 characters.",
+        rules: [
+          { required: true, message: "Please input your username!" }
+        ]
+      },
+      /* @__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: "nickname",
+        label: "Nickname",
+        tooltip: {
+          title: "Shown publicly instead of your username.",
+          icon: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Info, { size: 14 })
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_yee_c.Input, { placeholder: "Please input your nickname" })
+    )), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid.Item, null, /* @__PURE__ */ import_react.default.createElement(
+      import_yee_c.Form.Field,
+      {
+        name: "bio",
+        label: "Bio",
+        tooltip: "A short introduction about yourself."
+      },
+      /* @__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" }, "Submit"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, { htmlType: "reset" }, "Reset"))
+  );
+};

package/dist/cjs/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/cjs/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/cjs/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/cjs/Popconfirm/popconfirm.js

@@ -87,7 +87,7 @@ var Popconfirm = (baseprops) => {
     defaultOpen,
     title,
     description,
-    arrow = true,
+    arrow = { className: `${prefixCls}-arrow` },
     placement = "top",
     confirmText = popconfirmLocale.okText,
     cancelText = popconfirmLocale.cancelText,

package/dist/cjs/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/cjs/Popover/popover.js

@@ -79,7 +79,7 @@ var Popover = (baseprops) => {
     children,
     title,
     content,
-    arrow = true,
+    arrow = { className: `${prefixCls}-arrow` },
     placement = "top",
     trigger = "hover",
     style,

package/dist/cjs/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/cjs/Progress/progress.js

@@ -135,9 +135,9 @@ var Progress = import_react.default.forwardRef(
     const progressInfo = getProgressInfo();
     let progress;
     if (type === "line") {
-      progress = /* @__PURE__ */ import_react.default.createElement(import_line.default, { prefixCls, percent }, progressInfo);
+      progress = /* @__PURE__ */ import_react.default.createElement(import_line.default, __spreadProps(__spreadValues({}, rest), { prefixCls, percent }), progressInfo);
     } else {
-      progress = /* @__PURE__ */ import_react.default.createElement(import_circle.default, { prefixCls, percent }, progressInfo);
+      progress = /* @__PURE__ */ import_react.default.createElement(import_circle.default, __spreadProps(__spreadValues({}, rest), { prefixCls, percent }), progressInfo);
     }
     const cls = (0, import_clsx.default)(
       prefixCls,

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
      */

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

@@ -77,6 +77,7 @@ var RadioGroup = import_react.default.forwardRef(
     const _a = props, {
       prefixCls = "yee-radio-group",
       className,
+      style,
       name = uid,
       value,
       defaultValue,
@@ -84,10 +85,12 @@ var RadioGroup = import_react.default.forwardRef(
       buttonStyle,
       disabled,
       size,
+      gap,
       onChange
     } = _a, rest = __objRest(_a, [
       "prefixCls",
       "className",
+      "style",
       "name",
       "value",
       "defaultValue",
@@ -95,6 +98,7 @@ var RadioGroup = import_react.default.forwardRef(
       "buttonStyle",
       "disabled",
       "size",
+      "gap",
       "onChange"
     ]);
     const [mergedValue, setMergedValue] = (0, import_useMergedState.default)("", {
@@ -105,7 +109,8 @@ var RadioGroup = import_react.default.forwardRef(
       prefixCls,
       {
         [`${prefixCls}-${buttonStyle}`]: buttonStyle,
-        [`${prefixCls}-${size}`]: size
+        [`${prefixCls}-${size}`]: size,
+        [`${prefixCls}-with-gap`]: gap
       },
       className
     );
@@ -113,21 +118,30 @@ var RadioGroup = import_react.default.forwardRef(
       setMergedValue(event.target.value);
       onChange == null ? void 0 : onChange(event.target.value, event);
     };
-    return /* @__PURE__ */ import_react.default.createElement("div", { className: cls, ref, role: "radiogroup" }, /* @__PURE__ */ import_react.default.createElement(
-      GroupCtx.Provider,
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
       {
-        value: { name, buttonStyle, onChange: handleChange }
+        className: cls,
+        style: __spreadProps(__spreadValues({}, style), { gap }),
+        ref,
+        role: "radiogroup"
       },
-      options == null ? void 0 : options.map((option, index) => /* @__PURE__ */ import_react.default.createElement(
-        import_radio.default,
-        __spreadProps(__spreadValues(__spreadValues({
-          disabled
-        }, rest), option), {
-          checked: option.value === mergedValue,
-          key: option.value || index
-        })
-      ))
-    ));
+      /* @__PURE__ */ import_react.default.createElement(
+        GroupCtx.Provider,
+        {
+          value: { name, buttonStyle, onChange: handleChange }
+        },
+        options == null ? void 0 : options.map((option, index) => /* @__PURE__ */ import_react.default.createElement(
+          import_radio.default,
+          __spreadProps(__spreadValues(__spreadValues({
+            disabled
+          }, rest), option), {
+            checked: option.value === mergedValue,
+            key: option.value || index
+          })
+        ))
+      )
+    );
   }
 );
 RadioGroup.displayName = "RadioGroup";

package/dist/cjs/Radio/radio.js

@@ -76,6 +76,7 @@ var Radio = import_react.default.forwardRef(
       prefixCls = "yee-radio",
       className,
       classNames,
+      style,
       styles,
       label,
       children,
@@ -89,6 +90,7 @@ var Radio = import_react.default.forwardRef(
       "prefixCls",
       "className",
       "classNames",
+      "style",
       "styles",
       "label",
       "children",
@@ -132,7 +134,7 @@ var Radio = import_react.default.forwardRef(
       },
       className
     );
-    return /* @__PURE__ */ import_react.default.createElement("label", { className: cls, onClick: handleClick }, /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ import_react.default.createElement("label", { className: cls, style, onClick: handleClick }, /* @__PURE__ */ import_react.default.createElement(
       "span",
       {
         className: (0, import_clsx.default)(prefixCls, {