antd-solid 0.0.10 → 0.0.12

package/es/Drawer/index.js

@@ -0,0 +1,162 @@
+import { delegateEvents, createComponent, use, insert, effect, className, Portal, template } from 'solid-js/web';
+import { mergeProps, createSignal, createMemo, Show, untrack } from 'solid-js';
+import cs from 'classnames';
+import Button from '../Button/index.js';
+import { setRef } from '../utils/solid.js';
+import { Transition } from 'solid-transition-group';
+import './index.scss.js';
+import createTransition from '../hooks/createTransition.js';
+
+const _tmpl$ = /*#__PURE__*/template(`<span class="i-ant-design:close-outlined">`),
+  _tmpl$2 = /*#__PURE__*/template(`<div><div><div class="ant-px-[var(--ant-padding-lg)] ant-py-[var(--ant-padding)] ant-flex ant-justify-between ant-items-center ant-[border-bottom:var(--ant-line-width)_solid_var(--ant-color-split)]"><div class="ant-flex ant-items-center"><span class="ant-text-[var(--ant-color-text)] ant-text-size-[var(--ant-font-size-lg)] ant-[font-weight:var(--ant-font-weight-strong)] ant-leading-[var(--ant-line-height-lg)]"></span></div><div></div></div><div class="ant-p-[var(--ant-padding-lg)] ant-overflow-auto">`);
+const Drawer = _props => {
+  const props = mergeProps({
+    width: '378px',
+    height: '378px',
+    maskClosable: true,
+    placement: 'right',
+    getContainer: document.body
+  }, _props);
+  /**
+   * 控制是否打开/销毁
+   */
+  const [open, setOpen] = createSignal(false);
+  /**
+   * 控制显隐
+   */
+  const [hide, setHide] = createSignal(false);
+  let cleanup;
+  const container = createMemo(() => {
+    if (typeof props.getContainer === 'function') {
+      return props.getContainer();
+    }
+    if (props.getContainer instanceof HTMLElement) {
+      return props.getContainer;
+    }
+    return undefined;
+  });
+  const isBody = createMemo(() => container() === document.body);
+  const instance = {
+    open() {
+      setOpen(true);
+      setHide(false);
+      untrack(() => {
+        if (!isBody()) return;
+        const originOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        const onKeyup = e => {
+          if (e.key === 'Escape') {
+            instance.close();
+          }
+        };
+        document.addEventListener('keyup', onKeyup);
+        cleanup = () => {
+          document.body.style.overflow = originOverflow;
+          document.removeEventListener('keyup', onKeyup);
+        };
+      });
+    },
+    close() {
+      untrack(() => {
+        if (props.destroyOnClose) {
+          setOpen(false);
+        } else {
+          setHide(true);
+        }
+        cleanup?.();
+      });
+    }
+  };
+  setRef(props, instance);
+  let drawer;
+  createTransition(() => drawer, () => !hide(), 'ant-drawer-fade');
+  const direction = createMemo(() => ['top', 'bottom'].includes(props.placement) ? 'vertical' : 'horizontal');
+  const children = createComponent(Transition, {
+    name: "ant-drawer-fade",
+    get children() {
+      return createComponent(Show, {
+        get when() {
+          return open();
+        },
+        get children() {
+          const _el$ = _tmpl$2(),
+            _el$2 = _el$.firstChild,
+            _el$3 = _el$2.firstChild,
+            _el$4 = _el$3.firstChild,
+            _el$6 = _el$4.firstChild,
+            _el$7 = _el$4.nextSibling,
+            _el$8 = _el$3.nextSibling;
+          _el$.$$click = () => {
+            if (props.maskClosable) {
+              instance.close();
+            }
+          };
+          const _ref$ = drawer;
+          typeof _ref$ === "function" ? use(_ref$, _el$) : drawer = _el$;
+          _el$2.$$click = e => {
+            e.stopPropagation();
+          };
+          insert(_el$4, createComponent(Show, {
+            get when() {
+              return props.closeIcon !== false;
+            },
+            get children() {
+              return createComponent(Button, {
+                type: "text",
+                "class": "ant-mr-[var(--ant-margin-sm)] ant-text-size-[var(--ant-font-size-lg)] ant-h-[var(--ant-font-size-lg)] ant-leading-[var(--ant-font-size-lg)] hover:!ant-bg-transparent !ant-text-[var(--ant-color-icon)] hover:!ant-text-[var(--ant-color-icon-hover)] !ant-p-0",
+                onClick: () => {
+                  instance?.close();
+                },
+                get children() {
+                  return _tmpl$();
+                }
+              });
+            }
+          }), _el$6);
+          insert(_el$6, () => props.title);
+          insert(_el$7, () => props.extra);
+          insert(_el$8, () => props.children);
+          effect(_p$ => {
+            const _v$ = cs('ant-inset-0 ant-bg-[rgba(0,0,0,.45)] ant-z-1000', isBody() ? 'ant-fixed' : 'ant-absolute'),
+              _v$2 = cs('ant-drawer-content', {
+                left: 'ant-drawer-content-left',
+                right: 'ant-drawer-content-right',
+                top: 'ant-drawer-content-top',
+                bottom: 'ant-drawer-content-bottom'
+              }[props.placement], 'ant-absolute ant-bg-white ant-grid ant-[grid-template-rows:auto_1fr]'),
+              _v$3 = direction() === 'horizontal' ? props.width : undefined,
+              _v$4 = direction() === 'vertical' ? props.height : undefined;
+            _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+            _v$2 !== _p$._v$2 && className(_el$2, _p$._v$2 = _v$2);
+            _v$3 !== _p$._v$3 && ((_p$._v$3 = _v$3) != null ? _el$2.style.setProperty("width", _v$3) : _el$2.style.removeProperty("width"));
+            _v$4 !== _p$._v$4 && ((_p$._v$4 = _v$4) != null ? _el$2.style.setProperty("height", _v$4) : _el$2.style.removeProperty("height"));
+            return _p$;
+          }, {
+            _v$: undefined,
+            _v$2: undefined,
+            _v$3: undefined,
+            _v$4: undefined
+          });
+          return _el$;
+        }
+      });
+    }
+  });
+  return createComponent(Show, {
+    get when() {
+      return props.getContainer !== false;
+    },
+    fallback: children,
+    get children() {
+      return createComponent(Portal, {
+        get mount() {
+          return container();
+        },
+        children: children
+      });
+    }
+  });
+};
+delegateEvents(["click"]);
+
+export { Drawer as default };

