@rainbow-oh/yee-c 0.1.0 → 0.3.0

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

@@ -0,0 +1,104 @@
+@pls: .yee-segmented;
+
+@{pls} {
+  display: inline-flex;
+  box-sizing: border-box;
+  padding: var(--yee-segmented-padding);
+  border-radius: var(--yee-segmented-border-radius);
+  background-color: var(--yee-segmented-bg-color);
+
+  &-block {
+    display: flex;
+    width: 100%;
+
+    @{pls}-item {
+      flex: 1;
+      justify-content: center;
+    }
+  }
+
+  &-disabled {
+    cursor: not-allowed;
+  }
+
+  &-item {
+    position: relative;
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: var(--yee-segmented-item-padding);
+    border-radius: var(--yee-segmented-item-border-radius);
+    font-size: var(--yee-segmented-font-size);
+    color: var(--yee-segmented-item-color);
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    transition: color var(--yee-segmented-transition-duration) linear;
+
+    &:hover:not(&-disabled):not(&-selected) {
+      color: var(--yee-segmented-item-hover-color);
+    }
+  }
+
+  &-item-inner {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--yee-segmented-item-gap);
+  }
+
+  &-item-icon {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &-item-selected {
+    color: var(--yee-segmented-item-selected-color);
+    cursor: default;
+  }
+
+  &-item-disabled {
+    color: var(--yee-segmented-item-disabled-color);
+    cursor: not-allowed;
+  }
+
+  &-thumb {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    border-radius: var(--yee-segmented-thumb-border-radius);
+    background-color: var(--yee-segmented-thumb-bg-color);
+    box-shadow: var(--yee-segmented-thumb-box-shadow);
+  }
+
+  &-input {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    cursor: inherit;
+  }
+
+  &-item:has(&-input:focus-visible) {
+    box-shadow: 0 0 0 2px var(--yee-primary-color);
+  }
+
+  &-small {
+    @{pls}-item {
+      padding: var(--yee-segmented-item-small-padding);
+      font-size: var(--yee-segmented-font-small-size);
+    }
+  }
+
+  &-large {
+    @{pls}-item {
+      padding: var(--yee-segmented-item-large-padding);
+      font-size: var(--yee-segmented-font-large-size);
+    }
+  }
+}

package/dist/cjs/Select/option.js

