antd-solid 0.0.17 → 0.0.18

package/es/Select/index.js

@@ -1,4 +1,4 @@
-import { delegateEvents, createComponent, mergeProps, insert, effect, className, setAttribute, template } from 'solid-js/web';
+import { createComponent, mergeProps, ssr, ssrHydrationKey, escape, ssrAttribute } from 'solid-js/web';
 import { splitProps, createMemo, createSelector, Show, For } from 'solid-js';
 import cs from 'classnames';
 import { isEmpty } from 'lodash-es';
@@ -8,8 +8,8 @@ import SelectInput from '../SelectInput/index.js';
 import Empty from '../Empty/index.js';
 import { unwrapStringOrJSXElement } from '../utils/solid.js';
 
-var _tmpl$ = /*#__PURE__*/template(`<div class=p-2px>`),
-  _tmpl$2 = /*#__PURE__*/template(`<div>`);
+var _tmpl$ = ["<div", " class=\"p-2px\">", "</div>"],
+  _tmpl$2 = ["<div", ">", "</div>"];
 function Select(props) {
   const [selectInputProps] = splitProps(props, ['multiple', 'allowClear', 'class', 'style', 'disabled', 'placeholder', 'status', 'size', 'variant', 'suffixIcon', 'placement', 'getPopupContainer']);
   const [value, setValue] = createControllableValue(props);
@@ -32,44 +32,15 @@ function Select(props) {
         return createComponent(Empty.PRESENTED_IMAGE_SIMPLE, {});
       },
       get children() {
-        var _el$ = _tmpl$();
-        insert(_el$, createComponent(For, {
+        return ssr(_tmpl$, ssrHydrationKey(), escape(createComponent(For, {
           get each() {
             return props.options;
           },
-          children: item => (() => {
-            var _el$2 = _tmpl$2();
-            _el$2.$$click = () => {
-              if (!props.multiple) {
-                setValue(item.value);
-                close();
-                return;
-              }
-              if (valueArr().includes(item.value)) {
-                setValue(valueArr().filter(v => v !== item.value));
-              } else {
-                setValue([...valueArr(), item.value]);
-              }
-            };
-            insert(_el$2, () => unwrapStringOrJSXElement(item.label));
-            effect(_p$ => {
-              var _v$ = cs('ellipsis box-content px-12px py-5px min-h-22px leading-22px hover:bg-[var(--ant-select-option-active-bg)] cursor-pointer rounded-[var(--ant-border-radius-sm)]', selectedValue(item.value) ? '!bg-[var(--ant-select-option-selected-bg)]' : '', item.class),
-                _v$2 = typeof item.label === 'string' || typeof item.label === 'number' ? item.label.toString() : undefined;
-              _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
-              _v$2 !== _p$.t && setAttribute(_el$2, "title", _p$.t = _v$2);
-              return _p$;
-            }, {
-              e: undefined,
-              t: undefined
-            });
-            return _el$2;
-          })()
-        }));
-        return _el$;
+          children: item => ssr(_tmpl$2, ssrHydrationKey() + ssrAttribute("class", escape(cs('ellipsis box-content px-12px py-5px min-h-22px leading-22px hover:bg-[var(--ant-select-option-active-bg)] cursor-pointer rounded-[var(--ant-border-radius-sm)]', selectedValue(item.value) ? '!bg-[var(--ant-select-option-selected-bg)]' : '', item.class), true), false) + ssrAttribute("title", typeof item.label === 'string' || typeof item.label === 'number' ? escape(item.label.toString(), true) : escape(undefined, true), false), escape(unwrapStringOrJSXElement(item.label)))
+        })));
       }
     })
   }));
 }
-delegateEvents(["click"]);
 
 export { Select as default };

package/es/SelectInput/index.js

@@ -1,4 +1,4 @@
-import { delegateEvents, createComponent, use, insert, effect, style, Dynamic, setAttribute, className, template } from 'solid-js/web';
+import { createComponent, ssr, ssrHydrationKey, ssrStyle, escape, ssrAttribute, Dynamic } from 'solid-js/web';
 import { useContext, mergeProps, createMemo, createSignal, Show, For } from 'solid-js';
 import cs from 'classnames';
 import { compact, pick, isUndefined } from 'lodash-es';
@@ -9,15 +9,15 @@ import Element from '../Element/index.js';
 import useComponentSize from '../hooks/useComponentSize.js';
 import CompactContext from '../Compact/context.js';
 