package/es/Drawer/index.scss.js

@@ -0,0 +1,6 @@
+import styleInject from '../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".ant-drawer-content-right {\n  top: 0;\n  bottom: 0;\n  right: 0;\n}\n\n.ant-drawer-content-left {\n  top: 0;\n  bottom: 0;\n  left: 0;\n}\n\n.ant-drawer-content-top {\n  top: 0;\n  left: 0;\n  right: 0;\n}\n\n.ant-drawer-content-bottom {\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n\n.ant-drawer-fade-enter-active,\n.ant-drawer-fade-exit-active {\n  transition: opacity 0.3s;\n}\n.ant-drawer-fade-enter-active .ant-drawer-content,\n.ant-drawer-fade-exit-active .ant-drawer-content {\n  transition: transform 0.3s;\n}\n\n.ant-drawer-fade-enter,\n.ant-drawer-fade-exit-to {\n  opacity: 0;\n}\n.ant-drawer-fade-enter .ant-drawer-content-right,\n.ant-drawer-fade-exit-to .ant-drawer-content-right {\n  transform: translateX(100%);\n}\n.ant-drawer-fade-enter .ant-drawer-content-left,\n.ant-drawer-fade-exit-to .ant-drawer-content-left {\n  transform: translateX(-100%);\n}\n.ant-drawer-fade-enter .ant-drawer-content-top,\n.ant-drawer-fade-exit-to .ant-drawer-content-top {\n  transform: translateY(-100%);\n}\n.ant-drawer-fade-enter .ant-drawer-content-bottom,\n.ant-drawer-fade-exit-to .ant-drawer-content-bottom {\n  transform: translateY(100%);\n}";
+styleInject(css_248z);
+
+export { css_248z as default };

package/es/Empty/index.d.ts

