antd-solid 0.0.8 → 0.0.10

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "antd-solid",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "",
-  "main": "es/index.js",
+  "main": "src/index.ts",
   "types": "es/index.d.ts",
   "type": "module",
   "devDependencies": {
@@ -68,7 +68,8 @@
   "files": [
     "dist",
     "es",
-    "css"
+    "css",
+    "src"
   ],
   "scripts": {
     "docs:dev": "vitepress dev docs",

package/src/Button.tsx

@@ -0,0 +1,125 @@
+import {
+  type Component,
+  mergeProps,
+  type ParentProps,
+  type JSX,
+  Show,
+  createSignal,
+  createMemo,
+} from 'solid-js'
+import cs from 'classnames'
+
+interface ButtonProps extends ParentProps, JSX.CustomAttributes<HTMLButtonElement> {
+  type?: 'default' | 'primary' | 'dashed' | 'text' | 'link'
+  onClick?: ((e: MouseEvent) => void) | ((e: MouseEvent) => Promise<unknown>)
+  /**
+   * 默认: middle
+   * plain: 没有多余的 padding 和高度等
+   */
+  size?: 'large' | 'middle' | 'small' | 'plain'
+  class?: string
+  style?: JSX.CSSProperties
+  loading?: boolean
+  /**
+   * 设置危险按钮
+   */
+  danger?: boolean
+}
+
+const sizeClassMap = {
+  large: 'ant-px-15px ant-py-6px ant-h-40px ant-rounded-8px',
+  middle: 'ant-px-15px ant-py-4px ant-h-32px ant-rounded-6px',
+  small: 'ant-px-7px ant-h-24px ant-rounded-4px',
+  plain: 'ant-p-0',
+} as const
+
+const typeClassMap = {
+  default: (danger: boolean) =>
+    cs(
+      'ant-bg-white',
+      danger
+        ? 'ant-[border:1px_solid_var(--ant-color-error)] ant-text-[var(--ant-color-error)] hover:ant-[border-color:var(--light-error-color)] hover:ant-text-[var(--light-error-color)] active:ant-[border-color:var(--dark-error-color)] active:ant-text-[var(--dark-error-color)]'
+        : 'ant-[border:1px_solid_var(--ant-color-border)] ant-text-[var(--dark-color)] hover:ant-[border-color:var(--light-primary-color)] hover:ant-text-[var(--light-primary-color)] active:ant-[border-color:var(--dark-primary-color)] active:ant-text-[var(--dark-primary-color)]',
+    ),
+  primary: (danger: boolean) =>
+    cs(
+      'ant-border-none ant-text-white',
+      danger
+        ? 'ant-bg-[var(--ant-color-error)] hover:ant-bg-[var(--light-error-color)] active:ant-bg-[var(--dark-error-color)]'
+        : 'ant-bg-[var(--primary-color)] hover:ant-bg-[var(--light-primary-color)] active:ant-bg-[var(--dark-primary-color)]',
+    ),
+  dashed: (danger: boolean) =>
+    cs(
+      ' ant-bg-white',
+      danger
+        ? 'ant-[border:1px_dashed_var(--ant-color-error)] ant-text-[var(--ant-color-error)] hover:ant-[border-color:var(--light-error-color)] hover:ant-text-[var(--light-error-color)] active:ant-[border-color:var(--dark-error-color)] active:ant-text-[var(--dark-error-color)]'
+        : 'ant-[border:1px_dashed_var(--ant-color-border)] ant-text-[var(--dark-color)] hover:ant-[border-color:var(--light-primary-color)] hover:ant-text-[var(--light-primary-color)] active:ant-[border-color:var(--dark-primary-color)] active:ant-text-[var(--dark-primary-color)]',
+    ),
+  text: (danger: boolean) =>
+    cs(
+      'ant-border-none ant-bg-transparent',
+      danger
+        ? 'ant-text-[var(--ant-color-error)] hover:ant-bg-[var(--error-bg-color)] active:ant-bg-[var(--error-bg-color)]'
+        : 'ant-text-[var(--dark-color)] hover:ant-bg-[rgba(0,0,0,0.06)] active:ant-bg-[rgba(0,0,0,.15)]',
+    ),
+  link: (danger: boolean) =>
+    cs(
+      'ant-border-none ant-bg-transparent',
+      danger
+        ? 'ant-text-[var(--ant-color-error)] hover:ant-text-[var(--light-error-color)] active:ant-text-[var(--dark-error-color)]'
+        : 'ant-text-[var(--primary-color)] hover:ant-text-[var(--light-primary-color)] active:ant-text-[var(--dark-primary-color)]',
+    ),
+} as const
+
+const Button: Component<ButtonProps> = props => {
+  const mergedProps = mergeProps({ type: 'default', size: 'middle' } as ButtonProps, props)
+  const [innerLoading, setLoading] = createSignal(false)
+  const loading = createMemo(() => props.loading ?? innerLoading())
+
+  return (
+    <button
+      ref={mergedProps.ref}
+      class={cs(
+        'ant-relative ant-cursor-pointer',
+        mergedProps.class,
+        sizeClassMap[mergedProps.size!],
+        typeClassMap[mergedProps.type!](props.danger ?? false),
+        loading() && 'ant-opacity-65',
+        'ant-[--color:--light-primary-color]'
+      )}
+      style={mergedProps.style}
+      onClick={e => {
+        const res = mergedProps.onClick?.(e)
+        if (res instanceof Promise) {
+          setLoading(true)
+          res.finally(() => setLoading(false))
+        }
+
+        if (
+          mergedProps.type === 'default' ||
+          mergedProps.type === 'primary' ||
+          mergedProps.type === 'dashed'
+        ) {
+          const div = document.createElement('div')
+          div.className = cs(
+            props.danger ? 'ant-[--color:var(--light-error-color)]' : 'ant-[--color:var(--light-primary-color)]',
+            'ant-absolute ant-inset-0 ant-rounded-inherit ant-[background:radial-gradient(var(--color),rgba(0,0,0,0))] ant-z--1 ant-keyframes-button-border[inset:0px][inset:-6px] ant-[animation:button-border_ease-out_0.3s]',
+          )
+          const onAnimationEnd = () => {
+            div.remove()
+            div.removeEventListener('animationend', onAnimationEnd)
+          }
+          div.addEventListener('animationend', onAnimationEnd)
+          e.currentTarget.insertBefore(div, e.currentTarget.childNodes[0])
+        }
+      }}
+    >
+      <Show when={loading()}>
+        <span class="i-ant-design:loading ant-[vertical-align:-0.125em] keyframes-spin ant-[animation:spin_1s_linear_infinite] ant-mr-8px" />
+      </Show>
+      <span>{mergedProps.children}</span>
+    </button>
+  )
+}
+
+export default Button

package/src/Collapse/index.tsx

@@ -0,0 +1,86 @@
+import { type JSX, type JSXElement, type Component, For, Show } from 'solid-js'
+import cs from 'classnames'
+import { Transition } from 'solid-transition-group'
+import { type Key } from '../types'
+import createControllableValue from '../hooks/createControllableValue'
+
+export interface CollapseItem {
+  key: Key
+  label: JSXElement
+  children: JSXElement
+}
+
+export interface CollapseProps {
+  class?: string
+  defaultActiveKey?: Key[]
+  activeKey?: Key[]
+  items: CollapseItem[]
+  style?: JSX.CSSProperties
+}
+
+const Collapse: Component<CollapseProps> = props => {
+  const [activeKey, setActiveKey] = createControllableValue<Key[]>(props, {
+    defaultValuePropName: 'defaultActiveKey',
+    valuePropName: 'activeKey',
+    defaultValue: [],
+  })
+
+  return (
+    <div
+      class={cs(
+        'ant-rounded-[var(--ant-border-radius-lg)] ant-[border:1px_solid_var(--ant-color-border)] ant-border-b-0',
+        props.class,
+      )}
+      style={props.style}
+    >
+      <For each={props.items}>
+        {item => (
+          <div class="ant-[border-bottom:1px_solid_var(--ant-color-border)] first:ant-rounded-t-[var(--ant-border-radius-lg)] last:ant-rounded-b-[var(--ant-border-radius-lg)] ant-cursor-pointer">
+            <div
+              class="ant-bg-[var(--ant-collapse-header-bg)] ant-text-[var(--ant-color-text-heading)] ant-p-[var(--ant-collapse-header-padding)]"
+              onClick={() => {
+                setActiveKey(keys => {
+                  if (keys.includes(item.key)) {
+                    return keys.filter(key => key !== item.key)
+                  }
+                  return [...keys, item.key]
+                })
+              }}
+            >
+              <span
+                class={cs(
+                  'i-ant-design:right-outlined',
+                  'ant-mr-[var(--ant-margin-sm)] ant-duration-.3s',
+                  activeKey().includes(item.key) && 'ant-rotate-[90deg]',
+                )}
+              />
+              {item.label}
+            </div>
+            <Transition
+              onEnter={(el, done) => {
+                el.animate([{ height: '0px' }, { height: `${el.scrollHeight}px` }], {
+                  duration: 300,
+                }).finished.finally(done)
+              }}
+              onExit={(el, done) => {
+                el.animate([{ height: `${el.scrollHeight}px` }, { height: '0px' }], {
+                  duration: 300,
+                }).finished.finally(done)
+              }}
+            >
+              <Show when={activeKey().includes(item.key)}>
+                <div class="ant-overflow-hidden">
+                  <div class="ant-p-[var(--ant-padding-sm)] ant-[border-top:1px_solid_var(--ant-color-border)]">
+                    {item.children}
+                  </div>
+                </div>
+              </Show>
+            </Transition>
+          </div>
+        )}
+      </For>
+    </div>
+  )
+}
+
+export default Collapse

package/src/ColorPicker.tsx

@@ -0,0 +1,11 @@
+import { ColorPicker } from 'antd'
+import { type Color } from 'antd/es/color-picker'
+import { reactToSolidComponent } from './utils/component'
+
+export interface ColorPickerProps {
+  defaultValue?: string | Color
+  value?: string | Color
+  onChange?: (value: Color, hex: string) => void
+}
+
+export default reactToSolidComponent(ColorPicker)

package/src/Compact.tsx

@@ -0,0 +1,15 @@
+import { type ParentProps } from 'solid-js'
+
+interface CompactProps extends ParentProps {}
+
+function Compact(props: CompactProps) {
+  return <div class="ant-compact ant-flex">{props.children}</div>
+}
+
+Compact.compactItemClass = 'p[.ant-compact]:ant-ml--1px'
+Compact.compactItemRounded0Class = 'p[.ant-compact>*]:ant-rounded-0'
+Compact.compactItemRoundedLeftClass = 'p[.ant-compact>:first-child]:ant-rounded-l-6px'
+Compact.compactItemRoundedRightClass = 'p[.ant-compact>:last-child]:ant-rounded-r-6px'
+Compact.compactItemZIndexClass = 'p[.ant-compact>*]:focus:ant-z-10 p[.ant-compact>*]:focus-within:ant-z-10'
+
+export default Compact

package/src/DatePicker.tsx

@@ -0,0 +1,30 @@
+import { DatePicker as DatePickerAntd } from 'antd'
+import { type DatePickerProps, type RangePickerProps } from 'antd/es/date-picker'
+import { reactToSolidComponent, replaceClassName } from './utils/component'
+
+const RangePicker = replaceClassName(
+  reactToSolidComponent<
+  RangePickerProps & {
+    dropdownClassName?: string | undefined
+    popupClassName?: string | undefined
+    rootClassName?: string | undefined
+  }
+  >(DatePickerAntd.RangePicker),
+)
+
+const _DatePicker = replaceClassName(
+  reactToSolidComponent<
+  DatePickerProps & {
+    status?: '' | 'error' | 'warning' | undefined
+    hashId?: string | undefined
+    popupClassName?: string | undefined
+    rootClassName?: string | undefined
+  }
+  >(DatePickerAntd),
+)
+const DatePicker = _DatePicker as typeof _DatePicker & {
+  RangePicker: typeof RangePicker
+}
+DatePicker.RangePicker = RangePicker
+
+export default DatePicker

package/src/Empty/PRESENTED_IMAGE_SIMPLE.tsx

@@ -0,0 +1,15 @@
+import { type Component } from 'solid-js'
+import SimpleEmptySvg from './assets/SimpleEmptySvg'
+
+const PRESENTED_IMAGE_SIMPLE: Component = () => {
+  return (
+    <div class='ant-my-[var(--ant-margin-xl)] ant-mx-[var(--ant-margin-xs)]'>
+      <div class="ant-mb-[var(--ant-margin-xs)] ant-flex ant-justify-center">
+        <SimpleEmptySvg />
+      </div>
+      <div class="ant-text-[var(--ant-color-text-disabled)] ant-text-center">暂无数据</div>
+    </div>
+  )
+}
+
+export default PRESENTED_IMAGE_SIMPLE

package/src/Empty/assets/EmptySvg.tsx

@@ -0,0 +1,43 @@
+const EmptySvg = () => (
+  <svg width="184" height="100" viewBox="0 0 184 152" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd">
+      <g transform="translate(24 31.67)">
+        <ellipse
+          fill-opacity=".8"
+          fill="#F5F5F7"
+          cx="67.797"
+          cy="106.89"
+          rx="67.797"
+          ry="12.668"
+        />
+        <path
+          d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z"
+          fill="#AEB8C2"
+        />
+        <path
+          d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z"
+          fill="url(#linearGradient-1)"
+          transform="translate(13.56)"
+        />
+        <path
+          d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z"
+          fill="#F5F5F7"
+        />
+        <path
+          d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z"
+          fill="#DCE0E6"
+        />
+      </g>
+      <path
+        d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z"
+        fill="#DCE0E6"
+      />
+      <g transform="translate(149.65 15.383)" fill="#FFF">
+        <ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815" />
+        <path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z" />
+      </g>
+    </g>
+  </svg>
+)
+
+export default EmptySvg

package/src/Empty/assets/SimpleEmptySvg.tsx

@@ -0,0 +1,16 @@
+const EmptySvg = () => (
+  <svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
+    <g transform="translate(0 1)" fill="none" fill-rule="evenodd">
+      <ellipse fill="#f5f5f5" cx="32" cy="33" rx="32" ry="7" />
+      <g fill-rule="nonzero" stroke="#d9d9d9">
+        <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" />
+        <path
+          d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+          fill="#fafafa"
+        />
+      </g>
+    </g>
+  </svg>
+)
+
+export default EmptySvg

package/src/Empty/index.tsx

@@ -0,0 +1,20 @@
+import { type Component } from 'solid-js'
+import PRESENTED_IMAGE_SIMPLE from './PRESENTED_IMAGE_SIMPLE'
+import EmptySvg from './assets/EmptySvg'
+
+const Empty: Component & {
+  PRESENTED_IMAGE_SIMPLE: Component
+} = () => {
+  return (
+    <div>
+      <div class='ant-mb-[var(--ant-margin-xs)] ant-flex ant-justify-center'>
+        <EmptySvg />
+      </div>
+      <div class='ant-text-[var(--ant-color-text)] ant-text-center'>暂无数据</div>
+    </div>
+  )
+}
+
+Empty.PRESENTED_IMAGE_SIMPLE = PRESENTED_IMAGE_SIMPLE
+
+export default Empty

package/src/Image.tsx

@@ -0,0 +1,29 @@
+import { Image as ImageAntd } from 'antd'
+import { configProvider, reactToSolidComponent, replaceClassName } from './utils/component'
+import { solidToReact } from './utils/solid'
+import { type JSXElement, createMemo } from 'solid-js'
+import { mapValues } from 'lodash-es'
+
+const _Image = replaceClassName(
+  reactToSolidComponent(configProvider(ImageAntd), () => (<div class="ant-inline-flex" />) as any),
+)
+
+type ImageProps = Omit<Parameters<typeof _Image>[0], 'placeholder'> & {
+  placeholder?: JSXElement
+}
+
+function Image(_props: ImageProps) {
+  const props = createMemo(() =>
+    mapValues(_props, (value, key) => {
+      switch (key) {
+        case 'placeholder':
+          return solidToReact(value)
+        default:
+          return value
+      }
+    }),
+  )
+  return <_Image {...(props() as any)} />
+}
+
+export default Image

package/src/Input.tsx

@@ -0,0 +1,202 @@
+import { isNil, omit } from 'lodash-es'
+import { Show, createMemo, splitProps } from 'solid-js'
+import type { JSX, JSXElement, Component } from 'solid-js'
+import cs from 'classnames'
+import createControllableValue from './hooks/createControllableValue'
+import { Dynamic } from 'solid-js/web'
+import Compact from './Compact'
+
+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>
+  }
+
+const statusClassDict = {
+  default: (disabled: boolean) =>
+    cs(
+      'ant-[border:1px_solid_var(--ant-color-border)]',
+      !disabled &&
+        'hover:ant-border-[var(--primary-color)] focus-within:ant-border-[var(--primary-color)] focus-within:ant-[box-shadow:0_0_0_2px_rgba(5,145,255,0.1)]',
+    ),
+  error: (disabled: boolean) =>
+    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: boolean) =>
+    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)]',
+    ),
+}
+
+export function CommonInput<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement>(
+  props: CommonInputProps<T> &
+  Omit<JSX.InputHTMLAttributes<T>, 'onChange' | 'onInput' | 'onKeyDown'>,
+) {
+  const [{ style, 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 = (
+    <Dynamic<Component<JSX.InputHTMLAttributes<HTMLInputElement>>>
+      component={
+        (props.textarea ? 'textarea' : 'input') as unknown as Component<
+        JSX.InputHTMLAttributes<HTMLInputElement>
+        >
+      }
+      {...(inputProps as JSX.InputHTMLAttributes<HTMLInputElement>)}
+      class={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',
+      )}
+      value={value() ?? ''}
+      onInput={e => {
+        setValue(e.target.value)
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        onChange?.(e as any)
+
+        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 as any)
+        }
+
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        onKeyDown?.(e as any)
+      }}
+    />
+  )
+
+  return (
+    <div class={cs('ant-flex ant-w-full', Compact.compactItemClass)} style={style}>
+      <Show when={props.addonBefore}>
+        <div
+          class={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,
+          )}
+        >
+          {props.addonBefore}
+        </div>
+      </Show>
+
+      <Show when={hasPrefixOrSuffix()} fallback={inputJSX}>
+        <div
+          class={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(--primary-color)]',
+            inputWrapClass(),
+          )}
+        >
+          <Show when={props.prefix}>
+            <div class="ant-mr-4px">{props.prefix}</div>
+          </Show>
+
+          {inputJSX}
+
+          <Show when={props.suffix}>
+            <div class="ant-ml-4px">{props.suffix}</div>
+          </Show>
+
+          <Show when={props.actions}>
+            <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">
+              {props.actions}
+            </div>
+          </Show>
+        </div>
+      </Show>
+
+      <Show when={props.addonAfter}>
+        <div
+          class={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,
+          )}
+        >
+          {props.addonAfter}
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+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'
+>
+
+const Input: Component<InputProps> & {
+  TextArea: Component<TextAreaProps>
+} = props => {
+  return <CommonInput {...omit(props, ['actions'])} />
+}
+
+Input.TextArea = props => {
+  return (
+    <CommonInput<HTMLTextAreaElement> textarea {...omit(props, ['prefix', 'suffix', 'actions'])} />
+  )
+}
+
+export default Input

