@suphark/ui 0.20.1 → 0.22.0

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.22.0] — 2026-10-02
+
+### Added
+
+- `ProviderButtons`: prop `text` ต่อ provider (ข้อความเต็มของปุ่มแทน "ดำเนินการต่อด้วย {label}" เช่น ชื่อ SSO ยาว "Estar (Microsoft 365)"); ปุ่มเต็มกว้าง (1 ตัว / `layout="list"`) **ขึ้นบรรทัดใหม่แทนตัดเป็น …** (badge ไม่หด); ตาราง 2 คอลัมน์ยังตัด แต่ `aria-label`/`title` เป็นข้อความเต็ม — ขอจาก Pi Auth
+- showcase: demo `/components/auth-layout` ปุ่ม SSO ใช้ `text` ยาว
+
+## [0.21.0] — 2026-10-02
+
+ตัวสำเร็จรูปของ primitive ใหม่จาก shadcn (0.20.0) — เพิ่มอย่างเดียว
+
+### Added
+
+- **`ChatThread`** — หน้าแชตจาก array ข้อความ (แทน MessageScrollerProvider/MessageScroller/Viewport/Content/Item/Button + Message/MessageAvatar/MessageContent/MessageHeader/MessageFooter + Bubble/BubbleContent + Marker + InputGroup รวม 15+ ชิ้นตามตัวอย่างทางการของ shadcn): `messages: { id, from: "me" | "other", content, author?, avatar?, meta? }[]`, เลื่อนตามข้อความใหม่ (ข้อความของเรายึดเป็นจุดเลื่อน), ปุ่ม "ไปข้อความล่าสุด", `typing` (แถว "กำลังพิมพ์…" ด้วย Marker), `onSend` = มีช่องพิมพ์ (Enter ส่ง · Shift+Enter ขึ้นบรรทัด · **ไม่ส่งระหว่างประกอบคำด้วย IME** แบบที่ PDF ทำ `submitOnEnter`), คืน Promise = ปุ่มหมุนแล้วล้างช่องเมื่อสำเร็จ, `empty`, `disabled`
+- **`SimpleQuestionnaire`** — แบบสอบถามทีละข้อจาก array คำถาม (แทน Questionnaire 15 ชิ้น): `{ name, title, description?, required?, multiple?, choices?: { value, label, description?, disabled? }[], input?: boolean | placeholder }`, คีย์ลัดตัวเลข/ตัวอักษร, ข้อบังคับไม่มีปุ่มข้าม, `onSubmit(values)` ได้ object (ข้อเดียว = string, หลายข้อ = string[], ข้อที่ข้ามไม่มี key) ไม่ต้องอ่าน FormData เอง
+- **`AuthLayout`** — หน้าเข้าสู่ระบบ/สมัคร/ยืนยันตัวตนสำเร็จรูปแบบ Clerk (server component ได้): `logo`, `title` (h1), `description`, เนื้อ, `cardFooter` (แถบล่างการ์ดพื้นต่างสี เช่น "ยังไม่มีบัญชี? สมัคร"), `footer` (ใต้การ์ด เช่น "ยืนยันตัวตนโดย Pi Auth · ข้อกำหนด"), `actions` (มุมขวาบน ธีม/ภาษา), `variant` centered (พื้นลายจุดจาง) | split (ฝั่งซ้าย `aside` สีแบรนด์ แบบ shadcn login blocks — มือถือซ่อน), `brandColor`/`brandForeground` (สีแบรนด์ของ tenant), `fullScreen`
+- **`ProviderButtons`** (Google/Microsoft/SSO: 1 ตัว = "ดำเนินการต่อด้วย …" เต็มกว้าง, 2+ ตัว = ตาราง 2 คอลัมน์, `badge` เช่น "ใช้ล่าสุด", `href` หรือ `onClick`, `pendingId` กันกดซ้ำ), **`AuthDivider`** ("หรือ"), **`PasswordInput`** (ปุ่มแสดง/ซ่อน + `aria-pressed`, `autoComplete` ค่าเริ่มต้น `current-password` ตามแนวทาง web.dev)
+- showcase: หน้า `/login` เปลี่ยนเป็น `AuthLayout` (โลโก้, ปุ่ม "ดำเนินการต่อด้วย Pi Auth", แถบล่าง, "ยืนยันตัวตนโดย Pi Auth", ปุ่มธีม) + หน้า `/components/auth-layout` (ฟอร์มเต็มทั้งสองแบบ)
+- `UiText` key ใหม่: `questionnaire` (ปุ่ม/ความคืบหน้า "ข้อ {current} จาก {total}"), `chat`, `auth`
+- showcase: หน้า `/components/{chat-thread,simple-questionnaire,marker}` (122 หน้ารวม auth-layout); tests 7 กรณี (รวม 192)
+
 ## [0.20.1] — 2026-10-01
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.20.1",
+  "version": "0.22.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/shared/auth-layout.tsx