@@ -1,5 +1,9 @@
-import { type Component } from 'solid-js';
-declare const Empty: Component & {
+import { type Component, type JSX } from 'solid-js';
+export interface EmptyProps {
+    class?: string;
+    style?: JSX.CSSProperties;
+}
+declare const Empty: Component<EmptyProps> & {
     PRESENTED_IMAGE_SIMPLE: Component;
 };
 export default Empty;

package/es/Empty/index.js

@@ -1,12 +1,17 @@
-import { insert, createComponent, template } from 'solid-js/web';
+import { spread, mergeProps, insert, createComponent, template } from 'solid-js/web';
 import PRESENTED_IMAGE_SIMPLE from './PRESENTED_IMAGE_SIMPLE.js';
 import EmptySvg from './assets/EmptySvg.js';
 
 const _tmpl$ = /*#__PURE__*/template(`<div><div class="ant-mb-[var(--ant-margin-xs)] ant-flex ant-justify-center"></div><div class="ant-text-[var(--ant-color-text)] ant-text-center">暂无数据`);
-const Empty = () => {
+const Empty = props => {
   return (() => {
     const _el$ = _tmpl$(),
       _el$2 = _el$.firstChild;
+    spread(_el$, mergeProps(props, {
+      get style() {
+        return props.style;
+      }
+    }), false, true);
     insert(_el$2, createComponent(EmptySvg, {}));
     return _el$;
   })();

package/es/Input.js

@@ -3,14 +3,14 @@ import { isNil, omit } from 'lodash-es';
 import { splitProps, createMemo, Show } from 'solid-js';
 import cs from 'classnames';
 import createControllableValue from './hooks/createControllableValue.js';
-import Compact from './Compact.js';
+import Compact from './Compact/index.js';
 
 const _tmpl$ = /*#__PURE__*/template(`<div>`),
   _tmpl$2 = /*#__PURE__*/template(`<div class="ant-mr-4px">`),
   _tmpl$3 = /*#__PURE__*/template(`<div class="ant-ml-4px">`),
   _tmpl$4 = /*#__PURE__*/template(`<div class="ant-[display:var(--input-after-display)] ant-absolute ant-top-0 ant-bottom-0 ant-right-0 ant-h-[calc(100%-2px)] ant-translate-y-1px -ant-translate-x-1px">`);
 const statusClassDict = {
-  default: disabled => cs('ant-[border:1px_solid_var(--ant-color-border)]', !disabled && 'hover:ant-border-[var(--primary-color)] focus-within:ant-border-[var(--primary-color)] focus-within:ant-[box-shadow:0_0_0_2px_rgba(5,145,255,0.1)]'),
+  default: disabled => cs('ant-[border:1px_solid_var(--ant-color-border)]', !disabled && 'hover:ant-border-[var(--ant-color-primary)] focus-within:ant-border-[var(--ant-color-primary)] focus-within:ant-[box-shadow:0_0_0_2px_rgba(5,145,255,0.1)]'),
   error: disabled => cs('ant-[border:1px_solid_var(--ant-color-error)]', !disabled && 'hover:ant-border-[var(--light-error-color)] focus-within:ant-[box-shadow:0_0_0_2px_rgba(255,38,5,.06)]'),
   warning: disabled => cs('ant-[border:1px_solid_var(--warning-color)]', !disabled && 'hover:ant-border-[var(--color-warning-border-hover)] focus-within:ant-[box-shadow:0_0_0_2px_rgba(255,215,5,.1)]')
 };
@@ -104,7 +104,7 @@ function CommonInput(props) {
             return _el$6;
           }
         }), null);
-        effect(() => className(_el$3, cs('ant-flex ant-items-center ant-w-full ant-relative ant-[--input-after-display:none] hover:ant-[--input-after-display:block] p:hover-child[input]:ant-border-[var(--primary-color)]', inputWrapClass())));
+        effect(() => className(_el$3, cs('ant-flex ant-items-center ant-w-full ant-relative ant-[--input-after-display:none] hover:ant-[--input-after-display:block] p:hover-child[input]:ant-border-[var(--ant-color-primary)]', inputWrapClass())));
         return _el$3;
       }
     }), null);

package/es/InputNumber.js

@@ -4,7 +4,7 @@ import { CommonInput } from './Input.js';
 import { isNil, clamp } from 'lodash-es';
 import { dispatchEventHandlerUnion } from './utils/solid.js';
 
