antd-solid 0.0.20 → 0.0.22

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 };

package/es/Radio/index.js

@@ -1,13 +1,14 @@
-import { createComponent, ssr, ssrHydrationKey, ssrAttribute, escape } from 'solid-js/web';
+import { delegateEvents, createComponent, effect, className, insert, template } from 'solid-js/web';
 import { Show } from 'solid-js';
 import cs from 'classnames';
 import createControllableValue from '../hooks/createControllableValue.js';
 import Button from './Button.js';
 import Group from './Group.js';
+import { wave } from '../utils/animation.js';
 import Element from '../Element/index.js';
 
-var _tmpl$ = ["<span", "><input class=\"m-0 hidden\"", " type=\"radio\"", "><span", "></span></span>"],
-  _tmpl$2 = ["<span", " class=\"px-8px\">", "</span>"];
+var _tmpl$ = /*#__PURE__*/template(`<span><input class="m-0 hidden"type=radio><span>`),
+  _tmpl$2 = /*#__PURE__*/template(`<span class=px-8px>`);
 const Radio = props => {
   const [checked, setChecked] = createControllableValue(props, {
     defaultValue: false,
@@ -21,12 +22,40 @@ const Radio = props => {
       return cs('inline-flex cursor-pointer inline-flex items-center', props.disabled && 'text-[var(--ant-color-text-disabled)] cursor-not-allowed');
     },
     get children() {
-      return [ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(cs('relative w-16px h-16px rounded-50%'), true), false), ssrAttribute("checked", checked(), true), ssrAttribute("disabled", props.disabled, true), ssrAttribute("class", escape(cs('absolute inset-0 rounded-inherit [border:1px_solid_var(--ant-color-border)] bg-[var(--ant-color-bg-container)]', checked() && (props.disabled ? 'flex justify-center items-center before:content-empty before:block before:w-8px before:h-8px before:bg-[var(--ant-radio-dot-color-disabled)] before:rounded-50%' : '[border:5px_solid_var(--ant-color-primary)]'), props.disabled && 'bg-[var(--ant-color-bg-container-disabled)]'), true), false)), createComponent(Show, {
+      return [(() => {
+        var _el$ = _tmpl$(),
+          _el$2 = _el$.firstChild,
+          _el$3 = _el$2.nextSibling;
+        _el$.$$click = e => {
+          wave(e.currentTarget, 'var(--ant-color-primary)');
+        };
+        _el$2.$$input = e => {
+          setChecked(e.target.checked);
+          props.onChange?.(e);
+        };
+        effect(_p$ => {
+          var _v$ = cs('relative w-16px h-16px rounded-50%'),
+            _v$2 = props.disabled,
+            _v$3 = cs('absolute inset-0 rounded-inherit [border:1px_solid_var(--ant-color-border)] bg-[var(--ant-color-bg-container)]', checked() && (props.disabled ? 'flex justify-center items-center before:content-empty before:block before:w-8px before:h-8px before:bg-[var(--ant-radio-dot-color-disabled)] before:rounded-50%' : '[border:5px_solid_var(--ant-color-primary)]'), props.disabled && 'bg-[var(--ant-color-bg-container-disabled)]');
+          _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+          _v$2 !== _p$.t && (_el$2.disabled = _p$.t = _v$2);
+          _v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined
+        });
+        effect(() => _el$2.checked = checked());
+        return _el$;
+      })(), createComponent(Show, {
         get when() {
           return props.children;
         },
         get children() {
-          return ssr(_tmpl$2, ssrHydrationKey(), escape(props.children));
+          var _el$4 = _tmpl$2();
+          insert(_el$4, () => props.children);
+          return _el$4;
         }
       })];
     }
@@ -34,5 +63,6 @@ const Radio = props => {
 };
 Radio.Button = Button;
 Radio.Group = Group;
+delegateEvents(["click", "input"]);
 
 export { Radio as default };

package/es/RangeInput/index.js

@@ -1,4 +1,4 @@
-import { createComponent, ssr, ssrHydrationKey, escape, ssrAttribute, ssrStyle } from 'solid-js/web';
+import { delegateEvents, createComponent, use, insert, effect, setAttribute, className, style, template } from 'solid-js/web';
 import { useContext, createSignal, createEffect, on, createMemo, Show } from 'solid-js';
 import cs from 'classnames';
 import { compact, isNil } from 'lodash-es';
@@ -8,11 +8,11 @@ import useClickAway from '../hooks/useClickAway.js';
 import Element from '../Element/index.js';
 import CompactContext from '../Compact/context.js';
 
-var _tmpl$ = ["<span", " class=\"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$2 = ["<div", " tabindex=\"0\"><div class=\"truncate\">", "</div><span class=\"i-ant-design:swap-right-outlined w-32px\"></span><div class=\"truncate\">", "</div><div aria-label=\"active-bar\" class=\"h-1px bg-[var(--ant-color-primary)] absolute bottom-0 transition-left\" style=\"", "\"></div><div class=\"absolute top-0 bottom-0 right-11px flex items-center\">", "</div></div>"],
-  _tmpl$3 = ["<div", " class=\"w-200px max-h-400px overflow-auto\" style=\"", "\">", "</div>"],
-  _tmpl$4 = ["<input", " class=\"h-30px [outline:none] bg-inherit placeholder-text-[var(--ant-color-text-placeholder)]\"", " readonly>"],
-  _tmpl$5 = ["<span", " class=\"i-ant-design:down-outlined text-[var(--ant-color-text-quaternary)]\"></span>"];
+var _tmpl$ = /*#__PURE__*/template(`<span class="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$2 = /*#__PURE__*/template(`<div tabindex=0><div class=truncate></div><span class="i-ant-design:swap-right-outlined w-32px"></span><div class=truncate></div><div aria-label=active-bar class="h-1px bg-[var(--ant-color-primary)] absolute bottom-0 transition-left"></div><div class="absolute top-0 bottom-0 right-11px flex items-center">`),
+  _tmpl$3 = /*#__PURE__*/template(`<div class="w-200px max-h-400px overflow-auto">`),
+  _tmpl$4 = /*#__PURE__*/template(`<input class="h-30px [outline:none] bg-inherit placeholder-text-[var(--ant-color-text-placeholder)]"readonly>`),
+  _tmpl$5 = /*#__PURE__*/template(`<span class="i-ant-design:down-outlined text-[var(--ant-color-text-quaternary)]">`);
 const statusClassDict = {
   default: (disabled, focus) => cs('[border:1px_solid_var(--ant-color-border)]', !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)]', focus && 'border-[var(--ant-color-primary)] [box-shadow:0_0_0_2px_var(--ant-control-outline)]'),
   error: (disabled, focus) => cs('[border:1px_solid_var(--ant-color-error)]', !disabled && 'hover:border-[var(--ant-color-error-border-hover)] focus-within:[box-shadow:0_0_0_2px_rgba(255,38,5,.06)]', focus && '[box-shadow:0_0_0_2px_rgba(255,38,5,.06)]'),
@@ -105,50 +105,104 @@ function RangeInput(props) {
         contentStyle: {
           padding: 0
         },
-        content: () => ssr(_tmpl$3, ssrHydrationKey(), "width:" + `${escape(width(), true)}px`, escape(props.content({
-          currentFocusType,
-          tempValue,
-          setSingleValue
-        }))),
+        content: () => (() => {
+          var _el$8 = _tmpl$3();
+          var _ref$4 = tooltipContent;
+          typeof _ref$4 === "function" ? use(_ref$4, _el$8) : tooltipContent = _el$8;
+          insert(_el$8, () => props.content({
+            currentFocusType,
+            tempValue,
+            setSingleValue
+          }));
+          effect(() => `${width()}px` != null ? _el$8.style.setProperty("width", `${width()}px`) : _el$8.style.removeProperty("width"));
+          return _el$8;
+        })(),
         get children() {
-          return ssr(_tmpl$2, ssrHydrationKey() + ssrAttribute("class", escape(cs('relative min-h-32px pr-25px rounded-inherit grid [grid-template-columns:1fr_auto_1fr] items-center', tempValue().length && props.multiple ? 'pl-4px' : 'pl-11px', props.multiple && 'py-1px', props.disabled && '[pointer-events:none] bg-[var(--ant-color-bg-container-disabled)] color-[var(--ant-color-text-disabled)]', statusClassDict[props.status ?? 'default'](!!props.disabled, open())), true), false), escape(createComponent(Show, {
+          var _el$ = _tmpl$2(),
+            _el$2 = _el$.firstChild,
+            _el$3 = _el$2.nextSibling,
+            _el$4 = _el$3.nextSibling,
+            _el$5 = _el$4.nextSibling,
+            _el$6 = _el$5.nextSibling;
+          _el$.addEventListener("mouseleave", () => setHover(false));
+          _el$.addEventListener("mouseenter", () => setHover(true));
+          _el$.$$click = e => {
+            setOpen(true);
+            setWidth(e.currentTarget.offsetWidth);
+            setCurrentFocusType(e.target !== endDom ? 'start' : 'end');
+          };
+          var _ref$ = container;
+          typeof _ref$ === "function" ? use(_ref$, _el$) : container = _el$;
+          var _ref$2 = startDom;
+          typeof _ref$2 === "function" ? use(_ref$2, _el$2) : startDom = _el$2;
+          insert(_el$2, createComponent(Show, {
             get when() {
               return !isNil(tempValue()[0]);
             },
             get fallback() {
-              return ssr(_tmpl$4, ssrHydrationKey(), ssrAttribute("placeholder", escape(props.placeholder?.[0], true), false));
+              return (() => {
+                var _el$9 = _tmpl$4();
+                effect(() => setAttribute(_el$9, "placeholder", props.placeholder?.[0]));
+                return _el$9;
+              })();
             },
             get children() {
               return optionLabelRender(tempValue()[0]);
             }
-          })), escape(createComponent(Show, {
+          }));
+          var _ref$3 = endDom;
+          typeof _ref$3 === "function" ? use(_ref$3, _el$4) : endDom = _el$4;
+          insert(_el$4, createComponent(Show, {
             get when() {
               return !isNil(tempValue()[1]);
             },
             get fallback() {
-              return ssr(_tmpl$4, ssrHydrationKey(), ssrAttribute("placeholder", escape(props.placeholder?.[1], true), false));
+              return (() => {
+                var _el$10 = _tmpl$4();
+                effect(() => setAttribute(_el$10, "placeholder", props.placeholder?.[1]));
+                return _el$10;
+              })();
             },
             get children() {
               return optionLabelRender(tempValue()[1]);
             }
-          })), ssrStyle({
-            display: open() ? 'block' : 'none',
-            ...activeBarStyle()
-          }), escape(createComponent(Show, {
+          }));
+          insert(_el$6, createComponent(Show, {
             get when() {
               return showClearBtn();
             },
             get fallback() {
-              return ssr(_tmpl$5, ssrHydrationKey());
+              return _tmpl$5();
             },
             get children() {
-              return ssr(_tmpl$, ssrHydrationKey());
+              var _el$7 = _tmpl$();
+              _el$7.$$click = e => {
+                e.stopPropagation();
+                setValue([]);
+                setOpen(false);
+              };
+              return _el$7;
             }
-          })));
+          }));
+          effect(_p$ => {
+            var _v$ = cs('relative min-h-32px pr-25px rounded-inherit grid [grid-template-columns:1fr_auto_1fr] items-center', tempValue().length && props.multiple ? 'pl-4px' : 'pl-11px', props.multiple && 'py-1px', props.disabled && '[pointer-events:none] bg-[var(--ant-color-bg-container-disabled)] color-[var(--ant-color-text-disabled)]', statusClassDict[props.status ?? 'default'](!!props.disabled, open())),
+              _v$2 = {
+                display: open() ? 'block' : 'none',
+                ...activeBarStyle()
+              };
+            _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+            _p$.t = style(_el$5, _v$2, _p$.t);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$;
         }
       });
     }
   });
 }
+delegateEvents(["click"]);
 
 export { RangeInput as default };

package/es/Result/index.js

@@ -1,12 +1,12 @@
-import { createComponent, ssr, ssrHydrationKey, ssrAttribute, escape } from 'solid-js/web';
+import { createComponent, effect, className, insert, template } from 'solid-js/web';
 import { mergeProps } from 'solid-js';
 import cs from 'classnames';
 import Element from '../Element/index.js';
 
-var _tmpl$ = ["<div", " class=\"mb-24px\"><span", "></span></div>"],
-  _tmpl$2 = ["<div", " class=\"my-8px text-[--ant-color-text-heading] text-24px\">", "</div>"],
-  _tmpl$3 = ["<div", " class=\"text-[--ant-color-text-description] text-14px\">", "</div>"],
-  _tmpl$4 = ["<div", " class=\"mt-24px\">", "</div>"];
+var _tmpl$ = /*#__PURE__*/template(`<div class=mb-24px><span>`),
+  _tmpl$2 = /*#__PURE__*/template(`<div class="my-8px text-[--ant-color-text-heading] text-24px">`),
+  _tmpl$3 = /*#__PURE__*/template(`<div class="text-[--ant-color-text-description] text-14px">`),
+  _tmpl$4 = /*#__PURE__*/template(`<div class=mt-24px>`);
 const statusIconMap = {
   success: '!text-[--ant-color-success] i-ant-design:check-circle-filled',
   info: '!text-[--ant-color-primary] i-ant-design:exclamation-circle-filled',
@@ -20,7 +20,28 @@ const Result = _props => {
   return createComponent(Element, {
     "class": "text-center px-32px py-48px [font-size:var(--ant-font-size)] text-[--ant-color-text] leading-[--ant-line-height]",
     get children() {
-      return [ssr(_tmpl$, ssrHydrationKey(), ssrAttribute("class", escape(cs(statusIconMap[props.status], 'text-72px'), true), false)), ssr(_tmpl$2, ssrHydrationKey(), escape(props.title)), ssr(_tmpl$3, ssrHydrationKey(), escape(props.subTitle)), ssr(_tmpl$4, ssrHydrationKey(), escape(props.extra)), ssr(_tmpl$4, ssrHydrationKey(), escape(props.children))];
+      return [(() => {
+        var _el$ = _tmpl$(),
+          _el$2 = _el$.firstChild;
+        effect(() => className(_el$2, cs(statusIconMap[props.status], 'text-72px')));
+        return _el$;
+      })(), (() => {
+        var _el$3 = _tmpl$2();
+        insert(_el$3, () => props.title);
+        return _el$3;
+      })(), (() => {
+        var _el$4 = _tmpl$3();
+        insert(_el$4, () => props.subTitle);
+        return _el$4;
+      })(), (() => {
+        var _el$5 = _tmpl$4();
+        insert(_el$5, () => props.extra);
+        return _el$5;
+      })(), (() => {
+        var _el$6 = _tmpl$4();
+        insert(_el$6, () => props.children);
+        return _el$6;
+      })()];
     }
   });
 };

package/es/Segmented/index.js

@@ -1,4 +1,4 @@
-import { createComponent, ssr, ssrHydrationKey, ssrAttribute, escape } from 'solid-js/web';
+import { delegateEvents, createComponent, insert, effect, className, template } from 'solid-js/web';
 import { createSelector, For, Show } from 'solid-js';
 import cs from 'classnames';
 import createControllableValue from '../hooks/createControllableValue.js';
@@ -6,7 +6,7 @@ import { unwrapStringOrJSXElement } from '../utils/solid.js';
 import Element from '../Element/index.js';
 import useComponentSize from '../hooks/useComponentSize.js';
 
-var _tmpl$ = ["<div", "><div", ">", "</div></div>"];
+var _tmpl$ = /*#__PURE__*/template(`<div><div>`);
 const unWarpValue = value => typeof value === 'object' ? value.value : value;
 const Segmented = props => {
   const [value, setValue] = createControllableValue(props, {
@@ -34,20 +34,40 @@ const Segmented = props => {
         get each() {
           return props.options;
         },
-        children: item => ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(cs(props.block && 'basis-0 grow-1', isDisabledValue(item) && 'cursor-not-allowed'), true), false), ssrAttribute("class", escape(cs('rounded-[var(--ant-border-radius-sm)] px-[var(--ant-padding-sm)] cursor-pointer [white-space:nowrap]', isSelected(unWarpValue(item)) && 'bg-[var(--ant-segmented-item-selected-bg)]', isDisabledValue(item) ? '[pointer-events:none] text-[var(--ant-color-text-disabled)]' : isSelected(unWarpValue(item)) ? 'shadow-[var(--ant-box-shadow-tertiary)] text-[var(--ant-segmented-item-selected-color)]' : 'text-[var(--ant-segmented-item-color)] hover:text-[var(--ant-segmented-item-hover-color)] hover:bg-[var(--ant-segmented-item-hover-bg)] active:bg-[var(--ant-segmented-item-active-bg)]', props.block && 'flex justify-center', {
-          small: 'leading-20px',
-          middle: 'leading-28px',
-          large: 'leading-36px'
-        }[size()]), true), false), escape(createComponent(Show, {
-          when: typeof item !== 'object',
-          get fallback() {
-            return typeof item === 'object' && unwrapStringOrJSXElement(item.label);
-          },
-          children: item
-        })))
+        children: item => (() => {
+          var _el$ = _tmpl$(),
+            _el$2 = _el$.firstChild;
+          _el$2.$$click = e => {
+            setValue(unWarpValue(item));
+            typeof item === 'object' && item.onClick?.(e);
+          };
+          insert(_el$2, createComponent(Show, {
+            when: typeof item !== 'object',
+            get fallback() {
+              return typeof item === 'object' && unwrapStringOrJSXElement(item.label);
+            },
+            children: item
+          }));
+          effect(_p$ => {
+            var _v$ = cs(props.block && 'basis-0 grow-1', isDisabledValue(item) && 'cursor-not-allowed'),
+              _v$2 = cs('rounded-[var(--ant-border-radius-sm)] px-[var(--ant-padding-sm)] cursor-pointer [white-space:nowrap]', isSelected(unWarpValue(item)) && 'bg-[var(--ant-segmented-item-selected-bg)]', isDisabledValue(item) ? '[pointer-events:none] text-[var(--ant-color-text-disabled)]' : isSelected(unWarpValue(item)) ? 'shadow-[var(--ant-box-shadow-tertiary)] text-[var(--ant-segmented-item-selected-color)]' : 'text-[var(--ant-segmented-item-color)] hover:text-[var(--ant-segmented-item-hover-color)] hover:bg-[var(--ant-segmented-item-hover-bg)] active:bg-[var(--ant-segmented-item-active-bg)]', props.block && 'flex justify-center', {
+                small: 'leading-20px',
+                middle: 'leading-28px',
+                large: 'leading-36px'
+              }[size()]);
+            _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+            _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$;
+        })()
       });
     }
   });
 };
+delegateEvents(["click"]);
 
 export { Segmented as default };