@rainbow-oh/yee-c 0.1.0 → 0.3.0

package/dist/cjs/Alert/alert.js

@@ -70,10 +70,16 @@ var import_mergeContextToProps = __toESM(require("../utils/mergeContextToProps")
 var import_style = require("./style/index.less");
 var ICON_STROKE_WIDTH = 1.5;
 var iconMap = {
-  info: { small: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Info, null), large: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Info, null) },
-  success: { small: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleCheckBig, null), large: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleCheckBig, null) },
-  warning: { small: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleAlert, null), large: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleAlert, null) },
-  error: { small: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleX, null), large: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleX, null) }
+  info: { small: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Info, { size: 16 }), large: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Info, { size: 24 }) },
+  success: {
+    small: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleCheckBig, { size: 16 }),
+    large: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleCheckBig, { size: 24 })
+  },
+  warning: {
+    small: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleAlert, { size: 16 }),
+    large: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleAlert, { size: 24 })
+  },
+  error: { small: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleX, { size: 16 }), large: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleX, { size: 24 }) }
 };
 var Alert = (baseprops) => {
   const { alert } = (0, import_react.useContext)(import_Config_Provider.GlobalContext);

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

@@ -69,4 +69,7 @@
     border: none;
     border-radius: 0;
   }
+
+  &-small {
+  }
 }

package/dist/cjs/Anchor/anchor-item.js

@@ -83,7 +83,8 @@ var AnchorItem = (props) => {
     "level",
     "children"
   ]);