-const _tmpl$ = /*#__PURE__*/template(`<div class="ant-flex ant-flex-col ant-h-full ant-w-24px ant-[border-left:1px_solid_var(--ant-color-border)]"><div class="ant-text-12px ant-flex ant-justify-center ant-items-center ant-h-1/2 ant-cursor-pointer ant-opacity-70 hover:ant-h-100% hover:ant-text-[var(--primary-color)] ant-transition-color ant-transition-height ant-transition-duration-500"><div class="i-ant-design:up-outlined"></div></div><div class="ant-[border-top:1px_solid_var(--ant-color-border)] ant-text-12px ant-flex ant-justify-center ant-items-center ant-h-1/2 ant-cursor-pointer ant-opacity-70 hover:ant-h-100% hover:ant-text-[var(--primary-color)] ant-transition-color ant-transition-height ant-transition-duration-500"><div class="i-ant-design:down-outlined">`);
+const _tmpl$ = /*#__PURE__*/template(`<div class="ant-flex ant-flex-col ant-h-full ant-w-24px ant-[border-left:1px_solid_var(--ant-color-border)]"><div class="ant-text-12px ant-flex ant-justify-center ant-items-center ant-h-1/2 ant-cursor-pointer ant-opacity-70 hover:ant-h-100% hover:ant-text-[var(--ant-color-primary)] ant-transition-color ant-transition-height ant-transition-duration-500"><div class="i-ant-design:up-outlined"></div></div><div class="ant-[border-top:1px_solid_var(--ant-color-border)] ant-text-12px ant-flex ant-justify-center ant-items-center ant-h-1/2 ant-cursor-pointer ant-opacity-70 hover:ant-h-100% hover:ant-text-[var(--ant-color-primary)] ant-transition-color ant-transition-height ant-transition-duration-500"><div class="i-ant-design:down-outlined">`);
 const isEmptyValue = value => isNil(value) || value === '';
 const InputNumber = _props => {
   const props = mergeProps({

package/es/Modal.js

@@ -1,6 +1,6 @@
 import { delegateEvents, createComponent, Portal, insert, memo, effect, className, render, mergeProps as mergeProps$1, template } from 'solid-js/web';
 import { mergeProps, createSignal, untrack, Show } from 'solid-js';
-import Button from './Button.js';
+import Button from './Button/index.js';
 import cs from 'classnames';
 
 const _tmpl$ = /*#__PURE__*/template(`<span class="i-ant-design:close-outlined">`),
@@ -16,10 +16,23 @@ function Modal(_props) {
   }, _props);
   const [open, setOpen] = createSignal(props.defaultOpen ?? false);
   const [hide, setHide] = createSignal(false);
+  let cleanup;
   const instance = {
     open() {
       setOpen(true);
       setHide(false);
+      const originOverflow = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+      const onKeyup = e => {
+        if (e.key === 'Escape') {
+          instance.close();
+        }
+      };
+      document.addEventListener('keyup', onKeyup);
+      cleanup = () => {
+        document.body.style.overflow = originOverflow;
+        document.removeEventListener('keyup', onKeyup);
+      };
     },
     close() {
       untrack(() => {
@@ -28,6 +41,8 @@ function Modal(_props) {
         } else {
           setHide(true);
         }
+        cleanup();
+        props.afterClose?.();
       });
     }
   };
@@ -36,10 +51,6 @@ function Modal(_props) {
       props.ref?.(instance);
     }
   });
