@suphark/ui 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,36 @@
+# Changelog
+
+รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
+
+## [0.1.0] — 2026-09-18
+
+รุ่นแรก — ยกจาก `supplychainnextjs-1` (source of truth) + ชุด generic จาก Pi Auth `@pi/ui`
+
+### Added
+
+- **shadcn/ui base-nova 59 primitives** (`components/ui/*`) + tests (combobox, date-picker, slider, tabs)
+- **token/ฟอนต์** `styles.css`: slate + success/warning/sidebar/chart, radius, scrollbar, Noto Sans Thai Looped, dark variant
+- **shared/button**: AddNew, Save, Submit, Cancel, Confirm, Delete, FloatingSave, Print, ActionButton (base)
+- **shared/form** (react-hook-form): FormFieldInput/Select/Combobox/Date/Boolean/RadioGroup/RadioCards/ColorSelect/FormattedNumber, SimpleSelect
+- **shared**: Combobox, MultiSelectCombobox, DateRangePicker, FormattedNumber, PrimarySecondaryText, ClientDateFormatter, ErrorState, PageSkeleton, ClientRedirect
+- **จาก Pi Auth**: FormDialog, FormMessage/FormState, NameIdFields/toIdentifier (+test), StatusBadge/statusTone, RowMenu, RowActions, SecretReveal, EnvSnippet/randomSecret, Notice, EmptyState, EmptyRow, DataList/DataRow, Stat, DescriptionList, PageHeader, SectionCard, Initials/initialsOf, UiText (TH/EN provider)
+- **theme** บน next-themes: ThemeProvider, ThemeToggle (เมนู 3 ตัวเลือก), ThemeSwitch (ปุ่มเดี่ยว), ThemeMenuItems (ใส่ใน DropdownMenu), useTheme
+- **lib**: `cn`, `formatThaiFullDate`/`formatRelativeThaiDate`, status-colors, `UiPermissionProvider`/`usePermission` (แอป inject ตัวตรวจสิทธิ์เอง)
+- **hooks**: `useIsMobile`, `useCopyToClipboard`
+- **สีแบรนด์ต่อ tenant**: rule `[style*="--brand"], [data-brand]` ใน `styles.css` ให้ตั้ง `--brand`/`--brand-foreground` บน wrapper แล้ว primary/ring/sidebar-primary ตาม (แก้ตามบั๊ก @pi/ui `4cd39d8` ที่ `--primary: var(--brand)` บน :root ไม่สืบทอดไปยัง wrapper)
+- entry `@suphark/ui/next` สำหรับ component ที่ใช้ next/navigation (LinkButton, RefreshButton, TransitionLink, PageBreadcrumb, PageShell, FormDialog, RowActions, RowMenu)
+- showcase `components/design-system/*` (8 sections) + `docs/design-system.md`
+- audit scripts `scripts/audit-base-ui-props.mjs`, `scripts/audit-tailwind-typography.mjs` (รับ path เป็น argument ให้แอปปลายทางใช้ได้)
+
+### Changed (เทียบต้นทาง)
+
+- `NameIdFields` เขียนใหม่บน `ui/field.tsx` (Field/FieldLabel/FieldDescription) แทน `pi/Field`
+- `ActionButton`/`LinkButton` ใช้ `usePermission` จาก `lib/permission` (context) แทน `@/lib/auth`
+- `FormattedNumber` รับ `DecimalLike` (`{ toString(): string }`) แทน `Prisma.Decimal`
+- `FormFieldInput` แยก `CopyableInput` เพื่อไม่เรียก hook ในเงื่อนไข
+- `ui/form.tsx`, `hooks/use-mobile.ts` เพิ่ม `"use client"` (จำเป็นเมื่อ import ผ่าน barrel จาก server component)
+- `ui/date-picker.tsx` แก้ `parts[0] ?? ""` ให้ผ่าน `noUncheckedIndexedAccess` ของแอปปลายทาง
+
+### Not included (รุ่นถัดไป)
+
+- data-table (tanstack) + DeleteManyButton, sidebar/app shell, rich-text-editor (lexical), form-field-image-upload, pdf-export/print, rate, view-tracker, icon-picker, resource-property-filter

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Suphark
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,120 @@
+# @suphark/ui
+
+Design system กลางของ Suphark apps (Pi Auth, DueBell, Pi PDF, supplychain, แอปใหม่) — shadcn/ui สไตล์ `base-nova` (Base UI) + Tailwind v4 + lucide + ฟอนต์ Noto Sans Thai Looped + component ที่เราประกอบเองบนนั้น
+
+แพ็กเกจส่ง **source (.ts/.tsx) ไม่ build** — แอป Next.js transpile เองผ่าน `transpilePackages`
+
+## ติดตั้ง
+
+```bash
+pnpm add @suphark/ui @base-ui/react lucide-react react-hook-form
+```
+
+peer ที่ต้องมีอยู่แล้ว: `react`/`react-dom` ≥19, `tailwindcss` ^4, `next` ≥15 (เฉพาะ `@suphark/ui/next`), `recharts` (เฉพาะ `components/ui/chart`)
+
+### 1. next.config.ts
+
+```ts
+const nextConfig: NextConfig = {
+  transpilePackages: ["@suphark/ui"],
+};
+```
+
+### 2. globals.css
+
+```css
+@import "tailwindcss";
+@import "@suphark/ui/styles.css"; /* token, ฟอนต์, base, dark variant */
+@source "../../node_modules/@suphark/ui/src"; /* ให้ Tailwind สแกน class ในแพ็กเกจ (ปรับ ../ ตามตำแหน่งไฟล์) */
+```
+
+ต้องการฟอนต์อื่น: override ใน `@theme { --font-sans: ... }` ของแอปหลัง import
+
+### 3. root layout
+
+```tsx
+import { ThemeProvider, Toaster } from "@suphark/ui";
+
+<html lang="th" suppressHydrationWarning>
+  <body>
+    <ThemeProvider>
+      {children}
+      <Toaster richColors />
+    </ThemeProvider>
+  </body>
+</html>
+```
+
+### 4. tsconfig ของแอป
+
+แอปจะ type-check source ของแพ็กเกจด้วย — แพ็กเกจผ่าน `strict` + `noUncheckedIndexedAccess` + `verbatimModuleSyntax` อยู่แล้ว
+
+## การ import
+
+```ts
+// ทุกอย่างที่ไม่พึ่ง Next — primitives, shared, theme, hooks, cn
+import { Button, Card, FormFieldInput, StatusBadge, ThemeToggle, cn } from "@suphark/ui";
+
+// ของที่ใช้ next/navigation หรือ next/link
+import { FormDialog, RowActions, LinkButton, RefreshButton, PageShell } from "@suphark/ui/next";
+
+// import ตรงรายไฟล์ก็ได้ (เช่น chart ที่ต้องมี recharts)
+import { ChartContainer } from "@suphark/ui/components/ui/chart";
+```
+
+## โครงสร้าง
+
+| โฟลเดอร์ | คืออะไร | กติกา |
+|---|---|---|
+| `src/components/ui/*` | shadcn/ui ต้นฉบับ 59 ตัว (+ `__tests__`) | **ห้ามแก้มือ** — เพิ่ม/อัปเดตด้วย `pnpm dlx shadcn@latest add <name>` ใน `packages/ui` (`components.json` ตั้ง alias ไว้แล้ว) |
+| `src/components/shared/*` | ของที่เราประกอบเอง: ปุ่มมาตรฐาน (`button/`), form-field บน react-hook-form (`form/`), layout, theme, combobox, และชุดจาก Pi Auth (FormDialog, NameIdFields, StatusBadge, RowMenu, …) | แก้ได้ แต่คง props เดิมให้มากที่สุด (minor = เพิ่ม, major = เปลี่ยน) |
+| `src/components/design-system/*` | หน้า showcase (render ใน `apps/showcase`) | ไม่อยู่ใน barrel |
+| `src/lib/*`, `src/hooks/*` | `cn`, formatter วันที่ไทย, สีสถานะ, permission context, `useIsMobile`, `useCopyToClipboard` | |
+| `src/styles.css` | token (slate + success/warning/sidebar/chart), radius, ฟอนต์, scrollbar, dark variant | |
+| `scripts/*.mjs` | audit บังคับ: Base UI props (`default*`/`onSelect`), typography scale | แอปปลายทางรันได้จาก `node_modules/@suphark/ui/scripts` |
+
+### สีแบรนด์ต่อ tenant/แอป (`--brand`)
+
+ตั้ง `--brand` / `--brand-foreground` inline บน wrapper (หรือใส่ `data-brand`) แล้ว `primary`/`ring`/`sidebar-primary` ข้างในตามไปด้วย — ค่าเริ่มต้นไม่ตั้ง `--brand` (primary = slate) ดูตัวอย่างที่ `apps/showcase/src/app/brand`
+
+```tsx
+<div style={{ "--brand": tenant.color, "--brand-foreground": "oklch(0.985 0 0)" } as React.CSSProperties}>…</div>
+```
+
+### สิทธิ์ (ActionButton/LinkButton `permission` prop)
+
+แพ็กเกจไม่รู้จักระบบสิทธิ์ของแอป — ครอบด้วย `UiPermissionProvider` แล้วส่งฟังก์ชัน `check(requirement, options)` ของแอปเข้ามา ถ้าไม่ครอบ = อนุญาตทุกอย่าง
+
+```tsx
+<UiPermissionProvider check={(req, opts) => checkPermission(user, req, opts)}>…</UiPermissionProvider>
+```
+
+## พัฒนา
+
+```bash
+pnpm install
+pnpm dev                    # apps/showcase → http://localhost:3200/design-system
+pnpm verify                 # typecheck + biome + lint:base-ui + check:typography + vitest
+pnpm --filter @suphark/ui test
+```
+
+เพิ่ม shadcn component:
+
+```bash
+cd packages/ui && pnpm dlx shadcn@latest add <name>
+```
+
+แล้วเพิ่ม `export * from "./components/ui/<name>"` ใน `src/index.ts`
+
+## Versioning
+
+semver — patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props ดู `CHANGELOG.md`
+
+## Publish
+
+```bash
+cd packages/ui
+pnpm publish --access public
+```
+
+(ผู้ใช้ `npm login` เอง; ไม่มีขั้น build เพราะส่ง source)

