@suphark/ui 0.14.0 → 0.15.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 +10 -0
- package/package.json +1 -1
- package/src/components/shared/info-hint.tsx +44 -0
- package/src/index.ts +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
|
|
4
4
|
|
|
5
|
+
## [0.15.0] — 2026-09-30
|
|
6
|
+
|
|
7
|
+
### Added
|
|
8
|
+
|
|
9
|
+
- **`InfoHint`** (ขอจาก Pi Auth): ไอคอน (i) ท้ายหัวข้อ ที่เก็บคำอธิบายยาว ๆ ไว้ใน tooltip แทนการวาง
|
|
10
|
+
เป็น `description` ใต้หัวข้อถาวร — ใช้กับคำอธิบายที่คนซึ่งรู้อยู่แล้วไม่ต้องอ่านซ้ำทุกครั้ง
|
|
11
|
+
props: `children` (เนื้อหา), `label` (ชื่อที่ screen reader อ่าน — บังคับ), `side`, `className`
|
|
12
|
+
trigger เป็น **ปุ่มจริง** ไม่ใช่ `<span>` จึงเปิดได้ด้วยคีย์บอร์ด (Tab) และจอสัมผัส ไม่ใช่ hover อย่างเดียว
|
|
13
|
+
- showcase: หน้า component `/components/info-hint`
|
|
14
|
+
|
|
5
15
|
## [0.14.0] — 2026-09-29
|
|
6
16
|
|
|
7
17
|
> **0.13.0 และ 0.13.1 ถูก publish ขึ้น npm เมื่อ 2026-09-25 จากโค้ดที่ไม่เคยเข้า git** (สเกลตัวอักษรตามบทบาท ขอจาก Pi Done) — รุ่นนี้กู้โค้ดจาก tarball 0.13.1 กลับเข้า `main` แล้ว (3-way merge กับ 0.12.0) บันทึกของสองรุ่นนั้นอยู่ข้างล่างตามที่ publish จริง
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@suphark/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.15.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 เอง",
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import { Tooltip, TooltipContent, TooltipTrigger } from "@suphark/ui/components/ui/tooltip";
|
|
4
|
+
import { cn } from "@suphark/ui/lib/utils";
|
|
5
|
+
import { InfoIcon } from "lucide-react";
|
|
6
|
+
import type { ReactNode } from "react";
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* คำอธิบายที่ไม่ควรกินพื้นที่ถาวร — เก็บไว้หลังไอคอน (i) ท้ายหัวข้อ แล้วค่อยแสดงเมื่อวางเมาส์/โฟกัส
|
|
10
|
+
* ใช้กับคำอธิบายที่คนซึ่งรู้อยู่แล้วไม่ต้องอ่านซ้ำทุกครั้ง (เช่นหัวข้อการ์ดในหน้าตั้งค่า)
|
|
11
|
+
*
|
|
12
|
+
* trigger เป็นปุ่มจริงเพื่อให้เข้าถึงได้ด้วยคีย์บอร์ดและจอสัมผัส ไม่ใช่ hover อย่างเดียว —
|
|
13
|
+
* `label` คือสิ่งที่ screen reader อ่าน ควรบอกว่าเป็นคำอธิบายของอะไร
|
|
14
|
+
*/
|
|
15
|
+
export function InfoHint({
|
|
16
|
+
children,
|
|
17
|
+
label,
|
|
18
|
+
side = "top",
|
|
19
|
+
className,
|
|
20
|
+
}: {
|
|
21
|
+
/** เนื้อหาใน tooltip */
|
|
22
|
+
children: ReactNode;
|
|
23
|
+
/** ชื่อที่ screen reader อ่าน เช่น "คำอธิบาย Attribute" */
|
|
24
|
+
label: string;
|
|
25
|
+
side?: "top" | "bottom" | "left" | "right";
|
|
26
|
+
className?: string;
|
|
27
|
+
}) {
|
|
28
|
+
return (
|
|
29
|
+
<Tooltip>
|
|
30
|
+
<TooltipTrigger
|
|
31
|
+
aria-label={label}
|
|
32
|
+
className={cn(
|
|
33
|
+
"inline-flex size-4 shrink-0 items-center justify-center rounded-full text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50",
|
|
34
|
+
className,
|
|
35
|
+
)}
|
|
36
|
+
>
|
|
37
|
+
<InfoIcon className="size-3.5" aria-hidden />
|
|
38
|
+
</TooltipTrigger>
|
|
39
|
+
<TooltipContent side={side} className="max-w-xs text-pretty leading-relaxed">
|
|
40
|
+
{children}
|
|
41
|
+
</TooltipContent>
|
|
42
|
+
</Tooltip>
|
|
43
|
+
);
|
|
44
|
+
}
|
package/src/index.ts
CHANGED
|
@@ -95,6 +95,7 @@ export {
|
|
|
95
95
|
type IconPickerProps,
|
|
96
96
|
type IconPickerText,
|
|
97
97
|
} from "./components/shared/icon-picker";
|
|
98
|
+
export { InfoHint } from "./components/shared/info-hint";
|
|
98
99
|
export { Initials, initialsOf } from "./components/shared/initials";
|
|
99
100
|
export { ErrorState, type RouteError } from "./components/shared/layout/error-state";
|
|
100
101
|
export {
|