-  const close = () => {
-    instance.close();
-    props.afterClose?.();
-  };
   const [confirmLoading, setConfirmLoading] = createSignal(false);
   return createComponent(Show, {
     get when() {
@@ -51,7 +62,7 @@ function Modal(_props) {
           const _el$ = _tmpl$5();
           _el$.$$click = () => {
             if (props.maskClosable ?? true) {
-              close();
+              instance.close();
             }
           };
           insert(_el$, createComponent(Show, {
@@ -78,7 +89,9 @@ function Modal(_props) {
                     get ["class"]() {
                       return cs('ant-rm-size-btn !ant-w-22px !ant-h-22px !ant-flex !ant-justify-center !ant-items-center ant-text-center ant-text-18px !ant-absolute !ant-top-16px !ant-right-16px ant-z-1000 ant-text-[rgba(0,0,0,.45)] hover:!ant-text-[rgba(0,0,0,.88)]');
                     },
-                    onClick: close,
+                    onClick: () => {
+                      instance.close();
+                    },
                     get children() {
                       return _tmpl$();
                     }
@@ -103,7 +116,9 @@ function Modal(_props) {
                     get children() {
                       const _el$7 = _tmpl$2();
                       insert(_el$7, createComponent(Button, {
-                        onClick: close,
+                        onClick: () => {
+                          instance.close();
+                        },
                         children: "\u53D6\u6D88"
                       }), null);
                       insert(_el$7, createComponent(Button, {

package/es/Popconfirm.js

@@ -1,6 +1,6 @@
 import { createComponent, mergeProps as mergeProps$1, insert, template } from 'solid-js/web';
 import { mergeProps, splitProps, createSignal, untrack } from 'solid-js';
-import Button from './Button.js';
+import Button from './Button/index.js';
 import Tooltip from './Tooltip.js';
 
 const _tmpl$ = /*#__PURE__*/template(`<div><div class="ant-mb-8px ant-flex ant-items-center"><span class="i-ant-design:exclamation-circle-fill ant-text-#faad14"></span><span class="ant-ml-8px ant-text-[rgba(0,0,0,0.88)] ant-font-600"></span></div><div class="ant-ml-22px ant-mb-8px ant-text-[rgba(0,0,0,0.88)]"></div><div class="ant-text-right">`);

package/es/Progress/index.d.ts

@@ -0,0 +1,24 @@
+import { type Component } from 'solid-js';
+export interface ProgressProps {
+    /**
+     * 百分比
+     * 默认 0
+     */
+    percent?: number;
+    /**
+     * 状态
+     */
+    status?: 'normal' | 'success' | 'error';
+    /**
+     * 'line' 类型进度条的高度
+     * 默认 8
+     */
+    height?: number;
+    /**
+     * 是否显示进度数值或状态图标
+     * 默认 true
+     */
+    showInfo?: boolean;
+}
+declare const Progress: Component<ProgressProps>;
+export default Progress;

package/es/Progress/index.js

@@ -0,0 +1,81 @@
+import { insert, createComponent, effect, className, template } from 'solid-js/web';
+import { mergeProps, createMemo, Show, Switch, Match } from 'solid-js';
+import cs from 'classnames';
+
+const _tmpl$ = /*#__PURE__*/template(`<span class="i-ant-design:check-circle-filled ant-text-[var(--ant-color-success)]">`),
+  _tmpl$2 = /*#__PURE__*/template(`<span class="i-ant-design:close-circle-filled ant-text-[var(--ant-color-error)]">`),
+  _tmpl$3 = /*#__PURE__*/template(`<span class="ant-shrink-0 ant-min-w-40px ant-ml-8px ant-text-center">`),
+  _tmpl$4 = /*#__PURE__*/template(`<div class="ant-flex ant-items-center"><div>`);
+const Progress = _props => {
+  const props = mergeProps({
+    percent: 0,
+    height: 8,
+    showInfo: true
+  }, _props);
+  const status = createMemo(() => {
+    if (props.status) return props.status;
+    return props.percent >= 100 ? 'success' : 'normal';
+  });
+  return (() => {
+    const _el$ = _tmpl$4(),
+      _el$2 = _el$.firstChild;
+    _el$.style.setProperty("--ant-progress-remaining-color", "rgba(0, 0, 0, 0.06)");
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return props.showInfo;
+      },
+      get children() {
+        const _el$3 = _tmpl$3();
+        insert(_el$3, createComponent(Switch, {
+          get fallback() {
+            return `${props.percent}%`;
+          },
+          get children() {
+            return [createComponent(Match, {
+              get when() {
+                return status() === 'success';
+              },
+              get children() {
+                return _tmpl$();
+              }
+            }), createComponent(Match, {
+              get when() {
+                return status() === 'error';
+              },
+              get children() {
+                return _tmpl$2();
+              }
+            })];
+          }
+        }));
+        return _el$3;
+      }
+    }), null);
+    effect(_p$ => {
+      const _v$ = cs('ant-w-full ant-bg-[var(--ant-progress-remaining-color)]', 'before:ant-content-empty before:ant-block before:ant-bg-[var(--color)] before:ant-w-[var(--percent)] before:ant-h-full before:ant-rounded-inherit'),
+        _v$2 = `${props.height}px`,
+        _v$3 = `${props.height / 2}px`,
+        _v$4 = `${props.percent}%`,
+        _v$5 = {
+          normal: 'var(--ant-color-primary)',
+          success: 'var(--ant-color-success)',
+          error: 'var(--ant-color-error)'
+        }[status()];
+      _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && ((_p$._v$2 = _v$2) != null ? _el$2.style.setProperty("height", _v$2) : _el$2.style.removeProperty("height"));
+      _v$3 !== _p$._v$3 && ((_p$._v$3 = _v$3) != null ? _el$2.style.setProperty("border-radius", _v$3) : _el$2.style.removeProperty("border-radius"));
+      _v$4 !== _p$._v$4 && ((_p$._v$4 = _v$4) != null ? _el$2.style.setProperty("--percent", _v$4) : _el$2.style.removeProperty("--percent"));
+      _v$5 !== _p$._v$5 && ((_p$._v$5 = _v$5) != null ? _el$2.style.setProperty("--color", _v$5) : _el$2.style.removeProperty("--color"));
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined,
+      _v$3: undefined,
+      _v$4: undefined,
+      _v$5: undefined
+    });
+    return _el$;
+  })();
+};
+
+export { Progress as default };

package/es/Radio.js

@@ -3,7 +3,7 @@ import { untrack, mergeProps, createSelector, For } from 'solid-js';
 import cs from 'classnames';
 import createControllableValue from './hooks/createControllableValue.js';
 
-const _tmpl$ = /*#__PURE__*/template(`<label class="ant-inline-flex ant-gap-4px"><input type="radio">`),
+const _tmpl$ = /*#__PURE__*/template(`<label class="ant-inline-flex ant-gap-4px ant-cursor-pointer ant-inline-flex ant-items-center"><span><input class="ant-m-0 ant-hidden" type="radio">`),
   _tmpl$2 = /*#__PURE__*/template(`<label><input class="ant-w-0 ant-h-0" type="radio">`),
   _tmpl$3 = /*#__PURE__*/template(`<div>`);
 const Radio = props => {
@@ -11,18 +11,20 @@ const Radio = props => {
     defaultValue: false,
     defaultValuePropName: 'defaultChecked',
     valuePropName: 'checked',
-    trigger: undefined
+    trigger: null
   });
   return (() => {
     const _el$ = _tmpl$(),
-      _el$2 = _el$.firstChild;
-    _el$2.$$input = e => {
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.firstChild;
+    _el$3.$$input = e => {
       setChecked(e.target.checked);
       untrack(() => props.onChange?.(e));
     };
     insert(_el$, () => props.children, null);
-    effect(() => _el$2.checked = checked());
-    effect(() => _el$2.value = props.value ?? '');
+    effect(() => className(_el$2, cs('ant-w-16px ant-h-16px ant-rounded-50% ant-[border:1px_solid_var(--ant-color-border)]', checked() && 'ant-[border:5px_solid_var(--ant-color-primary)]')));
+    effect(() => _el$3.checked = checked());
+    effect(() => _el$3.value = props.value ?? '');
     return _el$;
   })();
 };
@@ -31,20 +33,20 @@ Radio.Button = props => {
     defaultValue: false,
     defaultValuePropName: 'defaultChecked',
     valuePropName: 'checked',
-    trigger: undefined
+    trigger: null
   });
   return (() => {
-    const _el$3 = _tmpl$2(),
-      _el$4 = _el$3.firstChild;
-    _el$4.$$input = e => {
+    const _el$4 = _tmpl$2(),
+      _el$5 = _el$4.firstChild;
+    _el$5.$$input = e => {
       setChecked(e.target.checked);
       untrack(() => props.onChange?.(e));
     };
-    insert(_el$3, () => props.children, null);
-    effect(() => className(_el$3, cs('ant-px-15px ant-[border:1px_solid_rgb(217,217,217)] first:ant-rounded-l-6px last:ant-rounded-r-6px ant-h-32px ant-inline-flex ant-items-center hover:ant-text-[var(--primary-color)] not[:last-child]:ant-border-r-transparent ant-cursor-pointer ant-flex-grow ant-justify-center', checked() && 'ant-text-[var(--primary-color)] ant-[border:1px_solid_var(--primary-color)] !ant-border-r-[var(--primary-color)]')));
-    effect(() => _el$4.checked = checked());
-    effect(() => _el$4.value = props.value ?? '');
-    return _el$3;
+    insert(_el$4, () => props.children, null);
+    effect(() => className(_el$4, cs('ant-px-15px ant-[border:1px_solid_rgb(217,217,217)] first:ant-rounded-l-6px last:ant-rounded-r-6px ant-h-32px ant-inline-flex ant-items-center hover:ant-text-[var(--ant-color-primary)] not[:last-child]:ant-border-r-transparent ant-cursor-pointer ant-flex-grow ant-justify-center', checked() && 'ant-text-[var(--ant-color-primary)] ant-[border:1px_solid_var(--ant-color-primary)] !ant-border-r-[var(--ant-color-primary)]')));
+    effect(() => _el$5.checked = checked());
+    effect(() => _el$5.value = props.value ?? '');
+    return _el$4;
   })();
 };
 Radio.Group = _props => {
@@ -52,12 +54,12 @@ Radio.Group = _props => {
     optionType: 'default'
   }, _props);
   const [value, setValue] = createControllableValue(props, {
-    trigger: undefined
+    trigger: null
   });
   const isChecked = createSelector(value);
   return (() => {
-    const _el$5 = _tmpl$3();
-    insert(_el$5, createComponent(For, {
+    const _el$6 = _tmpl$3();
+    insert(_el$6, createComponent(For, {
       get each() {
         return props.options;
       },
@@ -73,15 +75,17 @@ Radio.Group = _props => {
         },
         onChange: e => {
           setValue(option.value);
-          untrack(() => props.onChange?.(e));
+          untrack(() => {
+            props.onChange?.(e);
+          });
         },
         get children() {
           return option.label;
         }
       })
     }));
-    effect(() => className(_el$5, cs(props.block ? 'ant-flex' : 'ant-inline-flex', props.optionType === 'default' ? 'ant-gap-8px' : '')));
-    return _el$5;
+    effect(() => className(_el$6, cs(props.block ? 'ant-flex' : 'ant-inline-flex', props.optionType === 'default' ? 'ant-gap-8px' : '')));
+    return _el$6;
   })();
 };
 delegateEvents(["input"]);

package/es/Result.js

@@ -4,7 +4,7 @@ import cs from 'classnames';
 const _tmpl$ = /*#__PURE__*/template(`<div class="ant-text-center ant-px-32px ant-py-48px"><div class="ant-mb-24px"><span></span></div><div class="ant-my-8px ant-text-[rgba(0,0,0,.88)] ant-text-24px"></div><div class="ant-text-[rgba(0,0,0,.45)] ant-text-14px"></div><div class="ant-mt-24px"></div><div class="ant-mt-24px">`);
 const statusIconMap = {
   success: 'ant-text-#52c41a i-ant-design:check-circle-filled',
-  info: 'ant-text-[var(--primary-color)] i-ant-design:exclamation-circle-filled',
+  info: 'ant-text-[var(--ant-color-primary)] i-ant-design:exclamation-circle-filled',
   warning: 'ant-text-#faad14 i-ant-design:warning-filled',
   error: 'ant-text-#ff4d4f i-ant-design:close-circle-filled'
 };

package/es/Select.js

@@ -47,7 +47,7 @@ const Select = props => {
             close();
           };
           insert(_el$7, () => item.label);
-          effect(() => className(_el$7, cs('ant-box-content ant-px-12px ant-py-5px ant-h-22px ant-leading-22px hover:ant-bg-[var(--hover-bg-color)]', selectedValue(item.value) ? '!ant-bg-[var(--active-bg-color)]' : '')));
+          effect(() => className(_el$7, cs('ant-box-content ant-px-12px ant-py-5px ant-h-22px ant-leading-22px hover:ant-bg-[var(--hover-bg-color)]', selectedValue(item.value) ? '!ant-bg-[var(--ant-select-option-selected-bg)]' : '')));
           return _el$7;
         })()
       }));
@@ -103,7 +103,7 @@ const Select = props => {
           return _el$5;
         }
       }));
