@suphark/ui 0.5.1 → 0.6.1

package/src/components/shared/number/formatted-number.tsx

@@ -1,60 +1,45 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
+import { useMounted } from "@suphark/ui/hooks/use-mounted";
+import { getNumberFormat } from "@suphark/ui/lib/intl-cache";
+import { useMemo } from "react";
 
 /** ค่าทศนิยมแบบ object (เช่น Prisma.Decimal, decimal.js) — ขอแค่ toString() ให้ตัวเลข */
 export interface DecimalLike {
   toString(): string;
 }
 
-/**
- * Props for the FormattedNumber component.
- */
 interface FormattedNumberProps {
-  /**
-   * The value to format. Can be a Decimal-like object (Prisma.Decimal / decimal.js), number, string, null, or undefined.
-   */
+  /** Decimal-like (Prisma.Decimal / decimal.js), number, string, null หรือ undefined */
   value: DecimalLike | number | string | null | undefined;
-
-  /**
-   * Optional Intl.NumberFormat options to customize the output.
-   * Defaults to { style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2 }.
-   */
+  /** Intl.NumberFormatOptions — ค่าเริ่มต้น { style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2 } */
   options?: Intl.NumberFormatOptions;
-
-  /**
-   * The locale to use for formatting. Defaults to 'th-TH'.
-   */
+  /** ค่าเริ่มต้น th-TH */
   locale?: string;
-
-  /**
-   * Placeholder text to display while mounting or if the value is invalid/null/undefined.
-   * Defaults to "-".
-   */
+  /** ข้อความก่อน mount / ค่าไม่ถูกต้อง ค่าเริ่มต้น "-" */
   placeholder?: string;
-
-  /**
-   * Optional CSS class name(s) to apply to the span element.
-   */
   className?: string;
 }
 
