@para-ui/core 5.0.0-beta.8 → 5.0.0

package/lib/Switch/component.json

@@ -0,0 +1,207 @@
+{
+    "name": "Switch",
+    "category": "Data Entry",
+    "description": "开关选择器，表示两种相互对立的状态间的切换",
+    "semantic": {
+        "intent": [
+            "功能开关",
+            "状态切换",
+            "即时生效"
+        ],
+        "useCases": [
+            "深色模式",
+            "消息推送",
+            "Wi-Fi 开关"
+        ],
+        "riskLevel": "low"
+    },
+    "variants": {
+        "default": {
+            "meaning": "标准开关(向后兼容同义,与 medium 视觉等价)"
+        },
+        "medium": {
+            "meaning": "标准开关(2026-05-08 跨组件命名 epic §3.1 选项 B 新增,与 default 视觉等价,推荐新代码使用)"
+        },
+        "small": {
+            "meaning": "小号开关"
+        }
+    },
+    "states": [
+        "checked",
+        "unchecked",
+        "disabled",
+        "loading"
+    ],
+    "idealProps": {
+        "size": {
+            "type": "enum",
+            "values": [
+                "small",
+                "medium",
+                "default"
+            ],
+            "default": "default",
+            "description": "开关大小。三档 small / medium / default(2026-05-08 跨组件命名 epic §3.1 选项 B 实施,medium 为新增同义视觉档,与 default 视觉等价;'default' 为向后兼容同义,新代码建议用 'medium')。**当前状态(R23):'small' 视觉档已生效**(min-width 28 / height 14,见 src/Switch/index.tsx clsx),与 'default' 视觉真正区分(BREAKING-CHANGES §A4 已落地)"
+        },
+        "checked": {
+            "type": "boolean",
+            "description": "受控模式：是否选中。与 onChange 配合使用实现受控 Switch"
+        },
+        "defaultChecked": {
+            "type": "boolean",
+            "description": "非受控模式：初始是否选中（不传 checked 时生效）"
+        },
+        "onChange": {
+            "type": "function",
+            "signature": "(checked: boolean, event: React.MouseEvent | React.KeyboardEvent) => void",
+            "description": "切换时回调。第一个参数 checked 是切换后的新状态（true=开 / false=关），类型是 boolean。❌ 常见错误：onChange={(value) => ...} 漏类型标注会引发 TS7006；正确写法：onChange={(checked: boolean) => setState(checked)}"
+        },
+        "onClick": {
+            "type": "function",
+            "signature": "(checked: boolean, event: React.MouseEvent | React.KeyboardEvent) => void",
+            "description": "点击时回调（包含禁用态）。参数同 onChange"
+        },
+        "checkedChildren": {
+            "type": "ReactNode",
+            "description": "选中时开关内显示的内容(渲染在 **轨道(track)内** 不在圆球内 · rc-switch 标准行为)"
+        },
+        "unCheckedChildren": {
+            "type": "ReactNode",
+            "description": "非选中时开关内显示的内容(同 checkedChildren · 渲染在轨道内)"
+        },
+        "loading": {
+            "type": "boolean",
+            "default": false,
+            "description": "加载中状态。开关不可点击并显示 loading 图标"
+        },
+        "loadingTitle": {
+            "type": "string",
+            "description": "loading 状态下 Tooltip 提示文案（默认国际化文案）"
+        },
+        "disabled": {
+            "type": "boolean",
+            "default": false,
+            "description": "是否禁用"
+        },
+        "autoFocus": {
+            "type": "boolean",
+            "description": "自动获得焦点"
+        },
+        "label": {
+            "type": "ReactNode",
+            "description": "开关标题。传入后开关外层渲染 Label 容器"
+        },
+        "desc": {
+            "type": "ReactNode",
+            "description": "开关描述文本(默认 labelPlacement=top 时垂直排在 label 下方;同行排布需 labelPlacement=start/end)"
+        },
+        "labelPlacement": {
+            "type": "enum",
+            "values": ["top", "bottom", "start", "end"],
+            "default": "top",
+            "description": "标题相对于开关的位置。LTR 语义:start=左侧 / end=右侧 / top=上方 / bottom=下方"
+        },
+        "descPlacement": {
+            "type": "enum",
+            "values": ["start", "end"],
+            "default": "start",
+            "description": "描述相对于标题的位置"
+        },
+        "supText": {
+            "type": "ReactNode",
+            "description": "辅助文本，渲染在开关旁"
+        },
+        "error": {
+            "type": "boolean",
+            "default": false,
+            "description": "是否显示错误状态(红色错误样式,配合 supText / desc 使用);仅 UI 反馈,不阻止 onChange"
+        },
+        "required": {
+            "type": "boolean",
+            "default": false,
+            "description": "是否必填(配合 label 渲染红色 * 标记;仅 UI 提示,实际校验需配合外部 form)"
+        },
+        "labelTooltip": {
+            "type": "LabelTooltipProps",
+            "shape": "{ tooltip: ReactNode, ... }",
+            "description": "标题帮助提示配置。**字段名是 `tooltip`** · 与 disabledTooltip 的 `title` 字段名不同"
+        },
+        "descTooltip": {
+            "type": "LabelTooltipProps",
+            "shape": "{ tooltip: ReactNode, ... }",
+            "description": "描述帮助提示配置。同 labelTooltip · 字段名 `tooltip`"
+        },
+        "disabledTooltip": {
+            "type": "TooltipProps",
+            "shape": "{ title: ReactNode, placement?: string, arrow?: boolean, ... }",
+            "description": "禁用状态下 Tooltip 提示配置。**字段名是 `title`**(完整 TooltipProps shape,与 labelTooltip.tooltip 字段名不同 · 易混淆点)"
+        },
+        "className": {
+            "type": "string",
+            "description": "自定义类名"
+        },
+        "style": {
+            "type": "React.CSSProperties",
+            "description": "自定义样式"
+        }
+    },
+    "do": [
+        "表示立刻生效的状态切换",
+        "使用 loading 状态处理异步切换（loading=true 时自动禁用点击）",
+        "受控模式：checked + onChange 配合；非受控模式：defaultChecked（不传 checked）",
+        "size='medium' 是新代码推荐写法（与 'default' 视觉等价，'default' 是向后兼容同义词）"
+    ],
+    "dont": [
+        "用 Switch 替代 Checkbox（Switch 通常 imply 立即生效）",
+        "Switch 内部文案过长（checkedChildren / unCheckedChildren 渲染在轨道内，文案超出影响宽度）",
+        "混用受控和非受控——同时传 checked 和 defaultChecked 时以 checked 为准，defaultChecked 被忽略"
+    ],
+    "events": {
+        "onChange": {
+            "signature": "(checked: boolean, event: React.MouseEvent | React.KeyboardEvent) => void",
+            "asyncSupported": false,
+            "examples": [
+                "受控用法：onChange={(checked) => setEnabled(checked)}",
+                "异步切换：onChange={async (checked) => { setLoading(true); await save(checked); setLoading(false); }}",
+                "checked 是切换后的新状态（true=开 / false=关），不是 event"
+            ],
+            "commonMistakes": [
+                "按原生 input 习惯写 onChange={(e) => setState(e.target.checked)}——Switch.onChange 第一参是 boolean，不是 event",
+                "loading=true 时期望 onChange 触发——loading 状态下 disabled 属性自动追加，onClick/onChange 均不触发",
+                "忘记第二参 event 的类型是 MouseEvent | KeyboardEvent（键盘 Enter/Space 也触发 onChange）"
+            ]
+        },
+        "onClick": {
+            "signature": "(checked: boolean, event: React.MouseEvent | React.KeyboardEvent) => void",
+            "asyncSupported": false,
+            "examples": [
+                "与 onChange 区别：onClick 包含禁用态点击，onChange 只在非禁用时触发",
+                "onClick={(checked) => trackEvent('switch_click', { value: checked })}"
+            ],
+            "commonMistakes": [
+                "用 onClick 做状态更新——应用 onChange；onClick 仅用于点击埋点等副作用"
+            ]
+        }
+    },
+    "typescriptPitfalls": [
+        {
+            "issue": "size='default' 是向后兼容同义词，新代码建议用 'medium' 避免歧义",
+            "wrong": "size='large'  // Switch 没有 'large'，只有 'small'/'medium'/'default'",
+            "right": "size='medium'  // 标准尺寸；'default' 等价于 'medium' 仅保留向后兼容"
+        },
+        {
+            "issue": "labelTooltip 和 disabledTooltip 字段名不同：labelTooltip 用 tooltip 字段，disabledTooltip 用 title 字段",
+            "wrong": "disabledTooltip={{ tooltip: '无权限' }}  // disabledTooltip 字段是 title 不是 tooltip",
+            "right": "disabledTooltip={{ title: '无权限' }}  // TooltipProps 格式；labelTooltip={{ tooltip: '帮助' }}"
+        },
+        {
+            "issue": "onChange 第一参类型是 boolean，直接传给期望 string 或 number 的 state setter 报 TS 错",
+            "wrong": "onChange={setStatus}  // setStatus: (v: string) => void，boolean 不兼容 string",
+            "right": "onChange={(checked) => setStatus(checked ? 'on' : 'off')}  // 显式转换"
+        }
+    ],
+    "mapping": {
+        "realComponent": "Switch",
+        "adapter": null
+    }
+}

