antd-solid 0.0.21 → 0.0.23

package/es/ColorPicker/ColorPickerSlider.js

@@ -1,4 +1,4 @@
-import { ssr, ssrHydrationKey, escape, createComponent, ssrAttribute } from 'solid-js/web';
+import { delegateEvents, insert, createComponent, memo, effect, className, template } from 'solid-js/web';
 import { useContext, createMemo, Show } from 'solid-js';
 import cs from 'classnames';
 import ColorPickerContext from './context.js';
@@ -6,77 +6,110 @@ import Slider from '../Slider/index.js';
 import Color from './color.js';
 import ColorPickUpSvg from '../assets/svg/ColorPickUp.js';
 
-var _tmpl$ = ["<div", " class=\"flex gap-[--ant-margin-sm] items-center\"><div class=\"flex flex-col gap-[--ant-margin-sm] w-full\"><!--$-->", "<!--/--><!--$-->", "<!--/--></div><div class=\"shrink-0 w-28px h-28px rounded-[--ant-border-radius-sm]\" style=\"", "\"><div class=\"w-full h-full rounded-inherit\" style=\"", "\"></div></div><!--$-->", "<!--/--></div>"],
-  _tmpl$2 = ["<span", " class=\"shrink-0 text-18px cursor-pointer\">", "</span>"],
-  _tmpl$3 = ["<div", " style=\"", "\" tabindex=\"0\"></div>"];
+var _tmpl$ = /*#__PURE__*/template(`<div class="flex gap-[--ant-margin-sm] items-center"><div class="flex flex-col gap-[--ant-margin-sm] w-full"></div><div class="shrink-0 w-28px h-28px rounded-[--ant-border-radius-sm]"><div class="w-full h-full rounded-inherit">`),
+  _tmpl$2 = /*#__PURE__*/template(`<span class="shrink-0 text-18px cursor-pointer">`),
+  _tmpl$3 = /*#__PURE__*/template(`<div tabindex=0>`);
 const ColorPickerSlider = () => {
   const context = useContext(ColorPickerContext);
   const color = createMemo(() => context?.color() ?? new Color());
-  return ssr(_tmpl$, ssrHydrationKey(), escape(createComponent(Slider, {
-    get value() {
-      return color().toHsv().h / 3.55;
-    },
-    onChange: v => {
-      const hsv = color().toHsv();
-      hsv.h = Math.round(v * 3.55);
-      context?.setColor(new Color(hsv));
-    },
-    onChangeComplete: () => {
-      context?.setColor(color(), true);
-    },
-    tooltip: false,
-    handle: () => getSliderHandle(color().toHueRgbString()),
-    style: {
-      '--ant-slider-rail-size': '8px',
-      '--ant-slider-handle-size': '10px',
-      '--ant-slider-rail-bg': 'linear-gradient(90deg, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)',
-      '--ant-slider-rail-hover-bg': 'var(--ant-slider-rail-bg)',
-      '--ant-slider-track-bg': 'transparent',
-      '--ant-slider-track-hover-bg': 'transparent'
-    },
-    railBgStyle: {
-      'box-shadow': 'inset 0 0 1px 0 var(--ant-color-text-quaternary)'
-    }
-  })), escape(createComponent(Show, {
-    get when() {
-      return !context?.disabledAlpha();
-    },
-    get children() {
-      return createComponent(Slider, {
-        get value() {
-          return color().a * 100;
-        },
-        onChange: v => {
-          context?.setColor(color().clone().setAlpha(v / 100));
-        },
-        onChangeComplete: () => {
-          context?.setColor(color(), true);
-        },
-        min: 0,
-        step: 1,
-        tooltip: false,
-        handle: () => getSliderHandle(color().toRgbString()),
-        get style() {
-          return {
-            '--ant-slider-rail-size': '8px',
-            '--ant-slider-handle-size': '10px',
-            '--ant-slider-rail-bg': `linear-gradient(90deg, ${color().clone().setAlpha(0).toRgbString()} 0%, ${color().toHexString()} 100%)`,
-            '--ant-slider-rail-hover-bg': 'var(--ant-slider-rail-bg)',
-            '--ant-slider-track-bg': 'transparent',
-            '--ant-slider-track-hover-bg': 'transparent',
-            'background-image': 'conic-gradient(var(--ant-color-fill-secondary) 0 25%, transparent 0 50%, var(--ant-color-fill-secondary) 0 75%, transparent 0)',
-            'background-size': '8px 8px'
-          };
-        },
-        railBgStyle: {
-          'box-shadow': 'inset 0 0 1px 0 var(--ant-color-text-quaternary)'
-        }
-      });
-    }
-  })), "background-image:" + "conic-gradient(var(--ant-color-fill-secondary) 0 25%, transparent 0 50%, var(--ant-color-fill-secondary) 0 75%, transparent 0)" + (";background-size:" + "50% 50%") + (";box-shadow:" + "inset 0 0 1px 0 var(--ant-color-text-quaternary)"), "background-color:" + escape(color().toRgbString(), true), window.EyeDropper && ssr(_tmpl$2, ssrHydrationKey(), escape(createComponent(ColorPickUpSvg, {}))));
+  return (() => {
+    var _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.nextSibling,
+      _el$4 = _el$3.firstChild;
+    insert(_el$2, createComponent(Slider, {
+      get value() {
+        return color().toHsv().h / 3.55;
+      },
+      onChange: v => {
+        const hsv = color().toHsv();
+        hsv.h = Math.round(v * 3.55);
+        context?.setColor(new Color(hsv));
+      },
+      onChangeComplete: () => {
+        context?.setColor(color(), true);
+      },
+      tooltip: false,
+      handle: () => getSliderHandle(color().toHueRgbString()),
+      style: {
+        '--ant-slider-rail-size': '8px',
+        '--ant-slider-handle-size': '10px',
+        '--ant-slider-rail-bg': 'linear-gradient(90deg, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)',
+        '--ant-slider-rail-hover-bg': 'var(--ant-slider-rail-bg)',
+        '--ant-slider-track-bg': 'transparent',
+        '--ant-slider-track-hover-bg': 'transparent'
+      },
+      railBgStyle: {
+        'box-shadow': 'inset 0 0 1px 0 var(--ant-color-text-quaternary)'
+      }
+    }), null);
+    insert(_el$2, createComponent(Show, {
+      get when() {
+        return !context?.disabledAlpha();
+      },
+      get children() {
+        return createComponent(Slider, {
+          get value() {
+            return color().a * 100;
+          },
+          onChange: v => {
+            context?.setColor(color().clone().setAlpha(v / 100));
+          },
+          onChangeComplete: () => {
+            context?.setColor(color(), true);
+          },
+          min: 0,
+          step: 1,
+          tooltip: false,
+          handle: () => getSliderHandle(color().toRgbString()),
+          get style() {
+            return {
+              '--ant-slider-rail-size': '8px',
+              '--ant-slider-handle-size': '10px',
+              '--ant-slider-rail-bg': `linear-gradient(90deg, ${color().clone().setAlpha(0).toRgbString()} 0%, ${color().toHexString()} 100%)`,
+              '--ant-slider-rail-hover-bg': 'var(--ant-slider-rail-bg)',
+              '--ant-slider-track-bg': 'transparent',
+              '--ant-slider-track-hover-bg': 'transparent',
+              'background-image': 'conic-gradient(var(--ant-color-fill-secondary) 0 25%, transparent 0 50%, var(--ant-color-fill-secondary) 0 75%, transparent 0)',
+              'background-size': '8px 8px'
+            };
+          },
+          railBgStyle: {
+            'box-shadow': 'inset 0 0 1px 0 var(--ant-color-text-quaternary)'
+          }
+        });
+      }
+    }), null);
+    _el$3.style.setProperty("background-image", "conic-gradient(var(--ant-color-fill-secondary) 0 25%, transparent 0 50%, var(--ant-color-fill-secondary) 0 75%, transparent 0)");
+    _el$3.style.setProperty("background-size", "50% 50%");
+    _el$3.style.setProperty("box-shadow", "inset 0 0 1px 0 var(--ant-color-text-quaternary)");
+    insert(_el$, (() => {
+      var _c$ = memo(() => !!window.EyeDropper);
+      return () => _c$() && (() => {
+        var _el$5 = _tmpl$2();
+        _el$5.$$click = () => {
+          if (!window.EyeDropper) return;
+          const eyeDropper = new window.EyeDropper();
+          eyeDropper.open().then(result => {
+            context?.setColor(new Color(result.sRGBHex), true);
+          }).catch(console.error);
+        };
+        insert(_el$5, createComponent(ColorPickUpSvg, {}));
+        return _el$5;
+      })();
+    })(), null);
+    effect(() => color().toRgbString() != null ? _el$4.style.setProperty("background-color", color().toRgbString()) : _el$4.style.removeProperty("background-color"));
+    return _el$;
+  })();
 };
 const getSliderHandle = bgColor => {
-  return ssr(_tmpl$3, ssrHydrationKey() + ssrAttribute("class", escape(cs('box-border w-[--ant-slider-handle-size] h-[--ant-slider-handle-size] rounded-1/2 border-solid border-2px border-[--ant-color-bg-container-secondary] cursor-pointer', '[box-shadow:inset_0_0_1px_0_var(--ant-color-text-quaternary),0_0_0_1px_var(--ant-color-fill-secondary)]', 'focus:[box-shadow:inset_0_0_1px_0_var(--ant-color-text-quaternary),0_0_0_1px_var(--ant-color-primary-active)]'), true), false), "background:" + escape(bgColor, true));
+  return (() => {
+    var _el$6 = _tmpl$3();
+    bgColor != null ? _el$6.style.setProperty("background", bgColor) : _el$6.style.removeProperty("background");
+    effect(() => className(_el$6, cs('box-border w-[--ant-slider-handle-size] h-[--ant-slider-handle-size] rounded-1/2 border-solid border-2px border-[--ant-color-bg-container-secondary] cursor-pointer', '[box-shadow:inset_0_0_1px_0_var(--ant-color-text-quaternary),0_0_0_1px_var(--ant-color-fill-secondary)]', 'focus:[box-shadow:inset_0_0_1px_0_var(--ant-color-text-quaternary),0_0_0_1px_var(--ant-color-primary-active)]')));
+    return _el$6;
+  })();
 };
