@suphark/ui 0.21.0 → 0.22.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 รูปแบบตาม [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) — เพิ่มอย่างเดียว

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.21.0",
+  "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-parts.tsx

@@ -31,6 +31,8 @@ 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;
@@ -45,6 +47,7 @@ export interface AuthProvider {
  * ปุ่มเข้าสู่ระบบด้วย provider (Google / Microsoft / SSO ขององค์กร)
  * 1 ตัว = ปุ่มเต็มกว้างพร้อมข้อความ · 2 ตัวขึ้นไป = ตาราง 2 คอลัมน์ (`layout="list"` บังคับเรียงลงพร้อมข้อความเต็ม)
  * `pendingId` = ตัวที่กำลังพาไป (ปุ่มนั้นหมุน ตัวอื่นปิด กันกดซ้ำ)
+ * ปุ่มเต็มกว้าง (1 ตัว / list) ข้อความยาวขึ้นบรรทัดใหม่ได้ ไม่ตัดทิ้ง · ตาราง 2 คอลัมน์ตัดด้วย … (ชื่อเต็มอยู่ใน aria-label/title)
  */
 export function ProviderButtons({
   providers,
@@ -62,26 +65,33 @@ export function ProviderButtons({
   return (
     <div className={cn("grid gap-2", grid ? "grid-cols-2" : "grid-cols-1", className)}>
       {providers.map((p) => {
-        const label = grid
-          ? p.label
-          : (text?.continueWith ?? "ดำเนินการต่อด้วย {provider}").replace("{provider}", p.label);
+        const full = (text?.continueWith ?? "ดำเนินการต่อด้วย {provider}").replace(
+          "{provider}",
+          p.label,
+        );
+        const label = p.text ?? (grid ? p.label : full);
         const content = (
           <>
             {p.icon}
-            <span className="truncate">{label}</span>
-            {p.badge && <span className="ml-auto text-label text-muted-foreground">{p.badge}</span>}
+            <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="w-full"
+            className={buttonClass}
             disabled={disabled}
             nativeButton={false}
-            render={<a href={p.href} aria-label={grid ? `${label}` : undefined} />}
+            render={<a href={p.href} {...a11y} />}
           >
             {content}
           </Button>
@@ -90,8 +100,9 @@ export function ProviderButtons({
             key={p.id}
             type="button"
             variant="outline"
-            className="w-full"
+            className={buttonClass}
             disabled={disabled || busy}
+            {...a11y}
             onClick={p.onClick}
           >
             {content}