@@ -36,7 +36,7 @@ var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_options = require("./options");
 var Option = (props) => {
-  const { label, value, disabled, title } = props;
+  const { label, value, disabled, title, dataTestId } = props;
   const { prefixCls, selectedKeys, focusedKey, onSelect } = (0, import_react.useContext)(import_options.OptionsCtx);
   const handleClick = (e) => {
     if (!disabled) {
@@ -61,7 +61,8 @@ var Option = (props) => {
       },
       role: "option",
       tabIndex: disabled ? void 0 : 0,
-      title: htmlTitle
+      title: htmlTitle,
+      "data-testid": dataTestId
     },
     label
   );

package/dist/cjs/Select/options.js

@@ -77,6 +77,7 @@ var Options = (0, import_react.forwardRef)((props, ref) => {
     popupStyle,
     selectedKeys,
     focusedKey,
+    dataTestId,
     onSelect
   } = _a, rest = __objRest(_a, [
     "prefixCls",
@@ -85,6 +86,7 @@ var Options = (0, import_react.forwardRef)((props, ref) => {
     "popupStyle",
     "selectedKeys",
     "focusedKey",
+    "dataTestId",
     "onSelect"
   ]);
   const componentRef = ref || (0, import_react.useRef)(null);
@@ -101,7 +103,13 @@ var Options = (0, import_react.forwardRef)((props, ref) => {
       {
         value: { prefixCls, selectedKeys, focusedKey, onSelect }
       },
-      options.map((option) => /* @__PURE__ */ import_react.default.createElement(import_option.default, __spreadProps(__spreadValues({}, option), { key: option.value })))
+      options.map((option, index) => /* @__PURE__ */ import_react.default.createElement(
+        import_option.default,
+        __spreadProps(__spreadValues({}, option), {
+          key: option.value,
+          dataTestId: `${dataTestId}-${index}`
+        })
+      ))
     )
   );
 });

package/dist/cjs/Select/select.js

@@ -193,6 +193,7 @@ var Select = (baseprops) => {
       options: filteredOpts,
       focusedKey,
       selectedKeys: mergedValue,
+      dataTestId: rest["data-testid"],
       onSelect: handleSelect,
       onClose: () => setOpen(false),
       ref: popupRef

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

@@ -35,7 +35,7 @@ module.exports = __toCommonJS(basic_exports);
 var import_yee_c = require("../..");
 var import_react = __toESM(require("react"));
 var basic_default = () => {
-  return /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { direction: "vertical", gap: 16, style: { width: "100%" } }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Card, { title: "Basic Placeholder" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Skeleton, null)), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Card, { title: "With Avatar" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Skeleton, { avatar: true, title: true, paragraph: { rows: 2 } })), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Card, { title: "Title and Paragraph" }, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Card, { title: "Basic Placeholder" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Skeleton, null)), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Card, { title: "With Avatar" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Skeleton, { avatar: true, title: true, paragraph: { rows: 2 } })), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Card, { title: "Title and Paragraph" }, /* @__PURE__ */ import_react.default.createElement(
     import_yee_c.Skeleton,
     {
       avatar: false,

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

@@ -26,6 +26,10 @@ export interface SpaceProps extends React.HTMLAttributes<HTMLDivElement> {
      * Alignment
      */
     align?: 'center' | 'start' | 'end' | 'baseline' | 'flex-start';
+    /***
+     * Justify content
+     * */
+    justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between';
     /**
      * Whether to take up the entire row
      */

package/dist/cjs/Space/space.js

@@ -75,6 +75,7 @@ var Space = (0, import_react.forwardRef)((baseprops, ref) => {
     gap = 16,
     direction = "horizontal",
     align = direction === "horizontal" ? "center" : void 0,
+    justify,
     wrap,
     className,
     style,
@@ -87,6 +88,7 @@ var Space = (0, import_react.forwardRef)((baseprops, ref) => {
     "gap",
     "direction",
     "align",
+    "justify",
     "wrap",
     "className",
     "style",
@@ -113,24 +115,41 @@ var Space = (0, import_react.forwardRef)((baseprops, ref) => {
     if (!children) {
       return null;
     }
+    const loop = (childs2) => {
+      let res = [];
+      childs2.forEach((child, index) => {
+        const isItem = import_react.default.isValidElement(child) && child.type.isSpaceItem;
+        const itemClassName = isItem ? child.props.className : void 0;
+        const itemStyle = isItem ? child.props.style : void 0;
+        const itemChildren = isItem ? child.props.children : child;
+        if (import_react.default.isValidElement(child) && child.type === import_react.default.Fragment) {
+          res = res.concat(
+            loop(import_react.default.Children.toArray(child.props.children))
+          );
+        } else {
+          res.push(
+            /* @__PURE__ */ import_react.default.createElement(
+              "div",
+              {
+                className: (0, import_clsx.default)(
+                  `${prefixCls}-item`,
+                  classNames == null ? void 0 : classNames.item,
+                  itemClassName
+                ),
+                style: __spreadValues(__spreadValues({}, styles == null ? void 0 : styles.item), itemStyle),
+                key: index
+              },
+              itemChildren
+            )
+          );
+        }
+      });
+      return res;
+    };
     const childs = import_react.default.Children.toArray(children).filter(
       (child) => child !== null && child !== void 0
     );
-    return childs.map((child, index) => {
-      const isItem = import_react.default.isValidElement(child) && child.type.isSpaceItem;
-      const itemClassName = isItem ? child.props.className : void 0;
-      const itemStyle = isItem ? child.props.style : void 0;
-      const itemChildren = isItem ? child.props.children : child;
-      return /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          className: (0, import_clsx.default)(`${prefixCls}-item`, classNames == null ? void 0 : classNames.item, itemClassName),
-          style: __spreadValues(__spreadValues({}, styles == null ? void 0 : styles.item), itemStyle),
-          key: index
-        },
-        itemChildren
-      );
-    });
+    return loop(childs);
   };
   const packed = pack();
   return /* @__PURE__ */ import_react.default.createElement(
@@ -140,7 +159,8 @@ var Space = (0, import_react.forwardRef)((baseprops, ref) => {
       style: __spreadValues({
         width: block ? "100%" : void 0,
         gap: gap + "px",
-        alignItems: getAlign()
+        alignItems: getAlign(),
+        justifyContent: justify
       }, style),
       ref: componentRef
     }),

package/dist/cjs/Spin/spin.js

@@ -125,7 +125,8 @@ var Spin = (baseprops) => {
         classNames,
         styles,
         size,
-        variant
+        variant,
+        color
       }
     ),
     tip && /* @__PURE__ */ import_react.default.createElement(

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

@@ -35,5 +35,5 @@ module.exports = __toCommonJS(basic_exports);
 var import_yee_c = require("../..");
 var import_react = __toESM(require("react"));
 var basic_default = () => {
-  return /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 300 } }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Splitter, null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Splitter.Item, null, /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 16, backgroundColor: "#f0f0f0" } }, "Left Panel")), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Splitter.Item, null, /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 16, backgroundColor: "#e0e0e0" } }, "Right Panel"))));
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 300 } }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Splitter, null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Splitter.Item, null, /* @__PURE__ */ import_react.default.createElement("div", { style: { margin: 8, padding: 16, backgroundColor: "#f0f0f0" } }, "Left Panel")), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Splitter.Item, null, /* @__PURE__ */ import_react.default.createElement("div", { style: { margin: 8, padding: 16, backgroundColor: "#e0e0e0" } }, "Right Panel"))));
 };

