-
40 个基础组件
+
42 个基础组件
零运行时依赖
CSS Modules + 设计令牌
对齐 Alright 参考站
diff --git a/site/sections/Inputs.tsx b/site/sections/Inputs.tsx
index f74771b..d06a002 100644
--- a/site/sections/Inputs.tsx
+++ b/site/sections/Inputs.tsx
@@ -1,5 +1,5 @@
import { useState } from 'react'
-import { Button, FormField, Icon, Input, Space, Text, Textarea } from '../../src'
+import { Button, FormField, Icon, Input, PasswordInput, Space, Text, Textarea } from '../../src'
import { Demo } from '../components/Demo'
import { PropsTable } from '../components/PropsTable'
import { Section } from '../components/Section'
@@ -8,6 +8,7 @@ export function Inputs() {
const [keyword, setKeyword] = useState('')
const [host, setHost] = useState('127.0.0.1:8080')
const [email, setEmail] = useState('not-an-email')
+ const [password, setPassword] = useState('')
return (
+
+ setPassword(event.target.value)}
+ placeholder="输入密码"
+ />
+`}
+ >
+
+
+ setPassword(event.target.value)}
+ placeholder="输入密码"
+ />
+
+
)
}
diff --git a/src/components/PasswordInput.module.css b/src/components/PasswordInput.module.css
new file mode 100644
index 0000000..e8f7390
--- /dev/null
+++ b/src/components/PasswordInput.module.css
@@ -0,0 +1,12 @@
+.root {
+ display: flex;
+ align-items: center;
+ gap: var(--su-space-2);
+ width: 100%;
+}
+
+/* 输入框吃掉剩余宽度，眼睛按钮保持自身尺寸 */
+.input {
+ flex: 1;
+ min-width: 0;
+}
diff --git a/src/components/PasswordInput.tsx b/src/components/PasswordInput.tsx
new file mode 100644
index 0000000..b97dcd2
--- /dev/null
+++ b/src/components/PasswordInput.tsx
@@ -0,0 +1,66 @@
+import { useState, type CSSProperties, type InputHTMLAttributes } from 'react'
+import { Icon, type IconName } from './Icon'
+import { IconButton } from './IconButton'
+import { Input, type InputSize } from './Input'
+import styles from './PasswordInput.module.css'
+
+/**
+ * 密码输入框：`Input` + 右侧显隐切换。
+ *
+ * 为什么单独成组件而不是每个页面拼一遍：密码框的「锁图标 + 眼睛按钮 +
+ * aria 名称 + type 切换」是固定搭配，手拼时很容易漏掉显隐按钮（Stash 的
+ * 系统改密页就漏过一次），而漏掉之后用户无法确认自己输的是什么。
+ *
+ * 事件语义与 `Input` 一致：`onChange` 收到的是原生事件，Enter 等键盘逻辑
+ * 用 `onKeyDown`。输入框本身不知道「密码是否正确」这类业务状态。
+ */
+export type PasswordInputProps = {
+ /** 左侧图标，默认 `lock_line`；传 `null` 去掉 */
+ icon?: IconName | null
+ /** 尺寸 32 / 36 / 44，与 `Input` 一致 */
+ size?: InputSize
+ /** 是否显示右侧显隐按钮，默认显示 */
+ toggle?: boolean
+ /** `className` / `style` 作用在最外层（负责宽度与间距） */
+ className?: string
+ style?: CSSProperties
+} & Omit<
+ InputHTMLAttributes
,
+ 'type' | 'size' | 'className' | 'style' | 'icon'
+>
+
+export function PasswordInput({
+ icon = 'lock_line',
+ size = 'md',
+ toggle = true,
+ className,
+ style,
+ ...rest
+}: PasswordInputProps) {
+ const [visible, setVisible] = useState(false)
+
+ // 眼睛按钮的高度跟随输入框，避免并排时上下错位
+ const buttonSize = size === 'lg' ? 'md' : size === 'sm' ? 'xs' : 'sm'
+
+ return (
+
+
+
+ {toggle && (
+ }
+ onClick={() => setVisible((current) => !current)}
+ />
+ )}
+
+ )
+}
diff --git a/src/index.ts b/src/index.ts
index 3d43a2b..083656b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -64,6 +64,9 @@ export type { IconButtonProps, IconButtonSize } from './components/IconButton'
export { Input } from './components/Input'
export type { InputProps } from './components/Input'
+export { PasswordInput } from './components/PasswordInput'
+export type { PasswordInputProps } from './components/PasswordInput'
+
export { Layout } from './components/Layout'
export type { LayoutProps } from './components/Layout'