-  const { prefixCls, activeKey, onClick } = (0, import_react.useContext)(import_anchor.AnchorContext);
+  const { prefixCls, activeKey, onClick, classNames, styles } = (0, import_react.useContext)(import_anchor.AnchorContext);
+  const isActive = targetKey === activeKey;
   const handleClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -92,12 +93,13 @@ var AnchorItem = (props) => {
   const cls = (0, import_clsx.default)(
     `${prefixCls}-item`,
     {
-      [`${prefixCls}-item-active`]: targetKey === activeKey,
+      [`${prefixCls}-item-active`]: isActive,
       [`${prefixCls}-item-${status}`]: status
     },
-    className
+    className,
+    isActive && (classNames == null ? void 0 : classNames.active)
   );
-  const itemStyle = __spreadProps(__spreadValues({}, style), {
+  const itemStyle = __spreadProps(__spreadValues(__spreadValues({}, style), isActive ? styles == null ? void 0 : styles.active : void 0), {
     paddingLeft: `${level * INDENT_WIDTH}px`
   });
   const renderItem = /* @__PURE__ */ import_react.default.createElement("li", __spreadValues({ className: cls, style: itemStyle }, rest), /* @__PURE__ */ import_react.default.createElement("a", { href: `#${targetKey}`, onClick: handleClick }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-item-label`, title: String(title) }, title)));

package/dist/cjs/Anchor/anchor.js

@@ -118,11 +118,17 @@ var Anchor = (0, import_react.forwardRef)((baseprops, ref) => {
   });
   const [anchorList, setAnchorList] = (0, import_react.useState)([]);
   const containerRef = (0, import_react.useRef)(null);
+  const activeKeyRef = (0, import_react.useRef)(mergedActiveKey);
+  (0, import_react.useEffect)(() => {
+    activeKeyRef.current = mergedActiveKey;
+  }, [mergedActiveKey]);
   const generateAnchorList = (0, import_react.useCallback)(() => {
     if (!auto || !name)
       return;
     const list = [];
-    const elements = document.querySelectorAll(`[data-anchor-group="${name}"]`);
+    const elements = document.querySelectorAll(
+      `[data-anchor-group="${CSS.escape(name)}"]`
+    );
     elements.forEach((element) => {
       const key = element.getAttribute("id") || "";
       const title = element.getAttribute("data-anchor-title") || "";
@@ -138,6 +144,12 @@ var Anchor = (0, import_react.forwardRef)((baseprops, ref) => {
       generateAnchorList();
     }
   }, [auto, generateAnchorList]);
+  const getTargetOffsetTop = (0, import_react.useCallback)((target) => {
+    const container = containerRef.current;
+    const containerTop = container === window ? 0 : container.getBoundingClientRect().top;
+    const currentScroll = container === window ? window.scrollY : container.scrollTop;
+    return currentScroll + (target.getBoundingClientRect().top - containerTop);
+  }, []);
   const handleScroll = (0, import_react.useCallback)(() => {
     const container = containerRef.current;
     if (!container)
@@ -150,30 +162,29 @@ var Anchor = (0, import_react.forwardRef)((baseprops, ref) => {
       const item = currentItems2[i];
       const target = document.getElementById(item.key);
       if (target) {
-        const targetTop = target.offsetTop;
+        const targetTop = getTargetOffsetTop(target);
         if (scrollTop + offsetTop >= targetTop) {
-          setMergedActiveKey(item.key);
-          onChange == null ? void 0 : onChange(item.key);
+          if (activeKeyRef.current !== item.key) {
+            setMergedActiveKey(item.key);
+            onChange == null ? void 0 : onChange(item.key);
+          }
           break;
         }
       }
     }
-  }, [auto, anchorList, items, offsetTop, onChange]);
+  }, [auto, anchorList, items, offsetTop, onChange, getTargetOffsetTop]);
   (0, import_react.useEffect)(() => {
-    const container = getContainer ? getContainer() : window;
-    containerRef.current = container;
-    if (container && typeof activeKey === "undefined") {
-      const debouncedScroll = (0, import_debounce.default)(handleScroll, 100);
-      container.addEventListener("scroll", debouncedScroll);
-      handleScroll();
-      return () => {
-        container.removeEventListener(
-          "scroll",
-          debouncedScroll
-        );
-      };
-    }
-  }, [getContainer, handleScroll, activeKey]);
+    const container = containerRef.current;
+    if (!container)
+      return;
+    const debouncedScroll = (0, import_debounce.default)(handleScroll, 100);
+    container.addEventListener("scroll", debouncedScroll);
+    handleScroll();
+    return () => {
+      container.removeEventListener("scroll", debouncedScroll);
+      debouncedScroll.cancel();
+    };
+  }, [getContainer, handleScroll]);
   const scrollToAnchor = (0, import_react.useCallback)(
     (key) => {
       const target = document.getElementById(key);
@@ -182,7 +193,7 @@ var Anchor = (0, import_react.forwardRef)((baseprops, ref) => {
       const container = containerRef.current;
       if (!container)
         return;
-      const targetTop = target.offsetTop - offsetTop;
+      const targetTop = getTargetOffsetTop(target) - offsetTop;
       if (container === window) {
         window.scrollTo({ top: targetTop, behavior: "smooth" });
       } else {
@@ -192,8 +203,11 @@ var Anchor = (0, import_react.forwardRef)((baseprops, ref) => {
         });
       }
     },
-    [offsetTop]
+    [offsetTop, getTargetOffsetTop]
   );
+  (0, import_react.useLayoutEffect)(() => {
+    containerRef.current = getContainer ? getContainer() : window;
+  }, [getContainer]);
   (0, import_react.useLayoutEffect)(() => {
     if (defaultActiveKey) {
       scrollToAnchor(defaultActiveKey);
@@ -220,7 +234,9 @@ var Anchor = (0, import_react.forwardRef)((baseprops, ref) => {
   const contextValue = {
     prefixCls,
     activeKey: mergedActiveKey,
-    onClick: handleItemClick
+    onClick: handleItemClick,
+    classNames,
+    styles
   };
   const renderNavArrow = () => {
     if (!affix || direction !== "vertical")

package/dist/cjs/Anchor/demo/auto.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+/**
+ * `auto` mode: the anchor list is generated from the DOM. Decorate each target
+ * section with the following attributes:
+ *   - data-anchor-group="<name>"  must match the Anchor's `name` prop
+ *   - id="<key>"                  used as the anchor key and scroll target
+ *   - data-anchor-title="<title>"  the nav label (required; a section without it is skipped)
+ *   - data-anchor-status="success | error | warning"  optional status badge color
+ */
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/cjs/Anchor/demo/auto.js

@@ -0,0 +1,85 @@
+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/Anchor/demo/auto.tsx
+var auto_exports = {};
+__export(auto_exports, {
+  default: () => auto_default
+});
+module.exports = __toCommonJS(auto_exports);
+var import_yee_c = require("../..");
+var import_react = __toESM(require("react"));
+var auto_default = () => {
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      id: "auto-container",
+      style: { display: "flex", height: 300, overflow: "auto" }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_yee_c.Anchor,
+      {
+        auto: true,
+        name: "article",
+        affix: false,
+        defaultActiveKey: "auto-intro",
+        getContainer: () => document.getElementById("auto-container")
+      }
+    ),
+    /* @__PURE__ */ import_react.default.createElement("div", { style: { flex: 1, padding: 20 } }, /* @__PURE__ */ import_react.default.createElement(
+      "section",
+      {
+        id: "auto-intro",
+        "data-anchor-group": "article",
+        "data-anchor-title": "Introduction",
+        style: { height: 300, background: "#f0f0f0", marginBottom: 20 }
+      },
+      "Introduction"
+    ), /* @__PURE__ */ import_react.default.createElement(
+      "section",
+      {
+        id: "auto-usage",
+        "data-anchor-group": "article",
+        "data-anchor-title": "Usage",
+        "data-anchor-status": "success",
+        style: { height: 300, background: "#e0e0e0", marginBottom: 20 }
+      },
+      "Usage"
+    ), /* @__PURE__ */ import_react.default.createElement(
+      "section",
+      {
+        id: "auto-caveats",
+        "data-anchor-group": "article",
+        "data-anchor-title": "Caveats",
+        "data-anchor-status": "warning",
+        style: { height: 300, background: "#d0d0d0" }
+      },
+      "Caveats"
+    ))
+  );
+};

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

@@ -53,7 +53,13 @@ var basic_default = () => {
     "div",
     {
       id: "basic-container",
-      style: { display: "flex", height: "100vh", overflow: "auto" }
+      style: {
+        position: "relative",
+        display: "flex",
+        height: "100vh",
+        overflow: "auto",
+        transform: "scale(1)"
+      }
     },
     /* @__PURE__ */ import_react.default.createElement(
       import_yee_c.Anchor,

package/dist/cjs/Anchor/demo/controlled.js

@@ -36,42 +36,54 @@ var import_yee_c = require("../..");
 var import_react = __toESM(require("react"));
 var controlled_default = () => {
   const [activeKey, setActiveKey] = (0, import_react.useState)("part1");
+  const containerRef = (0, import_react.useRef)(null);
   const onChange = (key) => {
     console.log("Anchor changed to:", key);
     setActiveKey(key);
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "200px" } }, /* @__PURE__ */ import_react.default.createElement(
-    import_yee_c.Anchor,
-    {
-      items: [
-        { key: "part1", title: "Part 1" },
-        { key: "part2", title: "Part 2" },
-        { key: "part3", title: "Part 3" }
-      ],
-      activeKey,
-      onChange
-    }
-  )), /* @__PURE__ */ import_react.default.createElement("div", { style: { flex: 1, padding: "20px" } }, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
-      id: "part1",
-      style: {
-        height: "300px",
-        backgroundColor: "#f0f0f0",
-        marginBottom: "20px"
-      }
+      style: { display: "flex", height: "200px", overflow: "auto" },
+      ref: containerRef
     },
-    "Part 1"
-  ), /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      id: "part2",
-      style: {
-        height: "300px",
-        backgroundColor: "#e0e0e0",
-        marginBottom: "20px"
+    /* @__PURE__ */ import_react.default.createElement(
+      import_yee_c.Anchor,
+      {
+        items: [
+          { key: "part1", title: "Part 1" },
+          { key: "part2", title: "Part 2" },
+          { key: "part3", title: "Part 3" }
+        ],
+        direction: "vertical",
+        affix: false,
+        activeKey,
+        onChange,
+        getContainer: () => containerRef.current
       }
-    },
-    "Part 2"
-  ), /* @__PURE__ */ import_react.default.createElement("div", { id: "part3", style: { height: "300px", backgroundColor: "#d0d0d0" } }, "Part 3")));
+    ),
+    /* @__PURE__ */ import_react.default.createElement("div", { style: { flex: 1, padding: "20px" } }, /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        id: "part1",
+        style: {
+          height: "300px",
+          backgroundColor: "#f0f0f0",
+          marginBottom: "20px"
+        }
+      },
+      "Part 1"
+    ), /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        id: "part2",
+        style: {
+          height: "300px",
+          backgroundColor: "#e0e0e0",
+          marginBottom: "20px"
+        }
+      },
+      "Part 2"
+    ), /* @__PURE__ */ import_react.default.createElement("div", { id: "part3", style: { height: "300px", backgroundColor: "#d0d0d0" } }, "Part 3"))
+  );
 };

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

@@ -119,4 +119,6 @@ export interface AnchorContextType {
     prefixCls: string;
     activeKey?: string;
     onClick?: (key: string) => void;
+    classNames?: Partial<Record<AnchorSemanticDOM, string>>;
+    styles?: Partial<Record<AnchorSemanticDOM, React.CSSProperties>>;
 }

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

@@ -53,7 +53,7 @@
           width: var(--yee-anchor-static-item-active-width);
           height: var(--yee-anchor-static-item-active-height);
           border: none;
-          border-radius: 0;
+          border-radius: var(--yee-anchor-static-item-active-width);
           background-color: var(--yee-anchor-item-active-font-color);
         }
       }
@@ -165,7 +165,7 @@
 
   &-item {
     position: relative;
-    padding: var(--yee-anchor-item-padding);
+    margin: var(--yee-anchor-item-padding);
     white-space: nowrap;
     color: var(--yee-anchor-item-font-color);
     cursor: pointer;

package/dist/cjs/Button/button.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type { ButtonProps } from './interface';
 import './style/index.less';
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export default Button;

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/Checkbox/checkbox-group.js

@@ -78,6 +78,7 @@ var CheckboxGroup = (baseprops) => {
     options,
     buttonStyle,
     disabled,
+    layout = "horizontal",
     onChange
   } = props;
   const [mergedValue, setMergedValue] = (0, import_useMergedState.default)([], {
@@ -86,6 +87,7 @@ var CheckboxGroup = (baseprops) => {
   });
   const cls = (0, import_clsx.default)(
     prefixCls,
+    [`${prefixCls}-${layout}`],
     {
       [`${prefixCls}-${buttonStyle}`]: buttonStyle,
       [`${prefixCls}-disabled`]: disabled
@@ -110,7 +112,8 @@ var CheckboxGroup = (baseprops) => {
       }, option), {
         checked: mergedValue.includes(option.value),
         key: option.value || index
-      })
+      }),
+      option.label
     ))
   ));
 };

package/dist/cjs/Checkbox/demo/group.js

@@ -51,6 +51,7 @@ var group_default = () => {
     {
       value,
       onChange,
+      layout: "vertical",
       options: [
         { value: "A", label: "Option A" },
         { value: "B", label: "Option B" },

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

@@ -93,6 +93,11 @@ export interface CheckboxGroupProps {
      * Options
      */
     options?: Array<CheckboxOption>;
+    /**
+     * group layout
+     * @default horizontal
+     */
+    layout?: 'horizontal' | 'vertical';
     /**
      * Callback when value changes
      */

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

@@ -33,6 +33,10 @@
       background-color: var(--yee-checkbox-checked-bg-color);
       border-color: var(--yee-checkbox-checked-border-color);
 
+      --ye-checkbox-checked-border-color: var(
+        --yee-checkbox-checked-after-border-color
+      );
+
       &::after {
         position: absolute;
         top: 50%;
@@ -41,7 +45,7 @@
         width: var(--yee-checkbox-checked-after-width);
         height: var(--yee-checkbox-checked-after-height);
         border: var(--yee-checkbox-checked-after-border-width) solid
-          var(--yee-checkbox-checked-after-border-color);
+          var(--ye-checkbox-checked-border-color);
         border-top: 0;
         transform: rotate(45deg) scale(1) translate(-50%, -50%);
         content: '';
@@ -59,6 +63,14 @@
       border-color: var(--yee-checkbox-border-color);
     }
 
+    &&-checked {
+      @{pls}-inner {
+        --ye-checkbox-checked-border-color: var(
+          --yee-checkbox-disabled-checked-border-color
+        );
+      }
+    }
+
     @{pls}-input {
       display: none;
     }
@@ -100,4 +112,12 @@
       }
     }
   }
+
+  &-group {
+    &-vertical {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+  }
 }