package/dist/cjs/Splitter/demo/vertical.js

@@ -35,5 +35,27 @@ module.exports = __toCommonJS(vertical_exports);
 var import_yee_c = require("../..");
 var import_react = __toESM(require("react"));
 var vertical_default = () => {
-  return /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 300 } }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Splitter, { layout: "vertical" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Splitter.Item, null, /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 16, backgroundColor: "#f0f0f0" } }, "Top Panel")), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Splitter.Item, null, /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 16, backgroundColor: "#e0e0e0" } }, "Bottom Panel"))));
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 500 } }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Splitter, { layout: "vertical" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Splitter.Item, { size: 250 }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: {
+        marginBottom: 8,
+        padding: 16,
+        backgroundColor: "#f0f0f0",
+        height: "100%"
+      }
+    },
+    "Top Panel"
+  )), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Splitter.Item, { size: 250 }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: {
+        marginTop: 8,
+        padding: 16,
+        backgroundColor: "#e0e0e0",
+        height: "100%"
+      }
+    },
+    "Bottom Panel"
+  ))));
 };

package/dist/cjs/Splitter/index.d.ts

@@ -1,6 +1,6 @@
 import InternalSplitter from './splitter';
 import Item from './splitter-item';
-export type { SplitterItemProps, SplitterProps } from './interface';
+export type { SplitterItemProps, PanelRect as SplitterPanelRect, SplitterProps, } from './interface';
 type SplitterType = typeof InternalSplitter & {
     Item: typeof Item;
 };

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

@@ -1,5 +1,12 @@
 /// <reference types="react" />
 import type { DataAttributeProps } from '../utils/types';
+export type PanelRect = {
+    type: 'default' | 'percent' | 'auto';
+    size: number;
+    currentSize: number;
+    min?: string | number;
+    max?: string | number;
+};
 export interface SplitterItemProps {
     /**
      * custom item element class name prefix
@@ -67,14 +74,13 @@ export interface SplitterProps extends DataAttributeProps {
     /**
      * children
      */
-    children?: React.ReactElement[];
+    children?: Array<React.ReactElement | null>;
     /**
      * display border or not
      * */
     bordered?: boolean;
-    itemPadding?: number | string;
     /**
      * panel size change event
      * */
-    onResize?: (sizes: number[]) => void;
+    onResize?: (sizes: PanelRect[]) => void;
 }