@@ -0,0 +1,139 @@
+import { cn } from "@suphark/ui/lib/utils";
+import type { CSSProperties, ReactNode } from "react";
+
+export interface AuthLayoutProps {
+  /** โลโก้เหนือหัวข้อ — element (`<img>`/ไอคอน) หรือไม่ส่ง = ไม่มี */
+  logo?: ReactNode;
+  /** หัวข้อ เช่น "เข้าสู่ระบบ Acme" */
+  title: ReactNode;
+  /** คำอธิบายใต้หัวข้อ เช่น "ยินดีต้อนรับกลับ — เข้าสู่ระบบเพื่อดำเนินการต่อ" */
+  description?: ReactNode;
+  /** เนื้อการ์ด: ปุ่ม provider, AuthDivider, ฟอร์ม, Notice */
+  children: ReactNode;
+  /** แถบล่างของการ์ด (พื้นต่างสีแบบ Clerk) เช่น "ยังไม่มีบัญชี? สมัคร" */
+  cardFooter?: ReactNode;
+  /** ใต้การ์ด เช่น "ยืนยันตัวตนโดย Pi Auth · ความเป็นส่วนตัว · ข้อกำหนด" */
+  footer?: ReactNode;
+  /** มุมขวาบนของหน้า เช่น `<LanguageSwitch />` `<ThemeSwitch />` */
+  actions?: ReactNode;
+  /**
+   * centered (ค่าเริ่มต้น) = การ์ดกลางจอแบบ Clerk
+   * split = แบ่งสองฝั่ง ฝั่งซ้ายเป็น `aside` (แบรนด์/ภาพ/คำรับรอง) แบบตัวอย่าง login ของ shadcn — มือถือซ่อนฝั่งซ้าย
+   */
+  variant?: "centered" | "split";
+  /** เนื้อฝั่งซ้ายของ variant split */
+  aside?: ReactNode;
+  /** สีแบรนด์ของ tenant/แอป (CSS color) → primary/ring ในหน้านี้เปลี่ยนตาม */
+  brandColor?: string | null;
+  brandForeground?: string | null;
+  /** เต็มความสูงจอ (ค่าเริ่มต้น true) — false ใช้ฝังในกรอบ เช่นหน้าเอกสาร */
+  fullScreen?: boolean;
+  className?: string;
+}
+
+/**
+ * โครงหน้าเข้าสู่ระบบ/สมัคร/ยืนยันตัวตนสำเร็จรูป (แบบ Clerk / shadcn login blocks):
+ * โลโก้ + หัวข้อ + คำอธิบาย + เนื้อ + แถบล่างของการ์ด + ลิงก์ใต้การ์ด + ปุ่มธีม/ภาษามุมขวาบน
+ * ใช้ได้จาก server component (ไม่มี state) — ใช้ร่วมกันทั้ง Pi Auth (sign-in/sign-up/2FA) และหน้า `/login` ของทุกแอป
+ *
+ *   <AuthLayout logo={<Logo />} title="เข้าสู่ระบบ Acme" description="ยินดีต้อนรับกลับ"
+ *     actions={<ThemeSwitch />} cardFooter={<>ยังไม่มีบัญชี? <a href="/sign-up">สมัคร</a></>}
+ *     footer="ยืนยันตัวตนโดย Pi Auth">
+ *     <ProviderButtons providers={[…]} />
+ *     <AuthDivider />
+ *     <form>…</form>
+ *   </AuthLayout>
+ */
+export function AuthLayout({
+  logo,
+  title,
+  description,
+  children,
+  cardFooter,
+  footer,
+  actions,
+  variant = "centered",
+  aside,
+  brandColor,
+  brandForeground,
+  fullScreen = true,
+  className,
+}: AuthLayoutProps) {
+  const style = brandColor
+    ? ({
+        "--brand": brandColor,
+        ...(brandForeground ? { "--brand-foreground": brandForeground } : {}),
+      } as CSSProperties)
+    : undefined;
+
+  const card = (
+    <div className="flex w-full max-w-sm flex-col gap-6">
+      <div
+        data-slot="auth-card"
+        className="overflow-hidden rounded-2xl border bg-card text-card-foreground shadow-lg shadow-foreground/5"
+      >
+        <div className="flex flex-col gap-6 px-6 py-8 sm:px-8">
+          <header className="flex flex-col items-center gap-3 text-center">
+            {logo && (
+              <div className="flex size-11 items-center justify-center overflow-hidden rounded-xl [&_img]:size-full [&_img]:object-contain [&_svg]:size-6">
+                {logo}
+              </div>
+            )}
+            <div className="flex flex-col gap-1">
+              <h1 className="text-balance font-semibold text-title tracking-tight">{title}</h1>
+              {description && (
+                <p className="text-balance text-caption text-muted-foreground">{description}</p>
+              )}
+            </div>
+          </header>
+          <div className="flex flex-col gap-4">{children}</div>
+        </div>
+        {cardFooter && (
+          <div className="border-t bg-muted/50 px-6 py-4 text-center text-caption text-muted-foreground sm:px-8 [&_a]:font-medium [&_a]:text-foreground [&_a]:underline-offset-4 hover:[&_a]:underline">
+            {cardFooter}
+          </div>
+        )}
+      </div>
+      {footer && (
+        <div className="flex flex-wrap items-center justify-center gap-x-3 gap-y-1 text-center text-label text-muted-foreground [&_a]:underline-offset-4 hover:[&_a]:text-foreground hover:[&_a]:underline">
+          {footer}
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <main
+      data-slot="auth-layout"
+      data-variant={variant}
+      style={style}
+      className={cn(
+        "relative flex w-full bg-muted/40",
+        fullScreen ? "min-h-svh" : "min-h-[36rem]",
+        variant === "split" && "lg:grid lg:grid-cols-2",
+        className,
+      )}
+    >
+      {variant === "split" && (
+        <aside className="relative hidden flex-col justify-between overflow-hidden bg-primary p-10 text-primary-foreground lg:flex">
+          {aside}
+        </aside>
+      )}
+      <div className="relative flex flex-1 flex-col items-center justify-center px-4 py-12 sm:py-16">
+        {/* ลายจุดจาง ๆ ด้านหลังการ์ด — ใช้ token สีเส้นขอบ จึงสลับโหมดมืดเอง */}
+        {variant === "centered" && (
+          <div
+            aria-hidden
+            className="pointer-events-none absolute inset-0 bg-[radial-gradient(var(--border)_1px,transparent_1px)] mask-[radial-gradient(ellipse_at_center,black_30%,transparent_75%)] bg-size-[20px_20px]"
+          />
+        )}
+        {actions && (
+          <div className="absolute top-4 right-4 flex items-center gap-1 rounded-full border bg-background/80 px-1.5 py-1 shadow-xs backdrop-blur">
+            {actions}
+          </div>
+        )}
+        <div className="relative flex w-full justify-center">{card}</div>
+      </div>
+    </main>
+  );
+}

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

@@ -0,0 +1,149 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@suphark/ui/components/ui/input-group";
+import { cn } from "@suphark/ui/lib/utils";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import { type ComponentProps, type ReactNode, useState } from "react";
+import { useUiText } from "./ui-text";
+
+/** เส้นคั่น "หรือ" ระหว่างปุ่ม provider กับฟอร์มอีเมล */
+export function AuthDivider({ children, className }: { children?: ReactNode; className?: string }) {
+  const text = useUiText().auth;
+  return (
+    <div
+      data-slot="auth-divider"
+      className={cn("flex items-center gap-3 text-label text-muted-foreground", className)}
+    >
+      <span className="h-px flex-1 bg-border" />
+      {children ?? text?.or ?? "หรือ"}
+      <span className="h-px flex-1 bg-border" />
+    </div>
+  );
+}
+
+export interface AuthProvider {
+  id: string;
+  /** ชื่อ provider เช่น "Google" — ปุ่มแสดง "ดำเนินการต่อด้วย Google" (UiText.auth.continueWith) */
+  label: string;
+  /** ข้อความเต็มของปุ่มแทน "ดำเนินการต่อด้วย {label}" (ทุก layout) เช่น "Estar (Microsoft 365)" */
+  text?: ReactNode;
+  /** โลโก้ของ provider (svg) */
+  icon?: ReactNode;
+  onClick?: () => void;
+  /** ลิงก์แทน onClick (เช่น /api/auth/sign-in/google) */
+  href?: string;
+  /** ป้ายท้ายปุ่ม เช่น "ใช้ล่าสุด" */
+  badge?: ReactNode;
+  disabled?: boolean;
+}
+
+/**
+ * ปุ่มเข้าสู่ระบบด้วย provider (Google / Microsoft / SSO ขององค์กร)
+ * 1 ตัว = ปุ่มเต็มกว้างพร้อมข้อความ · 2 ตัวขึ้นไป = ตาราง 2 คอลัมน์ (`layout="list"` บังคับเรียงลงพร้อมข้อความเต็ม)
+ * `pendingId` = ตัวที่กำลังพาไป (ปุ่มนั้นหมุน ตัวอื่นปิด กันกดซ้ำ)
+ * ปุ่มเต็มกว้าง (1 ตัว / list) ข้อความยาวขึ้นบรรทัดใหม่ได้ ไม่ตัดทิ้ง · ตาราง 2 คอลัมน์ตัดด้วย … (ชื่อเต็มอยู่ใน aria-label/title)
+ */
+export function ProviderButtons({
+  providers,
+  pendingId,
+  layout = "auto",
+  className,
+}: {
+  providers: ReadonlyArray<AuthProvider>;
+  pendingId?: string | null;
+  layout?: "auto" | "list";
+  className?: string;
+}) {
+  const text = useUiText().auth;
+  const grid = layout === "auto" && providers.length >= 2;
+  return (
+    <div className={cn("grid gap-2", grid ? "grid-cols-2" : "grid-cols-1", className)}>
+      {providers.map((p) => {
+        const full = (text?.continueWith ?? "ดำเนินการต่อด้วย {provider}").replace(
+          "{provider}",
+          p.label,
+        );
+        const label = p.text ?? (grid ? p.label : full);
+        const content = (
+          <>
+            {p.icon}
+            <span className={grid ? "truncate" : "min-w-0 text-balance"}>{label}</span>
+            {p.badge && (
+              <span className="ml-auto shrink-0 text-label text-muted-foreground">{p.badge}</span>
+            )}
+          </>
+        );
+        // ปุ่มเต็มกว้าง: ให้ข้อความยาวขึ้นบรรทัดใหม่ได้ (Button ตั้ง whitespace-nowrap + h-8)
+        const buttonClass = grid ? "w-full" : "h-auto min-h-8 w-full py-1.5 whitespace-normal";
+        const a11y = grid ? { "aria-label": full, title: full } : {};
+        const busy = pendingId === p.id;
+        const disabled = p.disabled || (pendingId != null && !busy);
+        return p.href ? (
+          <Button
+            key={p.id}
+            variant="outline"
+            className={buttonClass}
+            disabled={disabled}
+            nativeButton={false}
+            render={<a href={p.href} {...a11y} />}
+          >
+            {content}
+          </Button>
+        ) : (
+          <Button
+            key={p.id}
+            type="button"
+            variant="outline"
+            className={buttonClass}
+            disabled={disabled || busy}
+            {...a11y}
+            onClick={p.onClick}
+          >
+            {content}
+          </Button>
+        );
+      })}
+    </div>
+  );
+}
+
+/**
+ * ช่องรหัสผ่านพร้อมปุ่มแสดง/ซ่อน (แนวทาง web.dev: ให้ผู้ใช้ตรวจสิ่งที่พิมพ์ได้)
+ * `autoComplete` ค่าเริ่มต้น "current-password" — หน้าสมัคร/ตั้งรหัสใหม่ส่ง "new-password"
+ */
+export function PasswordInput({
+  autoComplete = "current-password",
+  className,
+  ...props
+}: Omit<ComponentProps<typeof InputGroupInput>, "type">) {
+  const text = useUiText().auth;
+  const [visible, setVisible] = useState(false);
+  return (
+    <InputGroup className={className}>
+      <InputGroupInput
+        type={visible ? "text" : "password"}
+        autoComplete={autoComplete}
+        {...props}
+      />
+      <InputGroupAddon align="inline-end">
+        <InputGroupButton
+          type="button"
+          size="icon-xs"
+          aria-label={
+            visible ? (text?.hidePassword ?? "ซ่อนรหัสผ่าน") : (text?.showPassword ?? "แสดงรหัสผ่าน")
+          }
+          aria-pressed={visible}
+          onClick={() => setVisible((v) => !v)}
+        >
+          {visible ? <EyeOffIcon /> : <EyeIcon />}
+        </InputGroupButton>
+      </InputGroupAddon>
+    </InputGroup>
+  );
+}

package/src/components/shared/chat-thread.tsx

@@ -0,0 +1,205 @@
+"use client";
+
+import { Bubble, BubbleContent } from "@suphark/ui/components/ui/bubble";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupTextarea,
+} from "@suphark/ui/components/ui/input-group";
+import { Marker, MarkerContent, MarkerIcon } from "@suphark/ui/components/ui/marker";
+import {
+  Message,
+  MessageAvatar,
+  MessageContent,
+  MessageFooter,
+  MessageHeader,
+} from "@suphark/ui/components/ui/message";
+import {
+  MessageScroller,
+  MessageScrollerButton,
+  MessageScrollerContent,
+  MessageScrollerItem,
+  MessageScrollerProvider,
+  MessageScrollerViewport,
+} from "@suphark/ui/components/ui/message-scroller";
+import { Spinner } from "@suphark/ui/components/ui/spinner";
+import { cn } from "@suphark/ui/lib/utils";
+import { ArrowDown, SendHorizontal } from "lucide-react";
+import { type ReactNode, useState } from "react";
+import { useUiText } from "./ui-text";
+
+export interface ChatMessage {
+  id: string;
+  /** "me" = ข้อความของผู้ใช้ (ชิดขวา สี primary), อื่น ๆ ชิดซ้าย */
+  from: "me" | "other";
+  content: ReactNode;
+  /** ชื่อผู้ส่งเหนือข้อความ (ห้องที่มีหลายคน) */
+  author?: ReactNode;
+  /** รูป/อักษรย่อ เช่น `<Initials name="…" />` */
+  avatar?: ReactNode;
+  /** ใต้ข้อความ เช่นเวลา / "อ่านแล้ว" */
+  meta?: ReactNode;
+}
+
+/**
+ * หน้าแชตสำเร็จรูป (ความเห็นในงาน, แชตกับผู้ช่วย, ข้อความถึงฝ่ายสนับสนุน) จาก array ของข้อความ
+ * แทน MessageScroller + Message + Bubble + Marker + InputGroup 10+ ชิ้น:
+ * เลื่อนตามข้อความใหม่ให้เอง (ข้อความของเรายึดเป็นจุดเลื่อน), ปุ่ม "ไปข้อความล่าสุด" เมื่อเลื่อนขึ้นไปอ่าน,
+ * `typing` แสดงแถว "กำลังพิมพ์…", ส่ง `onSend` = มีช่องพิมพ์ (Enter ส่ง · Shift+Enter ขึ้นบรรทัด · ไม่ส่งระหว่างพิมพ์ไทยด้วย IME)
+ * ความสูงกำหนดที่ `className` (เช่น `h-96`) — เนื้อหาเลื่อนภายใน
+ *
+ *   <ChatThread className="h-96" messages={messages} typing={waiting}
+ *     onSend={async (text) => { await post(text) }} />
+ */
+export function ChatThread({
+  messages,
+  typing = false,
+  onSend,
+  placeholder,
+  disabled = false,
+  empty,
+  className,
+}: {
+  messages: ReadonlyArray<ChatMessage>;
+  /** true = แถว "กำลังพิมพ์…" ท้ายรายการ, ReactNode = ข้อความเอง */
+  typing?: boolean | ReactNode;
+  /** มีค่า = แสดงช่องพิมพ์; คืน Promise = ปุ่มส่งหมุนจนเสร็จ (ล้างช่องเมื่อสำเร็จ) */
+  onSend?: (text: string) => void | Promise<void>;
+  placeholder?: string;
+  disabled?: boolean;
+  /** ยังไม่มีข้อความ */
+  empty?: ReactNode;
+  className?: string;
+}) {
+  const text = useUiText().chat;
+  return (
+    <div
+      data-slot="chat-thread"
+      className={cn("flex min-h-0 flex-col overflow-hidden rounded-xl border bg-card", className)}
+    >
+      <div className="relative min-h-0 flex-1">
+        <MessageScrollerProvider>
+          <MessageScroller className="h-full">
+            <MessageScrollerViewport>
+              <MessageScrollerContent className="p-4">
+                {messages.length === 0 && empty ? (
+                  <div className="m-auto text-center text-muted-foreground text-sm">{empty}</div>
+                ) : null}
+                {messages.map((m) => {
+                  const mine = m.from === "me";
+                  return (
+                    <MessageScrollerItem key={m.id} messageId={m.id} scrollAnchor={mine}>
+                      <Message align={mine ? "end" : "start"}>
+                        {m.avatar && <MessageAvatar>{m.avatar}</MessageAvatar>}
+                        <MessageContent>
+                          {m.author && <MessageHeader>{m.author}</MessageHeader>}
+                          <Bubble variant={mine ? "default" : "muted"}>
+                            <BubbleContent className="whitespace-pre-wrap">
+                              {m.content}
+                            </BubbleContent>
+                          </Bubble>
+                          {m.meta && <MessageFooter>{m.meta}</MessageFooter>}
+                        </MessageContent>
+                      </Message>
+                    </MessageScrollerItem>
+                  );
+                })}
+                {typing ? (
+                  <MessageScrollerItem scrollAnchor={false}>
+                    <Marker role="status">
+                      <MarkerIcon>
+                        <Spinner />
+                      </MarkerIcon>
+                      <MarkerContent>
+                        {typing === true ? (text?.typing ?? "กำลังพิมพ์…") : typing}
+                      </MarkerContent>
+                    </Marker>
+                  </MessageScrollerItem>
+                ) : null}
+              </MessageScrollerContent>
+            </MessageScrollerViewport>
+            <MessageScrollerButton aria-label={text?.scrollToLatest ?? "ไปข้อความล่าสุด"}>
+              <ArrowDown />
+            </MessageScrollerButton>
+          </MessageScroller>
+        </MessageScrollerProvider>
+      </div>
+      {onSend && (
+        <ChatComposer
+          onSend={onSend}
+          disabled={disabled}
+          placeholder={placeholder ?? text?.placeholder ?? "พิมพ์ข้อความ…"}
+          sendLabel={text?.send ?? "ส่ง"}
+        />
+      )}
+    </div>
+  );
+}
+
+function ChatComposer({
+  onSend,
+  disabled,
+  placeholder,
+  sendLabel,
+}: {
+  onSend: (text: string) => void | Promise<void>;
+  disabled: boolean;
+  placeholder: string;
+  sendLabel: string;
+}) {
+  const [value, setValue] = useState("");
+  const [pending, setPending] = useState(false);
+  const canSend = value.trim() !== "" && !disabled && !pending;
+
+  const send = async () => {
+    if (!canSend) return;
+    setPending(true);
+    try {
+      await onSend(value.trim());
+      setValue("");
+    } finally {
+      setPending(false);
+    }
+  };
+
+  return (
+    <form
+      className="border-t p-3"
+      onSubmit={(e) => {
+        e.preventDefault();
+        void send();
+      }}
+    >
+      <InputGroup>
+        <InputGroupTextarea
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={(e) => {
+            // Enter ส่ง, Shift+Enter ขึ้นบรรทัด — ระหว่างประกอบคำด้วย IME (พิมพ์ไทย/จีน) Enter คือยืนยันคำ ไม่ใช่ส่ง
+            if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+              e.preventDefault();
+              void send();
+            }
+          }}
+          placeholder={placeholder}
+          disabled={disabled}
+          rows={1}
+          className="max-h-40 min-h-10"
+          aria-label={placeholder}
+        />
+        <InputGroupAddon align="inline-end">
+          <InputGroupButton
+            type="submit"
+            size="icon-sm"
+            variant="default"
+            disabled={!canSend}
+            aria-label={sendLabel}
+          >
+            {pending ? <Spinner /> : <SendHorizontal />}
+          </InputGroupButton>
+        </InputGroupAddon>
+      </InputGroup>
+    </form>
+  );
+}

