@suphark/ui 0.23.0 → 0.25.0

package/CHANGELOG.md

@@ -2,6 +2,42 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.25.0] — 2026-10-02
+
+input ใหม่ตามแผนจาก shadcnstudio.com — เพิ่มอย่างเดียว
+
+### Added
+
+- **`NumberInput`** — ช่องตัวเลขพร้อมปุ่ม −/+ (Base UI NumberField): `min`/`max`/`step`/`largeStep` (Shift+ลูกศร), `format` (Intl เช่น ทศนิยม 2 ตำแหน่ง/สกุลเงิน), `locale` (ค่าเริ่มต้น th-TH), `prefix`/`suffix` (฿, %, ชิ้น), `hideButtons`, `size` sm|default, `name` ส่งค่าดิบใน FormData — แทน `<Input type="number">` + InputGroup + state
+- **`TimePicker`** — ช่องเวลา 24 ชม. ค่า `"HH:mm"`: พิมพ์ได้เลย (`"1430"`, `"9.15"`, `"14:30 น."` → แปลงตอน blur/Enter, ผิดรูปแบบ = `aria-invalid`) หรือกดไอคอนนาฬิกาเลือกจากคอลัมน์ชั่วโมง/นาที (`minuteStep`, ปุ่ม "ตอนนี้"); `name` ส่งใน FormData
+- **`DateTimePicker`** — ปฏิทิน (ภาษาไทย) + คอลัมน์เวลาในกล่องเดียว ค่า `Date | null`, `defaultTime` เมื่อเลือกวันครั้งแรก, ปุ่มล้าง; `name` ส่ง `"YYYY-MM-DDTHH:mm"` (เวลาท้องถิ่น แบบ datetime-local)
+- `TimeColumns` (คอลัมน์ listbox ใช้ลูกศร/Home/End), `parseTimeInput`, `toLocalDateTimeString`, `type TimeValue`
+- **`TagsInput`** — พิมพ์หลายค่าเป็นป้าย: Enter/จุลภาค (+ เว้นวรรคถ้า `splitOnSpace`) เพิ่ม, วางหลายค่าพร้อมกัน, Backspace ลบตัวสุดท้าย, ไม่รับค่าซ้ำ (`allowDuplicates`), `max`, `transform`, `validate` คืนข้อความ error (ค่าที่ไม่ผ่านคงอยู่ในช่องให้แก้), ปลอดภัยกับ IME ไทย; `name` ส่งทุกค่า → `formData.getAll(name)` — redirect URI/โดเมน/อีเมล
+- **`StepForm`** — ฟอร์มหลายขั้น (wizard) จาก array `steps` (`title`, `description`, `content`, `validate(formData)`): แถบขั้นตอน (ขั้นที่ผ่านแล้วกดย้อนได้, จอแคบแสดง "ขั้นที่ x จาก y"), ปุ่มย้อนกลับ/ถัดไป/ส่ง, "ถัดไป" ตรวจ required/pattern + `validate` ของขั้นนั้น, ส่ง = ตรวจทุกขั้นอีกครั้งแล้วพากลับไปขั้นที่ผิด, input ตัวแทนที่ซ่อนของ Base UI ผิด = แสดงข้อความใต้ฟอร์ม; ทุกขั้นอยู่ใน form เดียว → `onSubmit(formData)` ได้ค่าครบ (ส่ง server action ต่อได้), throw = แสดงข้อความ, ปุ่มหมุนระหว่างรอ, โฟกัสย้ายไปหัวข้อขั้นใหม่
+- `UiText` key ใหม่: `number`, `time`, `tags`, `stepForm`
+- showcase: หน้า `/components/{number-input,time-picker,tags-input,step-form}` (129 หน้า); tests 11 กรณี
+
+### Performance
+
+- **barrel ไม่ใช้ `export *` แล้ว** (`index.ts` 66 บรรทัด, `next.ts`, `data-table.ts`, `components/data-table/index.ts` → รายชื่อ export ชัด ๆ แยก `type`; รายชื่อ export เท่าเดิมทุกตัว ตรวจด้วย TypeScript แล้ว) — วัดบน showcase (Next 16.3 Turbopack): server component ที่ import จาก `@suphark/ui` แบบ `export *` ทำให้ client component แทบทั้งแพ็กเกจ (ปฏิทิน, date-fns, cmdk, input-otp, accordion, questionnaire …) ถูกส่งไปทุกหน้า — **root layout ที่ใช้แค่ `ThemeProvider`/`Toaster` ลดจาก 988 kB (gzip 311 kB) เหลือ 61 kB (gzip 18 kB)**, หน้า `/login` 991 → 114 kB; แอปไม่ต้องแก้โค้ด แค่ bump (`optimizePackageImports` / `turbopackRemoveUnused*` ไม่ช่วย — ลองแล้ว)
+- `scripts/barrel-exports.mjs`: `pnpm check:barrel` (ใน verify + CI — เจอ `export *` ใน `packages/ui/src` = ล้ม) และ `pnpm fix:barrel` (แปลงให้หลัง `shadcn add`)
+- หมายเหตุ: ตัวเลข date-fns 824 kB บน bundlephobia คือทั้งไลบรารี — ใน build จริงมีเฉพาะฟังก์ชันที่ใช้ + locale ไทย/อังกฤษ
+
+## [0.24.0] — 2026-10-02
+
+เติมของเดิมตามที่สำรวจ shadcnstudio.com (หยิบเฉพาะ "หน้าที่" ที่ยังไม่มี ทำเป็นตัวเดียว + props) — เพิ่มอย่างเดียว ค่าเริ่มต้นหน้าตาเดิม
+
+### Added
+
+- **`TextareaField`** — ช่องข้อความหลายบรรทัดพร้อม `label`/`hint`/`error` + **ตัวนับตัวอักษร** เมื่อมี `maxLength` (แดงเมื่อเต็ม, screen reader อ่าน "พิมพ์แล้ว x จาก y ตัวอักษร" ผ่าน `aria-describedby`) + `minRows`/`maxRows` (Textarea ขยายตามเนื้อหาอยู่แล้ว — `maxRows` จำกัดแล้วเลื่อนใน); controlled/uncontrolled; `textareaClassName`
+- **`UserAvatars`** — รูปผู้ใช้ซ้อนกัน + "+N" จาก array (`users`, `max`, `size` sm|default|lg, `label` นำหน้ารายชื่อให้ screen reader) ชี้ที่ "+N" เห็นชื่อที่เหลือ; ใช้จาก server component ได้ — แทน AvatarGroup + Avatar×N + AvatarGroupCount
+- **จุดสถานะ** `status?: "online" | "away" | "busy" | "offline"` ที่ `Initials`, `UserIdentity` และรายการของ `UserAvatars` (`PresenceDot` + `type Presence` export ด้วย) ใช้ token success/warning/destructive/muted
+- **`TableSkeleton`** (`rows`, `columns`, `header`), **`ListSkeleton`** (`rows`, `avatar`, `lines`), **`CardSkeleton`** (`count`, `variant` stat|content) — โครงระหว่างโหลดสำเร็จรูปสำหรับ `loading.tsx` มี `role="status"` + "กำลังโหลด…" ความกว้างสลับแบบคงที่ (ไม่ random → ไม่ hydration mismatch)
+- **`Notice`**: `icon` (true = ไอคอนตามโทน หรือส่งเอง) และ `dismissible` + `onDismiss` (ปุ่ม X อ่าน `UiText.close`) — ไม่ส่ง = หน้าตาเดิม; ไฟล์เป็น `"use client"` แล้ว (ใช้จาก server component ได้เหมือนเดิม)
+- **`AuthLayout`**: `size?: "sm" | "md" | "lg"` ความกว้างการ์ด (ค่าเริ่มต้น sm = เดิม) — หน้า consent/เลือกองค์กรของ Pi Auth ใช้ md (ขอจาก Pi Auth)
+- `UiText` key ใหม่: `loading`, `presence`, `characterCount`
+- showcase: หน้า `/components/{textarea-field,user-avatars,loading-skeletons}` (125 หน้า), demo `notice` มี icon + dismissible; tests 10 กรณี
+
 ## [0.23.0] — 2026-10-02
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.23.0",
+  "version": "0.25.0",
   "private": false,
   "type": "module",
   "description": "Design system กลางของ Suphark apps: shadcn/ui (base-nova, Base UI, Tailwind v4) + shared components + token/ฟอนต์ Noto Sans Thai Looped — ส่งเป็น source ให้แอป Next transpile เอง",