package/lib/Switch/index.css

@@ -1 +1 @@
-@charset "UTF-8";.paraui-v4-switch{position:relative;display:inline-block;width:32px;height:16px;vertical-align:middle;background-color:transparent;border:0;cursor:pointer;transition:all .2s;-webkit-user-select:none;user-select:none}.paraui-v4-switch .component-switch{border:none;cursor:pointer}.paraui-v4-switch:before{position:absolute;top:0;left:0;width:100%;height:16px;border-radius:8px;background-color:#a1a8b3;content:"";transition:all .2s}a .paraui-v4-switch:focus{outline:0;box-shadow:none}.paraui-v4-switch.component-switch-checked:focus{box-shadow:none}.paraui-v4-switch:focus:hover{box-shadow:none}.paraui-v4-switch.component-switch-checked:before{background-color:#2e65e6}.paraui-v4-switch-loading *,.paraui-v4-switch.component-switch-disabled *{box-shadow:none}.paraui-v4-switch-loading .component-switch-inner:before,.paraui-v4-switch.component-switch-disabled .component-switch-inner:before{position:absolute;top:0;left:0;width:100%;height:16px;background-color:#ffffff80;content:"";z-index:100}.paraui-v4-switch .component-switch-inner{display:block;margin:0 7px 0 25px;font-size:14px;transition:margin .2s}.paraui-v4-switch.component-switch-checked .component-switch-inner{margin:0 25px 0 7px}.paraui-v4-switch .component-switch-handle{position:absolute;top:2px;left:2px;width:12px;height:12px;transition:all .2s ease-in-out}.paraui-v4-switch .component-switch-handle:before{position:absolute;inset:0;background-color:#fff;border-radius:9px;box-shadow:none;transition:all .2s ease-in-out;content:""}.paraui-v4-switch.component-switch-checked .component-switch-handle{left:calc(100% - 14px)}.paraui-v4-switch.component-switch-checked .component-switch-handle:before{background-color:#fff}.paraui-v4-switch:not(.paraui-v4-switch-disabled):active .component-switch-handle:before{right:-30%;left:0}.paraui-v4-switch:not(.paraui-v4-switch-disabled):active.component-switch-checked .component-switch-handle:before{right:0;left:-30%}.paraui-v4-switch .component-switch-loading-icon{position:relative;top:1px;color:#2e65e6;font-size:10px;vertical-align:top;animation:switchLoadingCircle 1s infinite linear}.paraui-v4-switch.component-switch-checked .component-switch-loading-icon{color:#2e65e6}.paraui-v4-switch-small{min-width:28px;height:14px;line-height:14px}.paraui-v4-switch-small .component-switch-inner{margin:0 5px 0 18px;font-size:14px}.paraui-v4-switch-small .component-switch-handle{width:12px;height:12px;top:3px;left:2px}.paraui-v4-switch-small .component-switch-loading-icon{top:1.5px;font-size:9px}.paraui-v4-switch-small.component-switch-checked .component-switch-inner{margin:0 18px 0 5px}.paraui-v4-switch-small.component-switch-checked .component-switch-handle{left:calc(100% - 14px)}@keyframes switchLoadingCircle{to{transform:rotate(360deg)}}.paraui-v4-switch-disabled:before{background-color:#a1a8b3}.paraui-v4-switch-disabled.component-switch-checked:before{background-color:#97b2f2}.component-label-box{display:flex;align-items:center}.component-label-box .sup-text{color:#5c6573;font-size:14px;margin-left:10px;line-height:16px}.component-label-box .sup-text>a{text-decoration:none;cursor:pointer;color:#2e65e6}.component-label-box .sup-text>a:hover{color:#5783eb}.paraui-v4-switch-label{display:inline-flex;align-items:flex-end}.paraui-v4-switch-label .component-disabled-text{color:#5c6573}.paraui-v4-switch-label .component-desc-text{margin-bottom:0;margin-right:10px;line-height:16px;color:#1d2126}.paraui-v4-switch-label .component-desc-text .paraui-v4-help{line-height:1}.paraui-v4-switch-label .component-desc-text .paraui-v4-help svg{top:0}.paraui-v4-switch-label .paraui-v4-label-text-container{display:flex;flex-direction:column}.paraui-v4-switch-desc-end{flex-direction:row-reverse}.paraui-v4-switch-desc-end .component-desc-text{margin-right:0}.component-switch-disabled>div:nth-child(1):before{transition:all 2s ease-in-out}
+@charset "UTF-8";.paraui-v4-switch{position:relative;display:inline-block;width:32px;height:16px;vertical-align:middle;background-color:transparent;border:0;cursor:pointer;transition:all .2s;-webkit-user-select:none;user-select:none}.paraui-v4-switch .component-switch{border:none;cursor:pointer}.paraui-v4-switch:before{position:absolute;top:0;left:0;width:100%;height:16px;border-radius:8px;background-color:#a1a8b3;content:"";transition:all .2s}a .paraui-v4-switch:focus{outline:0;box-shadow:none}.paraui-v4-switch.component-switch-checked:focus{box-shadow:none}.paraui-v4-switch:focus:hover{box-shadow:none}.paraui-v4-switch.component-switch-checked:before{background-color:#2e65e6}.paraui-v4-switch-loading *,.paraui-v4-switch.component-switch-disabled *{box-shadow:none}.paraui-v4-switch-loading .component-switch-inner:before,.paraui-v4-switch.component-switch-disabled .component-switch-inner:before{position:absolute;top:0;left:0;width:100%;height:16px;background-color:#ffffff80;content:"";z-index:100}.paraui-v4-switch .component-switch-inner{display:block;margin:0 7px 0 25px;font-size:14px;transition:margin .2s}.paraui-v4-switch.component-switch-checked .component-switch-inner{margin:0 25px 0 7px}.paraui-v4-switch .component-switch-handle{position:absolute;top:2px;left:2px;width:12px;height:12px;transition:all .2s ease-in-out}.paraui-v4-switch .component-switch-handle:before{position:absolute;inset:0;background-color:#fff;border-radius:9px;box-shadow:none;transition:all .2s ease-in-out;content:""}.paraui-v4-switch.component-switch-checked .component-switch-handle{left:calc(100% - 14px)}.paraui-v4-switch.component-switch-checked .component-switch-handle:before{background-color:#fff}.paraui-v4-switch:not(.paraui-v4-switch-disabled):active .component-switch-handle:before{right:-30%;left:0}.paraui-v4-switch:not(.paraui-v4-switch-disabled):active.component-switch-checked .component-switch-handle:before{right:0;left:-30%}.paraui-v4-switch .component-switch-loading-icon{position:relative;top:1px;color:#2e65e6;font-size:10px;vertical-align:top;animation:switchLoadingCircle 1s infinite linear}.paraui-v4-switch.component-switch-checked .component-switch-loading-icon{color:#2e65e6}.paraui-v4-switch-medium{min-width:32px;height:16px;line-height:16px}.paraui-v4-switch-small{min-width:28px;height:14px;line-height:14px}.paraui-v4-switch-small .component-switch-inner{margin:0 5px 0 18px;font-size:14px}.paraui-v4-switch-small .component-switch-handle{width:12px;height:12px;top:3px;left:2px}.paraui-v4-switch-small .component-switch-loading-icon{top:1.5px;font-size:9px}.paraui-v4-switch-small.component-switch-checked .component-switch-inner{margin:0 18px 0 5px}.paraui-v4-switch-small.component-switch-checked .component-switch-handle{left:calc(100% - 14px)}@keyframes switchLoadingCircle{to{transform:rotate(360deg)}}.paraui-v4-switch-disabled:before{background-color:#a1a8b3}.paraui-v4-switch-disabled.component-switch-checked:before{background-color:#97b2f2}.component-label-box{display:flex;align-items:center}.component-label-box .sup-text{color:#5c6573;font-size:14px;margin-left:10px;line-height:16px}.component-label-box .sup-text>a{text-decoration:none;cursor:pointer;color:#2e65e6}.component-label-box .sup-text>a:hover{color:#5783eb}.paraui-v4-switch-label{display:inline-flex;align-items:flex-end}.paraui-v4-switch-label .component-disabled-text{color:#5c6573}.paraui-v4-switch-label .component-desc-text{margin-bottom:0;margin-right:10px;line-height:16px;color:#1d2126}.paraui-v4-switch-label .component-desc-text .paraui-v4-help{line-height:1}.paraui-v4-switch-label .component-desc-text .paraui-v4-help svg{top:0}.paraui-v4-switch-label .paraui-v4-label-text-container{display:flex;flex-direction:column}.paraui-v4-switch-desc-end{flex-direction:row-reverse}.paraui-v4-switch-desc-end .component-desc-text{margin-right:0}.component-switch-disabled>div:nth-child(1):before{transition:all 2s ease-in-out}

package/lib/Switch/index.d.ts

@@ -5,9 +5,10 @@ type SwitchChangeEventHandler = (checked: boolean, event: React.MouseEvent | Rea
 type SwitchClickEventHandler = SwitchChangeEventHandler;
 export interface SwitchProps {
     /**
-     * 开关大小
+     * 开关大小（'medium' 与 'default' 视觉等价；'default' 为向后兼容同义，新代码建议用 'medium'）
+     * 跨组件命名 epic §3.1 选项 B 实施(2026-05-08)
      */
-    size?: 'small' | 'default';
+    size?: 'small' | 'medium' | 'default';
     /**
      * 类名
      */

package/lib/Switch/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./index.css');const s=require("../_virtual/jsx-runtime.js"),q=require("../node_modules/@para-ui/icons/LoadingF/index.js"),o=require("rc-switch"),m=require("clsx"),e=require("../GlobalContext/constant.js"),j=require("../Label/index.js"),f=require("../Tooltip/index.js"),T=require("../GlobalContext/useFormatMessage.js"),S=require("./lang/index.js");;/* empty css            */const h=b=>{const C=T.default("Switch",S.default),{size:v="default",loading:i,disabled:t,className:R,label:r,required:d=!1,desc:x,labelTooltip:E,descTooltip:w,disabledTooltip:u,loadingTitle:p=C({id:"ing"}),labelPlacement:N="top",descPlacement:P="start",supText:l,error:_,...c}=b,a=m(`${e.$prefixCls}-switch`,{[`${e.$prefixCls}-switch-loading`]:i,[`${e.$prefixCls}-switch-disabled`]:t},R),g=m(`${e.$prefixCls}-switch-label`,`${e.$prefixCls}-switch-label-${N}`,`${e.$prefixCls}-switch-desc-${P}`),n=s.jsxRuntimeExports.jsx("div",{className:`${e.$rcPrefixCls}-switch-handle`,children:i&&s.jsxRuntimeExports.jsx(q.LoadingF,{className:`${e.$rcPrefixCls}-switch-loading-icon`})}),$=()=>t&&u?s.jsxRuntimeExports.jsx(f.Tooltip,{disabled:!0,...u,children:s.jsxRuntimeExports.jsxs("div",{className:`${e.$rcPrefixCls}-label-box`,children:[s.jsxRuntimeExports.jsx(o,{className:a,...c,prefixCls:`${e.$rcPrefixCls}-switch`,disabled:t||i,loadingIcon:n}),l&&s.jsxRuntimeExports.jsx("span",{className:"sup-text",children:l})]})}):s.jsxRuntimeExports.jsx(s.jsxRuntimeExports.Fragment,{children:p&&i?s.jsxRuntimeExports.jsx(f.Tooltip,{disabled:!0,title:p,children:s.jsxRuntimeExports.jsxs("div",{className:`${e.$rcPrefixCls}-label-box`,children:[s.jsxRuntimeExports.jsx(o,{...c,prefixCls:`${e.$rcPrefixCls}-switch`,className:a,disabled:t||i,loadingIcon:n}),l&&s.jsxRuntimeExports.jsx("span",{className:"sup-text",children:l})]})}):s.jsxRuntimeExports.jsxs("div",{className:`${e.$rcPrefixCls}-label-box`,children:[s.jsxRuntimeExports.jsx(o,{...c,prefixCls:`${e.$rcPrefixCls}-switch`,className:a,disabled:t||i,loadingIcon:n}),l&&s.jsxRuntimeExports.jsx("span",{className:"sup-text",children:l})]})});return r||x?s.jsxRuntimeExports.jsxs("span",{className:g,children:[x&&s.jsxRuntimeExports.jsx(j.default,{label:x,required:d,...w,className:`${e.$rcPrefixCls}-desc-text ${t?`${e.$rcPrefixCls}-disabled-text`:""}`}),s.jsxRuntimeExports.jsxs("span",{className:`${e.$prefixCls}-label-text-container`,children:[r&&s.jsxRuntimeExports.jsx(j.default,{label:r,required:d,...E,className:`${e.$rcPrefixCls}-switch-text ${t?`${e.$rcPrefixCls}-disabled-text`:""}`}),$()]})]}):$()};exports.Switch=h;exports.default=h;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./index.css');const e=require("../_virtual/jsx-runtime.js"),T=require("../node_modules/@para-ui/icons/LoadingF/index.js"),d=require("rc-switch"),j=require("clsx"),s=require("../GlobalContext/constant.js"),f=require("../Label/index.js"),h=require("../Tooltip/index.js"),S=require("../GlobalContext/useFormatMessage.js"),v=require("./lang/index.js");;/* empty css            */const b=C=>{const R=S.default("Switch",v.default),{size:r="default",loading:t,disabled:i,className:w,label:x,required:u=!1,desc:c,labelTooltip:E,descTooltip:N,disabledTooltip:p,loadingTitle:m=R({id:"ing"}),labelPlacement:P="top",descPlacement:g="start",supText:l,error:_,...a}=C,n=j(`${s.$prefixCls}-switch`,{[`${s.$prefixCls}-switch-small`]:r==="small",[`${s.$prefixCls}-switch-medium`]:r==="medium"||r==="default",[`${s.$prefixCls}-switch-loading`]:t,[`${s.$prefixCls}-switch-disabled`]:i},w),q=j(`${s.$prefixCls}-switch-label`,`${s.$prefixCls}-switch-label-${P}`,`${s.$prefixCls}-switch-desc-${g}`),o=e.jsxRuntimeExports.jsx("div",{className:`${s.$rcPrefixCls}-switch-handle`,children:t&&e.jsxRuntimeExports.jsx(T.LoadingF,{className:`${s.$rcPrefixCls}-switch-loading-icon`})}),$=()=>i&&p?e.jsxRuntimeExports.jsx(h.Tooltip,{disabled:!0,...p,children:e.jsxRuntimeExports.jsxs("div",{className:`${s.$rcPrefixCls}-label-box`,children:[e.jsxRuntimeExports.jsx(d,{className:n,...a,prefixCls:`${s.$rcPrefixCls}-switch`,disabled:i||t,loadingIcon:o}),l&&e.jsxRuntimeExports.jsx("span",{className:"sup-text",children:l})]})}):e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{children:m&&t?e.jsxRuntimeExports.jsx(h.Tooltip,{disabled:!0,title:m,children:e.jsxRuntimeExports.jsxs("div",{className:`${s.$rcPrefixCls}-label-box`,children:[e.jsxRuntimeExports.jsx(d,{...a,prefixCls:`${s.$rcPrefixCls}-switch`,className:n,disabled:i||t,loadingIcon:o}),l&&e.jsxRuntimeExports.jsx("span",{className:"sup-text",children:l})]})}):e.jsxRuntimeExports.jsxs("div",{className:`${s.$rcPrefixCls}-label-box`,children:[e.jsxRuntimeExports.jsx(d,{...a,prefixCls:`${s.$rcPrefixCls}-switch`,className:n,disabled:i||t,loadingIcon:o}),l&&e.jsxRuntimeExports.jsx("span",{className:"sup-text",children:l})]})});return x||c?e.jsxRuntimeExports.jsxs("span",{className:q,children:[c&&e.jsxRuntimeExports.jsx(f.default,{label:c,required:u,...N,className:`${s.$rcPrefixCls}-desc-text ${i?`${s.$rcPrefixCls}-disabled-text`:""}`}),e.jsxRuntimeExports.jsxs("span",{className:`${s.$prefixCls}-label-text-container`,children:[x&&e.jsxRuntimeExports.jsx(f.default,{label:x,required:u,...E,className:`${s.$rcPrefixCls}-switch-text ${i?`${s.$rcPrefixCls}-disabled-text`:""}`}),$()]})]}):$()};exports.Switch=b;exports.default=b;
 //# sourceMappingURL=index.js.map

package/lib/Switch/style/index.css

@@ -1 +1 @@
-.paraui-v4-switch{position:relative;display:inline-block;width:32px;height:16px;vertical-align:middle;background-color:rgba(0,0,0,0);border:0;cursor:pointer;transition:all .2s;user-select:none}.paraui-v4-switch .component-switch{border:none;cursor:pointer}.paraui-v4-switch:before{position:absolute;top:0px;left:0;width:100%;height:16px;border-radius:8px;background-color:#a1a8b3;content:"";transition:all .2s}a .paraui-v4-switch:focus{outline:0;box-shadow:none}.paraui-v4-switch.component-switch-checked:focus{box-shadow:none}.paraui-v4-switch:focus:hover{box-shadow:none}.paraui-v4-switch.component-switch-checked:before{background-color:#2e65e6}.paraui-v4-switch-loading *,.paraui-v4-switch.component-switch-disabled *{box-shadow:none}.paraui-v4-switch-loading .component-switch-inner::before,.paraui-v4-switch.component-switch-disabled .component-switch-inner::before{position:absolute;top:0px;left:0;width:100%;height:16px;background-color:hsla(0,0%,100%,.5);content:"";z-index:100}.paraui-v4-switch .component-switch-inner{display:block;margin:0 7px 0 25px;font-size:14px;transition:margin .2s}.paraui-v4-switch.component-switch-checked .component-switch-inner{margin:0 25px 0 7px}.paraui-v4-switch .component-switch-handle{position:absolute;top:2px;left:2px;width:12px;height:12px;transition:all .2s ease-in-out}.paraui-v4-switch .component-switch-handle::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#fff;border-radius:9px;box-shadow:none;transition:all .2s ease-in-out;content:""}.paraui-v4-switch.component-switch-checked .component-switch-handle{left:calc(100% - 14px)}.paraui-v4-switch.component-switch-checked .component-switch-handle::before{background-color:#fff}.paraui-v4-switch:not(.paraui-v4-switch-disabled):active .component-switch-handle::before{right:-30%;left:0}.paraui-v4-switch:not(.paraui-v4-switch-disabled):active.component-switch-checked .component-switch-handle::before{right:0;left:-30%}.paraui-v4-switch .component-switch-loading-icon{position:relative;top:1px;color:#2e65e6;font-size:10px;vertical-align:top;animation:switchLoadingCircle 1s infinite linear}.paraui-v4-switch.component-switch-checked .component-switch-loading-icon{color:#2e65e6}.paraui-v4-switch-small{min-width:28px;height:14px;line-height:14px}.paraui-v4-switch-small .component-switch-inner{margin:0 5px 0 18px;font-size:14px}.paraui-v4-switch-small .component-switch-handle{width:12px;height:12px;top:3px;left:2px}.paraui-v4-switch-small .component-switch-loading-icon{top:1.5px;font-size:9px}.paraui-v4-switch-small.component-switch-checked .component-switch-inner{margin:0 18px 0 5px}.paraui-v4-switch-small.component-switch-checked .component-switch-handle{left:calc(100% - 12px - 2px)}@keyframes switchLoadingCircle{100%{transform:rotate(360deg)}}.paraui-v4-switch-disabled::before{background-color:#a1a8b3}.paraui-v4-switch-disabled.component-switch-checked::before{background-color:#97b2f2}.component-label-box{display:flex;align-items:center}.component-label-box .sup-text{color:#5c6573;font-size:14px;margin-left:10px;line-height:16px}.component-label-box .sup-text>a{text-decoration:none;cursor:pointer;color:#2e65e6}.component-label-box .sup-text>a:hover{color:#5783eb}.paraui-v4-switch-label{display:inline-flex;align-items:flex-end}.paraui-v4-switch-label .component-disabled-text{color:#5c6573}.paraui-v4-switch-label .component-desc-text{margin-bottom:0;margin-right:10px;line-height:16px;color:#1d2126}.paraui-v4-switch-label .component-desc-text .paraui-v4-help{line-height:1}.paraui-v4-switch-label .component-desc-text .paraui-v4-help svg{top:0}.paraui-v4-switch-label .paraui-v4-label-text-container{display:flex;flex-direction:column}.paraui-v4-switch-desc-end{flex-direction:row-reverse}.paraui-v4-switch-desc-end .component-desc-text{margin-right:0}.component-switch-disabled>div:nth-child(1)::before{transition:all 2s ease-in-out}
+.paraui-v4-switch{position:relative;display:inline-block;width:32px;height:16px;vertical-align:middle;background-color:rgba(0,0,0,0);border:0;cursor:pointer;transition:all .2s;user-select:none}.paraui-v4-switch .component-switch{border:none;cursor:pointer}.paraui-v4-switch:before{position:absolute;top:0px;left:0;width:100%;height:16px;border-radius:8px;background-color:#a1a8b3;content:"";transition:all .2s}a .paraui-v4-switch:focus{outline:0;box-shadow:none}.paraui-v4-switch.component-switch-checked:focus{box-shadow:none}.paraui-v4-switch:focus:hover{box-shadow:none}.paraui-v4-switch.component-switch-checked:before{background-color:#2e65e6}.paraui-v4-switch-loading *,.paraui-v4-switch.component-switch-disabled *{box-shadow:none}.paraui-v4-switch-loading .component-switch-inner::before,.paraui-v4-switch.component-switch-disabled .component-switch-inner::before{position:absolute;top:0px;left:0;width:100%;height:16px;background-color:hsla(0,0%,100%,.5);content:"";z-index:100}.paraui-v4-switch .component-switch-inner{display:block;margin:0 7px 0 25px;font-size:14px;transition:margin .2s}.paraui-v4-switch.component-switch-checked .component-switch-inner{margin:0 25px 0 7px}.paraui-v4-switch .component-switch-handle{position:absolute;top:2px;left:2px;width:12px;height:12px;transition:all .2s ease-in-out}.paraui-v4-switch .component-switch-handle::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#fff;border-radius:9px;box-shadow:none;transition:all .2s ease-in-out;content:""}.paraui-v4-switch.component-switch-checked .component-switch-handle{left:calc(100% - 14px)}.paraui-v4-switch.component-switch-checked .component-switch-handle::before{background-color:#fff}.paraui-v4-switch:not(.paraui-v4-switch-disabled):active .component-switch-handle::before{right:-30%;left:0}.paraui-v4-switch:not(.paraui-v4-switch-disabled):active.component-switch-checked .component-switch-handle::before{right:0;left:-30%}.paraui-v4-switch .component-switch-loading-icon{position:relative;top:1px;color:#2e65e6;font-size:10px;vertical-align:top;animation:switchLoadingCircle 1s infinite linear}.paraui-v4-switch.component-switch-checked .component-switch-loading-icon{color:#2e65e6}.paraui-v4-switch-medium{min-width:32px;height:16px;line-height:16px}.paraui-v4-switch-small{min-width:28px;height:14px;line-height:14px}.paraui-v4-switch-small .component-switch-inner{margin:0 5px 0 18px;font-size:14px}.paraui-v4-switch-small .component-switch-handle{width:12px;height:12px;top:3px;left:2px}.paraui-v4-switch-small .component-switch-loading-icon{top:1.5px;font-size:9px}.paraui-v4-switch-small.component-switch-checked .component-switch-inner{margin:0 18px 0 5px}.paraui-v4-switch-small.component-switch-checked .component-switch-handle{left:calc(100% - 12px - 2px)}@keyframes switchLoadingCircle{100%{transform:rotate(360deg)}}.paraui-v4-switch-disabled::before{background-color:#a1a8b3}.paraui-v4-switch-disabled.component-switch-checked::before{background-color:#97b2f2}.component-label-box{display:flex;align-items:center}.component-label-box .sup-text{color:#5c6573;font-size:14px;margin-left:10px;line-height:16px}.component-label-box .sup-text>a{text-decoration:none;cursor:pointer;color:#2e65e6}.component-label-box .sup-text>a:hover{color:#5783eb}.paraui-v4-switch-label{display:inline-flex;align-items:flex-end}.paraui-v4-switch-label .component-disabled-text{color:#5c6573}.paraui-v4-switch-label .component-desc-text{margin-bottom:0;margin-right:10px;line-height:16px;color:#1d2126}.paraui-v4-switch-label .component-desc-text .paraui-v4-help{line-height:1}.paraui-v4-switch-label .component-desc-text .paraui-v4-help svg{top:0}.paraui-v4-switch-label .paraui-v4-label-text-container{display:flex;flex-direction:column}.paraui-v4-switch-desc-end{flex-direction:row-reverse}.paraui-v4-switch-desc-end .component-desc-text{margin-right:0}.component-switch-disabled>div:nth-child(1)::before{transition:all 2s ease-in-out}