package/src/components/shared/simple-questionnaire.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import {
+  Questionnaire,
+  QuestionnaireActions,
+  QuestionnaireChoice,
+  QuestionnaireChoiceDescription,
+  QuestionnaireChoices,
+  QuestionnaireDescription,
+  QuestionnaireError,
+  QuestionnaireInput,
+  QuestionnaireItem,
+  QuestionnaireNext,
+  QuestionnairePrevious,
+  QuestionnaireProgress,
+  QuestionnaireSkip,
+  QuestionnaireSubmit,
+  QuestionnaireTitle,
+} from "@suphark/ui/components/ui/questionnaire";
+import type { FormEvent, ReactNode } from "react";
+import { useUiText } from "./ui-text";
+
+export interface QuestionnaireQuestion {
+  /** ชื่อคำตอบ (key ใน values ที่ได้ตอน submit) */
+  name: string;
+  title: ReactNode;
+  description?: ReactNode;
+  /** ต้องตอบก่อนไปข้อถัดไป (ปุ่ม "ข้าม" ไม่แสดง) */
+  required?: boolean;
+  /** เลือกได้หลายข้อ (checkbox) — ไม่ส่ง = เลือกข้อเดียว */
+  multiple?: boolean;
+  choices?: ReadonlyArray<{
+    value: string;
+    label: ReactNode;
+    description?: ReactNode;
+    disabled?: boolean;
+  }>;
+  /** ช่องพิมพ์คำตอบเอง (ต่อท้ายตัวเลือก หรือเป็นคำตอบเดียวถ้าไม่มี choices) — string = placeholder */
+  input?: boolean | string;
+}
+
+export type QuestionnaireValues = Record<string, string | string[]>;
+
+/**
+ * แบบสอบถามทีละข้อสำเร็จรูป (onboarding, สำรวจความพึงพอใจ, ถามความต้องการก่อนสร้าง) จาก array ของคำถาม
+ * แทน Questionnaire primitive 15 ชิ้น (Item/Title/Description/Choices/Choice/Input/Error/Progress/Actions/
+ * Previous/Skip/Next/Submit) — ตัวเลข/ตัวอักษรเป็นคีย์ลัดเลือกตัวเลือกได้ (`shortcuts`)
+ *
+ *   <SimpleQuestionnaire
+ *     questions={[{ name: "role", title: "คุณทำงานด้านไหน", required: true,
+ *                   choices: [{ value: "dev", label: "พัฒนา" }, { value: "ops", label: "ปฏิบัติการ" }], input: true }]}
+ *     onSubmit={(values) => save(values)} />
+ */
+export function SimpleQuestionnaire({
+  questions,
+  onSubmit,
+  shortcuts = "numbers",
+  submitLabel,
+  className,
+}: {
+  questions: ReadonlyArray<QuestionnaireQuestion>;
+  /** ได้ค่าเป็น object: ข้อเดียว = string, หลายข้อ = string[] (ข้อที่ข้าม = ไม่มี key) */
+  onSubmit: (values: QuestionnaireValues) => void;
+  shortcuts?: "numbers" | "letters" | "none";
+  submitLabel?: string;
+  className?: string;
+}) {
+  const text = useUiText().questionnaire;
+  const items = questions.map((q) => ({
+    name: q.name,
+    required: q.required,
+    choices: q.choices?.map((c) => ({ value: c.value, disabled: c.disabled })),
+  }));
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const fd = new FormData(event.currentTarget);
+    const values: QuestionnaireValues = {};
+    for (const q of questions) {
+      const all = fd
+        .getAll(q.name)
+        .map(String)
+        .filter((v) => v.trim() !== "");
+      if (all.length === 0) continue;
+      values[q.name] = q.multiple ? all : (all[0] as string);
+    }
+    onSubmit(values);
+  };
+
+  return (
+    <Questionnaire
+      className={className}
+      // base-ui-ok: ข้อแรกตอน mount — หลังจากนั้น primitive เดินข้อเอง
+      defaultItem={questions[0]?.name}
+      items={items}
+      shortcuts={shortcuts === "none" ? undefined : shortcuts}
+      onSubmit={handleSubmit}
+    >
+      <QuestionnaireProgress
+        render={(props, state) => (
+          <span {...props}>
+            {(text?.progress ?? "ข้อ {current} จาก {total}")
+              .replace("{current}", String(state.current))
+              .replace("{total}", String(state.total))}
+          </span>
+        )}
+      />
+      {questions.map((q) => (
+        <QuestionnaireItem key={q.name} name={q.name} required={q.required} multiple={q.multiple}>
+          <QuestionnaireTitle>{q.title}</QuestionnaireTitle>
+          {q.description && <QuestionnaireDescription>{q.description}</QuestionnaireDescription>}
+          {(q.choices?.length || q.input) && (
+            <QuestionnaireChoices>
+              {q.choices?.map((c) => (
+                <QuestionnaireChoice key={c.value} value={c.value} disabled={c.disabled}>
+                  <span className="font-medium">{c.label}</span>
+                  {c.description && (
+                    <QuestionnaireChoiceDescription>{c.description}</QuestionnaireChoiceDescription>
+                  )}
+                </QuestionnaireChoice>
+              ))}
+              {q.input && (
+                <QuestionnaireInput
+                  aria-label={typeof q.title === "string" ? q.title : undefined}
+                  placeholder={typeof q.input === "string" ? q.input : (text?.other ?? "คำตอบอื่น…")}
+                />
+              )}
+            </QuestionnaireChoices>
+          )}
+          <QuestionnaireError />
+        </QuestionnaireItem>
+      ))}
+      <QuestionnaireActions className="w-full">
+        <QuestionnairePrevious>{text?.previous ?? "ย้อนกลับ"}</QuestionnairePrevious>
+        <QuestionnaireSkip>{text?.skip ?? "ข้าม"}</QuestionnaireSkip>
+        <QuestionnaireNext>{text?.next ?? "ถัดไป"}</QuestionnaireNext>
+        <QuestionnaireSubmit>{submitLabel ?? text?.submit ?? "ส่งคำตอบ"}</QuestionnaireSubmit>
+      </QuestionnaireActions>
+    </Questionnaire>
+  );
+}

