antd-solid 0.0.21 → 0.0.23

package/es/Modal/index.js

@@ -1,4 +1,4 @@
-import { createComponent, Portal, Dynamic, ssr, ssrHydrationKey, ssrAttribute, escape, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { delegateEvents, createComponent, Portal, Dynamic, effect, className, insert, memo, mergeProps as mergeProps$1, template } from 'solid-js/web';
 import { mergeProps, createEffect, onCleanup, createSignal, createRenderEffect, on, Show } from 'solid-js';
 import cs from 'classnames';
 import { Transition } from 'solid-transition-group';
@@ -12,11 +12,11 @@ import useModal from './useModal.js';
 import warning from './warning.js';
 import useLocale from '../hooks/useLocale.js';
 
-var _tmpl$ = ["<div", " aria-label=\"mask\"></div>"],
-  _tmpl$2 = ["<span", " class=\"i-ant-design:close-outlined\"></span>"],
-  _tmpl$3 = ["<div", " class=\"inline-flex gap-8px\"><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"],
-  _tmpl$4 = ["<div", " class=\"mt-12px text-right\">", "</div>"],
-  _tmpl$5 = ["<div", " class=\"ant-modal-wrap z-1000 fixed inset-0 overflow-auto pointer-events-none\"><div", " style=\"", "\"><!--$-->", "<!--/--><div class=\"text-[var(--ant-modal-title-color)] text-16px font-600 mb-8px\">", "</div><div class=\"grow\">", "</div><!--$-->", "<!--/--></div></div>"];
+var _tmpl$ = /*#__PURE__*/template(`<div aria-label=mask>`),
+  _tmpl$2 = /*#__PURE__*/template(`<span class=i-ant-design:close-outlined>`),
+  _tmpl$3 = /*#__PURE__*/template(`<div class="inline-flex gap-8px">`),
+  _tmpl$4 = /*#__PURE__*/template(`<div class="mt-12px text-right">`),
+  _tmpl$5 = /*#__PURE__*/template(`<div class="ant-modal-wrap z-1000 fixed inset-0 overflow-auto pointer-events-none"><div><div class="text-[var(--ant-modal-title-color)] text-16px font-600 mb-8px"></div><div class=grow>`);
 // 单位 s
 const transitionDuration = 0.3;
 const Modal = _props => {
@@ -106,6 +106,10 @@ const Modal = _props => {
                 },
                 get children() {
                   return createComponent(Element, {
+                    ref(r$) {
+                      var _ref$ = modalRootRef;
+                      typeof _ref$ === "function" ? _ref$(r$) : modalRootRef = r$;
+                    },
                     "class": "[font-size:var(--ant-font-size)] text-[var(--ant-color-text)] leading-[var(--ant-line-height)]",
                     style: {
                       '--transition-duration': `${transitionDuration}s`
@@ -116,58 +120,105 @@ const Modal = _props => {
                           return props.mask;
                         },
                         get children() {
-                          return ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(cs('ant-modal-mask', 'fixed inset-0 bg-[var(--ant-color-bg-mask)] z-1000'), true), false));
-                        }
-                      }), ssr(_tmpl$5, ssrHydrationKey(), ssrAttribute("class", escape(cs('ant-modal', 'px-24px py-20px rounded-8px overflow-hidden bg-[--ant-color-bg-container-secondary] flex flex-col max-w-[calc(100vw-calc(var(--ant-margin)*2))] transform-origin-center pointer-events-initial'), true), false), "--translate-y:" + (props.centered ? "max(calc(50vh - 50%), 0px)" : "100px") + (";--active-element-center-x:" + `${escape(activeElementCenter().x, true)}px`) + (";--active-element-center-y:" + `${escape(activeElementCenter().y, true)}px`) + (";width:" + escape(props.width, true)) + (";height:" + escape(props.height, true)), escape(createComponent(Show, {
-                        get when() {
-                          return props.closeIcon;
-                        },
-                        get children() {
-                          return createComponent(Button, {
-                            type: "text",
-                            get ["class"]() {
-                              return cs('!w-22px !h-22px !flex !justify-center !items-center text-center text-18px !absolute !top-16px !right-16px z-1000 !text-[var(--ant-color-icon)] hover:!text-[var(--ant-color-icon-hover)]');
-                            },
-                            onClick: () => {
+                          var _el$ = _tmpl$();
+                          _el$.$$click = () => {
+                            if (props.maskClosable) {
                               props.onCancel?.();
-                            },
-                            get children() {
-                              return ssr(_tmpl$2, ssrHydrationKey());
-                            }
-                          });
-                        }
-                      })), escape(props.title), escape(props.children), escape(createComponent(Show, {
-                        get when() {
-                          return props.footer;
-                        },
-                        get children() {
-                          return ssr(_tmpl$4, ssrHydrationKey(), escape(createComponent(Show, {
-                            get when() {
-                              return typeof props.footer !== 'function';
-                            },
-                            get fallback() {
-                              return typeof props.footer === 'function' && props.footer();
-                            },
-                            get children() {
-                              return ssr(_tmpl$3, ssrHydrationKey(), escape(createComponent(Button, mergeProps$1({
-                                onClick: () => {
-                                  props.onCancel?.();
-                                },
-                                get children() {
-                                  return locale().Modal?.cancelText;
-                                }
-                              }, () => props.cancelButtonProps))), escape(createComponent(Button, mergeProps$1({
-                                type: "primary",
-                                loading: "auto",
-                                onClick: async () => await props.onOk?.(),
-                                get children() {
-                                  return locale().Modal?.okText;
-                                }
-                              }, () => props.okButtonProps))));
                             }
-                          })));
+                          };
+                          effect(() => className(_el$, cs('ant-modal-mask', 'fixed inset-0 bg-[var(--ant-color-bg-mask)] z-1000')));
+                          return _el$;
                         }
-                      })))];
+                      }), (() => {
+                        var _el$2 = _tmpl$5(),
+                          _el$3 = _el$2.firstChild,
+                          _el$5 = _el$3.firstChild,
+                          _el$6 = _el$5.nextSibling;
+                        _el$3.$$click = e => {
+                          e.stopPropagation();
+                        };
+                        insert(_el$3, createComponent(Show, {
+                          get when() {
+                            return props.closeIcon;
+                          },
+                          get children() {
+                            return createComponent(Button, {
+                              type: "text",
+                              get ["class"]() {
+                                return cs('!w-22px !h-22px !flex !justify-center !items-center text-center text-18px !absolute !top-16px !right-16px z-1000 !text-[var(--ant-color-icon)] hover:!text-[var(--ant-color-icon-hover)]');
+                              },
+                              onClick: () => {
+                                props.onCancel?.();
+                              },
+                              get children() {
+                                return _tmpl$2();
+                              }
+                            });
+                          }
+                        }), _el$5);
+                        insert(_el$5, () => props.title);
+                        insert(_el$6, () => props.children);
+                        insert(_el$3, createComponent(Show, {
+                          get when() {
+                            return props.footer;
+                          },
+                          get children() {
+                            var _el$7 = _tmpl$4();
+                            insert(_el$7, createComponent(Show, {
+                              get when() {
+                                return typeof props.footer !== 'function';
+                              },
+                              get fallback() {
+                                return memo(() => typeof props.footer === 'function')() && props.footer();
+                              },
+                              get children() {
+                                var _el$8 = _tmpl$3();
+                                insert(_el$8, createComponent(Button, mergeProps$1({
+                                  onClick: () => {
+                                    props.onCancel?.();
+                                  },
+                                  get children() {
+                                    return locale().Modal?.cancelText;
+                                  }
+                                }, () => props.cancelButtonProps)), null);
+                                insert(_el$8, createComponent(Button, mergeProps$1({
+                                  type: "primary",
+                                  loading: "auto",
+                                  onClick: async () => await props.onOk?.(),
+                                  get children() {
+                                    return locale().Modal?.okText;
+                                  }
+                                }, () => props.okButtonProps)), null);
+                                return _el$8;
+                              }
+                            }));
+                            return _el$7;
+                          }
+                        }), null);
+                        effect(_p$ => {
+                          var _v$ = cs('ant-modal', 'px-24px py-20px rounded-8px overflow-hidden bg-[--ant-color-bg-container-secondary] flex flex-col max-w-[calc(100vw-calc(var(--ant-margin)*2))] transform-origin-center pointer-events-initial'),
+                            _v$2 = props.centered ? 'max(calc(50vh - 50%), 0px)' : '100px',
+                            _v$3 = `${activeElementCenter().x}px`,
+                            _v$4 = `${activeElementCenter().y}px`,
+                            _v$5 = props.width,
+                            _v$6 = props.height;
+                          _v$ !== _p$.e && className(_el$3, _p$.e = _v$);
+                          _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$3.style.setProperty("--translate-y", _v$2) : _el$3.style.removeProperty("--translate-y"));
+                          _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$3.style.setProperty("--active-element-center-x", _v$3) : _el$3.style.removeProperty("--active-element-center-x"));
+                          _v$4 !== _p$.o && ((_p$.o = _v$4) != null ? _el$3.style.setProperty("--active-element-center-y", _v$4) : _el$3.style.removeProperty("--active-element-center-y"));
+                          _v$5 !== _p$.i && ((_p$.i = _v$5) != null ? _el$3.style.setProperty("width", _v$5) : _el$3.style.removeProperty("width"));
+                          _v$6 !== _p$.n && ((_p$.n = _v$6) != null ? _el$3.style.setProperty("height", _v$6) : _el$3.style.removeProperty("height"));
+                          return _p$;
+                        }, {
+                          e: undefined,
+                          t: undefined,
+                          a: undefined,
+                          o: undefined,
+                          i: undefined,
+                          n: undefined
+                        });
+                        return _el$2;
+                      })()];
                     }
                   });
                 }