+delegateEvents(["click"]);
 
 export { ColorPickerSlider as default };

package/es/ColorPicker/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 cs from 'classnames';
 import { createSignal, untrack, createRenderEffect, createMemo, Show } from 'solid-js';
 import Color from './color.js';
@@ -10,11 +10,11 @@ import ColorPickerSlider from './ColorPickerSlider.js';
 import ColorPickerInput from './ColorPickerInput.js';
 import useComponentSize from '../hooks/useComponentSize.js';
 
-var _tmpl$ = ["<div", " class=\"flex justify-end mb-[--ant-margin-xs]\"><div class=\"w-24px h-24px rounded-[--ant-border-radius-sm] relative overflow-hidden border-1px border-solid border-[--ant-color-split] cursor-pointer hover:border-[--ant-color-border]\"><div class=\"absolute top-1/2 left-1/2 -translate-1/2 w-200% h-2px bg-[--ant-color-error] rotate-135deg\"></div></div></div>"],
-  _tmpl$2 = ["<div", " class=\"w-234px flex flex-col gap-[--ant-margin-sm]\"><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"],
-  _tmpl$3 = ["<div", " style=\"", "\"><div class=\"w-full h-full\" style=\"", "\"></div></div>"],
-  _tmpl$4 = ["<div", " style=\"", "\">", "</div>"],
-  _tmpl$5 = ["<div", "><div class=\"absolute top-1/2 left-1/2 -translate-1/2 w-200% h-2px bg-[--ant-color-error] rotate-135deg\"></div></div>"];
+var _tmpl$ = /*#__PURE__*/template(`<div class="flex justify-end mb-[--ant-margin-xs]"><div class="w-24px h-24px rounded-[--ant-border-radius-sm] relative overflow-hidden border-1px border-solid border-[--ant-color-split] cursor-pointer hover:border-[--ant-color-border]"><div class="absolute top-1/2 left-1/2 -translate-1/2 w-200% h-2px bg-[--ant-color-error] rotate-135deg">`),
+  _tmpl$2 = /*#__PURE__*/template(`<div class="w-234px flex flex-col gap-[--ant-margin-sm]">`),
+  _tmpl$3 = /*#__PURE__*/template(`<div><div class="w-full h-full">`),
+  _tmpl$4 = /*#__PURE__*/template(`<div>`),
+  _tmpl$5 = /*#__PURE__*/template(`<div><div class="absolute top-1/2 left-1/2 -translate-1/2 w-200% h-2px bg-[--ant-color-error] rotate-135deg">`);
 // TODO 超出范围
 const ColorPicker = props => {
   const isControlled = () => Object.keys(props).includes('value');
@@ -46,9 +46,21 @@ const ColorPicker = props => {
           return props.allowClear;
         },
         get children() {
-          return ssr(_tmpl$, ssrHydrationKey());
+          var _el$ = _tmpl$(),
+            _el$2 = _el$.firstChild;
+          _el$2.$$click = () => {
+            setColor(new Color());
+            close();
+          };
+          return _el$;
         }
-      }), ssr(_tmpl$2, ssrHydrationKey(), escape(createComponent(ColorPickerSelect, {})), escape(createComponent(ColorPickerSlider, {})), escape(createComponent(ColorPickerInput, {})))];
+      }), (() => {
+        var _el$3 = _tmpl$2();
+        insert(_el$3, createComponent(ColorPickerSelect, {}), null);
+        insert(_el$3, createComponent(ColorPickerSlider, {}), null);
+        insert(_el$3, createComponent(ColorPickerInput, {}), null);
+        return _el$3;
+      })()];
     }
   });
   return createComponent(Popover, {
@@ -60,34 +72,71 @@ const ColorPicker = props => {
       return props.disabled ? false : 'click';
     },
     content: getPopoverContent,
+    contentHTMLAttributes: {
+      class: 'ant-color-picker'
+    },
     get placement() {
       return props.placement ?? 'bottomLeft';
     },
     get children() {
       return createComponent(Element, {
         get ["class"]() {
-          return cs('inline-block', props.disabled && 'cursor-not-allowed');
+          return cs('ant-color-picker-trigger inline-block', props.disabled && 'cursor-not-allowed');
         },
         get children() {
-          return ssr(_tmpl$4, ssrHydrationKey() + ssrAttribute("class", escape(cs('p-[calc(var(--ant-padding-xxs)-var(--border-width))] border-width-[--border-width] border-[--ant-color-border] border-solid rounded-[--ant-border-radius] cursor-pointer hover:border-[--ant-color-primary-hover]', open() && '!border-[--ant-color-primary-active]', props.disabled ? 'pointer-events-none bg-[--ant-color-bg-container-disabled]' : 'bg-[--ant-color-bg-elevated]'), true), false), "--border-width:" + "1px" + (";--inner-size:" + escape({
-            small: '16px',
-            middle: '24px',
-            large: '32px'
-          }[size()], true)), escape(createComponent(Show, {
+          var _el$4 = _tmpl$4();
+          _el$4.style.setProperty("--border-width", "1px");
+          insert(_el$4, createComponent(Show, {
             get when() {
               return color().isValid;
             },
             get fallback() {
-              return ssr(_tmpl$5, ssrHydrationKey() + ssrAttribute("class", escape(cs('w-[--inner-size] h-[--inner-size] rounded-[--ant-border-radius-sm] relative overflow-hidden border-1px border-solid border-[--ant-color-split]'), true), false));
+              return (() => {
+                var _el$7 = _tmpl$5();
+                effect(() => className(_el$7, cs('w-[--inner-size] h-[--inner-size] rounded-[--ant-border-radius-sm] relative overflow-hidden border-1px border-solid border-[--ant-color-split]')));
+                return _el$7;
+              })();
             },
             get children() {
-              return ssr(_tmpl$3, ssrHydrationKey() + ssrAttribute("class", escape(cs('w-[--inner-size] h-[--inner-size] rounded-[--ant-border-radius-sm] overflow-hidden'), true), false), "box-shadow:" + "inset 0 0 1px 0 var(--ant-color-text-quaternary)" + (";background-image:" + "conic-gradient(var(--ant-color-fill-secondary) 0 25%, transparent 0 50%, var(--ant-color-fill-secondary) 0 75%, transparent 0)") + (";background-size:" + "50% 50%"), "box-shadow:" + "inset 0 0 0 var(--ant-line-width) var(--ant-color-fill-secondary)" + (";background-color:" + escape(color().toRgbString(), true)));
+              var _el$5 = _tmpl$3(),
+                _el$6 = _el$5.firstChild;
+              _el$5.style.setProperty("box-shadow", "inset 0 0 1px 0 var(--ant-color-text-quaternary)");
+              _el$5.style.setProperty("background-image", "conic-gradient(var(--ant-color-fill-secondary) 0 25%, transparent 0 50%, var(--ant-color-fill-secondary) 0 75%, transparent 0)");
+              _el$5.style.setProperty("background-size", "50% 50%");
+              _el$6.style.setProperty("box-shadow", "inset 0 0 0 var(--ant-line-width) var(--ant-color-fill-secondary)");
+              effect(_p$ => {
+                var _v$ = cs('w-[--inner-size] h-[--inner-size] rounded-[--ant-border-radius-sm] overflow-hidden'),
+                  _v$2 = color().toRgbString();
+                _v$ !== _p$.e && className(_el$5, _p$.e = _v$);
+                _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$6.style.setProperty("background-color", _v$2) : _el$6.style.removeProperty("background-color"));
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined
+              });
+              return _el$5;
             }
-          })));
+          }));
+          effect(_p$ => {
+            var _v$3 = cs('p-[calc(var(--ant-padding-xxs)-var(--border-width))] border-width-[--border-width] border-[--ant-color-border] border-solid rounded-[--ant-border-radius] cursor-pointer hover:border-[--ant-color-primary-hover]', open() && '!border-[--ant-color-primary-active]', props.disabled ? 'pointer-events-none bg-[--ant-color-bg-container-disabled]' : 'bg-[--ant-color-bg-elevated]'),
+              _v$4 = {
+                small: '16px',
+                middle: '24px',
+                large: '32px'
+              }[size()];
+            _v$3 !== _p$.e && className(_el$4, _p$.e = _v$3);
+            _v$4 !== _p$.t && ((_p$.t = _v$4) != null ? _el$4.style.setProperty("--inner-size", _v$4) : _el$4.style.removeProperty("--inner-size"));
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$4;
         }
       });
     }
   });
 };