package/src/InputNumber.test.tsx

@@ -0,0 +1,46 @@
+import { describe, expect, it, vi } from 'vitest'
+import { fireEvent, render } from '@solidjs/testing-library'
+import InputNumber from './InputNumber'
+import '@testing-library/jest-dom'
+
+describe('InputNumber component', () => {
+  it('onChange', () => {
+    const onChange = vi.fn()
+    const { getByPlaceholderText } = render(() => (
+      <InputNumber placeholder="input-number" onChange={onChange} />
+    ))
+
+    const input: HTMLInputElement = getByPlaceholderText('input-number')
+    input.value = '123'
+    fireEvent.input(input)
+    expect(onChange).toHaveBeenLastCalledWith(123)
+
+    input.value = '1234'
+    fireEvent.input(input)
+    expect(onChange).toBeCalledTimes(2)
+    expect(onChange).toHaveBeenLastCalledWith(1234)
+
+    input.value = '1234'
+    fireEvent.input(input)
+    expect(onChange).toBeCalledTimes(2)
+
+    input.value = '1234.'
+    fireEvent.input(input)
+    expect(onChange).toBeCalledTimes(2)
+
+    input.value = '1234.0'
+    fireEvent.input(input)
+    expect(onChange).toBeCalledTimes(2)
+
+    input.value = '1234.01'
+    fireEvent.input(input)
+    expect(onChange).toBeCalledTimes(3)
+
+    input.value = '123x'
+    fireEvent.input(input)
+    expect(onChange).toBeCalledTimes(3)
+
+    fireEvent.blur(input)
+    expect(onChange).toBeCalledTimes(3)
+  })
+})