@autional/ui 0.1.0-rc.43 → 0.1.0-rc.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autional/ui",
-  "version": "0.1.0-rc.43",
+  "version": "0.1.0-rc.45",
   "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.11"
+    "@autional/tokens": "0.1.0-rc.13"
   },
   "scripts": {
     "typecheck": "tsc --noEmit",

package/src/atoms/Input.tsx

@@ -1,19 +1,63 @@
 import * as React from 'react';
-import { fieldControlClass, fieldControlHeight } from '../internal/field-styles';
+import { fieldControlClass, fieldControlClassFor, fieldControlHeight, type FieldShape, type FieldSize } from '../internal/field-styles';
 
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+// 注：`prefix` 与 `size` 都与 HTML 自带的同名属性冲突（`prefix?: string`、`size?: number`，
+// 而这里要的是 ReactNode 与 'sm'|'md'|'lg'）。两处都是 **tsc 当场报出来的** ——
+// 所以显式 Omit 掉再重定义，保住最自然的调用名，而不是改成 `inputSize` 这种妥协名。
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix' | 'size'> {
 	error?: string;
+	/**
+	 * 前缀槽：图标或极短的单位符号（如货币符号）。
+	 *
+	 * 为什么要有它（第 59 轮）：舰队里 5 个站在手写同一个模式 ——
+	 * 一个 `relative` 容器 + 绝对定位的图标 + **算出来的**左内边距（`pl-9` = 12 起点 + 16 图标 + 8 间隙 = 36px）。
+	 * 那是同一个几何被抄了 6 遍，而且抄出来的值不在档位上。
+	 * 这里用 **flex 排布**而不是绝对定位：图标占真实布局空间，于是
+	 * **不需要任何魔法内边距**，也不挑图标尺寸。
+	 *
+	 * 图标请守图标纪律：默认 `size="1em"`，显式字号时 `size={N}`。
+	 */
+	prefix?: React.ReactNode;
+	/** 后缀槽：清除按钮、单位后缀一类。同样占真实布局空间。 */
+	suffix?: React.ReactNode;
+	/**
+	 * 尺寸档（第 61 轮）：sm=h-9 / md=h-10（默认）/ lg=h-14。
+	 * 舰队里手写的搜索框有三种几何，这个参数就是为它们准备的 —— **只影响有槽形态**，
+	 * 无槽形态仍走默认高度（既有消费方零影响）。
+	 */
+	size?: FieldSize;
+	/** 形状档：default=rounded-md / pill=rounded-full（大圆角搜索框）。同样只影响有槽形态。 */
+	shape?: FieldShape;
 }
 
 // 外观来自 ../internal/field-styles —— 与 @autional/ui/rhf 的绑定控件同一份，不各自维护。
+//
+// 两种渲染形态（**无槽时逐字节不变**，既有消费方零影响）：
+//   · 无 prefix/suffix：只有一个 <input>，外框在它自己身上（原样）；
+//   · 有槽：外框交给 wrapper，<input> 变透明并占满剩余宽度 —— 高度/圆角由 `size` / `shape`
+//     两轴决定（第 61 轮补：舰队里搜索框有三种几何 py-2 / py-2.5 / py-3.5 + rounded-full，
+//     组件层若只有一种，站点就只能各自写材质 —— 那就是这条维度存在的原因）。
+//     ⚠️ 调用方**不要**再传高度/内边距/圆角：同一批属性只能有一个来源，否则胜负由
+//     Tailwind 的生成顺序决定，而那是无声的。
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-	({ className = '', error, ...props }, ref) => {
+	({ className = '', error, prefix, suffix, size = 'md', shape = 'default', ...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={fieldControlClassFor(size, shape, !!error, '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>
 		);
 	},
 );
-Input.displayName = 'Input';
+Input.displayName = 'Input';

package/src/internal/field-styles.ts

@@ -1,14 +1,49 @@
 // 表单控件的外观只有一份 —— Input atom 与 @autional/ui/rhf 的绑定控件都用它。
 // 各自复制一份类名串的后果不是「看起来一样」，而是「改了一处、另一处没变」：
 // 那正是这一层要消灭的东西（与 antd 组件级令牌同理，只是这里是一段 Tailwind 类）。
+//
+// 第 61 轮加了尺寸与形状两轴 —— 起因是舰队里手写的搜索框有**三种几何**
+// （py-2 / py-2.5 / py-3.5 + rounded-full），而组件层只有一种，于是站点只能各自写材质。
+// 关键纪律：**高度/内边距/圆角只由一个地方发出来**（这里），调用方的 className 不得与它冲突 ——
+// 否则胜负由 Tailwind 的生成顺序决定，那是无声的。
 
-const BASE =
-	'flex w-full rounded-md border bg-[var(--color-bg-surface)] px-3 py-2 text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-muted)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-brand)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
+// ⚠️ 拆 BASE 的时候差点丢掉两个状态样式（focus-visible 环、disabled）——
+// 「重写一个常量的整行」时最容易漏掉的就是**行尾那几个**。它们与尺寸/形状不冲突，
+// 所以留在 STRUCT 里，一处不少。
+const STRUCT =
+	'flex w-full border bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-muted)] ' +
+	'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-brand)] focus-visible:ring-offset-2 ' +
+	'disabled:cursor-not-allowed disabled:opacity-50';
 
-/** 单行控件的高度。textarea 不给（它要能长高）。 */
+/** 尺寸档：高度是**定值**（不是 padding 撑出来的）—— 同一行里的控件要对齐，定值才可预测。 */
+export type FieldSize = 'sm' | 'md' | 'lg';
+const SIZE: Record<FieldSize, string> = {
+	sm: 'h-9 px-3 text-sm',
+	md: 'h-10 px-3 text-sm',
+	lg: 'h-14 px-4 text-base',
+};
+
+/** 形状档。pill 是给「搜索框」一类大圆角控件用的，不是给表单控件的默认。 */
+export type FieldShape = 'default' | 'pill';
+const SHAPE: Record<FieldShape, string> = {
+	default: 'rounded-md',
+	pill: 'rounded-full',
+};
+
+/** 单行控件的默认高度。textarea 不给（它要能长高）。 */
 export const fieldControlHeight = 'h-10';
 
-export function fieldControlClass(invalid?: boolean, extra = ''): string {
+export function fieldControlClassFor(
+	size: FieldSize = 'md',
+	shape: FieldShape = 'default',
+	invalid?: boolean,
+	extra = '',
+): string {
 	const border = invalid ? 'border-[var(--color-danger)]' : 'border-[var(--color-border-subtle)]';
-	return `${BASE} ${border} ${extra}`.trim();
+	return `${STRUCT} ${SIZE[size]} ${SHAPE[shape]} ${border} ${extra}`.trim();
+}
+
+/** 旧签名（默认 md + default）—— **逐字节不变**，既有消费方零影响。 */
+export function fieldControlClass(invalid?: boolean, extra = ''): string {
+	return fieldControlClassFor('md', 'default', invalid, extra);
 }