@suphark/ui 0.22.0 → 0.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -1
- package/package.json +1 -1
- package/src/components/shared/auth-parts.tsx +19 -4
package/CHANGELOG.md
CHANGED
|
@@ -2,11 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
|
|
4
4
|
|
|
5
|
+
## [0.23.0] — 2026-10-02
|
|
6
|
+
|
|
7
|
+
### Added
|
|
8
|
+
|
|
9
|
+
- `ProviderButtons`: prop `badgePlacement` — ค่าเริ่มต้น `"corner"` = badge (เช่น "ใช้ล่าสุด") เป็นป้ายเล็กทับขอบบนขวาของปุ่มแบบ Clerk "Last used" ไม่กินที่ข้อความ; `"inline"` = ท้ายข้อความแบบ 0.21.0; ปุ่มเต็มกว้าง `py-2` กันป้ายชนบรรทัดแรก — ขอจากเจ้าของผ่าน Pi Auth (0.22.0 ที่ publish ไปไม่มีส่วนนี้)
|
|
10
|
+
|
|
5
11
|
## [0.22.0] — 2026-10-02
|
|
6
12
|
|
|
7
13
|
### Added
|
|
8
14
|
|
|
9
|
-
- `ProviderButtons`: prop `text` ต่อ provider (ข้อความเต็มของปุ่มแทน "ดำเนินการต่อด้วย {label}" เช่น ชื่อ SSO ยาว "Estar (Microsoft 365)"); ปุ่มเต็มกว้าง (1 ตัว / `layout="list"`) **ขึ้นบรรทัดใหม่แทนตัดเป็น …**
|
|
15
|
+
- `ProviderButtons`: prop `text` ต่อ provider (ข้อความเต็มของปุ่มแทน "ดำเนินการต่อด้วย {label}" เช่น ชื่อ SSO ยาว "Estar (Microsoft 365)"); ปุ่มเต็มกว้าง (1 ตัว / `layout="list"`) **ขึ้นบรรทัดใหม่แทนตัดเป็น …** ; ตาราง 2 คอลัมน์ยังตัด แต่ `aria-label`/`title` เป็นข้อความเต็ม — ขอจาก Pi Auth
|
|
10
16
|
- showcase: demo `/components/auth-layout` ปุ่ม SSO ใช้ `text` ยาว
|
|
11
17
|
|
|
12
18
|
## [0.21.0] — 2026-10-02
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@suphark/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.23.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"description": "Design system กลางของ Suphark apps: shadcn/ui (base-nova, Base UI, Tailwind v4) + shared components + token/ฟอนต์ Noto Sans Thai Looped — ส่งเป็น source ให้แอป Next transpile เอง",
|
|
@@ -53,11 +53,14 @@ export function ProviderButtons({
|
|
|
53
53
|
providers,
|
|
54
54
|
pendingId,
|
|
55
55
|
layout = "auto",
|
|
56
|
+
badgePlacement = "corner",
|
|
56
57
|
className,
|
|
57
58
|
}: {
|
|
58
59
|
providers: ReadonlyArray<AuthProvider>;
|
|
59
60
|
pendingId?: string | null;
|
|
60
61
|
layout?: "auto" | "list";
|
|
62
|
+
/** ตำแหน่ง badge: corner = ป้ายเล็กทับขอบบนขวาแบบ Clerk "Last used" (ไม่กินที่ข้อความ) · inline = ท้ายข้อความ */
|
|
63
|
+
badgePlacement?: "corner" | "inline";
|
|
61
64
|
className?: string;
|
|
62
65
|
}) {
|
|
63
66
|
const text = useUiText().auth;
|
|
@@ -74,13 +77,25 @@ export function ProviderButtons({
|
|
|
74
77
|
<>
|
|
75
78
|
{p.icon}
|
|
76
79
|
<span className={grid ? "truncate" : "min-w-0 text-balance"}>{label}</span>
|
|
77
|
-
{p.badge &&
|
|
78
|
-
|
|
79
|
-
|
|
80
|
+
{p.badge &&
|
|
81
|
+
(badgePlacement === "corner" ? (
|
|
82
|
+
<span
|
|
83
|
+
data-slot="provider-badge"
|
|
84
|
+
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"
|
|
85
|
+
>
|
|
86
|
+
{p.badge}
|
|
87
|
+
</span>
|
|
88
|
+
) : (
|
|
89
|
+
<span className="ml-auto shrink-0 text-label text-muted-foreground">{p.badge}</span>
|
|
90
|
+
))}
|
|
80
91
|
</>
|
|
81
92
|
);
|
|
82
93
|
// ปุ่มเต็มกว้าง: ให้ข้อความยาวขึ้นบรรทัดใหม่ได้ (Button ตั้ง whitespace-nowrap + h-8)
|
|
83
|
-
const buttonClass =
|
|
94
|
+
const buttonClass = cn(
|
|
95
|
+
"w-full",
|
|
96
|
+
!grid && "h-auto min-h-8 py-2 whitespace-normal",
|
|
97
|
+
p.badge && badgePlacement === "corner" && "relative",
|
|
98
|
+
);
|
|
84
99
|
const a11y = grid ? { "aria-label": full, title: full } : {};
|
|
85
100
|
const busy = pendingId === p.id;
|
|
86
101
|
const disabled = p.disabled || (pendingId != null && !busy);
|