package/src/components/data-table/index.ts

@@ -1,9 +1,9 @@
-export * from "./data-table";
-export * from "./data-table-column-header";
-export * from "./data-table-date-range-filter";
-export * from "./data-table-faceted-filter";
-export * from "./data-table-pagination";
-export * from "./data-table-toolbar";
-export * from "./data-table-view-option";
-export * from "./types";
-export * from "./use-data-table";
+export { DataTable } from "./data-table";
+export { DataTableColumnHeader } from "./data-table-column-header";
+export { DataTableDateRangeFilter } from "./data-table-date-range-filter";
+export { DataTableFacetedFilter } from "./data-table-faceted-filter";
+export { DataTablePagination } from "./data-table-pagination";
+export { DataTableToolbar } from "./data-table-toolbar";
+export { DataTableViewOptions } from "./data-table-view-option";
+export type { DataTableProps, FacetedFilterConfig } from "./types";
+export { useDataTable } from "./use-data-table";

package/src/components/shared/auth-layout.tsx

@@ -1,6 +1,8 @@
 import { cn } from "@suphark/ui/lib/utils";
 import type { CSSProperties, ReactNode } from "react";
 
+const SIZE = { sm: "max-w-sm", md: "max-w-md", lg: "max-w-lg" } as const;
+
 export interface AuthLayoutProps {
   /** โลโก้เหนือหัวข้อ — element (`<img>`/ไอคอน) หรือไม่ส่ง = ไม่มี */
   logo?: ReactNode;
@@ -28,6 +30,8 @@ export interface AuthLayoutProps {
   brandForeground?: string | null;
   /** เต็มความสูงจอ (ค่าเริ่มต้น true) — false ใช้ฝังในกรอบ เช่นหน้าเอกสาร */
   fullScreen?: boolean;
+  /** ความกว้างการ์ด: sm = max-w-sm (ค่าเริ่มต้น ฟอร์มล็อกอิน), md = max-w-md (consent/เลือกองค์กร), lg = max-w-lg */
+  size?: "sm" | "md" | "lg";
   className?: string;
 }
 
@@ -57,6 +61,7 @@ export function AuthLayout({
   brandColor,
   brandForeground,
   fullScreen = true,
+  size = "sm",
   className,
 }: AuthLayoutProps) {
   const style = brandColor
@@ -67,7 +72,7 @@ export function AuthLayout({
     : undefined;
 
   const card = (
-    <div className="flex w-full max-w-sm flex-col gap-6">
+    <div className={cn("flex w-full flex-col gap-6", SIZE[size])}>
       <div
         data-slot="auth-card"
         className="overflow-hidden rounded-2xl border bg-card text-card-foreground shadow-lg shadow-foreground/5"

package/src/components/shared/form/number-input.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import { NumberField } from "@base-ui/react/number-field";
+import { cn } from "@suphark/ui/lib/utils";
+import { MinusIcon, PlusIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import { useUiText } from "../ui-text";
+
+const SIZE = {
+  sm: { group: "h-7", button: "w-7 [&_svg]:size-3.5", text: "text-sm" },
+  default: { group: "h-8", button: "w-8 [&_svg]:size-4", text: "text-base md:text-sm" },
+} as const;
+
+/**
+ * ช่องตัวเลขพร้อมปุ่ม −/+ (Base UI NumberField) — แทน `<Input type="number">` + InputGroup + state เอง
+ * ลูกศรขึ้น/ลง (Shift = `largeStep`), จัดรูปแบบตาม locale (`format` เช่น ทศนิยม/สกุลเงิน), `prefix`/`suffix` เช่น ฿ หรือ %
+ * `name` ส่งค่าใน FormData ของ server action ได้ (ค่าดิบไม่มีจุลภาค)
+ *
+ *   <NumberInput name="amount" prefix="฿" min={0} step={100} format={{ maximumFractionDigits: 2 }} />
+ *   <NumberInput value={qty} onValueChange={setQty} min={1} max={99} aria-label="จำนวน" />
+ */
+export function NumberInput({
+  value,
+  defaultValue,
+  onValueChange,
+  min,
+  max,
+  step = 1,
+  largeStep,
+  format,
+  locale,
+  prefix,
+  suffix,
+  hideButtons = false,
+  size = "default",
+  name,
+  id,
+  required,
+  disabled,
+  readOnly,
+  placeholder,
+  className,
+  inputClassName,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+}: {
+  value?: number | null;
+  defaultValue?: number;
+  onValueChange?: (value: number | null) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  /** ก้าวเมื่อกด Shift + ลูกศร / PageUp-PageDown (ค่าเริ่มต้น step × 10) */
+  largeStep?: number;
+  /** Intl.NumberFormatOptions เช่น `{ maximumFractionDigits: 2 }` หรือ `{ style: "percent" }` */
+  format?: Intl.NumberFormatOptions;
+  /** ค่าเริ่มต้น th-TH */
+  locale?: Intl.LocalesArgument;
+  /** ข้อความ/ไอคอนหน้าตัวเลข เช่น "฿" */
+  prefix?: ReactNode;
+  /** ข้อความ/ไอคอนหลังตัวเลข เช่น "%", "ชิ้น" */
+  suffix?: ReactNode;
+  /** ซ่อนปุ่ม −/+ (ยังใช้ลูกศรคีย์บอร์ดได้) */
+  hideButtons?: boolean;
+  size?: "sm" | "default";
+  name?: string;
+  id?: string;
+  required?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  placeholder?: string;
+  className?: string;
+  inputClassName?: string;
+  "aria-label"?: string;
+  "aria-describedby"?: string;
+  "aria-invalid"?: boolean | "true" | "false";
+}) {
+  const text = useUiText().number;
+  const s = SIZE[size];
+  const buttonClass = cn(
+    "flex shrink-0 items-center justify-center text-muted-foreground transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:bg-muted disabled:pointer-events-none disabled:opacity-50",
+    s.button,
+  );
+  const affix = "flex shrink-0 items-center px-2 text-muted-foreground text-sm select-none";
+  return (
+    <NumberField.Root
+      id={id}
+      name={name}
+      value={value}
+      defaultValue={defaultValue}
+      onValueChange={(v) => onValueChange?.(v)}
+      min={min}
+      max={max}
+      step={step}
+      largeStep={largeStep ?? step * 10}
+      format={format}
+      locale={locale ?? "th-TH"}
+      required={required}
+      disabled={disabled}
+      readOnly={readOnly}
+      className={cn("w-full", className)}
+    >
+      <NumberField.Group
+        data-slot="number-input"
+        className={cn(
+          "flex w-full min-w-0 items-stretch overflow-hidden rounded-lg border border-input bg-transparent transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-disabled:opacity-50 dark:bg-input/30",
+          s.group,
+        )}
+      >
+        {!hideButtons && (
+          <NumberField.Decrement
+            aria-label={text?.decrement ?? "ลด"}
+            className={cn(buttonClass, "border-r border-input")}
+          >
+            <MinusIcon />
+          </NumberField.Decrement>
+        )}
+        {prefix && <span className={cn(affix, !hideButtons && "pr-0")}>{prefix}</span>}
+        <NumberField.Input
+          placeholder={placeholder}
+          aria-label={ariaLabel}
+          aria-describedby={ariaDescribedBy}
+          aria-invalid={ariaInvalid}
+          className={cn(
+            "min-w-0 flex-1 bg-transparent px-2.5 tabular-nums outline-none placeholder:text-muted-foreground",
+            hideButtons ? "text-left" : "text-center",
+            s.text,
+            inputClassName,
+          )}
+        />
+        {suffix && <span className={cn(affix, !hideButtons && "pl-0")}>{suffix}</span>}
+        {!hideButtons && (
+          <NumberField.Increment
+            aria-label={text?.increment ?? "เพิ่ม"}
+            className={cn(buttonClass, "border-l border-input")}
+          >
+            <PlusIcon />
+          </NumberField.Increment>
+        )}
+      </NumberField.Group>
+    </NumberField.Root>
+  );
+}

package/src/components/shared/form/tags-input.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import { cn } from "@suphark/ui/lib/utils";
+import { XIcon } from "lucide-react";
+import { type ClipboardEvent, type KeyboardEvent, useId, useRef, useState } from "react";
+import { useUiText } from "../ui-text";
+
+/**
+ * ช่องพิมพ์หลายค่าเป็นป้าย (chip) — พิมพ์แล้วกด Enter หรือจุลภาค, วางหลายค่าพร้อมกันได้ (แยกด้วย , ; เว้นวรรค หรือขึ้นบรรทัด)
+ * Backspace ในช่องว่างลบป้ายสุดท้าย; ไม่รับค่าซ้ำ; `validate` คืนข้อความ error เพื่อปฏิเสธค่า (แสดงใต้ช่อง)
+ * `name` ส่งทุกค่าใน FormData (`formData.getAll(name)`) — แทน input + state array + map ป้าย + ปุ่มลบเอง
+ *
+ *   <TagsInput name="redirectUris" placeholder="https://…"
+ *     validate={(v) => (URL.canParse(v) ? null : "ต้องเป็น URL")} />
+ */
+export function TagsInput({
+  value,
+  defaultValue = [],
+  onValueChange,
+  validate,
+  transform = (v) => v.trim(),
+  max,
+  allowDuplicates = false,
+  splitOnSpace = false,
+  name,
+  id,
+  disabled,
+  placeholder,
+  className,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+}: {
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+  /** คืน string = ข้อความ error (ไม่เพิ่มค่า), null/undefined = ผ่าน */
+  validate?: (tag: string, current: string[]) => string | null | undefined;
+  /** แปลงค่าก่อนเพิ่ม (ค่าเริ่มต้น trim) เช่น `(v) => v.trim().toLowerCase()` */
+  transform?: (raw: string) => string;
+  /** จำนวนป้ายสูงสุด */
+  max?: number;
+  allowDuplicates?: boolean;
+  /** เว้นวรรคก็ตัดเป็นป้ายใหม่ (เหมาะกับอีเมล/โดเมน) */
+  splitOnSpace?: boolean;
+  name?: string;
+  id?: string;
+  disabled?: boolean;
+  placeholder?: string;
+  className?: string;
+  "aria-label"?: string;
+  "aria-describedby"?: string;
+  "aria-invalid"?: boolean;
+}) {
+  const text = useUiText().tags;
+  const [inner, setInner] = useState(defaultValue);
+  const tags = value ?? inner;
+  const [draft, setDraft] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const errorId = useId();
+  const full = max != null && tags.length >= max;
+
+  const commit = (next: string[]) => {
+    if (value === undefined) setInner(next);
+    onValueChange?.(next);
+  };
+
+  /** เพิ่มหลายค่า — คืนค่าที่ไม่ผ่าน (ให้คงไว้ในช่องพิมพ์) */
+  const add = (raws: string[]): string => {
+    const next = [...tags];
+    let firstError: string | null = null;
+    const rejected: string[] = [];
+    for (const raw of raws) {
+      const tag = transform(raw);
+      if (!tag) continue;
+      let message: string | null | undefined = null;
+      if (max != null && next.length >= max) {
+        message = (text?.max ?? "เพิ่มได้สูงสุด {max} รายการ").replace("{max}", String(max));
+      } else if (!allowDuplicates && next.includes(tag)) {
+        message = (text?.duplicate ?? "มี “{tag}” แล้ว").replace("{tag}", tag);
+      } else {
+        message = validate?.(tag, next);
+      }
+      if (message) {
+        firstError ??= message;
+        rejected.push(raw.trim());
+      } else {
+        next.push(tag);
+      }
+    }
+    if (next.length !== tags.length) commit(next);
+    setError(firstError);
+    return rejected.join(", ");
+  };
+
+  const separator = splitOnSpace ? /[,;\n\s]+/ : /[,;\n]+/;
+
+  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.nativeEvent.isComposing) return; // กำลังประกอบคำด้วย IME
+    if (e.key === "Enter" || e.key === "," || (splitOnSpace && e.key === " ")) {
+      if (!draft.trim()) {
+        if (e.key !== "Enter") e.preventDefault();
+        return;
+      }
+      e.preventDefault();
+      setDraft(add([draft]));
+    } else if (e.key === "Backspace" && draft === "" && tags.length > 0) {
+      e.preventDefault();
+      commit(tags.slice(0, -1));
+      setError(null);
+    }
+  };
+
+  const onPaste = (e: ClipboardEvent<HTMLInputElement>) => {
+    const pasted = e.clipboardData.getData("text");
+    if (!separator.test(pasted)) return;
+    e.preventDefault();
+    setDraft(add(pasted.split(separator)));
+  };
+
+  const remove = (index: number) => {
+    commit(tags.filter((_, i) => i !== index));
+    setError(null);
+    inputRef.current?.focus();
+  };
+
+  const describedBy =
+    [ariaDescribedBy, error ? errorId : null].filter(Boolean).join(" ") || undefined;
+
+  return (
+    <div data-slot="tags-input" className={cn("flex w-full flex-col gap-1.5", className)}>
+      <div
+        onClick={() => inputRef.current?.focus()}
+        className={cn(
+          "flex min-h-8 w-full flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent px-1.5 py-1 transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 dark:bg-input/30",
+          (error || ariaInvalid) &&
+            "border-destructive ring-3 ring-destructive/20 focus-within:border-destructive focus-within:ring-destructive/20",
+          disabled && "pointer-events-none opacity-50",
+        )}
+      >
+        {tags.map((tag, i) => (
+          <span
+            // biome-ignore lint/suspicious/noArrayIndexKey: allowDuplicates ทำให้ค่าซ้ำได้ ใช้ตำแหน่งร่วม
+            key={`${tag}-${i}`}
+            className="inline-flex h-6 max-w-full items-center gap-0.5 rounded-md bg-secondary pr-0.5 pl-2 text-secondary-foreground text-sm"
+          >
+            <span className="truncate">{tag}</span>
+            <button
+              type="button"
+              disabled={disabled}
+              aria-label={(text?.remove ?? "ลบ {tag}").replace("{tag}", tag)}
+              onClick={(e) => {
+                e.stopPropagation();
+                remove(i);
+              }}
+              className="flex size-5 shrink-0 items-center justify-center rounded-sm text-muted-foreground outline-none hover:bg-background/60 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 [&_svg]:size-3.5"
+            >
+              <XIcon />
+            </button>
+            {name && <input type="hidden" name={name} value={tag} />}
+          </span>
+        ))}
+        <input
+          ref={inputRef}
+          id={id}
+          value={draft}
+          disabled={disabled || full}
+          placeholder={full ? undefined : (placeholder ?? text?.placeholder ?? "พิมพ์แล้วกด Enter")}
+          aria-label={ariaLabel}
+          aria-describedby={describedBy}
+          aria-invalid={error || ariaInvalid ? true : undefined}
+          onChange={(e) => {
+            setDraft(e.currentTarget.value);
+            if (error) setError(null);
+          }}
+          onKeyDown={onKeyDown}
+          onPaste={onPaste}
+          onBlur={() => {
+            if (draft.trim()) setDraft(add([draft]));
+          }}
+          className="h-6 min-w-24 flex-1 bg-transparent px-1 text-base outline-none placeholder:text-muted-foreground md:text-sm"
+        />
+      </div>
+      {error && (
+        <p id={errorId} role="alert" className="text-destructive text-xs">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/components/shared/form/textarea-field.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { Field, FieldDescription, FieldError, FieldLabel } from "@suphark/ui/components/ui/field";
+import { Textarea } from "@suphark/ui/components/ui/textarea";
+import { cn } from "@suphark/ui/lib/utils";
+import { type ComponentProps, type CSSProperties, type ReactNode, useId, useState } from "react";
+import { useUiText } from "../ui-text";
+
+/** ความสูงตามจำนวนบรรทัด: บรรทัด × line-height + py-2 (1rem) + เส้นขอบ 2px */
+const rowsHeight = (rows: number) => `calc(${rows}lh + 1rem + 2px)`;
+
+/**
+ * ช่องข้อความหลายบรรทัดพร้อม label/hint/error + ตัวนับตัวอักษร — แทน LabeledField + Textarea + state นับเอง
+ * Textarea ขยายตามเนื้อหาอยู่แล้ว (field-sizing) — `maxRows` จำกัดความสูงแล้วเลื่อนใน, `minRows` ความสูงเริ่มต้น
+ * ตัวนับโผล่เมื่อมี `maxLength` (ปิดด้วย `showCount={false}`) ใช้ได้ทั้ง controlled (`value`) และ uncontrolled (`defaultValue` + `name`)
+ *
+ *   <TextareaField name="bio" label="แนะนำตัว" hint="แสดงในโปรไฟล์" maxLength={280} maxRows={8} />
+ */
+export function TextareaField({
+  label,
+  hint,
+  error,
+  showCount,
+  minRows,
+  maxRows,
+  className,
+  textareaClassName,
+  id,
+  style,
+  onChange,
+  ...props
+}: Omit<ComponentProps<typeof Textarea>, "children"> & {
+  label: ReactNode;
+  /** ข้อความช่วยใต้ช่อง — ซ่อนเมื่อมี error */
+  hint?: ReactNode;
+  error?: ReactNode;
+  /** ค่าเริ่มต้น = true เมื่อมี maxLength */
+  showCount?: boolean;
+  minRows?: number;
+  maxRows?: number;
+  /** className ของ textarea (`className` อยู่ที่กล่อง Field) */
+  textareaClassName?: string;
+}) {
+  const text = useUiText();
+  const autoId = useId();
+  const inputId = id ?? autoId;
+  const countId = `${inputId}-count`;
+  const [uncontrolledLength, setUncontrolledLength] = useState(
+    () => String(props.defaultValue ?? "").length,
+  );
+  const length = props.value != null ? String(props.value).length : uncontrolledLength;
+  const max = props.maxLength;
+  const counting = (showCount ?? max != null) && max != null;
+  const sizeStyle: CSSProperties = {
+    ...(minRows ? { minHeight: rowsHeight(minRows) } : null),
+    ...(maxRows ? { maxHeight: rowsHeight(maxRows) } : null),
+    ...style,
+  };
+
+  return (
+    <Field
+      data-slot="textarea-field"
+      className={cn("gap-1.5", className)}
+      data-invalid={error ? true : undefined}
+    >
+      <FieldLabel htmlFor={inputId} className="font-medium text-sm">
+        {label}
+      </FieldLabel>
+      <Textarea
+        id={inputId}
+        aria-invalid={error ? true : undefined}
+        aria-describedby={counting ? countId : undefined}
+        className={textareaClassName}
+        style={sizeStyle}
+        onChange={(e) => {
+          setUncontrolledLength(e.currentTarget.value.length);
+          onChange?.(e);
+        }}
+        {...props}
+      />
+      {(error || hint || counting) && (
+        <div className="flex items-start gap-2">
+          {error ? (
+            <FieldError className="text-xs">{error}</FieldError>
+          ) : (
+            hint && <FieldDescription className="text-xs">{hint}</FieldDescription>
+          )}
+          {counting && (
+            <span
+              className={cn(
+                "ml-auto shrink-0 text-xs tabular-nums",
+                length >= max ? "text-destructive" : "text-muted-foreground",
+              )}
+            >
+              <span aria-hidden>
+                {length}/{max}
+              </span>
+              <span id={countId} className="sr-only">
+                {(text.characterCount ?? "พิมพ์แล้ว {count} จาก {max} ตัวอักษร")
+                  .replace("{count}", String(length))
+                  .replace("{max}", String(max))}
+              </span>
+            </span>
+          )}
+        </div>
+      )}
+    </Field>
+  );
+}