-var _tmpl$ = /*#__PURE__*/template(`<div class=w-full>`),
-  _tmpl$2 = /*#__PURE__*/template(`<span class="right-[--ant-select-input-padding-right] i-ant-design:close-circle-filled cursor-pointer text-[var(--ant-color-text-quaternary)] hover:text-[var(--ant-color-text-tertiary)] active:text-[var(--ant-color-text)]">`),
-  _tmpl$3 = /*#__PURE__*/template(`<div tabindex=0><div>`),
-  _tmpl$4 = /*#__PURE__*/template(`<div class="w-[--ant-select-popup-match-width] max-h-400px overflow-auto [font-size:var(--ant-select-popup-font-size)]">`),
-  _tmpl$5 = /*#__PURE__*/template(`<span class="inline-block w-0"> `),
-  _tmpl$6 = /*#__PURE__*/template(`<span class="block w-full h-[calc(var(--ant-select-input-height)-2px)] leading-[calc(var(--ant-select-input-height)-2px)] text-[var(--ant-color-text-placeholder)]">`),
-  _tmpl$7 = /*#__PURE__*/template(`<div class="w-full h-[calc(var(--ant-select-input-height)-2px)] leading-[calc(var(--ant-select-input-height)-2px)] ellipsis">`),
-  _tmpl$8 = /*#__PURE__*/template(`<span class="inline-block my-2px mr-4px bg-[var(--ant-select-multiple-item-bg)] leading-[var(--ant-select-multiple-item-height)] h-[var(--ant-select-multiple-item-height)] pl-8px pr-4px rounded-[var(--ant-border-radius-sm)]"><span class="i-ant-design:close-outlined text-[var(--ant-color-icon)] hover:text-[var(--ant-color-icon-hover)] text-12px cursor-pointer">`),
-  _tmpl$9 = /*#__PURE__*/template(`<span class="i-ant-design:down-outlined text-[var(--ant-color-text-quaternary)] text-12px">`);
+var _tmpl$ = ["<div", " class=\"w-full\">", "</div>"],
+  _tmpl$2 = ["<span", " class=\"right-[--ant-select-input-padding-right] i-ant-design:close-circle-filled cursor-pointer text-[var(--ant-color-text-quaternary)] hover:text-[var(--ant-color-text-tertiary)] active:text-[var(--ant-color-text)]\"></span>"],
+  _tmpl$3 = ["<div", " style=\"", "\" tabindex=\"0\"><!--$-->", "<!--/--><div", ">", "</div></div>"],
+  _tmpl$4 = ["<div", " class=\"w-[--ant-select-popup-match-width] max-h-400px overflow-auto [font-size:var(--ant-select-popup-font-size)]\" style=\"", "\">", "</div>"],
+  _tmpl$5 = ["<span", " class=\"inline-block w-0\"> </span>"],
+  _tmpl$6 = ["<span", " class=\"block w-full h-[calc(var(--ant-select-input-height)-2px)] leading-[calc(var(--ant-select-input-height)-2px)] text-[var(--ant-color-text-placeholder)]\"><!--$-->", "<!--/--><!--$-->", "<!--/--></span>"],
+  _tmpl$7 = ["<div", " class=\"w-full h-[calc(var(--ant-select-input-height)-2px)] leading-[calc(var(--ant-select-input-height)-2px)] ellipsis\"", ">", "</div>"],
+  _tmpl$8 = ["<span", " class=\"inline-block my-2px mr-4px bg-[var(--ant-select-multiple-item-bg)] leading-[var(--ant-select-multiple-item-height)] h-[var(--ant-select-multiple-item-height)] pl-8px pr-4px rounded-[var(--ant-border-radius-sm)]\"", "><!--$-->", "<!--/--><span class=\"i-ant-design:close-outlined text-[var(--ant-color-icon)] hover:text-[var(--ant-color-icon-hover)] text-12px cursor-pointer\"></span></span>"],
+  _tmpl$9 = ["<span", " class=\"i-ant-design:down-outlined text-[var(--ant-color-text-quaternary)] text-12px\"></span>"];
 function SelectInput(_props) {
   let select;
   let tooltipContent;
@@ -44,7 +44,7 @@ function SelectInput(_props) {
   const [hover, setHover] = createSignal(false);
   const showClearBtn = createMemo(() => props.allowClear && hover() && valueArr().length > 0);
   const optionLabelRender = v => props.labelRender ? props.labelRender(v) : String(v);
-  const style$1 = createMemo(() => ({
+  const style = createMemo(() => ({
     '--ant-select-input-font-size': {
       small: 'var(--ant-font-size)',
       middle: 'var(--ant-font-size)',
@@ -67,15 +67,11 @@ function SelectInput(_props) {
     ...props.style
   }));
   return createComponent(Element, {
-    ref(r$) {
-      var _ref$ = select;
-      typeof _ref$ === "function" ? _ref$(r$) : select = r$;
-    },
     get ["class"]() {
       return cs('!p[.ant-input-addon]:my--1px !p[.ant-input-addon]:mx--12px', 'rounded-6px cursor-pointer inline-block text-[var(--ant-color-text)] leading-[var(--ant-line-height)]', isCompact && 'ant-compact-item', props.class, props.disabled && 'cursor-not-allowed');
     },
     get style() {
-      return style$1();
+      return style();
     },
     get children() {
       return createComponent(Tooltip, {
@@ -92,47 +88,42 @@ function SelectInput(_props) {
         contentStyle: {
           padding: 0
         },
-        content: () => (() => {
-          var _el$5 = _tmpl$4();
-          var _ref$2 = tooltipContent;
-          typeof _ref$2 === "function" ? use(_ref$2, _el$5) : tooltipContent = _el$5;
-          insert(_el$5, () => props.content(() => setOpen(false)));
-          effect(_$p => style(_el$5, {
-            ...pick(style$1(), ['--ant-select-popup-font-size', '--ant-select-popup-match-width'])
-          }, _$p));
-          return _el$5;
-        })(),
+        content: () => ssr(_tmpl$4, ssrHydrationKey(), ssrStyle({
+          ...pick(style(), ['--ant-select-popup-font-size', '--ant-select-popup-match-width'])
+        }), escape(props.content(() => setOpen(false)))),
         get getPopupContainer() {
           return props.getPopupContainer;
         },
         get children() {
-          var _el$ = _tmpl$3(),
-            _el$3 = _el$.firstChild;
-          _el$.addEventListener("mouseleave", () => setHover(false));
-          _el$.addEventListener("mouseenter", () => setHover(true));
-          _el$.$$click = e => {
-            setOpen(v => !v);
-            setPopupMatchWidth(e.currentTarget.offsetWidth);
-            e.currentTarget.focus();
-          };
-          insert(_el$, createComponent(Show, {
+          return ssr(_tmpl$3, ssrHydrationKey() + ssrAttribute("class", escape(cs('p[.ant-input-addon]:border-transparent p[.ant-input-addon]:bg-transparent p[.ant-input-addon]:focus-within:border-transparent p[.ant-input-addon]:hover:border-transparent p[.ant-input-addon]:focus-within:[box-shadow:none]', 'relative h-[--ant-select-input-height] rounded-inherit py-1px flex items-center [font-size:var(--ant-select-input-font-size)] p-[--ant-select-input-padding]', props.disabled && '[pointer-events:none] bg-[var(--ant-color-bg-container-disabled)] color-[var(--ant-color-text-disabled)]', props.variant === 'outlined' && {
+            default: cs('border-1px border-solid border-[--ant-color-border] bg-[--ant-color-bg-container]', !props.disabled && 'hover:border-[var(--ant-color-primary)] focus-within:border-[var(--ant-color-primary)] focus-within:[box-shadow:0_0_0_2px_var(--ant-control-outline)]'),
+            error: cs('border-1px border-solid border-[--ant-color-error] bg-[--ant-color-bg-container]', !props.disabled && 'hover:border-[var(--ant-color-error-border-hover)] focus-within:[box-shadow:0_0_0_2px_rgba(255,38,5,.06)]'),
+            warning: cs('border-1px border-solid border-[--ant-color-warning] bg-[--ant-color-bg-container]', !props.disabled && 'hover:border-[var(--ant-color-warning-border-hover)] focus-within:[box-shadow:0_0_0_2px_rgba(255,215,5,.1)]')
+          }[props.status ?? 'default'], props.variant === 'filled' && {
+            default: cs('bg-[--ant-color-fill-tertiary]', !props.disabled && 'hover:bg-[--ant-color-fill-secondary]'),
+            error: cs('bg-[--ant-color-error-bg]', !props.disabled && 'hover:bg-[--ant-color-error-bg-hover]'),
+            warning: cs('bg-[--ant-color-warning-bg]', !props.disabled && 'hover:bg-[--ant-color-warning-bg-hover]')
+          }[props.status ?? 'default']), true), false), "--ant-select-input-height:" + escape({
+            small: '24px',
+            middle: '32px',
+            large: '40px'
+          }[size()], true) + (";--ant-select-multiple-item-height:" + escape({
+            small: '16px',
+            middle: '24px',
+            large: '32px'
+          }[size()], true)), escape(createComponent(Show, {
             get when() {
               return valueArr().length;
             },
             get fallback() {
-              return (() => {
-                var _el$6 = _tmpl$6();
-                insert(_el$6, () => props.placeholder, null);
-                insert(_el$6, createComponent(Show, {
-                  get when() {
-                    return !props.placeholder;
-                  },
-                  get children() {
-                    return _tmpl$5();
-                  }
-                }), null);
-                return _el$6;
-              })();
+              return ssr(_tmpl$6, ssrHydrationKey(), escape(props.placeholder), escape(createComponent(Show, {
+                get when() {
+                  return !props.placeholder;
+                },
+                get children() {
+                  return ssr(_tmpl$5, ssrHydrationKey());
+                }
+              })));
             },
             get children() {
               return createComponent(Show, {
@@ -143,39 +134,24 @@ function SelectInput(_props) {
                   return createComponent(Dynamic, {
                     component: () => {
                       const optionLabel = createMemo(() => optionLabelRender(valueArr()[0]));
-                      return (() => {
-                        var _el$8 = _tmpl$7();
-                        insert(_el$8, optionLabel);
-                        effect(() => setAttribute(_el$8, "title", typeof optionLabel() === 'string' ? optionLabel() : undefined));
-                        return _el$8;
-                      })();
+                      return ssr(_tmpl$7, ssrHydrationKey(), ssrAttribute("title", typeof optionLabel() === 'string' ? escape(optionLabel(), true) : escape(undefined, true), false), escape(optionLabel()));
                     }
                   });
                 },
                 get children() {
-                  var _el$2 = _tmpl$();
-                  insert(_el$2, createComponent(For, {
+                  return ssr(_tmpl$, ssrHydrationKey(), escape(createComponent(For, {
                     get each() {
                       return valueArr();
                     },
                     children: item => {
                       const optionLabel = createMemo(() => optionLabelRender(valueArr()[0]));
-                      return (() => {
-                        var _el$9 = _tmpl$8(),
-                          _el$10 = _el$9.firstChild;
-                        insert(_el$9, optionLabel, _el$10);
-                        _el$10.$$click = () => setValue(valueArr().filter(v => v !== item));
-                        effect(() => setAttribute(_el$9, "title", typeof optionLabel() === 'string' ? optionLabel() : undefined));
-                        return _el$9;
-                      })();
+                      return ssr(_tmpl$8, ssrHydrationKey(), ssrAttribute("title", typeof optionLabel() === 'string' ? escape(optionLabel(), true) : escape(undefined, true), false), escape(optionLabel()));
                     }
-                  }));
-                  return _el$2;
+                  })));
                 }
               });
             }
-          }), _el$3);
-          insert(_el$3, createComponent(Show, {
+          })), ssrAttribute("class", escape(cs('shrink-0 flex justify-end items-center p-[--ant-select-input-addon-after-padding] empty:hidden'), true), false), escape(createComponent(Show, {
             get when() {
               return showClearBtn();
             },
@@ -188,58 +164,18 @@ function SelectInput(_props) {
                   return props.suffixIcon;
                 },
                 get children() {
-                  return _tmpl$9();
+                  return ssr(_tmpl$9, ssrHydrationKey());
                 }
               });
             },
             get children() {
-              var _el$4 = _tmpl$2();
-              _el$4.$$click = e => {
-                e.stopPropagation();
-                setValue([]);
-                setOpen(false);
-              };
-              return _el$4;
+              return ssr(_tmpl$2, ssrHydrationKey());
             }
-          }));
-          effect(_p$ => {
-            var _v$ = cs('p[.ant-input-addon]:border-transparent p[.ant-input-addon]:bg-transparent p[.ant-input-addon]:focus-within:border-transparent p[.ant-input-addon]:hover:border-transparent p[.ant-input-addon]:focus-within:[box-shadow:none]', 'relative h-[--ant-select-input-height] rounded-inherit py-1px flex items-center [font-size:var(--ant-select-input-font-size)] p-[--ant-select-input-padding]', props.disabled && '[pointer-events:none] bg-[var(--ant-color-bg-container-disabled)] color-[var(--ant-color-text-disabled)]', props.variant === 'outlined' && {
-                default: cs('border-1px border-solid border-[--ant-color-border] bg-[--ant-color-bg-container]', !props.disabled && 'hover:border-[var(--ant-color-primary)] focus-within:border-[var(--ant-color-primary)] focus-within:[box-shadow:0_0_0_2px_var(--ant-control-outline)]'),
-                error: cs('border-1px border-solid border-[--ant-color-error] bg-[--ant-color-bg-container]', !props.disabled && 'hover:border-[var(--ant-color-error-border-hover)] focus-within:[box-shadow:0_0_0_2px_rgba(255,38,5,.06)]'),
-                warning: cs('border-1px border-solid border-[--ant-color-warning] bg-[--ant-color-bg-container]', !props.disabled && 'hover:border-[var(--ant-color-warning-border-hover)] focus-within:[box-shadow:0_0_0_2px_rgba(255,215,5,.1)]')
-              }[props.status ?? 'default'], props.variant === 'filled' && {
-                default: cs('bg-[--ant-color-fill-tertiary]', !props.disabled && 'hover:bg-[--ant-color-fill-secondary]'),
-                error: cs('bg-[--ant-color-error-bg]', !props.disabled && 'hover:bg-[--ant-color-error-bg-hover]'),
-                warning: cs('bg-[--ant-color-warning-bg]', !props.disabled && 'hover:bg-[--ant-color-warning-bg-hover]')
-              }[props.status ?? 'default']),
-              _v$2 = {
-                small: '24px',
-                middle: '32px',
-                large: '40px'
-              }[size()],
-              _v$3 = {
-                small: '16px',
-                middle: '24px',
-                large: '32px'
-              }[size()],
-              _v$4 = cs('shrink-0 flex justify-end items-center p-[--ant-select-input-addon-after-padding] empty:hidden');
-            _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-            _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("--ant-select-input-height", _v$2) : _el$.style.removeProperty("--ant-select-input-height"));
-            _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$.style.setProperty("--ant-select-multiple-item-height", _v$3) : _el$.style.removeProperty("--ant-select-multiple-item-height"));
-            _v$4 !== _p$.o && className(_el$3, _p$.o = _v$4);
-            return _p$;
-          }, {
-            e: undefined,
-            t: undefined,
-            a: undefined,
-            o: undefined
-          });
-          return _el$;
+          })));
         }
       });
     }
   });
 }
-delegateEvents(["click"]);
 
 export { SelectInput as default };

package/es/Slider/index.js

@@ -1,4 +1,4 @@
-import { delegateEvents, createComponent, insert, memo, use, effect, className, setAttribute, style, template } from 'solid-js/web';
+import { createComponent, ssr, ssrHydrationKey, ssrAttribute, escape, ssrStyle } from 'solid-js/web';
 import { mergeProps, createMemo, createSignal, children, createEffect, onCleanup, Show } from 'solid-js';
 import cs from 'classnames';
 import { clamp, isNil } from 'lodash-es';
@@ -9,13 +9,11 @@ import useHover from '../hooks/useHover.js';
 import useFocus from '../hooks/useFocus.js';
 import Element from '../Element/index.js';
 import { unwrapStringOrJSXElement } from '../utils/solid.js';
-import { setupGlobalDrag } from '../utils/setupGlobalDrag.js';
 
-var _tmpl$ = /*#__PURE__*/template(`<div>`),
-  _tmpl$2 = /*#__PURE__*/template(`<div class="absolute top-1/2 -translate-1/2 w-[--ant-slider-handle-size] h-[--ant-slider-handle-size]">`),
-  _tmpl$3 = /*#__PURE__*/template(`<div><div></div><div></div><div class="absolute left-[calc(var(--ant-slider-handle-size)/2)] right-[calc(var(--ant-slider-handle-size)/2)] top-1/2 -translate-y-1/2">`);
+var _tmpl$ = ["<div", "></div>"],
+  _tmpl$2 = ["<div", " class=\"absolute top-1/2 -translate-1/2 w-[--ant-slider-handle-size] h-[--ant-slider-handle-size]\" style=\"", "\">", "</div>"],
+  _tmpl$3 = ["<div", "><div", " style=\"", "\"></div><div", " style=\"", "\"></div><div class=\"absolute left-[calc(var(--ant-slider-handle-size)/2)] right-[calc(var(--ant-slider-handle-size)/2)] top-1/2 -translate-y-1/2\">", "</div></div>"];
 const Slider = _props => {
-  let containerRef;
   let handleRef;
   const props = mergeProps({
     min: 0,
@@ -60,10 +58,6 @@ const Slider = _props => {
     });
   });
   return createComponent(Element, {
-    ref(r$) {
-      var _ref$ = containerRef;
-      typeof _ref$ === "function" ? _ref$(r$) : containerRef = r$;
-    },
     get ["class"]() {
       return cs(props.class, 'relative cursor-pointer', props.disabled && 'cursor-not-allowed');
     },
@@ -82,48 +76,15 @@ const Slider = _props => {
       };
     },
     get children() {
-      var _el$ = _tmpl$3(),
-        _el$2 = _el$.firstChild,
-        _el$3 = _el$2.nextSibling,
-        _el$4 = _el$3.nextSibling;
-      _el$.$$click = e => {
-        const handleWidth = handleRef?.offsetWidth ?? 0;
-        const halfHandleWidth = handleWidth / 2;
-        const offsetX = clamp(e.offsetX - halfHandleWidth, 0, containerRef.offsetWidth - handleWidth);
-        setValue(props.min + offsetX / (containerRef.offsetWidth - handleWidth) * gap());
-      };
-      insert(_el$4, createComponent(Tooltip, {
+      return ssr(_tmpl$3, ssrHydrationKey() + ssrAttribute("class", escape(cs(props.disabled && 'pointer-events-none'), true), false), ssrAttribute("class", escape(cs('[background:var(--ant-slider-rail-bg)] h-[--ant-slider-rail-size] rounded-[calc(var(--ant-slider-rail-size)/2)]', !props.disabled && 'hover:[background:var(--ant-slider-rail-hover-bg)]'), true), false), ssrStyle(props.railBgStyle), ssrAttribute("class", escape(cs('absolute left-0 top-1/2 -translate-y-1/2 h-[--ant-slider-rail-size] rounded-[calc(var(--ant-slider-rail-size)/2)]', props.disabled ? 'bg-[var(--ant-slider-track-bg-disabled)]' : ['bg-[var(--ant-slider-track-bg)] hover:bg-[var(--ant-slider-track-hover-bg)]']), true), false), "width:" + `${escape(progress(), true) * 100}%`, escape(createComponent(Tooltip, {
         get open() {
-          return memo(() => !!props.tooltip)() && (isHover() || isFocus() || isDragging());
+          return props.tooltip && (isHover() || isFocus() || isDragging());
         },
         get content() {
-          return memo(() => !!(typeof props.tooltip === 'object' && props.tooltip.formatter))() ? props.tooltip.formatter(value()) : value();
+          return typeof props.tooltip === 'object' && props.tooltip.formatter ? props.tooltip.formatter(value()) : value();
         },
         get children() {
-          var _el$5 = _tmpl$2();
-          _el$5.$$mousedown = e => {
-            const startX = e.clientX;
-            const startValue = value();
-            setIsDragging(true);
-            const handleWidth = handleRef.offsetWidth;
-            setupGlobalDrag(
-            // eslint-disable-next-line solid/reactivity
-            _e => {
-              const moveX = _e.clientX - startX;
-              setValue(startValue + moveX / (containerRef.offsetWidth - handleWidth) * gap());
-            },
-            // eslint-disable-next-line solid/reactivity
-            () => {
-              props.onChangeComplete?.(value());
-              setIsDragging(false);
-            });
-          };
-          _el$5.$$click = e => {
-            e.stopPropagation();
-          };
-          var _ref$2 = handleRef;
-          typeof _ref$2 === "function" ? use(_ref$2, _el$5) : handleRef = _el$5;
-          insert(_el$5, createComponent(Show, {
+          return ssr(_tmpl$2, ssrHydrationKey(), "left:" + `${escape(progress(), true) * 100}%`, escape(createComponent(Show, {
             get when() {
               return isNil(resolvedHandle());
             },
@@ -131,47 +92,13 @@ const Slider = _props => {
               return resolvedHandle();
             },
             get children() {
-              var _el$6 = _tmpl$();
-              effect(_p$ => {
-                var _v$ = cs('box-border w-full h-full bg-[--ant-color-bg-container-secondary] rounded-1/2 border-solid border-2px cursor-pointer', props.disabled ? 'border-[var(--ant-slider-handle-color-disabled)]' : ['border-[var(--ant-slider-handle-color)]', 'hover:border-[var(--ant-slider-handle-active-color)] hover:[outline:4px_solid_var(--ant-control-outline)]', 'focus:border-[var(--ant-slider-handle-active-color)] focus:[outline:4px_solid_var(--ant-control-outline)]']),
-                  _v$2 = props.disabled ? undefined : '0';
-                _v$ !== _p$.e && className(_el$6, _p$.e = _v$);
-                _v$2 !== _p$.t && setAttribute(_el$6, "tabindex", _p$.t = _v$2);
-                return _p$;
-              }, {
-                e: undefined,
-                t: undefined
-              });
-              return _el$6;
+              return ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(cs('box-border w-full h-full bg-[--ant-color-bg-container-secondary] rounded-1/2 border-solid border-2px cursor-pointer', props.disabled ? 'border-[var(--ant-slider-handle-color-disabled)]' : ['border-[var(--ant-slider-handle-color)]', 'hover:border-[var(--ant-slider-handle-active-color)] hover:[outline:4px_solid_var(--ant-control-outline)]', 'focus:border-[var(--ant-slider-handle-active-color)] focus:[outline:4px_solid_var(--ant-control-outline)]']), true), false) + ssrAttribute("tabindex", props.disabled ? escape(undefined, true) : '0', false));
             }
-          }));
-          effect(() => `${progress() * 100}%` != null ? _el$5.style.setProperty("left", `${progress() * 100}%`) : _el$5.style.removeProperty("left"));
-          return _el$5;
+          })));
         }
-      }));
-      effect(_p$ => {
-        var _v$3 = cs(props.disabled && 'pointer-events-none'),
-          _v$4 = cs('[background:var(--ant-slider-rail-bg)] h-[--ant-slider-rail-size] rounded-[calc(var(--ant-slider-rail-size)/2)]', !props.disabled && 'hover:[background:var(--ant-slider-rail-hover-bg)]'),
-          _v$5 = props.railBgStyle,
-          _v$6 = cs('absolute left-0 top-1/2 -translate-y-1/2 h-[--ant-slider-rail-size] rounded-[calc(var(--ant-slider-rail-size)/2)]', props.disabled ? 'bg-[var(--ant-slider-track-bg-disabled)]' : ['bg-[var(--ant-slider-track-bg)] hover:bg-[var(--ant-slider-track-hover-bg)]']),
-          _v$7 = `${progress() * 100}%`;
-        _v$3 !== _p$.e && className(_el$, _p$.e = _v$3);
-        _v$4 !== _p$.t && className(_el$2, _p$.t = _v$4);
-        _p$.a = style(_el$2, _v$5, _p$.a);
-        _v$6 !== _p$.o && className(_el$3, _p$.o = _v$6);
-        _v$7 !== _p$.i && ((_p$.i = _v$7) != null ? _el$3.style.setProperty("width", _v$7) : _el$3.style.removeProperty("width"));
-        return _p$;
-      }, {
-        e: undefined,
-        t: undefined,
-        a: undefined,
-        o: undefined,
-        i: undefined
-      });
-      return _el$;
+      })));
     }
   });
 };