package/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@suphark/ui/components",
+    "utils": "@suphark/ui/lib/utils",
+    "ui": "@suphark/ui/components/ui",
+    "lib": "@suphark/ui/lib",
+    "hooks": "@suphark/ui/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package/package.json

@@ -0,0 +1,108 @@
+{
+  "name": "@suphark/ui",
+  "version": "0.1.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 เอง",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/suphark/ui",
+    "directory": "packages/ui"
+  },
+  "keywords": [
+    "shadcn",
+    "base-ui",
+    "tailwind",
+    "design-system",
+    "react",
+    "nextjs",
+    "thai"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "src",
+    "scripts",
+    "components.json",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./next": "./src/next.ts",
+    "./styles.css": "./src/styles.css",
+    "./components/shared/button": "./src/components/shared/button/index.ts",
+    "./components/shared/theme": "./src/components/shared/theme/index.ts",
+    "./components/*": "./src/components/*.tsx",
+    "./lib/*": "./src/lib/*.ts",
+    "./hooks/*": "./src/hooks/*.ts"
+  },
+  "dependencies": {
+    "@fontsource/noto-sans-thai-looped": "^5.3.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.4.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.5.0",
+    "next-themes": "^0.4.6",
+    "react-day-picker": "^10.0.1",
+    "react-number-format": "^5.4.5",
+    "react-resizable-panels": "^4.12.3",
+    "sonner": "^2.0.8",
+    "tailwind-merge": "^3.6.0",
+    "tw-animate-css": "^1.4.0"
+  },
+  "peerDependencies": {
+    "@base-ui/react": ">=1.7.0",
+    "lucide-react": ">=1.30.0",
+    "next": ">=15",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "react-hook-form": ">=7.50.0",
+    "recharts": ">=3",
+    "tailwindcss": "^4"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    },
+    "recharts": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@base-ui/react": "^1.8.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.13.4",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.5",
+    "@vitejs/plugin-react": "^6.1.0",
+    "jsdom": "^29.1.1",
+    "lucide-react": "^1.45.0",
+    "next": "^16.3.5",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "react-hook-form": "^7.86.0",
+    "recharts": "^3.10.1",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.11"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint:base-ui": "node scripts/audit-base-ui-props.mjs",
+    "check:typography": "node scripts/audit-tailwind-typography.mjs",
+    "verify": "pnpm typecheck && pnpm lint:base-ui && pnpm check:typography && pnpm test"
+  }
+}