-      effect(() => className(_el$, cs('ant-h-32px ant-leading-32px ant-rounded-6px ant-[border:1px_solid_var(--ant-color-border)] ant-px-11px focus:ant-[border-color:var(--primary-color)]', props.class)));
+      effect(() => className(_el$, cs('ant-h-32px ant-leading-32px ant-rounded-6px ant-[border:1px_solid_var(--ant-color-border)] ant-px-11px focus:ant-[border-color:var(--ant-color-primary)]', props.class)));
       return _el$;
     }
   });

package/es/Spin.d.ts

@@ -4,6 +4,7 @@ interface SpinProps extends ParentProps {
      * 是否为加载中状态
      */
     spinning?: boolean;
+    size?: number;
 }
 declare const Spin: Component<SpinProps>;
 export default Spin;

package/es/Spin.js

@@ -1,9 +1,12 @@
-import { insert, createComponent, template } from 'solid-js/web';
-import { Show } from 'solid-js';
+import { insert, createComponent, effect, template } from 'solid-js/web';
+import { mergeProps, Show } from 'solid-js';
 
-const _tmpl$ = /*#__PURE__*/template(`<div class="ant-absolute ant-inset-0 ant-flex ant-items-center ant-justify-center ant-bg-[rgba(255,255,255,.5)]"><span class="i-ant-design:loading keyframes-spin ant-[animation:spin_1s_linear_infinite] ant-text-32px ant-text-[var(--primary-color)]">`),
-  _tmpl$2 = /*#__PURE__*/template(`<div class="ant-relative ant-min-h-32px">`);
-const Spin = props => {
+const _tmpl$ = /*#__PURE__*/template(`<div class="ant-flex ant-items-center ant-justify-center ant-bg-[rgba(255,255,255,.5)]"><span class="i-ant-design:loading keyframes-spin ant-[animation:spin_1s_linear_infinite] ant-text-[var(--ant-color-primary)]">`),
+  _tmpl$2 = /*#__PURE__*/template(`<div>`);
+const Spin = _props => {
+  const props = mergeProps({
+    size: 20
+  }, _props);
   return (() => {
     const _el$ = _tmpl$2();
     insert(_el$, () => props.children, null);
@@ -12,7 +15,10 @@ const Spin = props => {
         return props.spinning;
       },
       get children() {
-        return _tmpl$();
+        const _el$2 = _tmpl$(),
+          _el$3 = _el$2.firstChild;
+        effect(() => `${props.size}px` != null ? _el$3.style.setProperty("font-size", `${props.size}px`) : _el$3.style.removeProperty("font-size"));
+        return _el$2;
       }
     }), null);
     return _el$;

package/es/Switch.js

@@ -13,7 +13,7 @@ const Switch = props => {
       _el$2 = _el$.firstChild;
     _el$.$$click = () => setChecked(c => !c);
     effect(_p$ => {
-      const _v$ = cs('ant-w-44px ant-h-22px ant-rounded-100px ant-relative', checked() ? 'ant-bg-[var(--primary-color)]' : 'ant-bg-[rgba(0,0,0,0.45)]'),
+      const _v$ = cs('ant-w-44px ant-h-22px ant-rounded-100px ant-relative', checked() ? 'ant-bg-[var(--ant-color-primary)]' : 'ant-bg-[rgba(0,0,0,0.45)]'),
         _v$2 = cs('ant-w-18px ant-h-18px ant-rounded-50% ant-bg-white ant-absolute ant-top-1/2 -ant-translate-y-1/2 ant-transition-left', checked() ? 'ant-left-[calc(100%-20px)]' : 'ant-left-2px');
       _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
       _v$2 !== _p$._v$2 && className(_el$2, _p$._v$2 = _v$2);

package/es/Tabs.js

@@ -4,7 +4,7 @@ import cs from 'classnames';
 import Segmented from './Segmented/index.js';
 import { unwrapStringOrJSXElement } from './utils/solid.js';
 
-const _tmpl$ = /*#__PURE__*/template(`<div><div role="selected-bar" class="ant-absolute ant-bottom-0 ant-bg-[var(--primary-color)] ant-h-2px ant-transition-left">`),
+const _tmpl$ = /*#__PURE__*/template(`<div><div role="selected-bar" class="ant-absolute ant-bottom-0 ant-bg-[var(--ant-color-primary)] ant-h-2px ant-transition-left">`),
   _tmpl$2 = /*#__PURE__*/template(`<div><div>`),
   _tmpl$3 = /*#__PURE__*/template(`<div>`);
 const Tabs = _props => {
@@ -63,7 +63,7 @@ const Tabs = _props => {
                   updateSelectedBarStyle();
                 };
                 insert(_el$5, () => unwrapStringOrJSXElement(item.label));
-                effect(() => className(_el$5, cs('ant-py-12px ant-cursor-pointer', props.navItemClass, isSelectedItem(item.key) && 'ant-text-[var(--primary-color)] selected')));
+                effect(() => className(_el$5, cs('ant-py-12px ant-cursor-pointer', props.navItemClass, isSelectedItem(item.key) && 'ant-text-[var(--ant-color-primary)] selected')));
                 return _el$5;
               })()
             }), _el$3);