-delegateEvents(["click", "mousedown"]);
 
 export { Slider as default };

package/es/Space/index.js

@@ -1,4 +1,4 @@
-import { createComponent, mergeProps, memo } from 'solid-js/web';
+import { createComponent, mergeProps } from 'solid-js/web';
 import { For } from 'solid-js';
 import Element from '../Element/index.js';
 import { unwrapStringOrJSXElement } from '../utils/solid.js';
@@ -7,7 +7,7 @@ function Space(props) {
   return createComponent(Element, {
     get children() {
       return createComponent(For, mergeProps(props, {
-        children: (item, index) => [memo(() => memo(() => index() !== 0)() && unwrapStringOrJSXElement(props.split)), memo(() => props.children(item, index))]
+        children: (item, index) => [index() !== 0 && unwrapStringOrJSXElement(props.split), props.children(item, index)]
       }));
     }
   });

package/es/Spin/index.js

@@ -1,12 +1,12 @@
-import { insert, createComponent, effect, template } from 'solid-js/web';
+import { ssr, ssrHydrationKey, escape, createComponent } from 'solid-js/web';
 import { mergeProps, children, Show } from 'solid-js';
 import cs from 'classnames';
 import Element from '../Element/index.js';
 import { unwrapStringOrJSXElement, isEmptyJSXElement } from '../utils/solid.js';
 
-var _tmpl$ = /*#__PURE__*/template(`<div class="inline-flex flex-col items-center gap-8px text-[var(--ant-color-primary)]"><span class="i-ant-design:loading keyframes-spin [animation:spin_1s_linear_infinite]">`),
-  _tmpl$2 = /*#__PURE__*/template(`<div>`),
-  _tmpl$3 = /*#__PURE__*/template(`<div class="absolute inset-0 flex items-center justify-center bg-[var(--ant-color-bg-container)] opacity-40">`);
+var _tmpl$ = ["<div", " class=\"inline-flex flex-col items-center gap-8px text-[var(--ant-color-primary)]\"><span class=\"i-ant-design:loading keyframes-spin [animation:spin_1s_linear_infinite]\" style=\"", "\"></span><!--$-->", "<!--/--></div>"],
+  _tmpl$2 = ["<div", ">", "</div>"],
+  _tmpl$3 = ["<div", " class=\"absolute inset-0 flex items-center justify-center bg-[var(--ant-color-bg-container)] opacity-40\">", "</div>"];
 const Spin = _props => {
   const props = mergeProps({
     spinning: true,
@@ -14,20 +14,14 @@ const Spin = _props => {
   }, _props);
   const resolvedChildren = children(() => props.children);
   const resolvedTip = children(() => unwrapStringOrJSXElement(props.tip));
-  const spin = (() => {
-    var _el$ = _tmpl$(),
-      _el$2 = _el$.firstChild;
-    insert(_el$, createComponent(Show, {
-      get when() {
-        return !isEmptyJSXElement(resolvedTip());
-      },
-      get children() {
-        return resolvedTip();
-      }
-    }), null);
-    effect(() => `${props.size}px` != null ? _el$2.style.setProperty("font-size", `${props.size}px`) : _el$2.style.removeProperty("font-size"));
-    return _el$;
-  })();
+  const spin = ssr(_tmpl$, ssrHydrationKey(), "font-size:" + `${escape(props.size, true)}px`, escape(createComponent(Show, {
+    get when() {
+      return !isEmptyJSXElement(resolvedTip());
+    },
+    get children() {
+      return resolvedTip();
+    }
+  })));
   return createComponent(Show, {
     get when() {
       return !isEmptyJSXElement(resolvedChildren());
@@ -59,18 +53,12 @@ const Spin = _props => {
           return props.style;
         },
         get children() {
-          return [(() => {
-            var _el$3 = _tmpl$2();
-            insert(_el$3, resolvedChildren);
-            return _el$3;
-          })(), createComponent(Show, {
+          return [ssr(_tmpl$2, ssrHydrationKey(), escape(resolvedChildren())), createComponent(Show, {
             get when() {
               return props.spinning;
             },
             get children() {
-              var _el$4 = _tmpl$3();
-              insert(_el$4, spin);
-              return _el$4;
+              return ssr(_tmpl$3, ssrHydrationKey(), escape(spin));
             }
           })];
         }

package/es/Switch/index.js

@@ -1,10 +1,10 @@
-import { createComponent, effect, className, template } from 'solid-js/web';
+import { createComponent, ssr, ssrHydrationKey, ssrAttribute, escape } from 'solid-js/web';
 import cs from 'classnames';
 import createControllableValue from '../hooks/createControllableValue.js';
 import Element from '../Element/index.js';
 import useComponentSize from '../hooks/useComponentSize.js';
 
-var _tmpl$ = /*#__PURE__*/template(`<div>`);
+var _tmpl$ = ["<div", "></div>"];
 const Switch = props => {
   const size = useComponentSize(() => props.size);
   const [checked, setChecked] = createControllableValue(props, {
@@ -27,13 +27,11 @@ const Switch = props => {
       setChecked(c => !c);
     },
     get children() {
-      var _el$ = _tmpl$();
-      effect(() => className(_el$, cs('rounded-50% bg-white absolute top-1/2 -translate-y-1/2 transition-left', {
+      return ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(cs('rounded-50% bg-white absolute top-1/2 -translate-y-1/2 transition-left', {
         large: 'w-24px h-24px',
         middle: 'w-18px h-18px',
         small: 'w-12px h-12px'
-      }[size()], checked() ? 'right-2px' : 'left-2px')));
-      return _el$;
+      }[size()], checked() ? 'right-2px' : 'left-2px'), true), false));
     }
   });
 };