antd-solid 0.0.12 → 0.0.13

package/es/utils/array.js

@@ -1,9 +1,13 @@
+import { isNil } from 'lodash-es';
+
 /**
  * 如果传入一个非数组字段，则将其转化为数组
  * @param value
+ * @param allowNil 如果设置为 false，则 value isNil 的情况下，会返回空数组
  * @returns
  */
-function toArray(value) {
+function toArray(value, allowNil = true) {
+  if (!allowNil && isNil(value)) return [];
   return Array.isArray(value) ? value : [value];
 }
 /**

package/es/utils/domPoint.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 减法 a-b
+ * @param a
+ * @param b
+ * @returns
+ */
+export declare function subDOMPoint(a: DOMPoint, b: DOMPoint): DOMPoint;

package/es/utils/domPoint.js

@@ -0,0 +1,11 @@
+/**
+ * 减法 a-b
+ * @param a
+ * @param b
+ * @returns
+ */
+function subDOMPoint(a, b) {
+  return new DOMPoint(a.x - b.x, a.y - b.y);
+}
+
+export { subDOMPoint };

package/es/utils/math.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 角度转弧度
+ * @param degrees
+ */
+export declare function degToRad(degrees: number): number;
+/**
+ * 弧度转角度
+ * @param degrees
+ */
+export declare function radToDeg(radian: number): number;
+/**
+ * 获取两个点之间的距离
+ * @param p1
+ * @param p2
+ * @returns
+ */
+export declare function distance(p1: DOMPoint, p2: DOMPoint): number;

package/es/utils/math.js

@@ -0,0 +1,25 @@
+/**
+ * 角度转弧度
+ * @param degrees
+ */
+function degToRad(degrees) {
+  return degrees / 180 * Math.PI;
+}
+/**
+ * 弧度转角度
+ * @param degrees
+ */
+function radToDeg(radian) {
+  return radian / Math.PI * 180;
+}
+/**
+ * 获取两个点之间的距离
+ * @param p1
+ * @param p2
+ * @returns
+ */
+function distance(p1, p2) {
+  return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
+}
+
+export { degToRad, distance, radToDeg };

package/es/utils/number.d.ts

@@ -0,0 +1 @@
+export declare function inRange(number: number, start: number, end: number, boundary?: '()' | '[]' | '[)' | '(]'): boolean;

package/es/utils/number.js

@@ -0,0 +1,14 @@
+function inRange(number, start, end, boundary = '[)') {
+  switch (boundary) {
+    case '()':
+      return number > start && number < end;
+    case '[]':
+      return number >= start && number <= end;
+    case '[)':
+      return number >= start && number < end;
+    case '(]':
+      return number > start && number <= end;
+  }
+}
+
+export { inRange };

package/es/utils/setupGlobalDrag.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 设置全局拖动监听器，用于解决：
+ * - 鼠标移到 disabled 元素上后 mouseup 事件丢失
+ * - 拖动过程中误选中文字
+ *
+ * @param onMove - 鼠标移动时触发的回调函数
+ * @param onEnd - 鼠标抬起时触发的回调函数
+ * @param cursor - 拖拽过程中的 style.cursor
+ */
+export declare function setupGlobalDrag(onMove: (e: MouseEvent) => void, onEnd?: (e: MouseEvent) => void, cursor?: string): void;

package/es/utils/setupGlobalDrag.js

@@ -0,0 +1,38 @@
+/**
+ * 设置全局拖动监听器，用于解决：
+ * - 鼠标移到 disabled 元素上后 mouseup 事件丢失
+ * - 拖动过程中误选中文字
+ *
+ * @param onMove - 鼠标移动时触发的回调函数
+ * @param onEnd - 鼠标抬起时触发的回调函数
+ * @param cursor - 拖拽过程中的 style.cursor
+ */
+function setupGlobalDrag(onMove, onEnd, cursor) {
+  const originalPointerEvents = document.body.style.pointerEvents;
+  const originalCursor = document.documentElement.style.cursor;
+  if (cursor) {
+    document.documentElement.style.cursor = cursor;
+  }
+  const abortController = new AbortController();
+  window.addEventListener('mousemove', e => {
+    // 延迟设置 document.body.style.pointerEvents，直到 mousemove 触发，这样才算 drag。避免影响自身及子元素的 click 事件
+    document.body.style.pointerEvents = 'none'; // 防止 mouseup 被 disabled 元素吞掉，以及拖拽时误选中文字等
+    onMove(e);
+  }, {
+    signal: abortController.signal,
+    capture: true
+  });
+  window.addEventListener('mouseup', e => {
+    onEnd?.(e);
+    document.body.style.pointerEvents = originalPointerEvents;
+    if (cursor) {
+      document.documentElement.style.cursor = originalCursor;
+    }
+    abortController.abort();
+  }, {
+    once: true,
+    capture: true
+  });
+}
+
+export { setupGlobalDrag };

package/es/utils/solid.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { type JSXElement, type JSX, type Ref } from 'solid-js';
 import { type StringOrJSXElement } from '../types';
 /**
@@ -7,7 +6,6 @@ import { type StringOrJSXElement } from '../types';
  * @returns
  */
 export declare function isBaseType(value: JSXElement): value is string | number | boolean | null | undefined;
-export declare function solidToReact(children: JSXElement): number | boolean | (string & {}) | React.FunctionComponentElement<import("./SolidToReact").SolidToReactProps> | null | undefined;
 export declare function dispatchEventHandlerUnion<T, E extends Event>(handler: JSX.EventHandlerUnion<T, E> | undefined, e: E & {
     currentTarget: T;
     target: Element;
@@ -16,3 +14,5 @@ export declare function unwrapStringOrJSXElement(value: StringOrJSXElement): JSX
 export declare function setRef<T>(props: {
     ref?: Ref<T>;
 }, value: T | null): void;
+export declare function unwrapFunction<T>(value: T | (() => T)): T;
+export declare function isEmptyJSXElement(element: JSXElement): boolean;

package/es/utils/solid.js

@@ -1,7 +1,5 @@
-import React from 'react';
 import { untrack } from 'solid-js';
 import { isNil } from 'lodash-es';
-import SolidToReact from './SolidToReact.js';
 
 /**
  * 判断 JSXElement 是否是基础类型
@@ -11,11 +9,6 @@ import SolidToReact from './SolidToReact.js';
 function isBaseType(value) {
   return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' || value === null || value === undefined;
 }
-function solidToReact(children) {
-  return isBaseType(children) ? children : React.createElement(SolidToReact, {
-    children
-  });
-}
 function dispatchEventHandlerUnion(handler, e) {
   if (isNil(handler)) {
     return;
@@ -36,5 +29,11 @@ function setRef(props, value) {
     }
   });
 }
+function unwrapFunction(value) {
+  return typeof value === 'function' ? value() : value;
+}
+function isEmptyJSXElement(element) {
+  return element === undefined || element === null || typeof element === 'boolean' || element === '' || Array.isArray(element) && element.length === 0;
+}
 
-export { dispatchEventHandlerUnion, isBaseType, setRef, solidToReact, unwrapStringOrJSXElement };
+export { dispatchEventHandlerUnion, isBaseType, isEmptyJSXElement, setRef, unwrapFunction, unwrapStringOrJSXElement };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "antd-solid",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "",
-  "main": "src/index.ts",
+  "main": "dist/index.esm.js",
   "types": "es/index.d.ts",
   "type": "module",
   "devDependencies": {
@@ -14,8 +14,6 @@
     "@solidjs/testing-library": "^0.7.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@types/lodash-es": "^4.17.7",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.9",
     "@typescript-eslint/eslint-plugin": "^6.16.0",
     "@typescript-eslint/parser": "^6.16.0",
     "@unocss/cli": "^0.51.8",
@@ -35,6 +33,7 @@
     "husky": "^8.0.3",
     "jsdom": "^21.1.1",
     "lint-staged": "^15.2.0",
+    "prettier": "^3.2.4",
     "rollup": "^3.21.0",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-import-css": "^3.2.1",
@@ -43,23 +42,24 @@
     "sass": "^1.69.6",
     "typescript": "^5.1.6",
     "vite-plugin-solid": "^2.7.0",
-    "vitepress": "1.0.0-rc.4",
+    "vitepress": "1.3.4",
     "vitest": "^0.30.1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@ant-design/colors": "^7.0.2",
+    "@ctrl/tinycolor": "^4.1.0",
     "antd": "^5.10.2",
     "classnames": "^2.3.2",
     "lodash-es": "^4.17.21",
     "nanoid": "^5.0.1",
+    "number-precision": "^1.6.0",
     "prismjs": "^1.29.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "solid-js": "^1.8.7",
+    "solid-js": "^1.9.7",
     "solid-transition-group": "^0.2.3",
-    "yup": "^1.2.0"
+    "yup": "^1.6.1"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx}": [
@@ -70,8 +70,7 @@
   "files": [
     "dist",
     "es",
-    "css",
-    "src"
+    "css"
   ],
   "scripts": {
     "docs:dev": "vitepress dev docs",

package/es/ColorPicker.d.ts

@@ -1,8 +0,0 @@
-import { type Color } from 'antd/es/color-picker';
-export interface ColorPickerProps {
-    defaultValue?: string | Color;
-    value?: string | Color;
-    onChange?: (value: Color, hex: string) => void;
-}
-declare const _default: (props: import("antd").ColorPickerProps) => import("solid-js").JSX.Element;
-export default _default;

package/es/ColorPicker.js

@@ -1,6 +0,0 @@
-import { ColorPicker as ColorPicker$1 } from 'antd';
-import { reactToSolidComponent } from './utils/component.js';
-
-var ColorPicker = reactToSolidComponent(ColorPicker$1);
-
-export { ColorPicker as default };

package/es/DatePicker.d.ts

@@ -1,19 +0,0 @@
-import { type DatePickerProps, type RangePickerProps } from 'antd/es/date-picker';
-declare const RangePicker: import("solid-js").Component<Omit<RangePickerProps & {
-    dropdownClassName?: string | undefined;
-    popupClassName?: string | undefined;
-    rootClassName?: string | undefined;
-}, "className"> & {
-    class?: string | undefined;
-}>;
-declare const DatePicker: import("solid-js").Component<Omit<DatePickerProps & {
-    status?: '' | 'error' | 'warning' | undefined;
-    hashId?: string | undefined;
-    popupClassName?: string | undefined;
-    rootClassName?: string | undefined;
-}, "className"> & {
-    class?: string | undefined;
-}> & {
-    RangePicker: typeof RangePicker;
-};
-export default DatePicker;

package/es/DatePicker.js

@@ -1,9 +0,0 @@
-import { DatePicker as DatePicker$1 } from 'antd';
-import { replaceClassName, reactToSolidComponent } from './utils/component.js';
-
-const RangePicker = replaceClassName(reactToSolidComponent(DatePicker$1.RangePicker));
-const _DatePicker = replaceClassName(reactToSolidComponent(DatePicker$1));
-const DatePicker = _DatePicker;
-DatePicker.RangePicker = RangePicker;
-
-export { DatePicker as default };

package/es/Image.d.ts

@@ -1,9 +0,0 @@
-import { type JSXElement } from 'solid-js';
-declare const _Image: import("solid-js").Component<Omit<import("antd").ImageProps, "className"> & {
-    class?: string | undefined;
-}>;
-type ImageProps = Omit<Parameters<typeof _Image>[0], 'placeholder'> & {
-    placeholder?: JSXElement;
-};
-declare function Image(_props: ImageProps): import("solid-js").JSX.Element;
-export default Image;

package/es/Image.js

@@ -1,22 +0,0 @@
-import { createComponent, mergeProps, template } from 'solid-js/web';
-import { Image as Image$1 } from 'antd';
-import { replaceClassName, reactToSolidComponent, configProvider } from './utils/component.js';
-import { solidToReact } from './utils/solid.js';
-import { createMemo } from 'solid-js';
-import { mapValues } from 'lodash-es';
-
-const _tmpl$ = /*#__PURE__*/template(`<div class="ant-inline-flex">`);
-const _Image = replaceClassName(reactToSolidComponent(configProvider(Image$1), () => _tmpl$()));
-function Image(_props) {
-  const props = createMemo(() => mapValues(_props, (value, key) => {
-    switch (key) {
-      case 'placeholder':
-        return solidToReact(value);
-      default:
-        return value;
-    }
-  }));
-  return createComponent(_Image, mergeProps(props));
-}
-
-export { Image as default };

package/es/Input.d.ts

@@ -1,29 +0,0 @@
-import type { JSX, JSXElement, Component } from 'solid-js';
-type CommonInputProps<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement> = JSX.CustomAttributes<T> & {
-    textarea?: boolean;
-    defaultValue?: string | undefined;
-    value?: string | undefined;
-    addonBefore?: JSXElement;
-    addonAfter?: JSXElement;
-    prefix?: JSXElement;
-    suffix?: JSXElement;
-    placeholder?: string;
-    /**
-     * 仅供 InputNumber 使用
-     */
-    actions?: JSXElement;
-    /**
-     * 设置校验状态
-     */
-    status?: 'error' | 'warning';
-    onChange?: JSX.InputEventHandler<T, InputEvent>;
-    onPressEnter?: JSX.EventHandler<T, KeyboardEvent>;
-    onKeyDown?: JSX.EventHandler<T, KeyboardEvent>;
-};
-export declare function CommonInput<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement>(props: CommonInputProps<T> & Omit<JSX.InputHTMLAttributes<T>, 'onChange' | 'onInput' | 'onKeyDown'>): JSX.Element;
-export type InputProps = Omit<CommonInputProps, 'actions' | 'textarea'> & Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onInput' | 'onKeyDown'>;
-export type TextAreaProps = Omit<CommonInputProps<HTMLTextAreaElement>, 'prefix' | 'suffix' | 'textarea'> & Omit<JSX.TextareaHTMLAttributes<HTMLTextAreaElement>, 'actions' | 'onChange' | 'onInput' | 'onKeyDown'>;
-declare const Input: Component<InputProps> & {
-    TextArea: Component<TextAreaProps>;
-};
-export default Input;

package/es/Input.js

@@ -1,144 +0,0 @@
-import { createComponent, Dynamic, mergeProps, insert, effect, className, style, template } from 'solid-js/web';
-import { isNil, omit } from 'lodash-es';
-import { splitProps, createMemo, Show } from 'solid-js';
-import cs from 'classnames';
-import createControllableValue from './hooks/createControllableValue.js';
-import Compact from './Compact/index.js';
-
-const _tmpl$ = /*#__PURE__*/template(`<div>`),
-  _tmpl$2 = /*#__PURE__*/template(`<div class="ant-mr-4px">`),
-  _tmpl$3 = /*#__PURE__*/template(`<div class="ant-ml-4px">`),
-  _tmpl$4 = /*#__PURE__*/template(`<div class="ant-[display:var(--input-after-display)] ant-absolute ant-top-0 ant-bottom-0 ant-right-0 ant-h-[calc(100%-2px)] ant-translate-y-1px -ant-translate-x-1px">`);
-const statusClassDict = {
-  default: disabled => cs('ant-[border:1px_solid_var(--ant-color-border)]', !disabled && 'hover:ant-border-[var(--ant-color-primary)] focus-within:ant-border-[var(--ant-color-primary)] focus-within:ant-[box-shadow:0_0_0_2px_rgba(5,145,255,0.1)]'),
-  error: disabled => cs('ant-[border:1px_solid_var(--ant-color-error)]', !disabled && 'hover:ant-border-[var(--light-error-color)] focus-within:ant-[box-shadow:0_0_0_2px_rgba(255,38,5,.06)]'),
-  warning: disabled => cs('ant-[border:1px_solid_var(--warning-color)]', !disabled && 'hover:ant-border-[var(--color-warning-border-hover)] focus-within:ant-[box-shadow:0_0_0_2px_rgba(255,215,5,.1)]')
-};
-function CommonInput(props) {
-  const [{
-    style: style$1,
-    onChange,
-    onPressEnter,
-    onKeyDown
-  }, inputProps] = splitProps(props, ['defaultValue', 'value', 'class', 'addonBefore', 'addonAfter', 'suffix', 'onChange', 'onPressEnter', 'onKeyDown', 'actions', 'style']);
-  const [_, controllableProps] = splitProps(props, ['onChange']);
-  const [value, setValue] = createControllableValue(controllableProps);
-  const inputWrapClass = createMemo(() => cs('ant-px-11px ant-py-4px ant-rounded-6px', !props.textarea && 'ant-h-32px', props.addonBefore ? 'ant-rounded-l-0' : Compact.compactItemRoundedLeftClass, props.addonAfter ? 'ant-rounded-r-0' : Compact.compactItemRoundedRightClass, statusClassDict[props.status ?? 'default'](!!inputProps.disabled), Compact.compactItemRounded0Class, Compact.compactItemZIndexClass));
-  const hasPrefixOrSuffix = createMemo(() => !isNil(props.prefix) || !isNil(props.suffix) || !isNil(props.actions));
-  const inputJSX = createComponent(Dynamic, mergeProps({
-    get component() {
-      return props.textarea ? 'textarea' : 'input';
-    }
-  }, inputProps, {
-    get ["class"]() {
-      return cs('ant-w-full ant-[outline:none] ant-text-14px', !hasPrefixOrSuffix() && inputWrapClass(), inputProps.disabled && 'ant-bg-[var(--ant-color-bg-container-disabled)] ant-cursor-not-allowed');
-    },
-    get value() {
-      return value() ?? '';
-    },
-    onInput: e => {
-      setValue(e.target.value);
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      onChange?.(e);
-      if (Object.keys(props).includes('value')) {
-        e.target.value = value();
-      }
-    },
-    onKeyDown: e => {
-      if (e.key === 'Enter') {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-        onPressEnter?.(e);
-      }
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      onKeyDown?.(e);
-    }
-  }));
-  return (() => {
-    const _el$ = _tmpl$();
-    insert(_el$, createComponent(Show, {
-      get when() {
-        return props.addonBefore;
-      },
-      get children() {
-        const _el$2 = _tmpl$();
-        insert(_el$2, () => props.addonBefore);
-        effect(() => className(_el$2, cs('ant-shrink-0 ant-flex ant-justify-center ant-items-center ant-px-11px ant-bg-[rgba(0,0,0,.02)] ant-[border:1px_solid_var(--ant-color-border)] ant-border-r-0 ant-rounded-l-6px ant-text-14px', Compact.compactItemRounded0Class, Compact.compactItemRoundedLeftClass)));
-        return _el$2;
-      }
-    }), null);
-    insert(_el$, createComponent(Show, {
-      get when() {
-        return hasPrefixOrSuffix();
-      },
-      fallback: inputJSX,
-      get children() {
-        const _el$3 = _tmpl$();
-        insert(_el$3, createComponent(Show, {
-          get when() {
-            return props.prefix;
-          },
-          get children() {
-            const _el$4 = _tmpl$2();
-            insert(_el$4, () => props.prefix);
-            return _el$4;
-          }
-        }), null);
-        insert(_el$3, inputJSX, null);
-        insert(_el$3, createComponent(Show, {
-          get when() {
-            return props.suffix;
-          },
-          get children() {
-            const _el$5 = _tmpl$3();
-            insert(_el$5, () => props.suffix);
-            return _el$5;
-          }
-        }), null);
-        insert(_el$3, createComponent(Show, {
-          get when() {
-            return props.actions;
-          },
-          get children() {
-            const _el$6 = _tmpl$4();
-            insert(_el$6, () => props.actions);
-            return _el$6;
-          }
-        }), null);
-        effect(() => className(_el$3, cs('ant-flex ant-items-center ant-w-full ant-relative ant-[--input-after-display:none] hover:ant-[--input-after-display:block] p:hover-child[input]:ant-border-[var(--ant-color-primary)]', inputWrapClass())));
-        return _el$3;
-      }
-    }), null);
-    insert(_el$, createComponent(Show, {
-      get when() {
-        return props.addonAfter;
-      },
-      get children() {
-        const _el$7 = _tmpl$();
-        insert(_el$7, () => props.addonAfter);
-        effect(() => className(_el$7, cs('ant-shrink-0 ant-flex ant-justify-center ant-items-center ant-px-11px ant-bg-[rgba(0,0,0,.02)] ant-[border:1px_solid_var(--ant-color-border)] ant-border-l-0 ant-rounded-r-6px ant-text-14px', Compact.compactItemRounded0Class, Compact.compactItemRoundedRightClass)));
-        return _el$7;
-      }
-    }), null);
-    effect(_p$ => {
-      const _v$ = cs('ant-flex ant-w-full', Compact.compactItemClass),
-        _v$2 = style$1;
-      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
-      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
-      return _p$;
-    }, {
-      _v$: undefined,
-      _v$2: undefined
-    });
-    return _el$;
-  })();
-}
-const Input = props => {
-  return createComponent(CommonInput, mergeProps(() => omit(props, ['actions'])));
-};
-Input.TextArea = props => {
-  return createComponent(CommonInput, mergeProps({
-    textarea: true
-  }, () => omit(props, ['prefix', 'suffix', 'actions'])));
-};
-
-export { CommonInput, Input as default };

package/es/InputNumber.d.ts

@@ -1,11 +0,0 @@
-import { type Component } from 'solid-js';
-import { type InputProps } from './Input';
-export interface InputNumberProps extends Omit<InputProps, 'defaultValue' | 'value' | 'onChange' | 'inputAfter' | 'onKeyDown' | 'min' | 'max' | 'suffix'> {
-    defaultValue?: number | null | undefined;
-    value?: number | null | undefined;
-    onChange?: (value: number | null) => void;
-    min?: number;
-    max?: number;
-}
-declare const InputNumber: Component<InputNumberProps>;
-export default InputNumber;

package/es/InputNumber.js

@@ -1,92 +0,0 @@
-import { delegateEvents, createComponent, mergeProps as mergeProps$1, template } from 'solid-js/web';
-import { mergeProps, splitProps, createSignal, untrack, createEffect, on } from 'solid-js';
-import { CommonInput } from './Input.js';
-import { isNil, clamp } from 'lodash-es';
-import { dispatchEventHandlerUnion } from './utils/solid.js';
-
-const _tmpl$ = /*#__PURE__*/template(`<div class="ant-flex ant-flex-col ant-h-full ant-w-24px ant-[border-left:1px_solid_var(--ant-color-border)]"><div class="ant-text-12px ant-flex ant-justify-center ant-items-center ant-h-1/2 ant-cursor-pointer ant-opacity-70 hover:ant-h-100% hover:ant-text-[var(--ant-color-primary)] ant-transition-color ant-transition-height ant-transition-duration-500"><div class="i-ant-design:up-outlined"></div></div><div class="ant-[border-top:1px_solid_var(--ant-color-border)] ant-text-12px ant-flex ant-justify-center ant-items-center ant-h-1/2 ant-cursor-pointer ant-opacity-70 hover:ant-h-100% hover:ant-text-[var(--ant-color-primary)] ant-transition-color ant-transition-height ant-transition-duration-500"><div class="i-ant-design:down-outlined">`);
-const isEmptyValue = value => isNil(value) || value === '';
-const InputNumber = _props => {
-  const props = mergeProps({
-    min: -Infinity,
-    max: Infinity
-  }, _props);
-  const [_, inputProps] = splitProps(props, ['defaultValue', 'value', 'onChange', 'onBlur']);
-  const clampValue = v => untrack(() => clamp(v, props.min, props.max));
-  let prev = null;
-  const updatePrev = v => {
-    if (prev === v) return;
-    prev = v;
-    props.onChange?.(prev);
-  };
-  const [value, setValue] = createSignal(untrack(() => props.value ?? props.defaultValue));
-  createEffect(on(() => props.value, () => {
-    setValue(props.value);
-  }, {
-    defer: true
-  }));
-  const add = addon => {
-    let newValue;
-    if (isEmptyValue(value())) {
-      newValue = clampValue(addon);
-    } else {
-      const num = Number(value());
-      newValue = Number.isNaN(num) ? null : clampValue(num + addon);
-    }
-    if (!Object.keys(props).includes('value')) {
-      setValue(newValue);
-    }
-    updatePrev(newValue);
-  };
-  const up = () => {
-    add(1);
-  };
-  const down = () => {
-    add(-1);
-  };
-  return createComponent(CommonInput, mergeProps$1(inputProps, {
-    get actions() {
-      return (() => {
-        const _el$ = _tmpl$(),
-          _el$2 = _el$.firstChild,
-          _el$3 = _el$2.nextSibling;
-        _el$2.$$click = up;
-        _el$3.$$click = down;
-        return _el$;
-      })();
-    },
-    get value() {
-      return `${value() ?? ''}`;
-    },
-    onKeyDown: e => {
-      switch (e.key) {
-        case 'ArrowUp':
-          up();
-          e.preventDefault();
-          return;
-        case 'ArrowDown':
-          down();
-          e.preventDefault();
-      }
-    },
-    onChange: e => {
-      const newValue = e.target.value;
-      setValue(newValue);
-      let newValueNum = Number(newValue);
-      if (Number.isNaN(newValueNum)) return;
-      if (isEmptyValue(newValue)) {
-        newValueNum = null;
-      } else {
-        newValueNum = clampValue(newValueNum);
-      }
-      updatePrev(newValueNum);
-    },
-    onBlur: e => {
-      setValue(props.value ?? prev);
-      dispatchEventHandlerUnion(props.onBlur, e);
-    }
-  }));
-};
-delegateEvents(["click"]);
-
-export { InputNumber as default };