package/dist/cjs/Splitter/splitter-handler.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PanelRect } from './splitter';
+import type { PanelRect } from './interface';
 interface SplitterHandlerProps {
     layout: 'horizontal' | 'vertical';
     resizable?: boolean;

package/dist/cjs/Splitter/splitter-handler.js

@@ -67,7 +67,7 @@ var SplitterHandler = ({
   const cref = (0, import_react.useRef)(null);
   const handler = (0, import_react.useRef)(null);
   const { refs } = (0, import_react.useContext)(import_splitter.SplitterWrapperCtx);
-  const { prefixCls } = (0, import_react.useContext)(import_splitter.SplitterCtx);
+  const { prefixCls, onResize } = (0, import_react.useContext)(import_splitter.SplitterCtx);
   const status = records[index - 1] || {};
   const next = records[index] || {};
   const onMove = (dis) => {
@@ -104,6 +104,7 @@ var SplitterHandler = ({
         currentSize: s
       });
       newState[index] = __spreadProps(__spreadValues({}, newState[index]), { size: e, currentSize: e });
+      onResize == null ? void 0 : onResize(newState);
       return newState;
     });
   };

package/dist/cjs/Splitter/splitter.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { SplitterProps } from './interface';
+import type { PanelRect, SplitterProps } from './interface';
 import './style/index.less';
 type SplitterWrapperCtxType = {
     refs: {
@@ -8,16 +8,9 @@ type SplitterWrapperCtxType = {
 };
 type SplitterCtxType = {
     prefixCls: string;
-    onResize?: (sizes: number[]) => void;
+    onResize?: (sizes: PanelRect[]) => void;
 };
 export declare const SplitterWrapperCtx: React.Context<SplitterWrapperCtxType>;
 export declare const SplitterCtx: React.Context<SplitterCtxType>;
-export type PanelRect = {
-    type: 'default' | 'percent' | 'auto';
-    size: number;
-    currentSize: number;
-    min?: string | number;
-    max?: string | number;
-};
 declare const Splitter: React.ForwardRefExoticComponent<SplitterProps & React.RefAttributes<HTMLDivElement>>;
 export default Splitter;

package/dist/cjs/Splitter/splitter.js

@@ -165,58 +165,61 @@ var Wrapper = (_a) => {
   const refs = (0, import_react.useRef)({});
   const arr = import_react.default.Children.toArray(children);
   import_react.default.Children.forEach(children, (child, index) => {
-    const n = index + 1;
-    const { style } = child.props || {};
-    let currentSize;
-    let min = void 0;
-    let max = void 0;
-    if (itemsSize && itemsSize[index]) {
-      ({ currentSize, min, max } = itemsSize[index]);
-    }
-    wrappered.push(
-      import_react.default.cloneElement(child, {
-        style: __spreadProps(__spreadValues({}, style), {
-          // If there is a border or other size-related design, it may cause calculation issues
-          flexBasis: currentSize
-        }),
-        min,
-        max,
-        index: n,
-        key: n,
-        ref: (el) => {
-          refs.current[`item${n}`] = {
-            el,
-            props: child.props,
-            size: { min, max }
-          };
-        }
-      })
-    );
-    const next = arr[index + 1];
-    if (!next || !import_react.default.isValidElement(next)) {
-      return;
-    }
-    const { flexable, expandable } = child.props || {};
-    const { expandable: nextExpandable } = next.props || {};
-    const _expandable = { start: false, end: false };
-    if (expandable) {
-      _expandable.start = true;
-    }
-    if (nextExpandable) {
-      _expandable.end = true;
-    }
-    wrappered.push(
-      /* @__PURE__ */ import_react.default.createElement(
-        import_splitter_handler.default,
-        __spreadProps(__spreadValues({}, props), {
+    if (import_react.default.isValidElement(child)) {
+      const n = index + 1;
+      const { style } = child.props || {};
+      let currentSize;
+      let min = void 0;
+      let max = void 0;
+      if (itemsSize && itemsSize[index]) {
+        ({ currentSize, min, max } = itemsSize[index]);
+      }
+      wrappered.push(
+        import_react.default.cloneElement(child, {
+          // @ts-ignore
+          style: __spreadProps(__spreadValues({}, style), {
+            // If there is a border or other size-related design, it may cause calculation issues
+            flexBasis: currentSize
+          }),
+          min,
+          max,
           index: n,
-          flexable,
-          expandable: _expandable,
-          onClick,
-          key: `handler-${n}`
+          key: n,
+          ref: (el) => {
+            refs.current[`item${n}`] = {
+              el,
+              props: child.props,
+              size: { min, max }
+            };
+          }
         })
-      )
-    );
+      );
+      const next = arr[index + 1];
+      if (!next || !import_react.default.isValidElement(next)) {
+        return;
+      }
+      const { flexable, expandable } = child.props || {};
+      const { expandable: nextExpandable } = next.props || {};
+      const _expandable = { start: false, end: false };
+      if (expandable) {
+        _expandable.start = true;
+      }
+      if (nextExpandable) {
+        _expandable.end = true;
+      }
+      wrappered.push(
+        /* @__PURE__ */ import_react.default.createElement(
+          import_splitter_handler.default,
+          __spreadProps(__spreadValues({}, props), {
+            index: n,
+            flexable,
+            expandable: _expandable,
+            onClick,
+            key: `handler-${n}`
+          })
+        )
+      );
+    }
   });
   return /* @__PURE__ */ import_react.default.createElement(SplitterWrapperCtx.Provider, { value: { refs } }, wrappered);
 };

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

@@ -10,8 +10,18 @@
       var(--yee-splitter-border-color);
   }
 
+  &-horizontal {
+    @{pls}-handler {
+      cursor: e-resize;
+    }
+  }
+
   &-vertical {
     flex-direction: column;
+
+    @{pls}-handler {
+      cursor: n-resize;
+    }
   }
 }
 
@@ -77,8 +87,19 @@
       transition:
         background 0.2s ease-in-out,
         opacity 0.2s ease-in-out;
+      border-radius: 2px;
       content: '';
     }
+
+    &:hover {
+      &::after {
+        background-color: color-mix(
+          in srgb,
+          var(--yee-splitter-handler-color),
+          black 20%
+        );
+      }
+    }
   }
 
   &-flexable {

package/dist/cjs/Steps/step.js

@@ -86,7 +86,7 @@ var Step = (props) => {
     if (type === "navigation") {
       return /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-item-serial` }, index + 1);
     }
-    return index < current ? /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-item-serial ${prefixCls}-item-icon-check` }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Check, null)) : /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-item-serial` }, index + 1);
+    return index < current ? /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-item-serial ${prefixCls}-item-icon-check` }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Check, { size: 18, strokeWidth: 3 })) : /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-item-serial` }, index + 1);
   }, [icon, current, index, mergedStatus, dot, type, prefixCls]);
   const cls = (0, import_clsx.default)(
     `${prefixCls}-item`,

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

@@ -142,7 +142,7 @@
         background-color: var(--yee-steps-serial-done-bg-color, #fff);
         background-clip: padding-box;
         border-color: var(--yee-steps-serial-done-border-color, #1890ff);
-        color: var(--yee-steps-serial-done-color, #1890ff);
+        color: var(--yee-steps-step-done-color);
       }
 
       @{pls}-item-title {
@@ -283,9 +283,15 @@
       margin-bottom: 8px;
       padding-left: 0;
 
+      &-title {
+        &::after {
+          display: none;
+        }
+      }
+
       &-content {
         align-items: flex-start;
-        margin-left: 8px;
+        margin-left: 12px;
       }
 
       &-icon {

package/dist/cjs/Switch/demo/content.js

@@ -35,5 +35,26 @@ module.exports = __toCommonJS(content_exports);
 var import_yee_c = require("../..");
 var import_react = __toESM(require("react"));
 var content_default = () => {
-  return /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { direction: "vertical" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Switch, { checkedChildren: "ON", unCheckedChildren: "OFF" }), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Switch, { checkedChildren: "On", unCheckedChildren: "Off" }), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Switch, { checkedChildren: "✅", unCheckedChildren: "❌" }));
+  return /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { direction: "vertical" }, /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Switch,
+    {
+      checkedChildren: "ON",
+      unCheckedChildren: "OFF",
+      style: { width: 60 }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Switch,
+    {
+      checkedChildren: "On",
+      unCheckedChildren: "OFF",
+      style: { width: 60 }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Switch,
+    {
+      checkedChildren: "✅",
+      unCheckedChildren: "❌",
+      style: { width: 48 }
+    }
+  ));
 };

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

@@ -15,6 +15,10 @@
   cursor: pointer;
   transition: background 0.2s linear;
 
+  &-spin {
+    position: absolute;
+  }
+
   &-handle {
     position: absolute;
     top: var(--yee-switch-handle-top);
@@ -67,6 +71,12 @@
         var(--m-switch-handle-size) + var(--yee-switch-inner-padding-offset)
       );
     }
+
+    @{pls}-spin {
+      inset-inline-end: calc(
+        var(--m-switch-handle-size) + var(--yee-switch-handle-offset)
+      );
+    }
   }
 
   &-unchecked {
@@ -77,6 +87,12 @@
         var(--m-switch-handle-size) + var(--yee-switch-inner-padding-offset)
       );
     }
+
+    @{pls}-spin {
+      padding-inline-start: calc(
+        var(--m-switch-handle-size) + var(--yee-switch-inner-padding-offset)
+      );
+    }
   }
 
   --m-switch-handle-size: var(--yee-switch-handle-size);