+delegateEvents(["click"]);
 
 export { ColorPicker as default };

package/es/ContextMenu/index.js

@@ -11,7 +11,7 @@ const ContextMenuCommand = Command.createCommand(props => {
   const [, menuProps] = splitProps(props, ['x', 'y']);
   const [reverse, setReverse] = createSignal(false);
   createEffect(() => {
-    setReverse(props.y + (0) + offsetY > window.innerHeight);
+    setReverse(props.y + (ref?.clientHeight ?? 0) + offsetY > window.innerHeight);
   });
   const {
     dispose
@@ -35,6 +35,10 @@ const ContextMenuCommand = Command.createCommand(props => {
     abortController.abort();
   });
   return createComponent(Element, {
+    ref(r$) {
+      var _ref$ = ref;
+      typeof _ref$ === "function" ? _ref$(r$) : ref = r$;
+    },
     "class": "z-1000 fixed left-0 top-0 [font-size:var(--ant-font-size)] text-[var(--ant-color-text)] leading-[var(--ant-line-height)] bg-[--ant-color-bg-container-tertiary] rounded-[var(--ant-border-radius)]",
     get style() {
       return {

package/es/Cursor/index.d.ts

@@ -1,6 +1,17 @@
-import { type Component, type ParentProps, type JSX } from 'solid-js';
+import { type Component, type ParentProps, type JSX, type Ref } from 'solid-js';
+export interface CursorIntance {
+    onMouseEnter: (e: MouseEvent, ele: HTMLElement | SVGElement) => void;
+    onMouseMove: (e: MouseEvent) => void;
+    onMouseLeave: (e: MouseEvent, ele: HTMLElement | SVGElement) => void;
+}
 export interface CursorProps extends ParentProps {
+    ref?: Ref<CursorIntance>;
     cursor: JSX.Element;
 }
-declare const Cursor: Component<CursorProps>;
+declare function createCursor(props: CursorProps): {
+    dispose: () => void;
+};
+declare const Cursor: Component<CursorProps> & {
+    createCursor: typeof createCursor;
+};
 export default Cursor;

package/es/Cursor/index.js

@@ -1,7 +1,20 @@
-import { createComponent, Portal, ssr, ssrHydrationKey, escape } from 'solid-js/web';
+import { createComponent, Portal, insert, effect, template, render } from 'solid-js/web';
 import { children, createSignal, createEffect, onCleanup, Show } from 'solid-js';
+import { setRef } from '../utils/solid.js';
 
-var _tmpl$ = ["<span", " class=\"absolute pointer-events-none z-2000\" style=\"", "\">", "</span>"];
+var _tmpl$ = /*#__PURE__*/template(`<span class="absolute pointer-events-none z-2000">`);
+function createCursor(props) {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const _dispose = render(() => createComponent(Cursor, props), container);
+  const dispose = () => {
+    _dispose();
+    document.body.removeChild(container);
+  };
+  return {
+    dispose
+  };
+}
 const Cursor = props => {
   const resolvedChildren = children(() => props.children);
   const [hover, setHover] = createSignal(false);
@@ -10,30 +23,47 @@ const Cursor = props => {
     y: 0
   });
   let originalCursor;
+  const onMouseEnter = (_, _children) => {
+    setHover(true);
+    originalCursor = _children.style.cursor;
+    _children.style.cursor = 'none';
+  };
+  const onMouseMove = e => {
+    setCursorPosition({
+      x: e.clientX,
+      y: e.clientY
+    });
+  };
+  const onMouseLeave = (_, _children) => {
+    setHover(false);
+    if (originalCursor) {
+      _children.style.cursor = originalCursor;
+    } else {
+      _children.style.removeProperty('cursor');
+    }
+    originalCursor = undefined;
+  };
+  setRef(props, {
+    onMouseEnter,
+    onMouseMove,
+    onMouseLeave
+  });
   createEffect(() => {
     const _children = resolvedChildren();
     if (!(_children instanceof HTMLElement || _children instanceof SVGElement)) return;
     const abortController = new AbortController();
-    _children.addEventListener('mouseenter', () => {
-      setHover(true);
-      originalCursor = _children.style.cursor;
-      _children.style.cursor = 'none';
+    _children.addEventListener('mouseenter', e => {
+      onMouseEnter(e, _children);
     }, {
       capture: true,
       signal: abortController.signal
     });
-    _children.addEventListener('mousemove', e => {
-      setCursorPosition({
-        x: e.clientX,
-        y: e.clientY
-      });
-    }, {
+    _children.addEventListener('mousemove', onMouseMove, {
       capture: true,
       signal: abortController.signal
     });
-    _children.addEventListener('mouseleave', () => {
-      setHover(false);
-      if (originalCursor) _children.style.cursor = originalCursor;
+    _children.addEventListener('mouseleave', e => {
+      onMouseLeave(e, _children);
     }, {
       capture: true,
       signal: abortController.signal
@@ -49,11 +79,24 @@ const Cursor = props => {
     get children() {
       return createComponent(Portal, {
         get children() {
-          return ssr(_tmpl$, ssrHydrationKey(), "top:" + `${escape(cursorPosition().y, true)}px` + (";left:" + `${escape(cursorPosition().x, true)}px`), escape(props.cursor));
+          var _el$ = _tmpl$();
+          insert(_el$, () => props.cursor);
+          effect(_p$ => {
+            var _v$ = `${cursorPosition().y}px`,
+              _v$2 = `${cursorPosition().x}px`;
+            _v$ !== _p$.e && ((_p$.e = _v$) != null ? _el$.style.setProperty("top", _v$) : _el$.style.removeProperty("top"));
+            _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("left", _v$2) : _el$.style.removeProperty("left"));
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$;
         }
       });
     }
   })];
 };
+Cursor.createCursor = createCursor;
 
 export { Cursor as default };

package/es/Divider/index.js

@@ -1,11 +1,11 @@
-import { createComponent, ssr, ssrHydrationKey, escape } from 'solid-js/web';
+import { createComponent, use, insert, effect, template } from 'solid-js/web';
 import { mergeProps, createMemo, children, Show } from 'solid-js';
 import cs from 'classnames';
 import 'lodash-es';
 import useSize from '../hooks/useSize.js';
 import Element from '../Element/index.js';
 
-var _tmpl$ = ["<span", " class=\"inline-block px-[var(--ant-divider-text-padding-inline)]\" style=\"", "\">", "</span>"];
+var _tmpl$ = /*#__PURE__*/template(`<span class="inline-block px-[var(--ant-divider-text-padding-inline)]">`);
 const Divider = _props => {
   const props = mergeProps({
     orientation: 'center',
@@ -40,6 +40,10 @@ const Divider = _props => {
     },
     get children() {
       return createComponent(Element, {
+        ref(r$) {
+          var _ref$ = container;
+          typeof _ref$ === "function" ? _ref$(r$) : container = r$;
+        },
         get ["class"]() {
           return cs(props.class, 'my-[var(--ant-margin)] flex items-center relative', ['before:content-empty before:block before:absolute before:left-0 before:w-[var(--ant-divider-children-start)] before:border-width-[1px_0_0] before:border-[var(--ant-color-split)]', props.dashed ? 'before:border-dashed' : 'before:border-solid'], ['after:content-empty after:block after:absolute after:left-[var(--ant-divider-children-end)] after:right-0 after:border-width-[1px_0_0] after:border-[var(--ant-color-split)]', props.dashed ? 'after:border-dashed' : 'after:border-solid']);
         },
@@ -52,7 +56,12 @@ const Divider = _props => {
           };
         },
         get children() {
-          return ssr(_tmpl$, ssrHydrationKey(), "transform:" + `translateX(${escape(childrenStart(), true)}px)`, escape(resolvedChildren()));
+          var _el$ = _tmpl$();
+          var _ref$2 = childrenRef;
+          typeof _ref$2 === "function" ? use(_ref$2, _el$) : childrenRef = _el$;
+          insert(_el$, resolvedChildren);
+          effect(() => `translateX(${childrenStart()}px)` != null ? _el$.style.setProperty("transform", `translateX(${childrenStart()}px)`) : _el$.style.removeProperty("transform"));
+          return _el$;
         }
       });
     }