package/src/components/shared/ui-text.tsx

@@ -68,6 +68,19 @@ export interface UiText {
   mobileTabs?: string;
   /** SimpleDialog/SimpleSheet: ปุ่มปิด (sr-only) (optional — "ปิด") */
   close?: string;
+  /** AuthDivider / ProviderButtons / PasswordInput (optional) — continueWith ใช้ {provider} */
+  auth?: Partial<{ or: string; continueWith: string; showPassword: string; hidePassword: string }>;
+  /** SimpleQuestionnaire (optional) — progress ใช้ {current}/{total} */
+  questionnaire?: Partial<{
+    previous: string;
+    next: string;
+    skip: string;
+    submit: string;
+    progress: string;
+    other: string;
+  }>;
+  /** ChatThread (optional) */
+  chat?: Partial<{ placeholder: string; send: string; typing: string; scrollToLatest: string }>;
   /** SimplePagination (optional) */
   pagination?: Partial<{ previous: string; next: string; label: string; page: string }>;
 }
@@ -113,6 +126,26 @@ export const UI_TEXT_TH: UiText = {
   settings: { back: "กลับ", empty: "ไม่พบหัวข้อที่ตรงกับคำค้น", label: "หัวข้อการตั้งค่า" },
   mobileTabs: "เมนูหลัก",
   close: "ปิด",
+  auth: {
+    or: "หรือ",
+    continueWith: "ดำเนินการต่อด้วย {provider}",
+    showPassword: "แสดงรหัสผ่าน",
+    hidePassword: "ซ่อนรหัสผ่าน",
+  },
+  questionnaire: {
+    previous: "ย้อนกลับ",
+    next: "ถัดไป",
+    skip: "ข้าม",
+    submit: "ส่งคำตอบ",
+    progress: "ข้อ {current} จาก {total}",
+    other: "คำตอบอื่น…",
+  },
+  chat: {
+    placeholder: "พิมพ์ข้อความ…",
+    send: "ส่ง",
+    typing: "กำลังพิมพ์…",
+    scrollToLatest: "ไปข้อความล่าสุด",
+  },
   pagination: { previous: "ก่อนหน้า", next: "ถัดไป", label: "แบ่งหน้า", page: "หน้า" },
 };
 
