@autional/ui 0.1.0-rc.42 → 0.1.0-rc.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autional/ui",
-  "version": "0.1.0-rc.42",
+  "version": "0.1.0-rc.44",
   "description": "Autional shared React component library (atoms + molecules) — the canonical home of the component layer",
   "license": "AGPL-3.0",
   "main": "./src/index.ts",
@@ -82,7 +82,7 @@
     "react-i18next": "17.0.7",
     "typescript": "5.8.3",
     "vitest": "3.2.0",
-    "@autional/tokens": "0.1.0-rc.10"
+    "@autional/tokens": "0.1.0-rc.12"
   },
   "scripts": {
     "typecheck": "tsc --noEmit",

package/src/atoms/Input.tsx

@@ -1,16 +1,49 @@
 import * as React from 'react';
 import { fieldControlClass, fieldControlHeight } from '../internal/field-styles';
 
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+// 注：`prefix` 与 HTML 自带的 `prefix` 属性同名（后者在 <input> 上没有意义，TS 会报
+// 「ReactNode 不能赋给 string」）。所以这里显式 Omit 掉它再重定义 —— 保住最自然的调用名。
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> {
 	error?: string;
+	/**
+	 * 前缀槽：图标或极短的单位符号（如货币符号）。
+	 *
+	 * 为什么要有它（第 59 轮）：舰队里 5 个站在手写同一个模式 ——
+	 * 一个 `relative` 容器 + 绝对定位的图标 + **算出来的**左内边距（`pl-9` = 12 起点 + 16 图标 + 8 间隙 = 36px）。
+	 * 那是同一个几何被抄了 6 遍，而且抄出来的值不在档位上。
+	 * 这里用 **flex 排布**而不是绝对定位：图标占真实布局空间，于是
+	 * **不需要任何魔法内边距**，也不挑图标尺寸。
+	 *
+	 * 图标请守图标纪律：默认 `size="1em"`，显式字号时 `size={N}`。
+	 */
+	prefix?: React.ReactNode;
+	/** 后缀槽：清除按钮、单位后缀一类。同样占真实布局空间。 */
+	suffix?: React.ReactNode;
 }
 
 // 外观来自 ../internal/field-styles —— 与 @autional/ui/rhf 的绑定控件同一份，不各自维护。
+//
+// 两种渲染形态（**无槽时逐字节不变**，既有消费方零影响）：
+//   · 无 prefix/suffix：只有一个 <input>，外框在它自己身上（原样）；
+//   · 有槽：外框交给 wrapper，<input> 变透明并占满剩余宽度 —— 高度/圆角由调用方
+//     原有的 className 决定（舰队里搜索框有三种几何：py-2 / py-2.5 / py-3.5 rounded-full），
+//     所以这一层**不替调用方决定尺寸**。
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-	({ className = '', error, ...props }, ref) => {
+	({ className = '', error, prefix, suffix, ...props }, ref) => {
+		const hasSlot = prefix != null || suffix != null;
 		return (
 			<div className="w-full">
-				<input ref={ref} className={fieldControlClass(!!error, fieldControlHeight + ' ' + className)} {...props} />
+				{hasSlot ? (
+					<div className={fieldControlClass(!!error, 'flex items-center gap-2 ' + className)}>
+						{prefix != null && (
+							<span className="shrink-0 text-[var(--color-text-muted)]" aria-hidden="true">{prefix}</span>
+						)}
+						<input ref={ref} className="min-w-0 flex-1 bg-transparent p-0 text-inherit outline-none placeholder:text-[var(--color-text-muted)]" {...props} />
+						{suffix != null && <span className="shrink-0">{suffix}</span>}
+					</div>
+				) : (
+					<input ref={ref} className={fieldControlClass(!!error, fieldControlHeight + ' ' + className)} {...props} />
+				)}
 				{error && <p className="mt-1 text-xs text-[var(--color-danger)]">{error}</p>}
 			</div>
 		);

package/src/atoms/Toggle.tsx

@@ -34,7 +34,7 @@ export const Toggle = React.memo(function Toggle({
 			} ${s.track} ${className}`}
 		>
 			<span
-				className={`inline-block rounded-full bg-white shadow-sm transition-transform ${
+				className={`inline-block rounded-full bg-white shadow-soft transition-transform ${
 					checked ? s.translate : 'translate-x-0.5'
 				} ${s.circle}`}
 			/>

package/src/molecules/ConfirmDialog.tsx

@@ -62,7 +62,7 @@ export const ConfirmDialog = React.memo(function ConfirmDialog({
 	return (
 		<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
 			<div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={onCancel} />
-			<div className="relative w-full max-w-md rounded-xl border border-[var(--color-border-subtle)] bg-[var(--color-bg-surface)] p-6 shadow-lg">
+			<div className="relative w-full max-w-md rounded-xl border border-[var(--color-border-subtle)] bg-[var(--color-bg-surface)] p-6 shadow-brand">
 				<button
 					onClick={onCancel}
 					className="absolute right-4 top-4 text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]"

package/src/molecules/ErrorBoundary.tsx

@@ -106,7 +106,7 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
 							{this.state.error?.message || T.unknown}
 						</p>
 						{this.state.error?.stack && (
-							<pre className="mt-4 max-h-60 max-w-2xl overflow-auto rounded bg-neutral-100 p-3 text-left text-xs text-neutral-600 dark:bg-neutral-800 dark:text-neutral-400">
+							<pre className="mt-4 max-h-60 max-w-2xl overflow-auto rounded-xs bg-neutral-100 p-3 text-left text-xs text-neutral-600 dark:bg-neutral-800 dark:text-neutral-400">
 								{this.state.error.stack}
 							</pre>
 						)}

package/src/molecules/Modal.tsx

@@ -138,7 +138,7 @@ export const Modal = React.memo(function Modal({
 				aria-labelledby={title ? titleId : undefined}
 				aria-describedby={title && description ? descriptionId : undefined}
 				tabIndex={-1}
-				className={`relative w-full ${maxWidthClasses[maxWidth]} rounded-xl border border-[var(--color-border-subtle)] bg-[var(--color-bg-surface)] shadow-lg outline-none ${className}`}
+				className={`relative w-full ${maxWidthClasses[maxWidth]} rounded-xl border border-[var(--color-border-subtle)] bg-[var(--color-bg-surface)] shadow-brand outline-none ${className}`}
 			>
 				{title && (
 					<div className="flex items-start justify-between gap-4 border-b border-[var(--color-border-subtle)] px-6 py-4">

package/src/molecules/PageContainer.tsx

@@ -26,7 +26,7 @@ export const PageContainer = React.memo(function PageContainer({
 			className={`flex min-h-screen items-center justify-center px-4 ${padding ? 'py-8' : ''} ${className}`}
 		>
 			<div
-				className={`w-full ${maxWidthClasses[maxWidth]} space-y-6 rounded-2xl bg-[var(--color-bg-surface)] p-8 shadow-lg`}
+				className={`w-full ${maxWidthClasses[maxWidth]} space-y-6 rounded-lg bg-[var(--color-bg-surface)] p-8 shadow-brand`}
 			>
 				{children}
 			</div>

package/src/molecules/PortalSwitcher.tsx

@@ -96,7 +96,7 @@ export function PortalSwitcher({
 				<div
 					{...menuProps}
 					ref={menuRef}
-					className={`absolute top-full z-50 mt-2 w-56 rounded-lg border border-[var(--color-border-subtle)] bg-[var(--color-bg-elevated)] py-1 shadow-lg ${
+					className={`absolute top-full z-50 mt-2 w-56 rounded-lg border border-[var(--color-border-subtle)] bg-[var(--color-bg-elevated)] py-1 shadow-brand ${
 						align === 'left' ? 'left-0' : 'right-0'
 					} ${menuClassName}`}
 				>

package/src/molecules/Result.tsx

@@ -65,7 +65,7 @@ export const Result = React.memo(function Result({
 	// 徽标：白底卡片上用同色浅底，整块浅底上退回白色面 —— 两种都保证徽标里的图标仍压在同色浅底上。
 	const badgeCls = tinted ? 'bg-[var(--color-bg-surface)]' : SOFT_TEXT[variant];
 	return (
-		<div className={`flex flex-col items-center rounded-lg border p-8 text-center shadow-sm ${surfaceCls} ${className}`}>
+		<div className={`flex flex-col items-center rounded-lg border p-8 text-center shadow-card ${surfaceCls} ${className}`}>
 			{glyph ? (
 				<span className={`flex h-16 w-16 items-center justify-center rounded-full ${badgeCls} ${tinted ? textTone(variant) : ''}`}>
 					{glyph}

package/src/molecules/SectionCard.tsx

@@ -34,7 +34,7 @@ export const SectionCard = React.memo(function SectionCard({
 }: SectionCardProps) {
 	return (
 		<div
-			className={`rounded-lg border border-[var(--color-border-subtle)] bg-[var(--color-bg-surface)] shadow-sm ${paddingMap[padding]} ${className}`}
+			className={`rounded-lg border border-[var(--color-border-subtle)] bg-[var(--color-bg-surface)] shadow-card ${paddingMap[padding]} ${className}`}
 		>
 			{title && (
 				<h2 className="mb-4 text-base font-semibold text-[var(--color-text-primary)]">{title}</h2>

package/src/molecules/Toast.tsx

@@ -87,13 +87,13 @@ export function ToastProvider({ children }: { children: ReactNode }) {
 					return (
 						<div
 							key={toast.id}
-							className={`pointer-events-auto flex items-center gap-2 rounded-xl px-4 py-2.5 text-sm font-medium shadow-lg ${STYLES[toast.type]}`}
+							className={`pointer-events-auto flex items-center gap-2 rounded-xl px-4 py-2.5 text-sm font-medium shadow-brand ${STYLES[toast.type]}`}
 						>
 							<Icon className="h-4 w-4 shrink-0" />
 							<span className="flex-1">{toast.message}</span>
 							<button
 								onClick={() => removeToast(toast.id)}
-								className="ml-1 shrink-0 rounded p-0.5 opacity-70 hover:bg-white/20 hover:opacity-100"
+								className="ml-1 shrink-0 rounded-xs p-0.5 opacity-70 hover:bg-white/20 hover:opacity-100"
 							>
 								<X className="h-3.5 w-3.5" />
 							</button>

package/src/molecules/UserMenu.tsx

@@ -111,7 +111,7 @@ export function UserMenu({
 				<div
 					{...menuProps}
 					ref={menuRef}
-					className={`absolute top-full z-50 mt-2 w-56 rounded-lg border border-[var(--color-border-subtle)] bg-[var(--color-bg-elevated)] py-1 shadow-lg ${
+					className={`absolute top-full z-50 mt-2 w-56 rounded-lg border border-[var(--color-border-subtle)] bg-[var(--color-bg-elevated)] py-1 shadow-brand ${
 						align === 'left' ? 'left-0' : 'right-0'
 					} ${menuClassName}`}
 				>