antd-solid 0.0.2 → 0.0.3

package/src/Button.tsx

@@ -8,10 +8,9 @@ import {
   createMemo,
 } from 'solid-js'
 import cs from 'classnames'
-import './Button.css'
 
 interface ButtonProps extends ParentProps, JSX.CustomAttributes<HTMLButtonElement> {
-  type?: 'default' | 'primary' | 'text' | 'link'
+  type?: 'default' | 'primary' | 'dashed' | 'text' | 'link'
   onClick?: ((e: MouseEvent) => void) | ((e: MouseEvent) => Promise<unknown>)
   /**
    * 默认: middle
@@ -21,6 +20,10 @@ interface ButtonProps extends ParentProps, JSX.CustomAttributes<HTMLButtonElemen
   class?: string
   style?: JSX.CSSProperties
   loading?: boolean
+  /**
+   * 设置危险按钮
+   */
+  danger?: boolean
 }
 
 const sizeClassMap = {
@@ -31,12 +34,41 @@ const sizeClassMap = {
 } as const
 
 const typeClassMap = {
-  default:
-    'ant-[border:1px_solid_rgb(217,217,217)] ant-bg-white ant-text-[var(--dark-color)] hover:ant-[border-color:var(--light-primary-color)] hover:ant-text-[var(--light-primary-color)]',
-  primary:
-    'ant-border-none ant-bg-[var(--primary-color)] hover:ant-bg-[var(--light-primary-color)] ant-text-white',
-  text: 'ant-border-none ant-bg-transparent ant-text-[var(--dark-color)] hover:ant-bg-[rgba(0,0,0,0.06)] active:ant-bg-[rgba(0,0,0,.15)]',
-  link: 'ant-border-none ant-bg-transparent ant-text-[var(--primary-color)] hover:ant-text-[var(--light-primary-color)] active:ant-text-[var(--dark-primary-color)]',
+  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 => {
@@ -51,8 +83,9 @@ const Button: Component<ButtonProps> = props => {
         'ant-relative ant-cursor-pointer',
         mergedProps.class,
         sizeClassMap[mergedProps.size!],
-        typeClassMap[mergedProps.type!],
+        typeClassMap[mergedProps.type!](props.danger ?? false),
         loading() && 'ant-opacity-65',
+        'ant-[--color:--light-primary-color]'
       )}
       style={mergedProps.style}
       onClick={e => {
@@ -62,10 +95,16 @@ const Button: Component<ButtonProps> = props => {
           res.finally(() => setLoading(false))
         }
 
-        if (mergedProps.type === 'default' || mergedProps.type === 'primary') {
+        if (
+          mergedProps.type === 'default' ||
+          mergedProps.type === 'primary' ||
+          mergedProps.type === 'dashed'
+        ) {
           const div = document.createElement('div')
-          div.className =
-            'ant-absolute ant-inset-0 ant-rounded-inherit ant-[border:1px_solid_var(--light-primary-color)] ant-[animation:button-border_linear_1s]'
+          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)

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

@@ -1,66 +1,11 @@
-import { type Component, createSignal, mergeProps, untrack } from 'solid-js'
-import { type ColorResult, SketchPicker, type Color, type RGBColor, type HSLColor } from 'react-color'
+import { ColorPicker } from 'antd'
+import { type Color } from 'antd/es/color-picker'
 import { reactToSolidComponent } from './utils/component'
-import Button from './Button'
-import Popover from './Popover'
-import { get, isNil } from 'lodash-es'
-
-const _SketchPicker = reactToSolidComponent(SketchPicker)
 
 export interface ColorPickerProps {
-  /**
-   * 默认: rgba
-   */
-  type?: 'rgba' | 'hsla'
-  defaultColor?: string
-  onChange?: (colorString: string, color: ColorResult) => void
-}
-
-function isRGBColor(color: Color): color is RGBColor {
-  return ['r', 'g', 'b'].every(k => !isNil(get(color, k)))
-}
-
-function isHSLColor(color: Color): color is HSLColor {
-  return ['r', 'g', 'b'].every(k => !isNil(get(color, k)))
-}
-
-function colorStringify(color: Color | undefined) {
-  if (!color) return
-
-  if (isRGBColor(color)) return `rgba(${color.r},${color.g},${color.b},${color.a ?? 1})`
-
-  if (isHSLColor(color)) return `hsla(${color.h},${color.s},${color.l},${color.a ?? 1})`
-
-  return color
-}
-
-const ColorPicker: Component<ColorPickerProps> = _props => {
-  const props = mergeProps({ type: 'rgba' } as ColorPickerProps, _props)
-  const [color, setColor] = createSignal(props.defaultColor ?? 'black')
-
-  return (
-    <Popover
-      content={
-        <_SketchPicker
-          color={color()}
-          onChange={colorResult =>
-          { untrack(() => {
-            const colorString = colorStringify(
-              props.type === 'rgba' ? colorResult.rgb : colorResult.hsl,
-            )!
-            setColor(colorString)
-
-            props.onChange?.(colorString, colorResult)
-          }); }
-          }
-        />
-      }
-      trigger="click"
-      placement="bottomLeft"
-    >
-      <Button style={{ background: color() }} />
-    </Popover>
-  )
+  defaultValue?: string | Color
+  value?: string | Color
+  onChange?: (value: Color, hex: string) => void
 }
 
-export default ColorPicker
+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/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/Input.tsx

@@ -1,89 +1,173 @@
-import { omit } from 'lodash-es'
-import { Show, splitProps } from 'solid-js'
+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
-  /**
-   * 仅供 InputNumber 使用
-   */
-  inputAfter?: JSXElement
-  placeholder?: string
-  onChange?: JSX.InputEventHandler<T, InputEvent>
-  onPressEnter?: JSX.EventHandler<T, KeyboardEvent>
-  onKeyDown?: JSX.EventHandler<T, KeyboardEvent>
+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 [{ onChange, onPressEnter, onKeyDown }, inputProps] = splitProps(props, [
+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',
-    'inputAfter',
+    '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="ant-flex ant-w-full">
+    <div class={cs('ant-flex ant-w-full', Compact.compactItemClass)} style={style}>
       <Show when={props.addonBefore}>
-        <div class="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_#d9d9d9] ant-border-r-0 ant-rounded-l-6px ant-text-14px">
+        <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>
 
-      <div class="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)]">
-        <Dynamic<Component<JSX.InputHTMLAttributes<HTMLInputElement>>>
-          component={
-            (props.textarea ? 'textarea' : 'input') as unknown as Component<
-              JSX.InputHTMLAttributes<HTMLInputElement>
-            >
-          }
-          {...inputProps as JSX.InputHTMLAttributes<HTMLInputElement>}
+      <Show when={hasPrefixOrSuffix()} fallback={inputJSX}>
+        <div
           class={cs(
-            'ant-w-full ant-py-0 ant-px-11px ant-[outline:none] ant-text-14px ant-rounded-6px ant-[border:1px_solid_#d9d9d9] focus:ant-border-[var(--primary-color)] focus:ant-[box-shadow:0_0_0_2px_rgba(5,145,255,0.1)] ant-py-8px',
-            !props.textarea && 'ant-h-32px',
-            props.class,
-            props.addonBefore && 'ant-rounded-l-0',
-            props.addonAfter && 'ant-rounded-r-0',
+            '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(),
           )}
-          value={value() ?? ''}
-          onInput={e => {
-            setValue(e.target.value)
-            onChange?.(e as any)
-          }}
-          onKeyDown={e => {
-            if (e.key === 'Enter') {
-              onPressEnter?.(e as any)
-            }
-
-            onKeyDown?.(e as any)
-          }}
-        />
-
-        <Show when={props.inputAfter}>
-          <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.inputAfter}
-          </div>
-        </Show>
-      </div>
+        >
+          <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="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_#d9d9d9] ant-border-l-0 ant-rounded-r-6px ant-text-14px">
+        <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>
@@ -91,20 +175,28 @@ export function CommonInput<T extends HTMLInputElement | HTMLTextAreaElement = H
   )
 }
 
-export type InputProps = Omit<CommonInputProps, 'inputAfter' | 'textarea'> &
-  Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onInput' | 'onKeyDown'>
+export type InputProps = Omit<CommonInputProps, 'actions' | 'textarea'> &
+Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onInput' | 'onKeyDown'>
 
-export type TextAreaProps = Omit<CommonInputProps<HTMLTextAreaElement>, 'inputAfter' | 'textarea'> &
-  Omit<JSX.TextareaHTMLAttributes<HTMLTextAreaElement>, '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, ['inputAfter'])} />
+  return <CommonInput {...omit(props, ['actions'])} />
 }
 
 Input.TextArea = props => {
-  return <CommonInput<HTMLTextAreaElement> textarea {...omit(props, ['inputAfter'])} />
+  return (
+    <CommonInput<HTMLTextAreaElement> textarea {...omit(props, ['prefix', 'suffix', 'actions'])} />
+  )
 }
 
 export default Input