+const DEFAULT_OPTIONS: Intl.NumberFormatOptions = {
+  style: "decimal",
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+};
+
+function toNumber(value: FormattedNumberProps["value"]): number {
+  if (value === null || value === undefined || value === "") return Number.NaN;
+  if (typeof value === "object") return Number(value.toString());
+  return Number(value);
+}
+
 /**
- * A client-side component to safely format and display numeric or Decimal values,
- * preventing hydration mismatches and handling null/undefined states.
- * * @example
- * // Default formatting (2 decimal places)
- * <FormattedNumber value={prismaDecimalValue} />
- * * @example
- * // No decimals
- * <FormattedNumber value={12345} options={{ minimumFractionDigits: 0, maximumFractionDigits: 0 }} />
- * * @example
- * // Currency format
- * <FormattedNumber
- * value={12345.67}
- * options={{ style: 'currency', currency: 'THB' }}
- * locale="th-TH"
- * />
+ * แสดงตัวเลขตาม locale ฝั่ง client หลัง mount (กัน hydration mismatch จาก locale ของ server)
+ * ตัว Intl.NumberFormat ถูก cache ต่อ locale+options — ตารางหลายร้อยเซลล์ไม่สร้างซ้ำ
+ *
+ *   <FormattedNumber value={prismaDecimal} />
+ *   <FormattedNumber value={12345} options={{ maximumFractionDigits: 0 }} />
+ *   <FormattedNumber value={12345.67} options={{ style: "currency", currency: "THB" }} />
  */
 export function FormattedNumber({
   value,
@@ -63,71 +48,23 @@ export function FormattedNumber({
   placeholder = "-",
   className,
 }: FormattedNumberProps) {
-  const [formattedValue, setFormattedValue] = useState<string>(placeholder);
-  const [isMounted, setIsMounted] = useState(false);
-
-  useEffect(() => {
-    // Set mounted to true only on the client-side
-    setIsMounted(true);
-  }, []);
-
-  // Memoize default options
-  const defaultOptions: Intl.NumberFormatOptions = useMemo(
-    () => ({
-      style: "decimal",
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2,
-    }),
-    [],
-  );
+  const mounted = useMounted();
+  const optionsKey = userOptions ? JSON.stringify(userOptions) : "";
+  const numeric = toNumber(value);
 
-  useEffect(() => {
-    // Only run formatting logic on the client *after* mounting
-    if (!isMounted) {
-      return;
-    }
-
-    let numericValue: number;
-
-    // 1. Check for null/undefined/empty string explicitly to show placeholder
-    if (value === null || value === undefined || value === "") {
-      setFormattedValue(placeholder);
-      return;
-    }
-
-    // 2. Convert value to number
+  const text = useMemo(() => {
+    if (!mounted || Number.isNaN(numeric)) return placeholder;
     try {
-      // Handle Prisma Decimal object (or any object with toFixed/toString)
-      if (typeof value === "object" && value !== null && "toString" in value) {
-        numericValue = Number(value.toString());
-      } else {
-        // Handle number, string
-        numericValue = Number(value);
-      }
-    } catch (_e) {
-      // Handle potential errors during conversion
-      numericValue = NaN;
-    }
-
-    // 3. Check if conversion resulted in a valid number
-    if (Number.isNaN(numericValue)) {
-      setFormattedValue(placeholder);
-      return;
-    }
-
-    // 4. Format the valid number
-    try {
-      // Merge user options with defaults (user options take precedence)
-      const finalOptions = { ...defaultOptions, ...userOptions };
-
-      const formatter = new Intl.NumberFormat(locale, finalOptions);
-      setFormattedValue(formatter.format(numericValue));
+      const opts = {
+        ...DEFAULT_OPTIONS,
+        ...(optionsKey ? (JSON.parse(optionsKey) as Intl.NumberFormatOptions) : {}),
+      };
+      return getNumberFormat(locale, opts).format(numeric);
     } catch (error) {
-      console.error("Error formatting number:", error);
-      setFormattedValue(placeholder); // Fallback on formatting error
+      console.error("FormattedNumber:", error);
+      return placeholder;
     }
-  }, [isMounted, value, userOptions, locale, placeholder, defaultOptions]);
+  }, [mounted, numeric, optionsKey, locale, placeholder]);
 
-  // Render placeholder during SSR/hydration, formatted value on client post-mount
-  return <span className={className}>{formattedValue}</span>;
+  return <span className={className}>{text}</span>;
 }

package/src/components/shared/status-badge.tsx

@@ -1,3 +1,4 @@
+/* ui-audit-ok-file: โทน badge ใช้ palette 50/800 คู่ dark โดยตั้งใจ — รอตัดสินใจ token ระดับ tone (todo) */
 import { Badge } from "@suphark/ui/components/ui/badge";
 import { cn } from "@suphark/ui/lib/utils";
 import type { ComponentProps } from "react";

package/src/components/shared/theme/theme-toggle.tsx

@@ -19,13 +19,16 @@ interface ThemeToggleProps {
 }
 
 export function ThemeToggle({ persistedTheme, onThemeChange }: ThemeToggleProps) {
-  const { setTheme, theme } = useTheme();
+  const { setTheme } = useTheme();
 
+  // ใช้ค่าที่บันทึกไว้ (server) เฉพาะเมื่อค่านั้นเปลี่ยน (รวมครั้งแรกตอน mount) — ห้ามผูก `theme` เป็น dep
+  // ไม่งั้นผู้ใช้กดเปลี่ยนแล้ว effect เห็น theme ใหม่ ≠ persistedTheme เก่า (server action ยังไม่กลับ) แล้ว set กลับทันที
+  const lastPersisted = React.useRef<string | null | undefined>(undefined);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: ตั้งใจ sync เฉพาะเมื่อ persistedTheme เปลี่ยน
   React.useEffect(() => {
-    if (persistedTheme && persistedTheme !== theme) {
-      setTheme(persistedTheme);
-    }
-  }, [persistedTheme, theme, setTheme]);
+    if (persistedTheme && persistedTheme !== lastPersisted.current) setTheme(persistedTheme);
+    lastPersisted.current = persistedTheme;
+  }, [persistedTheme]);
 
   const handleThemeChange = async (newTheme: ThemeValue) => {
     setTheme(newTheme);
@@ -53,21 +56,21 @@ export function ThemeToggle({ persistedTheme, onThemeChange }: ThemeToggleProps)
           onClick={() => handleThemeChange("light")}
           className="flex cursor-pointer items-center gap-2"
         >
-          <Sun className="h-4 w-4 text-amber-500" />
+          <Sun className="h-4 w-4 text-warning" />
           <span>Light</span>
         </DropdownMenuItem>
         <DropdownMenuItem
           onClick={() => handleThemeChange("dark")}
           className="flex cursor-pointer items-center gap-2"
         >
-          <Moon className="h-4 w-4 text-blue-500" />
+          <Moon className="h-4 w-4 text-primary" />
           <span>Dark</span>
         </DropdownMenuItem>
         <DropdownMenuItem
           onClick={() => handleThemeChange("system")}
           className="flex cursor-pointer items-center gap-2"
         >
-          <Laptop className="h-4 w-4 text-slate-500" />
+          <Laptop className="h-4 w-4 text-muted-foreground" />
           <span>System</span>
         </DropdownMenuItem>
       </DropdownMenuContent>

package/src/components/shared/time/client-date-formatter.tsx

@@ -1,64 +1,43 @@
 "use client";
 
-import { formatDistanceToNow, type Locale } from "date-fns";
-import { enUS, th } from "date-fns/locale"; // Import locales you need
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useMounted } from "@suphark/ui/hooks/use-mounted";
+import { useTicker } from "@suphark/ui/hooks/use-ticker";
+import { getDateTimeFormat } from "@suphark/ui/lib/intl-cache";
+import { formatDistance, type Locale } from "date-fns";
+import { enUS, th } from "date-fns/locale";
+import { useMemo } from "react";
 
-/**
- * Props for the ClientDateFormatter component.
- */
 interface ClientDateFormatterProps {
-  /**
-   * The date value to format. Can be a Date object, ISO string, or timestamp number.
-   */
+  /** Date, ISO string หรือ timestamp */
   date: Date | string | number | null | undefined;
-  /**
-   * Determines the format type: 'standard' for regular date/time, 'relative' for distance from now.
-   * Defaults to 'standard'.
-   */
+  /** `standard` = วันที่/เวลาตาม Intl (ค่าเริ่มต้น), `relative` = "x นาทีที่แล้ว" */
   formatType?: "standard" | "relative";
-  /**
-   * Optional Intl.DateTimeFormat options (used only if formatType is 'standard').
-   * Defaults to { day: 'numeric', month: 'short', year: 'numeric' }.
-   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options
-   */
+  /** ตัวเลือก Intl.DateTimeFormat (เฉพาะ standard) — ค่าเริ่มต้น { day: 'numeric', month: 'short', year: 'numeric' } */
   options?: Intl.DateTimeFormatOptions;
-  /**
-   * The locale to use for formatting. Affects both 'standard' and 'relative' formats.
-   * Defaults to 'th-TH' (maps to 'th' for date-fns).
-   */
+  /** ค่าเริ่มต้น th-TH (relative ใช้ date-fns locale th/enUS ตามตัวหน้า) */
   locale?: string;
-  /**
-   * The time zone to use (used only if formatType is 'standard').
-   * Defaults to 'Asia/Bangkok' (GMT+7).
-   */
+  /** โซนเวลา (เฉพาะ standard) ค่าเริ่มต้น Asia/Bangkok */
   timeZone?: string;
-  /**
-   * Placeholder text to display while the component is mounting or if the date is invalid.
-   * Defaults to "-".
-   */
+  /** ข้อความก่อน mount / วันที่ไม่ถูกต้อง ค่าเริ่มต้น "-" */
   placeholder?: string;
-  /**
-   * Optional CSS class name(s) to apply to the span element.
-   */
   className?: string;
-  /**
-   * If formatType is 'relative', automatically update the time every interval (in milliseconds).
-   * Set to 0 or undefined to disable automatic updates. Defaults to 60000 (1 minute).
-   */
+  /** relative: คำนวณใหม่ทุก N ms (ค่าเริ่มต้น 60000) — 0/undefined = ไม่อัปเดตเอง; ทุก instance แชร์ timer เดียว */
   updateInterval?: number;
 }
 
-// Helper to map locale string to date-fns locale object
-const getLocaleObject = (localeString: string): Locale => {
-  switch (localeString.toLowerCase().split("-")[0]) {
-    case "th":
-      return th;
-    default:
-      return enUS;
-  }
+const getLocaleObject = (localeString: string): Locale =>
+  localeString.toLowerCase().split("-")[0] === "th" ? th : enUS;
+
+const DEFAULT_OPTIONS: Intl.DateTimeFormatOptions = {
+  day: "numeric",
+  month: "short",
+  year: "numeric",
 };
 
+/**
+ * แสดงวันที่ฝั่ง client หลัง mount เท่านั้น (กัน hydration mismatch จากโซนเวลา/"ตอนนี้" ของ server)
+ * ก่อน mount และเมื่อวันที่ไม่ถูกต้องแสดง `placeholder`
+ */
 export function ClientDateFormatter({
   date,
   formatType = "standard",
@@ -69,120 +48,34 @@ export function ClientDateFormatter({
   className,
   updateInterval = 60000,
 }: ClientDateFormatterProps) {
-  const [isMounted, setIsMounted] = useState(false);
-  const intervalRef = useRef<NodeJS.Timeout | null>(null);
-
-  // [EDIT] 👇 Wrap formatDate logic in useCallback
-  const formatDateCallback = useCallback(() => {
-    if (date == null) {
-      return placeholder;
-    }
-
+  const mounted = useMounted();
+  // relative เท่านั้นที่ต้อง tick — standard ไม่ขึ้นกับ "ตอนนี้"
+  const tick = useTicker(mounted && formatType === "relative" ? updateInterval : 0);
+  // key ของ options สำหรับ cache/memo (object literal จากผู้เรียกเปลี่ยน identity ทุก render)
+  const optionsKey = userOptions ? JSON.stringify(userOptions) : "";
+  // "ตอนนี้" ผูกกับ tick — relative จึงคำนวณใหม่ตาม interval (ไม่ใช่ทุก render)
+  // biome-ignore lint/correctness/useExhaustiveDependencies: tick คือสัญญาณให้อ่านเวลาใหม่
+  const now = useMemo(() => new Date(), [tick]);
+
+  const text = useMemo(() => {
+    if (!mounted || date == null) return placeholder;
+    const dateObj = new Date(date);
+    if (Number.isNaN(dateObj.getTime())) return placeholder;
     try {
-      const dateObj = new Date(date);
-      if (Number.isNaN(dateObj.getTime())) {
-        console.warn("ClientDateFormatter received an invalid date:", date);
-        return placeholder;
-      }
-
-      const localeObj = getLocaleObject(locale);
-
       if (formatType === "relative") {
-        return formatDistanceToNow(dateObj, {
-          addSuffix: true,
-          locale: localeObj,
-        });
-      } else {
-        const defaultOptions: Intl.DateTimeFormatOptions = {
-          day: "numeric",
-          month: "short",
-          year: "numeric",
-          timeZone: timeZone,
-        };
-        const finalOptions = { ...defaultOptions, ...userOptions };
-        const formatter = new Intl.DateTimeFormat(locale, finalOptions);
-        return formatter.format(dateObj);
+        return formatDistance(dateObj, now, { addSuffix: true, locale: getLocaleObject(locale) });
       }
+      const opts: Intl.DateTimeFormatOptions = {
+        ...DEFAULT_OPTIONS,
+        timeZone,
+        ...(optionsKey ? (JSON.parse(optionsKey) as Intl.DateTimeFormatOptions) : {}),
+      };
+      return getDateTimeFormat(locale, opts).format(dateObj);
     } catch (error) {
-      console.error("Error formatting date in ClientDateFormatter:", error);
+      console.error("ClientDateFormatter:", error);
       return placeholder;
     }
-    // Add dependencies that formatDate relies on
-  }, [date, formatType, locale, placeholder, timeZone, userOptions]);
-
-  const [, setTick] = useState(0);
-
-  useEffect(() => {
-    queueMicrotask(() => {
-      setIsMounted(true);
-    });
-  }, []);
-
-  useEffect(() => {
-    if (!isMounted) return;
-
-    if (formatType === "relative" && updateInterval && updateInterval > 0) {
-      intervalRef.current = setInterval(() => {
-        setTick((t) => t + 1);
-      }, updateInterval);
-    }
+  }, [mounted, date, formatType, locale, timeZone, optionsKey, placeholder, now]);
 
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-        intervalRef.current = null;
-      }
-    };
-  }, [isMounted, updateInterval, formatType]);
-
-  if (!isMounted) {
-    return <span className={className}>{placeholder}</span>;
-  }
-
-  // Use tick as a dependency so it re-renders (state change triggers it)
-  return <span className={className}>{formatDateCallback()}</span>;
+  return <span className={className}>{text}</span>;
 }
-
-/*
-
-ตัวอย่าง
-
-import { ClientDateFormatter } from '@/components/shared/client-date-formatter';
-
-// ...
-
-// แสดงวันที่แบบไทย (Default)
-<ClientDateFormatter date={someDate} />
-
-// แสดงแบบ Relative Time (เช่น "ประมาณ 2 ชั่วโมงที่แล้ว") อัปเดตทุกนาที (default)
-<ClientDateFormatter date={auditLog.createdAt} formatType="relative" />
-
-// แสดงแบบ Relative Time ภาษาอังกฤษ อัปเดตทุก 30 วินาที
-<ClientDateFormatter
-  date={auditLog.createdAt}
-  formatType="relative"
-  locale="en-US"
-  updateInterval={30000}
-/>
-
-// แสดงแบบ Relative Time แต่ไม่อัปเดตอัตโนมัติ
-<ClientDateFormatter
-  date={auditLog.createdAt}
-  formatType="relative"
-  updateInterval={0} // Disable interval
-/>
-
-// แสดงวันที่เวลาแบบ Standard ภาษาอังกฤษ โซนเวลา New York
-<ClientDateFormatter
-  date={someDate}
-  formatType="standard" // Explicitly standard
-  locale="en-US"
-  timeZone="America/New_York"
-  options={{ hour: '2-digit', minute: '2-digit' }}
-/>
-
-
-
-
-
-*/

package/src/components/ui/relative-date.tsx

@@ -1,8 +1,8 @@
 "use client";
 
+import { useMounted } from "@suphark/ui/hooks/use-mounted";
 import { formatRelativeThaiDate, formatThaiFullDate } from "@suphark/ui/lib/formatters";
 import { Calendar } from "lucide-react";
-import { useSyncExternalStore } from "react";
 
 interface RelativeDateProps {
   date: Date | string | number | null | undefined;
@@ -15,15 +15,6 @@ interface RelativeDateProps {
   emptyText?: string;
 }
 
-// true เฉพาะฝั่ง client หลัง hydrate — server/ตอน hydrate ได้ false เสมอ
-const subscribeNoop = () => () => {};
-const useMounted = () =>
-  useSyncExternalStore(
-    subscribeNoop,
-    () => true,
-    () => false,
-  );
-
 /**
  * วันที่แบบสัมพัทธ์ภาษาไทย ("วันนี้", "เมื่อวาน", "3 วันที่ผ่านมา") + วันที่เต็มใน tooltip
  * คำนวณเฉพาะฝั่ง client หลัง mount: "ตอนนี้" ของ server (UTC, module โหลดไว้ก่อน) กับของ browser

package/src/hooks/use-mounted.ts

@@ -0,0 +1,16 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+
+const subscribeNoop = () => () => {};
+const getClient = () => true;
+const getServer = () => false;
+
+/**
+ * true เฉพาะฝั่ง client หลัง hydrate — บน server และระหว่าง hydrate ได้ false เสมอ
+ * ใช้กับค่าที่ server กับ browser คำนวณต่างกันได้ (เวลา "ตอนนี้", โซนเวลา, locale ของเครื่อง, localStorage)
+ * ผ่าน `useSyncExternalStore` จึงไม่มี render รอบเพิ่มแบบ `useEffect(() => setMounted(true))`
+ */
+export function useMounted(): boolean {
+  return useSyncExternalStore(subscribeNoop, getClient, getServer);
+}

package/src/hooks/use-ticker.ts

@@ -0,0 +1,53 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+
+/**
+ * นาฬิกากลางต่อ interval — ทุก component ที่ขอ interval เท่ากันแชร์ `setInterval` ตัวเดียว
+ * (ตาราง 50 แถวที่แสดง "x นาทีที่แล้ว" เดิมมี 50 timers) — เริ่มเมื่อมีผู้ใช้ตัวแรก หยุดเมื่อตัวสุดท้ายถอด
+ */
+type Ticker = { listeners: Set<() => void>; tick: number; handle: number | null };
+const tickers = new Map<number, Ticker>();
+
+function getTicker(intervalMs: number): Ticker {
+  let t = tickers.get(intervalMs);
+  if (!t) {
+    t = { listeners: new Set(), tick: 0, handle: null };
+    tickers.set(intervalMs, t);
+  }
+  return t;
+}
+
+function subscribe(intervalMs: number, listener: () => void): () => void {
+  const t = getTicker(intervalMs);
+  t.listeners.add(listener);
+  if (t.handle === null) {
+    t.handle = window.setInterval(() => {
+      t.tick += 1;
+      for (const l of t.listeners) l();
+    }, intervalMs);
+  }
+  return () => {
+    t.listeners.delete(listener);
+    if (t.listeners.size === 0 && t.handle !== null) {
+      window.clearInterval(t.handle);
+      t.handle = null;
+    }
+  };
+}
+
+const subscribeNoop = () => () => {};
+const zero = () => 0;
+
+/**
+ * คืนตัวเลขที่เพิ่มทุก `intervalMs` (ใช้เป็น dep ให้คำนวณใหม่) — `0`/undefined = ไม่ tick
+ * บน server ได้ 0 เสมอ
+ */
+export function useTicker(intervalMs: number | undefined): number {
+  const active = typeof intervalMs === "number" && intervalMs > 0;
+  return useSyncExternalStore(
+    active ? (l) => subscribe(intervalMs, l) : subscribeNoop,
+    active ? () => getTicker(intervalMs).tick : zero,
+    zero,
+  );
+}

package/src/index.ts

@@ -13,6 +13,7 @@
 export type { DateRange } from "react-day-picker";
 // sonner: `toast()` คู่กับ <Toaster /> — แอปไม่ต้องติดตั้ง sonner เอง
 export { toast } from "sonner";
+export { ActionForm } from "./components/shared/action-form";
 export * from "./components/shared/button";
 export { ClientRedirect } from "./components/shared/client-redirect";
 export { Combobox } from "./components/shared/combobox";
@@ -51,6 +52,7 @@ export {
 export { FormFieldRadioCards } from "./components/shared/form/form-field-radio-cards";
 export { FormFieldRadioGroup } from "./components/shared/form/form-field-radio-group";
 export { FormFieldSelect, type SelectOption } from "./components/shared/form/form-field-select";
+export { CheckboxField, LabeledField } from "./components/shared/form/labeled-field";
 export {
   SimpleSelect,
   type SimpleSelectGroup,
@@ -58,7 +60,7 @@ export {
   type SimpleSelectOptions,
   type SimpleSelectProps,
 } from "./components/shared/form/simple-select";
-export { FormMessage, type FormState } from "./components/shared/form-message";
+export { type FormAction, FormMessage, type FormState } from "./components/shared/form-message";
 export { Initials, initialsOf } from "./components/shared/initials";
 export { ErrorState, type RouteError } from "./components/shared/layout/error-state";
 export {
@@ -156,9 +158,12 @@ export * from "./components/ui/tooltip";
 export { useConfirm } from "./hooks/use-confirm";
 export { useCopyToClipboard } from "./hooks/use-copy-to-clipboard";
 export { useIsMobile } from "./hooks/use-mobile";
+export { useMounted } from "./hooks/use-mounted";
+export { useTicker } from "./hooks/use-ticker";
 export { useTrackedState } from "./hooks/use-tracked-state";
 export { copyText, selectContents } from "./lib/copy-text";
 export { formatRelativeThaiDate, formatThaiFullDate } from "./lib/formatters";
+export { getDateTimeFormat, getNumberFormat } from "./lib/intl-cache";
 export {
   type AtomicPermissionRequirement,
   type CheckPermissionOptions,

package/src/lib/intl-cache.ts

@@ -0,0 +1,31 @@
+/**
+ * cache ตัว formatter ของ Intl — constructor ของ Intl.NumberFormat/DateTimeFormat แพง (โหลดข้อมูล locale)
+ * ตารางที่มีเซลล์ตัวเลข/วันที่หลายร้อยช่องจะสร้างซ้ำทุกเซลล์ทุก render ถ้าไม่ cache
+ * key = locale + options (JSON) — options ของเราเป็น object เล็ก ๆ ไม่มี key แปลก
+ */
+const numberFormats = new Map<string, Intl.NumberFormat>();
+const dateTimeFormats = new Map<string, Intl.DateTimeFormat>();
+
+function keyOf(locale: string, options: object | undefined): string {
+  return `${locale}|${options ? JSON.stringify(options) : ""}`;
+}
+
+export function getNumberFormat(locale: string, options?: Intl.NumberFormatOptions) {
+  const key = keyOf(locale, options);
+  let f = numberFormats.get(key);
+  if (!f) {
+    f = new Intl.NumberFormat(locale, options);
+    numberFormats.set(key, f);
+  }
+  return f;
+}
+
+export function getDateTimeFormat(locale: string, options?: Intl.DateTimeFormatOptions) {
+  const key = keyOf(locale, options);
+  let f = dateTimeFormats.get(key);
+  if (!f) {
+    f = new Intl.DateTimeFormat(locale, options);
+    dateTimeFormats.set(key, f);
+  }
+  return f;
+}

package/src/lib/status-colors.ts

@@ -1,3 +1,4 @@
+/* ui-audit-ok-file: ชุดสีให้ผู้ใช้เลือก (ColorName) เป็น palette โดยนิยาม — ข้อยกเว้นที่จดไว้ใน docs/design-system.md */
 export type ColorName = "gray" | "red" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink";
 
 export type ColorTheme = {

package/src/next.ts

@@ -15,6 +15,7 @@ export {
   PageBreadcrumb,
   type PageBreadcrumbItem,
 } from "./components/shared/navigation/page-breadcrumb";
+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";
 export {