package/es/Timeline.js

@@ -2,7 +2,7 @@ import { insert, createComponent, memo, template } from 'solid-js/web';
 import { For } from 'solid-js';
 
 const _tmpl$ = /*#__PURE__*/template(`<div class="ant-flex ant-flex-col ant-gap-[16px]">`),
-  _tmpl$2 = /*#__PURE__*/template(`<div class="ant-flex ant-relative"><div class="ant-w-[10px] ant-h-[10px] ant-border-solid ant-border-width-[3px] ant-border-[var(--primary-color)] ant-bg-white ant-rounded-[50%] ant-mt-[8px]"></div><div class="ant-ml-[8px]">`),
+  _tmpl$2 = /*#__PURE__*/template(`<div class="ant-flex ant-relative"><div class="ant-w-[10px] ant-h-[10px] ant-border-solid ant-border-width-[3px] ant-border-[var(--ant-color-primary)] ant-bg-white ant-rounded-[50%] ant-mt-[8px]"></div><div class="ant-ml-[8px]">`),
   _tmpl$3 = /*#__PURE__*/template(`<div class="ant-absolute ant-top-[8px] ant-bottom-[-24px] ant-left-[4px] ant-w-[2px] ant-bg-[rgba(5,5,5,.06)]">`);
 const Timeline = props => {
   return (() => {