@suphark/ui 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.10.0] — 2026-09-21
+
+### Added
+
+- **`SectionNav`** (`@suphark/ui/next`, สเปกจาก Pi Auth — ชิ้นสุดท้ายที่แอปยังประกอบเอง) — หัวหมวด + แถบแท็บย่อยใต้หัวข้อสำหรับ layout ของหมวดที่มีหลายหน้า (directory/access/security/integrations): `title`/`description`/`actions` ส่งต่อ `PageHeader`, `tabs[{ href? | slug?, label, exact?, badge? }]` (href หรือ `${base}/${slug}`), แต่ละแท็บเป็น `NavLink` (`-mb-px border-b-2` ไฮไลต์ `border-primary` ตาม pathname, `aria-current=page`), badge ต่อท้าย label, `navLabel` (ค่าเริ่มต้น `UiText.sectionNav.tabs` — "แท็บย่อย"/"Section tabs"), ไม่มี tabs = ไม่มี nav; ไม่มี state ใช้จาก server component ได้ (เฉพาะแถบ `<nav>` เป็น client component เล็ก ๆ เพื่ออ่าน UiText); types `SectionNavProps`, `SectionNavTab`; `UiText.sectionNav` (optional)
+- showcase: หน้า `section-nav` — 97 หน้า; tests 3 กรณี (รวม 126)
+
 ## [0.9.0] — 2026-09-21
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.9.0",
+  "version": "0.10.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/navigation/section-nav-bar.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
+import type { ReactNode } from "react";
+
+/** แถบแท็บของ SectionNav — แยกเป็น client เพื่ออ่าน aria-label ค่าเริ่มต้นจาก UiText (context) */
+export function SectionNavBar({ label, children }: { label?: string; children: ReactNode }) {
+  const text = useUiText();
+  return (
+    <nav
+      aria-label={label ?? text.sectionNav?.tabs ?? "แท็บย่อย"}
+      className="flex flex-wrap gap-1 border-b text-sm"
+    >
+      {children}
+    </nav>
+  );
+}

package/src/components/shared/navigation/section-nav.tsx

@@ -0,0 +1,79 @@
+import { NavLink } from "@suphark/ui/components/app-shell/nav-link";
+import { PageHeader } from "@suphark/ui/components/shared/page-header";
+import { cn } from "@suphark/ui/lib/utils";
+import type { ReactNode } from "react";
+import { SectionNavBar } from "./section-nav-bar";
+
+export interface SectionNavTab {
+  /** ลิงก์เต็ม — หรือส่ง `slug` แล้วให้ `base` ของ SectionNav ประกอบเป็น `${base}/${slug}` */
+  href?: string;
+  slug?: string;
+  label: ReactNode;
+  /** active เฉพาะ path ตรงเป๊ะ (ค่าเริ่มต้น prefix match) */
+  exact?: boolean;
+  /** ต่อท้าย label เช่น จำนวน */
+  badge?: ReactNode;
+}
+
+export interface SectionNavProps {
+  title: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+  /** prefix ของ href เมื่อแท็บให้ `slug` (เช่น "/directory") */
+  base?: string;
+  tabs?: ReadonlyArray<SectionNavTab>;
+  /** aria-label ของแถบแท็บ (ค่าเริ่มต้น `UiText.sectionNav.tabs` — "แท็บย่อย") */
+  navLabel?: string;
+  className?: string;
+}
+
+function tabHref(tab: SectionNavTab, base?: string): string {
+  if (tab.href) return tab.href;
+  const b = (base ?? "").replace(/\/+$/, "");
+  return `${b}/${(tab.slug ?? "").replace(/^\/+/, "")}`;
+}
+
+/**
+ * หัวหมวด + แถบแท็บย่อยใต้หัวข้อ สำหรับ layout ของหมวดที่มีหลายหน้า (directory/access/security/integrations …)
+ * = `PageHeader` + `NavLink` แต่ละแท็บ (ไฮไลต์ตาม pathname) — ไม่มี state ใช้จาก server component ได้
+ *
+ *   <SectionNav title="ไดเรกทอรี" base="/directory" tabs={[{ slug: "users", label: "ผู้ใช้" }, { slug: "groups", label: "กลุ่ม", badge: 3 }]} />
+ */
+export function SectionNav({
+  title,
+  description,
+  actions,
+  base,
+  tabs,
+  navLabel,
+  className,
+}: SectionNavProps) {
+  return (
+    <div data-slot="section-nav" className={cn("flex flex-col gap-3", className)}>
+      <PageHeader title={title} description={description} actions={actions} />
+      {tabs && tabs.length > 0 && (
+        <SectionNavBar label={navLabel}>
+          {tabs.map((tab) => {
+            const href = tabHref(tab, base);
+            return (
+              <NavLink
+                key={href}
+                href={href}
+                exact={tab.exact}
+                className="-mb-px inline-flex items-center gap-1.5 border-transparent border-b-2 px-3 py-2 text-muted-foreground transition-colors hover:text-foreground"
+                activeClassName="border-primary font-medium text-foreground"
+              >
+                {tab.label}
+                {tab.badge != null && (
+                  <span className="rounded-full bg-muted px-1.5 text-muted-foreground text-xs tabular-nums">
+                    {tab.badge}
+                  </span>
+                )}
+              </NavLink>
+            );
+          })}
+        </SectionNavBar>
+      )}
+    </div>
+  );
+}

package/src/components/shared/ui-text.tsx

@@ -47,6 +47,8 @@ export interface UiText {
   signOut?: string;
   /** ThemeMenuItems: หัวกลุ่ม + ตัวเลือก (optional) */
   theme?: Partial<{ label: string; light: string; dark: string; system: string }>;
+  /** SectionNav: aria-label ของแถบแท็บย่อย (optional — "แท็บย่อย") */
+  sectionNav?: Partial<{ tabs: string }>;
 }
 
 export const UI_TEXT_TH: UiText = {
@@ -79,6 +81,7 @@ export const UI_TEXT_TH: UiText = {
   userMenu: "เมนูผู้ใช้",
   signOut: "ออกจากระบบ",
   theme: { label: "ธีม", light: "สว่าง", dark: "มืด", system: "ตามระบบ" },
+  sectionNav: { tabs: "แท็บย่อย" },
 };
 
 export const UI_TEXT_EN: UiText = {
@@ -111,6 +114,7 @@ export const UI_TEXT_EN: UiText = {
   userMenu: "User menu",
   signOut: "Sign out",
   theme: { label: "Theme", light: "Light", dark: "Dark", system: "System" },
+  sectionNav: { tabs: "Section tabs" },
 };
 
 const UiTextContext = createContext<UiText>(UI_TEXT_TH);

package/src/next.ts

@@ -15,6 +15,11 @@ export {
   PageBreadcrumb,
   type PageBreadcrumbItem,
 } from "./components/shared/navigation/page-breadcrumb";
+export {
+  SectionNav,
+  type SectionNavProps,
+  type SectionNavTab,
+} from "./components/shared/navigation/section-nav";
 export { Stepper, type StepperStep, type StepStatus } from "./components/shared/navigation/stepper";
 export { type RowAction, type RowActionItem, RowActions } from "./components/shared/row-actions";
 export { RowMenu, type RowMenuDialog, type RowMenuItem } from "./components/shared/row-menu";