@suphark/ui 0.21.0 → 0.23.0

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.23.0] — 2026-10-02
+
+### Added
+
+- `ProviderButtons`: prop `badgePlacement` — ค่าเริ่มต้น `"corner"` = badge (เช่น "ใช้ล่าสุด") เป็นป้ายเล็กทับขอบบนขวาของปุ่มแบบ Clerk "Last used" ไม่กินที่ข้อความ; `"inline"` = ท้ายข้อความแบบ 0.21.0; ปุ่มเต็มกว้าง `py-2` กันป้ายชนบรรทัดแรก — ขอจากเจ้าของผ่าน Pi Auth (0.22.0 ที่ publish ไปไม่มีส่วนนี้)
+
+## [0.22.0] — 2026-10-02
+
+### Added
+
+- `ProviderButtons`: prop `text` ต่อ provider (ข้อความเต็มของปุ่มแทน "ดำเนินการต่อด้วย {label}" เช่น ชื่อ SSO ยาว "Estar (Microsoft 365)"); ปุ่มเต็มกว้าง (1 ตัว / `layout="list"`) **ขึ้นบรรทัดใหม่แทนตัดเป็น …** ; ตาราง 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.23.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,16 +47,20 @@ export interface AuthProvider {
  * ปุ่มเข้าสู่ระบบด้วย provider (Google / Microsoft / SSO ขององค์กร)
  * 1 ตัว = ปุ่มเต็มกว้างพร้อมข้อความ · 2 ตัวขึ้นไป = ตาราง 2 คอลัมน์ (`layout="list"` บังคับเรียงลงพร้อมข้อความเต็ม)
  * `pendingId` = ตัวที่กำลังพาไป (ปุ่มนั้นหมุน ตัวอื่นปิด กันกดซ้ำ)
+ * ปุ่มเต็มกว้าง (1 ตัว / list) ข้อความยาวขึ้นบรรทัดใหม่ได้ ไม่ตัดทิ้ง · ตาราง 2 คอลัมน์ตัดด้วย … (ชื่อเต็มอยู่ใน aria-label/title)
  */
 export function ProviderButtons({
   providers,
   pendingId,
   layout = "auto",
+  badgePlacement = "corner",
   className,
 }: {
   providers: ReadonlyArray<AuthProvider>;
   pendingId?: string | null;
   layout?: "auto" | "list";
+  /** ตำแหน่ง badge: corner = ป้ายเล็กทับขอบบนขวาแบบ Clerk "Last used" (ไม่กินที่ข้อความ) · inline = ท้ายข้อความ */
+  badgePlacement?: "corner" | "inline";
   className?: string;
 }) {
   const text = useUiText().auth;
@@ -62,26 +68,45 @@ 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 &&
+              (badgePlacement === "corner" ? (
+                <span
+                  data-slot="provider-badge"
+                  className="pointer-events-none absolute top-0 right-2 -translate-y-1/2 rounded-full border bg-background px-1.5 py-0.5 text-label leading-none text-muted-foreground"
+                >
+                  {p.badge}
+                </span>
+              ) : (
+                <span className="ml-auto shrink-0 text-label text-muted-foreground">{p.badge}</span>
+              ))}
           </>
         );
+        // ปุ่มเต็มกว้าง: ให้ข้อความยาวขึ้นบรรทัดใหม่ได้ (Button ตั้ง whitespace-nowrap + h-8)
+        const buttonClass = cn(
+          "w-full",
+          !grid && "h-auto min-h-8 py-2 whitespace-normal",
+          p.badge && badgePlacement === "corner" && "relative",
+        );
+        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 +115,9 @@ export function ProviderButtons({
             key={p.id}
             type="button"
             variant="outline"
-            className="w-full"
+            className={buttonClass}
             disabled={disabled || busy}
+            {...a11y}
             onClick={p.onClick}
           >
             {content}