@@ -181,5 +232,6 @@ const Modal = _props => {
 };
 Modal.warning = warning;
 Modal.useModal = useModal;
+delegateEvents(["click"]);
 
 export { Modal as default };

package/es/Modal/useModal.js

@@ -1,9 +1,9 @@
-import { createComponent, mergeProps, ssr, ssrHydrationKey, escape } from 'solid-js/web';
+import { createComponent, mergeProps, insert, template } from 'solid-js/web';
 import { createSignal } from 'solid-js';
 import Modal from './index.js';
 
-var _tmpl$ = ["<div", " class=\"flex items-center gap-12px\"><span class=\"i-ant-design:exclamation-circle text-22px text-[var(--ant-color-warning)]\"></span><!--$-->", "<!--/--></div>"],
-  _tmpl$2 = ["<div", " class=\"ml-34px\">", "</div>"];
+var _tmpl$ = /*#__PURE__*/template(`<div class="flex items-center gap-12px"><span class="i-ant-design:exclamation-circle text-22px text-[var(--ant-color-warning)]">`),
+  _tmpl$2 = /*#__PURE__*/template(`<div class=ml-34px>`);
 function useModal() {
   const [open, setOpen] = createSignal(false);
   const [modalProps, setModalProps] = createSignal({});
@@ -19,10 +19,19 @@ function useModal() {
     closeIcon: false
   }, modalProps, {
     get title() {
-      return ssr(_tmpl$, ssrHydrationKey(), escape(modalProps().title));
+      return (() => {
+        var _el$ = _tmpl$();
+          _el$.firstChild;
+        insert(_el$, () => modalProps().title, null);
+        return _el$;
+      })();
     },
     get children() {
-      return ssr(_tmpl$2, ssrHydrationKey(), escape(modalProps().children));
+      return (() => {
+        var _el$3 = _tmpl$2();
+        insert(_el$3, () => modalProps().children);
+        return _el$3;
+      })();
     },
     get open() {
       return open();

package/es/Modal/warning.js

@@ -1,8 +1,8 @@
-import { render, createComponent, mergeProps, ssr, ssrHydrationKey, escape } from 'solid-js/web';
+import { render, createComponent, mergeProps, insert, template } from 'solid-js/web';
 import Modal from './index.js';
 
-var _tmpl$ = ["<div", " class=\"flex items-center gap-12px\"><span class=\"i-ant-design:exclamation-circle text-22px text-[var(--ant-color-warning)]\"></span><!--$-->", "<!--/--></div>"],
-  _tmpl$2 = ["<div", " class=\"ml-34px\">", "</div>"];
+var _tmpl$ = /*#__PURE__*/template(`<div class="flex items-center gap-12px"><span class="i-ant-design:exclamation-circle text-22px text-[var(--ant-color-warning)]">`),
+  _tmpl$2 = /*#__PURE__*/template(`<div class=ml-34px>`);
 function warning(props) {
   const div = document.createElement('div');
   document.body.appendChild(div);
@@ -12,10 +12,19 @@ function warning(props) {
     closeIcon: false
   }, props, {
     get title() {
-      return ssr(_tmpl$, ssrHydrationKey(), escape(props.title));
+      return (() => {
+        var _el$ = _tmpl$();
+          _el$.firstChild;
+        insert(_el$, () => props.title, null);
+        return _el$;
+      })();
     },
     get children() {
-      return ssr(_tmpl$2, ssrHydrationKey(), escape(props.children));
+      return (() => {
+        var _el$3 = _tmpl$2();
+        insert(_el$3, () => props.children);
+        return _el$3;
+      })();
     },
     defaultOpen: true,
     onOk: () => {

package/es/Popconfirm/index.js

@@ -1,9 +1,9 @@
-import { createComponent, mergeProps as mergeProps$1, ssr, ssrHydrationKey, escape } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1, insert, template } from 'solid-js/web';
 import { mergeProps, splitProps, createSignal, untrack } from 'solid-js';
 import Button from '../Button/index.js';
 import Tooltip from '../Tooltip/index.js';
 
-var _tmpl$ = ["<div", "><div class=\"mb-8px flex items-center\"><span class=\"i-ant-design:exclamation-circle-fill text-#faad14\"></span><span class=\"ml-8px font-600\">", "</span></div><div class=\"ml-22px mb-8px\">", "</div><div class=\"text-right\"><!--$-->", "<!--/--><!--$-->", "<!--/--></div></div>"];
+var _tmpl$ = /*#__PURE__*/template(`<div><div class="mb-8px flex items-center"><span class="i-ant-design:exclamation-circle-fill text-#faad14"></span><span class="ml-8px font-600"></span></div><div class="ml-22px mb-8px"></div><div class=text-right>`);
 const Popconfirm = props => {
   const mergedProps = mergeProps({
     okText: '确定',
@@ -18,28 +18,40 @@ const Popconfirm = props => {
       return open();
     },
     onOpenChange: setOpen,
-    content: () => ssr(_tmpl$, ssrHydrationKey(), escape(mergedProps.title), escape(mergedProps.content), escape(createComponent(Button, {
-      "class": "ml-8px",
-      size: "small",
-      onClick: () => {
-        setOpen(false);
-        untrack(() => mergedProps.onCancel?.());
-      },
-      get children() {
-        return mergedProps.cancelText;
-      }
-    })), escape(createComponent(Button, {
-      "class": "ml-8px",
-      type: "primary",
-      size: "small",
-      onClick: () => {
-        setOpen(false);
-        untrack(() => mergedProps.onConfirm?.());
-      },
-      get children() {
-        return mergedProps.okText;
-      }
-    })))
+    content: () => (() => {
+      var _el$ = _tmpl$(),
+        _el$2 = _el$.firstChild,
+        _el$3 = _el$2.firstChild,
+        _el$4 = _el$3.nextSibling,
+        _el$5 = _el$2.nextSibling,
+        _el$6 = _el$5.nextSibling;
+      insert(_el$4, () => mergedProps.title);
+      insert(_el$5, () => mergedProps.content);
+      insert(_el$6, createComponent(Button, {
+        "class": "ml-8px",
+        size: "small",
+        onClick: () => {
+          setOpen(false);
+          untrack(() => mergedProps.onCancel?.());
+        },
+        get children() {
+          return mergedProps.cancelText;
+        }
+      }), null);
+      insert(_el$6, createComponent(Button, {
+        "class": "ml-8px",
+        type: "primary",
+        size: "small",
+        onClick: () => {
+          setOpen(false);
+          untrack(() => mergedProps.onConfirm?.());
+        },
+        get children() {
+          return mergedProps.okText;
+        }
+      }), null);
+      return _el$;
+    })()
   }, tooltipProps, {
     get children() {
       return mergedProps.children;

package/es/Popover/index.js

@@ -1,21 +1,30 @@
-import { createComponent, mergeProps, ssr, ssrHydrationKey, escape } from 'solid-js/web';
+import { createComponent, mergeProps, insert, template } from 'solid-js/web';
 import { Show } from 'solid-js';
 import Tooltip, { unwrapContent } from '../Tooltip/index.js';
 
-var _tmpl$ = ["<div", " class=\"mb-8px flex items-center\"><span class=\"font-600\">", "</span></div>"],
-  _tmpl$2 = ["<div", "><!--$-->", "<!--/--><div>", "</div></div>"];
+var _tmpl$ = /*#__PURE__*/template(`<div class="mb-8px flex items-center"><span class=font-600>`),
+  _tmpl$2 = /*#__PURE__*/template(`<div><div>`);
 const Popover = props => {
   return createComponent(Tooltip, mergeProps({
     plain: true
   }, props, {
-    content: close => ssr(_tmpl$2, ssrHydrationKey(), escape(createComponent(Show, {
-      get when() {
-        return props.title;
-      },
-      get children() {
-        return ssr(_tmpl$, ssrHydrationKey(), escape(props.title));
-      }
-    })), escape(unwrapContent(props.content, close)))
+    content: close => (() => {
+      var _el$ = _tmpl$2(),
+        _el$4 = _el$.firstChild;
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return props.title;
+        },
+        get children() {
+          var _el$2 = _tmpl$(),
+            _el$3 = _el$2.firstChild;
+          insert(_el$3, () => props.title);
+          return _el$2;
+        }
+      }), _el$4);
+      insert(_el$4, () => unwrapContent(props.content, close));
+      return _el$;
+    })()
   }));
 };
 

package/es/Progress/Circle.js

@@ -1,13 +1,13 @@
-import { createComponent, ssr, ssrHydrationKey, ssrAttribute, escape } from 'solid-js/web';
+import { createComponent, effect, setAttribute, insert, template } from 'solid-js/web';
 import { mergeProps, createMemo, Show, Switch, Match } from 'solid-js';
 import 'lodash-es';
 import useSize from '../hooks/useSize.js';
 import Element from '../Element/index.js';
 
-var _tmpl$ = ["<svg", " viewBox=\"0 0 100 100\" role=\"presentation\"><circle", " cx=\"50\" cy=\"50\" stroke-linecap=\"round\"", " style=\"", "\"></circle><circle", " cx=\"50\" cy=\"50\" stroke-linecap=\"round\"", " opacity=\"1\" style=\"", "\"></circle></svg>"],
-  _tmpl$2 = ["<span", " class=\"i-ant-design:check-outlined text-[var(--ant-color-success)] text-1.1667em\"></span>"],
-  _tmpl$3 = ["<span", " class=\"i-ant-design:close-outlined text-[var(--ant-color-error)] text-1.1667em\"></span>"],
-  _tmpl$4 = ["<span", " class=\"shrink-0 text-center text-1em absolute top-1/2 left-1/2 -translate-1/2\">", "</span>"];
+var _tmpl$ = /*#__PURE__*/template(`<svg viewBox="0 0 100 100"role=presentation><circle cx=50 cy=50 stroke-linecap=round></circle><circle cx=50 cy=50 stroke-linecap=round opacity=1>`),
+  _tmpl$2 = /*#__PURE__*/template(`<span class="i-ant-design:check-outlined text-[var(--ant-color-success)] text-1.1667em">`),
+  _tmpl$3 = /*#__PURE__*/template(`<span class="i-ant-design:close-outlined text-[var(--ant-color-error)] text-1.1667em">`),
+  _tmpl$4 = /*#__PURE__*/template(`<span class="shrink-0 text-center text-1em absolute top-1/2 left-1/2 -translate-1/2">`);
 const Circle = _props => {
   let ref;
   const props = mergeProps({
@@ -24,6 +24,10 @@ const Circle = _props => {
   const perimeter = createMemo(() => radius() * 2 * Math.PI);
   const size = useSize(() => ref);
   return createComponent(Element, {
+    ref(r$) {
+      var _ref$ = ref;
+      typeof _ref$ === "function" ? _ref$(r$) : ref = r$;
+    },
     "class": "flex items-center relative",
     get style() {
       return {
@@ -33,16 +37,60 @@ const Circle = _props => {
       };
     },
     get children() {
-      return [ssr(_tmpl$, ssrHydrationKey(), ssrAttribute("r", escape(radius(), true), false), ssrAttribute("stroke-width", escape(props.strokeWidth, true), false), "stroke:" + "var(--ant-progress-remaining-color)" + (";stroke-dasharray:" + `${escape(perimeter(), true)}px, ${escape(perimeter(), true)}px`) + (";stroke-dashoffset:" + "0") + (";transform:" + "rotate(-90deg)") + (";transform-origin:" + "50px 50px") + (";transition:" + "stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s ease 0s, stroke-width 0.06s ease 0.3s, opacity 0.3s ease 0s") + (";fill-opacity:" + "0"), ssrAttribute("r", escape(radius(), true), false), ssrAttribute("stroke-width", escape(props.strokeWidth, true), false), "stroke:" + escape({
-        normal: 'var(--ant-color-primary)',
-        success: 'var(--ant-color-success)',
-        error: 'var(--ant-color-error)'
-      }[status()], true) + (";stroke-dasharray:" + `${escape(perimeter(), true)}px, ${escape(perimeter(), true)}px`) + (";stroke-dashoffset:" + `${escape(perimeter(), true) * (100 - escape(props.percent, true)) / 100}px`) + (";transform:" + "rotate(-90deg)") + (";transform-origin:" + "50px 50px") + (";transition:" + "stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s ease 0s, stroke-width 0.06s ease 0.3s, opacity ease 0s") + (";fill-opacity:" + "0")), createComponent(Show, {
+      return [(() => {
+        var _el$ = _tmpl$(),
+          _el$2 = _el$.firstChild,
+          _el$3 = _el$2.nextSibling;
+        _el$2.style.setProperty("stroke", "var(--ant-progress-remaining-color)");
+        _el$2.style.setProperty("stroke-dashoffset", "0");
+        _el$2.style.setProperty("transform", "rotate(-90deg)");
+        _el$2.style.setProperty("transform-origin", "50px 50px");
+        _el$2.style.setProperty("transition", "stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s ease 0s, stroke-width 0.06s ease 0.3s, opacity 0.3s ease 0s");
+        _el$2.style.setProperty("fill-opacity", "0");
+        _el$3.style.setProperty("transform", "rotate(-90deg)");
+        _el$3.style.setProperty("transform-origin", "50px 50px");
+        _el$3.style.setProperty("transition", "stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s ease 0s, stroke-width 0.06s ease 0.3s, opacity ease 0s");
+        _el$3.style.setProperty("fill-opacity", "0");
+        effect(_p$ => {
+          var _v$ = radius(),
+            _v$2 = props.strokeWidth,
+            _v$3 = `${perimeter()}px, ${perimeter()}px`,
+            _v$4 = radius(),
+            _v$5 = props.strokeWidth,
+            _v$6 = {
+              normal: 'var(--ant-color-primary)',
+              success: 'var(--ant-color-success)',
+              error: 'var(--ant-color-error)'
+            }[status()],
+            _v$7 = `${perimeter()}px, ${perimeter()}px`,
+            _v$8 = `${perimeter() * (100 - props.percent) / 100}px`;
+          _v$ !== _p$.e && setAttribute(_el$2, "r", _p$.e = _v$);
+          _v$2 !== _p$.t && setAttribute(_el$2, "stroke-width", _p$.t = _v$2);
+          _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$2.style.setProperty("stroke-dasharray", _v$3) : _el$2.style.removeProperty("stroke-dasharray"));
+          _v$4 !== _p$.o && setAttribute(_el$3, "r", _p$.o = _v$4);
+          _v$5 !== _p$.i && setAttribute(_el$3, "stroke-width", _p$.i = _v$5);
+          _v$6 !== _p$.n && ((_p$.n = _v$6) != null ? _el$3.style.setProperty("stroke", _v$6) : _el$3.style.removeProperty("stroke"));
+          _v$7 !== _p$.s && ((_p$.s = _v$7) != null ? _el$3.style.setProperty("stroke-dasharray", _v$7) : _el$3.style.removeProperty("stroke-dasharray"));
+          _v$8 !== _p$.h && ((_p$.h = _v$8) != null ? _el$3.style.setProperty("stroke-dashoffset", _v$8) : _el$3.style.removeProperty("stroke-dashoffset"));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined,
+          i: undefined,
+          n: undefined,
+          s: undefined,
+          h: undefined
+        });
+        return _el$;
+      })(), createComponent(Show, {
         get when() {
           return props.showInfo;
         },
         get children() {
-          return ssr(_tmpl$4, ssrHydrationKey(), escape(createComponent(Switch, {
+          var _el$4 = _tmpl$4();
+          insert(_el$4, createComponent(Switch, {
             get fallback() {
               return `${props.percent}%`;
             },
@@ -52,18 +100,19 @@ const Circle = _props => {
                   return status() === 'success';
                 },
                 get children() {
-                  return ssr(_tmpl$2, ssrHydrationKey());
+                  return _tmpl$2();
                 }
               }), createComponent(Match, {
                 get when() {
                   return status() === 'error';
                 },
                 get children() {
-                  return ssr(_tmpl$3, ssrHydrationKey());
+                  return _tmpl$3();
                 }
               })];
             }
-          })));
+          }));
+          return _el$4;
         }
       })];
     }

package/es/Progress/index.js

@@ -1,13 +1,13 @@
-import { createComponent, ssr, ssrHydrationKey, ssrAttribute, escape } from 'solid-js/web';
+import { createComponent, effect, className, insert, template } from 'solid-js/web';
 import { mergeProps, createMemo, Show, Switch, Match } from 'solid-js';
 import cs from 'classnames';
 import Circle from './Circle.js';
 import Element from '../Element/index.js';
 
-var _tmpl$ = ["<div", " style=\"", "\"></div>"],
-  _tmpl$2 = ["<span", " class=\"i-ant-design:check-circle-filled text-[var(--ant-color-success)]\"></span>"],
-  _tmpl$3 = ["<span", " class=\"i-ant-design:close-circle-filled text-[var(--ant-color-error)]\"></span>"],
-  _tmpl$4 = ["<span", " class=\"shrink-0 ml-8px text-center\">", "</span>"];
+var _tmpl$ = /*#__PURE__*/template(`<div>`),
+  _tmpl$2 = /*#__PURE__*/template(`<span class="i-ant-design:check-circle-filled text-[var(--ant-color-success)]">`),
+  _tmpl$3 = /*#__PURE__*/template(`<span class="i-ant-design:close-circle-filled text-[var(--ant-color-error)]">`),
+  _tmpl$4 = /*#__PURE__*/template(`<span class="shrink-0 ml-8px text-center">`);
 const Progress = _props => {
   const props = mergeProps({
     percent: 0,
@@ -21,16 +21,39 @@ const Progress = _props => {
   return createComponent(Element, {
     "class": "flex items-center",
     get children() {
-      return [ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(cs('w-full bg-[var(--ant-progress-remaining-color)]', 'before:content-empty before:block before:bg-[var(--color)] before:w-[var(--percent)] before:h-full before:rounded-inherit'), true), false), "height:" + `${escape(props.height, true)}px` + (";border-radius:" + `${escape(props.height, true) / 2}px`) + (";--percent:" + `${escape(props.percent, true)}%`) + (";--color:" + escape({
-        normal: 'var(--ant-color-primary)',
-        success: 'var(--ant-color-success)',
-        error: 'var(--ant-color-error)'
-      }[status()], true))), createComponent(Show, {
+      return [(() => {
+        var _el$ = _tmpl$();
+        effect(_p$ => {
+          var _v$ = cs('w-full bg-[var(--ant-progress-remaining-color)]', 'before:content-empty before:block before:bg-[var(--color)] before:w-[var(--percent)] before:h-full before: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$.e && className(_el$, _p$.e = _v$);
+          _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("height", _v$2) : _el$.style.removeProperty("height"));
+          _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$.style.setProperty("border-radius", _v$3) : _el$.style.removeProperty("border-radius"));
+          _v$4 !== _p$.o && ((_p$.o = _v$4) != null ? _el$.style.setProperty("--percent", _v$4) : _el$.style.removeProperty("--percent"));
+          _v$5 !== _p$.i && ((_p$.i = _v$5) != null ? _el$.style.setProperty("--color", _v$5) : _el$.style.removeProperty("--color"));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined,
+          i: undefined
+        });
+        return _el$;
+      })(), createComponent(Show, {
         get when() {
           return props.showInfo;
         },
         get children() {
-          return ssr(_tmpl$4, ssrHydrationKey(), escape(createComponent(Switch, {
+          var _el$2 = _tmpl$4();
+          insert(_el$2, createComponent(Switch, {
             get fallback() {
               return `${props.percent}%`;
             },
@@ -40,18 +63,19 @@ const Progress = _props => {
                   return status() === 'success';
                 },
                 get children() {
-                  return ssr(_tmpl$2, ssrHydrationKey());
+                  return _tmpl$2();
                 }
               }), createComponent(Match, {
                 get when() {
                   return status() === 'error';
                 },
                 get children() {
-                  return ssr(_tmpl$3, ssrHydrationKey());
+                  return _tmpl$3();
                 }
               })];
             }
-          })));
+          }));
+          return _el$2;
         }
       })];
     }

package/es/Radio/Button.js

@@ -1,11 +1,11 @@
-import { createComponent, ssr, ssrHydrationKey, ssrAttribute, escape } from 'solid-js/web';
+import { delegateEvents, createComponent, use, effect, insert, template } from 'solid-js/web';
 import cs from 'classnames';
 import createControllableValue from '../hooks/createControllableValue.js';
 import { wave } from '../utils/animation.js';
 import Element from '../Element/index.js';
 
-var _tmpl$ = ["<input", " class=\"hidden\"", " type=\"radio\"", ">"],
-  _tmpl$2 = ["<span", ">", "</span>"];
+var _tmpl$ = /*#__PURE__*/template(`<input class=hidden type=radio>`),
+  _tmpl$2 = /*#__PURE__*/template(`<span>`);
 const Button = props => {
   let input;
   const [checked, setChecked] = createControllableValue(props, {
@@ -48,9 +48,25 @@ const Button = props => {
       };
     },
     get children() {
-      return [ssr(_tmpl$, ssrHydrationKey(), ssrAttribute("checked", checked(), true), ssrAttribute("disabled", props.disabled, true)), ssr(_tmpl$2, ssrHydrationKey(), escape(props.children))];
+      return [(() => {
+        var _el$ = _tmpl$();
+        _el$.$$input = e => {
+          setChecked(e.target.checked);
+          props.onChange?.(e);
+        };
+        var _ref$ = input;
+        typeof _ref$ === "function" ? use(_ref$, _el$) : input = _el$;
+        effect(() => _el$.disabled = props.disabled);
+        effect(() => _el$.checked = checked());
+        return _el$;
+      })(), (() => {
+        var _el$2 = _tmpl$2();
+        insert(_el$2, () => props.children);
+        return _el$2;
+      })()];
     }
   });
 };
+delegateEvents(["input"]);
 
 export { Button as default };