package/scripts/audit-base-ui-props.mjs

@@ -0,0 +1,179 @@
+import fs from "node:fs";
+import path from "node:path";
+
+/**
+ * ตรวจการใช้ prop ของคอมโพเนนต์ที่สร้างบน Base UI ให้ถูกกติกา
+ *
+ * ## ทำไมต้องมี
+ *
+ * Base UI มี API ไม่เหมือน Radix ซึ่งเป็นไลบรารีที่โค้ดตัวอย่างส่วนใหญ่ในอินเทอร์เน็ตใช้
+ * ความต่างสองข้อนี้ทำให้เกิดบั๊กที่ "เงียบ" คือ TypeScript ผ่าน หน้าจอไม่พัง แต่ทำงานไม่ถูก:
+ *
+ * 1. **`default*` ที่ค่าเปลี่ยนได้** — เป็นค่าตั้งต้นของคอมโพเนนต์แบบ uncontrolled ใช้ได้
+ *    แค่ตอน mount ครั้งแรก ถ้าส่งค่าที่เปลี่ยนได้เข้าไป Base UI จะเตือนในคอนโซล และที่แย่กว่า
+ *    คือหน้าจอจะไม่อัปเดตตามค่าใหม่ ต้องใช้ `value` + `onValueChange` แทน
+ *
+ * 2. **`onSelect` บนรายการเมนู** — เป็น API ของ Radix ไม่มีใน Base UI ใส่ไปแล้วตัวจัดการ
+ *    จะไม่ถูกเรียกเลย ปุ่มกดแล้วเงียบสนิท ต้องใช้ `onClick`
+ *
+ * ทั้งสองแบบเคยหลุดขึ้น production มาแล้ว จึงดักด้วยสคริปต์แทนการอาศัยความจำ
+ */
+
+/**
+ * โฟลเดอร์ที่จะตรวจ: ส่งเป็น argument (`node audit-base-ui-props.mjs src/features src/app`) ไม่ส่ง = `src`
+ * แอปปลายทางรันสคริปต์นี้จาก node_modules ได้: ตั้ง UI_DIR ชี้ไปที่ shadcn ของแพ็กเกจ
+ *   UI_DIR=node_modules/@suphark/ui/src/components/ui node node_modules/@suphark/ui/scripts/audit-base-ui-props.mjs src
+ */
+const ROOTS = process.argv.slice(2).length > 0 ? process.argv.slice(2) : ["src"];
+
+/** เขียนกำกับไว้เมื่อตรวจแล้วว่าเขียนแบบนี้ถูกต้อง พร้อมเหตุผลต่อท้าย */
+const SUPPRESS_MARKER = "base-ui-ok:";
+const UI_DIR = process.env.UI_DIR ?? "src/components/ui";
+
+/** คอมโพเนนต์เมนูที่ไม่มี onSelect — ต้องใช้ onClick */
+const MENU_ITEM_COMPONENTS = new Set([
+  "DropdownMenuItem",
+  "MenubarItem",
+  "ContextMenuItem",
+  "SelectItem",
+]);
+
+/**
+ * คอมโพเนนต์ที่มี "สถานะ" ของตัวเอง (เปิด/ปิด หรือค่าที่เลือก) เท่านั้นที่กติกานี้ใช้
+ *
+ * ช่องกรอกอย่าง Input/Textarea ก็มี defaultValue เหมือนกัน แต่นั่นคือรูปแบบ uncontrolled
+ * ของ React ที่ถูกต้องอยู่แล้ว ไม่ใช่ปัญหา จึงไม่เอามาปนกัน
+ */
+const STATEFUL_COMPONENTS = new Set([
+  "Accordion",
+  "Tabs",
+  "Select",
+  "Collapsible",
+  "Dialog",
+  "AlertDialog",
+  "Popover",
+  "Sheet",
+  "Drawer",
+  "Menubar",
+  "NavigationMenu",
+  "ToggleGroup",
+  "RadioGroup",
+  "Combobox",
+  "HoverCard",
+  "DropdownMenu",
+  "ContextMenu",
+  "SidebarProvider",
+]);
+
+/**
+ * ค่าที่ถือว่า "คงที่" จึงส่งเป็น default ได้
+ *
+ * นับรวมค่าคงที่ที่ตั้งชื่อแบบ SCREAMING_CASE และ array/object ของค่าคงที่
+ * เพราะค่าพวกนี้ไม่เปลี่ยนระหว่างคอมโพเนนต์มีชีวิตอยู่
+ */
+const STATIC_EXPRESSION =
+  /^(true|false|undefined|null|-?\d+(\.\d+)?|["'`][^"'`]*["'`]|[A-Z][A-Z0-9_]*(\.[A-Za-z0-9_]+)*|\[[^[\]]*\])$/;
+
+function walk(dir) {
+  if (!fs.existsSync(dir)) return [];
+  return fs.readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) return walk(full);
+    return entry.isFile() && full.endsWith(".tsx") && !full.includes("__tests__") ? [full] : [];
+  });
+}
+
+/** ชื่อคอมโพเนนต์ทั้งหมดที่ export จากไฟล์ ui ที่สร้างบน Base UI */
+function collectBaseUiComponents() {
+  const names = new Set();
+
+  for (const file of walk(UI_DIR)) {
+    const source = fs.readFileSync(file, "utf8");
+    if (!source.includes("@base-ui/react")) continue;
+
+    const exportBlock = source.match(/export\s*\{([\s\S]*?)\}/g) ?? [];
+    for (const block of exportBlock) {
+      for (const raw of block.replace(/export\s*\{|\}/g, "").split(",")) {
+        const name = raw
+          .trim()
+          .split(/\s+as\s+/)
+          .pop()
+          ?.trim();
+        if (name && /^[A-Z]/.test(name)) names.add(name);
+      }
+    }
+    for (const match of source.matchAll(/export function ([A-Z]\w*)/g)) names.add(match[1]);
+  }
+
+  return names;
+}
+
+/** คู่ของแท็กเปิดกับ prop ที่อยู่ในนั้น — พอสำหรับกติกาสองข้อนี้ โดยไม่ต้อง parse ทั้งไฟล์ */
+function findViolations(file, baseUiComponents) {
+  const source = fs.readFileSync(file, "utf8");
+  const violations = [];
+  const lines = source.split("\n");
+
+  /** true เมื่อบรรทัดนั้นถูกคอมเมนต์ไว้ หรือมีคำยืนยันว่าตรวจแล้วตั้งใจเขียนแบบนี้ */
+  const isSuppressed = (lineNumber) => {
+    if ((lines[lineNumber - 1] ?? "").trim().startsWith("//")) return true;
+
+    // ยอมรับได้เมื่อผู้เขียนยืนยันไว้ เช่น ค่าที่พิสูจน์แล้วว่าไม่เปลี่ยนตัวตน
+    // หรือ wrapper ที่ตั้งใจเปิดให้ใช้ได้ทั้งแบบ controlled และ uncontrolled
+    return lines
+      .slice(Math.max(0, lineNumber - 4), lineNumber + 8)
+      .some((row) => row.includes(SUPPRESS_MARKER));
+  };
+
+  for (const match of source.matchAll(/<([A-Z]\w*)([^>]*?)\/?>/gs)) {
+    const [, component, attributes] = match;
+    const line = source.slice(0, match.index).split("\n").length;
+    if (isSuppressed(line)) continue;
+
+    if (baseUiComponents.has(component) && STATEFUL_COMPONENTS.has(component)) {
+      for (const attr of attributes.matchAll(/\bdefault([A-Z]\w*)=\{([^}]*)\}/g)) {
+        const expression = attr[2].trim();
+        if (STATIC_EXPRESSION.test(expression)) continue;
+
+        violations.push({
+          file,
+          line,
+          message:
+            `<${component} default${attr[1]}={${expression}}> — ค่าตั้งต้นใช้ได้แค่ตอน mount แรก ` +
+            "ถ้าค่านี้เปลี่ยนได้ ให้ใช้ value/open + ตัวจัดการการเปลี่ยนแปลงแทน " +
+            "(ถ้าค่าคงที่จริง ให้ย้ายไปเก็บใน useMemo หรือค่าคงที่นอกคอมโพเนนต์)",
+        });
+      }
+    }
+
+    if (MENU_ITEM_COMPONENTS.has(component) && /\bonSelect=/.test(attributes)) {
+      violations.push({
+        file,
+        line,
+        message: `<${component} onSelect={...}> — Base UI ไม่มี prop นี้ ตัวจัดการจะไม่ถูกเรียก ให้ใช้ onClick`,
+      });
+    }
+  }
+
+  return violations;
+}
+
+const baseUiComponents = collectBaseUiComponents();
+if (baseUiComponents.size === 0) {
+  console.error(`ไม่พบคอมโพเนนต์ที่สร้างบน Base UI — ตรวจ path ของ ${UI_DIR} (ตั้งค่าผ่าน env UI_DIR ได้)`);
+  process.exit(1);
+}
+
+const violations = ROOTS.flatMap((root) =>
+  walk(root).flatMap((file) => findViolations(file, baseUiComponents)),
+);
+
+if (violations.length > 0) {
+  console.error(`Base UI props audit failed: พบ ${violations.length} จุดที่ต้องแก้\n`);
+  for (const violation of violations) {
+    console.error(`- ${violation.file}:${violation.line}\n  ${violation.message}`);
+  }
+  process.exit(1);
+}
+
+console.log(`Base UI props audit passed: ตรวจ ${baseUiComponents.size} คอมโพเนนต์`);

package/scripts/audit-tailwind-typography.mjs

@@ -0,0 +1,100 @@
+import fs from "node:fs";
+import path from "node:path";
+
+/** โฟลเดอร์ที่จะตรวจ: argument แรก (ค่าเริ่มต้น `src`) — แอปปลายทางรันจาก node_modules ได้ */
+const SRC_DIR = path.resolve(process.cwd(), process.argv[2] ?? "src");
+const ARBITRARY_TEXT_REGEX = /text-\[\d+(?:px|rem|em)\]/g;
+
+/**
+ * Recursively find all .ts and .tsx files in directory
+ */
+function findFiles(dir) {
+  let results = [];
+  const list = fs.readdirSync(dir, { withFileTypes: true });
+
+  for (const entry of list) {
+    const fullPath = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      if (entry.name !== "generated" && entry.name !== "__tests__") {
+        results = results.concat(findFiles(fullPath));
+      }
+    } else if (entry.isFile() && (entry.name.endsWith(".tsx") || entry.name.endsWith(".ts"))) {
+      results.push(fullPath);
+    }
+  }
+
+  return results;
+}
+
+/**
+ * Masks comments, code tags, and pre tags with whitespace to preserve line/column offsets
+ * while preventing documentation / examples from triggering false positive audit errors.
+ */
+function maskDocAndCommentBlocks(content) {
+  return (
+    content
+      // Mask block comments /* ... */
+      .replace(/\/\*[\s\S]*?\*\//g, (m) => " ".repeat(m.length))
+      // Mask single-line comments // ...
+      .replace(/\/\/.*$/gm, (m) => " ".repeat(m.length))
+      // Mask <code>...</code> JSX elements (e.g. in design system doc pages)
+      .replace(/<code\b[^>]*>[\s\S]*?<\/code>/gi, (m) => " ".repeat(m.length))
+      // Mask <pre>...</pre> JSX elements
+      .replace(/<pre\b[^>]*>[\s\S]*?<\/pre>/gi, (m) => " ".repeat(m.length))
+  );
+}
+
+function auditTypography() {
+  const files = findFiles(SRC_DIR);
+  let totalIssues = 0;
+  const issuesByFile = [];
+
+  for (const file of files) {
+    const originalContent = fs.readFileSync(file, "utf-8");
+    const maskedContent = maskDocAndCommentBlocks(originalContent);
+    const originalLines = originalContent.split("\n");
+    const maskedLines = maskedContent.split("\n");
+
+    maskedLines.forEach((maskedLine, index) => {
+      const originalLine = originalLines[index] ?? "";
+
+      // Allow line-level ignore via directive comment
+      if (originalLine.includes("typography-ignore")) {
+        return;
+      }
+
+      const matches = maskedLine.match(ARBITRARY_TEXT_REGEX);
+      if (matches) {
+        matches.forEach((match) => {
+          totalIssues++;
+          const relativePath = path.relative(process.cwd(), file);
+          issuesByFile.push({
+            file: relativePath,
+            line: index + 1,
+            match,
+            snippet: originalLine.trim(),
+          });
+        });
+      }
+    });
+  }
+
+  console.log("=== Tailwind Typography Standard Audit ===");
+  if (totalIssues === 0) {
+    console.log("✅ No arbitrary text size classes found!");
+    process.exit(0);
+  } else {
+    console.warn(`⚠️ Found ${totalIssues} arbitrary text size occurrences (e.g. text-[10px]):\n`);
+    issuesByFile.slice(0, 30).forEach((issue) => {
+      console.warn(`  ${issue.file}:${issue.line} -> ${issue.match}`);
+    });
+    if (issuesByFile.length > 30) {
+      console.warn(`\n  ... and ${issuesByFile.length - 30} more occurrences.`);
+    }
+    console.warn(
+      "\nRecommendation: Replace text-[...px] with Tailwind standard font scale (e.g., text-xs, text-sm, text-base).\n",
+    );
+  }
+}
+
+auditTypography();