@@ -157,6 +190,26 @@ export const UI_TEXT_EN: UiText = {
   settings: { back: "Back", empty: "No settings match your search", label: "Settings sections" },
   mobileTabs: "Main menu",
   close: "Close",
+  auth: {
+    or: "or",
+    continueWith: "Continue with {provider}",
+    showPassword: "Show password",
+    hidePassword: "Hide password",
+  },
+  questionnaire: {
+    previous: "Back",
+    next: "Next",
+    skip: "Skip",
+    submit: "Submit",
+    progress: "Question {current} of {total}",
+    other: "Other answer…",
+  },
+  chat: {
+    placeholder: "Type a message…",
+    send: "Send",
+    typing: "Typing…",
+    scrollToLatest: "Jump to latest",
+  },
   pagination: { previous: "Previous", next: "Next", label: "Pagination", page: "Page" },
 };
 

package/src/index.ts

@@ -19,6 +19,13 @@ export {
   type ActionMenuCommand,
   type ActionMenuItem,
 } from "./components/shared/action-menu";
+export { AuthLayout, type AuthLayoutProps } from "./components/shared/auth-layout";
+export {
+  AuthDivider,
+  type AuthProvider,
+  PasswordInput,
+  ProviderButtons,
+} from "./components/shared/auth-parts";
 export * from "./components/shared/button";
 export {
   type CalendarDayContext,
@@ -28,6 +35,7 @@ export {
   WEEKDAYS_EN,
   WEEKDAYS_TH,
 } from "./components/shared/calendar-month-grid";
+export { type ChatMessage, ChatThread } from "./components/shared/chat-thread";
 export { ClientRedirect } from "./components/shared/client-redirect";
 export {
   ColorPicker,
@@ -159,6 +167,11 @@ export { DangerZone, SettingsRow, SwitchRow } from "./components/shared/settings
 export { SetupChecklist, type SetupChecklistStep } from "./components/shared/setup-checklist";
 export { SimpleDialog, SimpleSheet } from "./components/shared/simple-dialog";
 export { paginationRange, SimplePagination } from "./components/shared/simple-pagination";
+export {
+  type QuestionnaireQuestion,
+  type QuestionnaireValues,
+  SimpleQuestionnaire,
+} from "./components/shared/simple-questionnaire";
 export { SimpleTable, type SimpleTableColumn } from "./components/shared/simple-table";
 export {
   SimpleAccordion,