@suphark/ui 0.5.0 → 0.6.0

package/src/components/shared/form-dialog.tsx

@@ -20,11 +20,9 @@ import {
   useEffect,
   useState,
 } from "react";
-import { FormMessage, type FormState } from "./form-message";
+import { type FormAction, FormMessage, type FormState } from "./form-message";
 import { useUiText } from "./ui-text";
 
-type FormAction = (prev: FormState, formData: FormData) => Promise<FormState>;
-
 /**
  * ฟอร์ม "สร้าง/แก้ไข" ในกล่องโต้ตอบ — เปิดจากปุ่ม (trigger) ปิดเองเมื่อสำเร็จ
  * ใช้แทนฟอร์มที่เคยวางค้างไว้บนหน้า เพื่อให้หน้า list สะอาดและมีการกระทำหลักอันเดียว

package/src/components/shared/form-message.tsx

@@ -5,6 +5,9 @@ import { useUiText } from "./ui-text";
 
 export type FormState = { ok: true; message?: string } | { ok: false; error: string } | null;
 
+/** server action สำหรับ FormDialog/ActionForm: (state ก่อนหน้า, FormData) → FormState */
+export type FormAction = (prev: FormState, formData: FormData) => Promise<FormState>;
+
 /** ข้อความผลของ server action ใต้ฟอร์ม */
 export function FormMessage({
   state,

package/src/components/shared/navigation/stepper.tsx

@@ -0,0 +1,96 @@
+import { StatusBadge, type Tone } from "@suphark/ui/components/shared/status-badge";
+import { cn } from "@suphark/ui/lib/utils";
+import { AlertTriangle, Check } from "lucide-react";
+import Link from "next/link";
+
+export type StepStatus = "done" | "todo" | "problem";
+
+export interface StepperStep {
+  key: string;
+  href: string;
+  label: string;
+  status: StepStatus;
+  /** ป้ายสถานะเล็กใต้ชื่อขั้น เช่น "ตั้งค่าแล้ว", "ยังไม่มี redirect URI" */
+  statusLabel?: string;
+}
+
+const TONE: Record<StepStatus, Tone> = { done: "success", todo: "neutral", problem: "warning" };
+
+/**
+ * แถบขั้นตอน wizard ที่ทุกขั้นกดเข้าได้ (ไม่บังคับลำดับ) — แนวนอนเลื่อนได้บนจอแคบ / แนวตั้งบน lg
+ * ไม่มี client state → ใช้จาก server component ได้ (อยู่ที่ `@suphark/ui/next` เพราะใช้ next/link)
+ *
+ *   <Stepper current="basics" ariaLabel="ขั้นตอนตั้งค่าแอป" steps={[
+ *     { key: "basics", href: `/apps/${id}`, label: "ข้อมูลพื้นฐาน", status: "done", statusLabel: "ครบ" },
+ *     { key: "oauth", href: `/apps/${id}/oauth`, label: "OAuth", status: "problem", statusLabel: "ไม่มี redirect URI" },
+ *   ]} />
+ */
+export function Stepper({
+  steps,
+  current,
+  ariaLabel = "ขั้นตอน",
+  className,
+}: {
+  steps: StepperStep[];
+  /** key ของขั้นที่กำลังอยู่ */
+  current: string;
+  ariaLabel?: string;
+  className?: string;
+}) {
+  return (
+    <nav aria-label={ariaLabel} className={className}>
+      <ol className="no-scrollbar flex gap-1 overflow-x-auto lg:flex-col lg:overflow-visible">
+        {steps.map((step, i) => {
+          const active = step.key === current;
+          return (
+            <li key={step.key} className="shrink-0 lg:shrink">
+              <Link
+                href={step.href}
+                aria-current={active ? "step" : undefined}
+                className={cn(
+                  "flex items-center gap-3 rounded-md px-3 py-2 text-sm no-underline outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring/50",
+                  active && "bg-accent font-medium",
+                )}
+              >
+                <StepMark status={step.status} index={i + 1} />
+                <span className="flex min-w-0 flex-col gap-0.5">
+                  <span className="truncate">{step.label}</span>
+                  {step.statusLabel && (
+                    <StatusBadge
+                      tone={TONE[step.status]}
+                      className="w-fit px-1.5 py-0 font-normal text-[0.7rem] leading-4"
+                    >
+                      {step.statusLabel}
+                    </StatusBadge>
+                  )}
+                </span>
+              </Link>
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}
+
+function StepMark({ status, index }: { status: StepStatus; index: number }) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "flex size-6 shrink-0 items-center justify-center rounded-full border font-medium text-xs",
+        status === "done" && "border-success bg-success text-success-foreground",
+        status === "problem" && "border-warning text-warning",
+        status === "todo" && "border-border text-muted-foreground",
+      )}
+    >
+      {status === "done" ? (
+        <Check className="size-3.5" />
+      ) : status === "problem" ? (
+        <AlertTriangle className="size-3.5" />
+      ) : (
+        index
+      )}
+    </span>
+  );
+}

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/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);

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,5 +1,6 @@
 "use client";
 
+import { useMounted } from "@suphark/ui/hooks/use-mounted";
 import { formatRelativeThaiDate, formatThaiFullDate } from "@suphark/ui/lib/formatters";
 import { Calendar } from "lucide-react";
 
@@ -8,33 +9,53 @@ interface RelativeDateProps {
   showIcon?: boolean;
   className?: string;
   iconClassName?: string;
+  /** ข้อความนำหน้าใน tooltip (ค่าเริ่มต้น "วันที่") เช่น "วันที่อ้างอิงราคา" */
+  titlePrefix?: string;
+  /** ข้อความเมื่อไม่มีวันที่ */
+  emptyText?: string;
 }
 
+/**
+ * วันที่แบบสัมพัทธ์ภาษาไทย ("วันนี้", "เมื่อวาน", "3 วันที่ผ่านมา") + วันที่เต็มใน tooltip
+ * คำนวณเฉพาะฝั่ง client หลัง mount: "ตอนนี้" ของ server (UTC, module โหลดไว้ก่อน) กับของ browser
+ * ต่างกันได้ทั้งโซนเวลาและข้ามวัน → ถ้า render บน server จะ hydration mismatch (เจอจริงบน Vercel)
+ */
 export function RelativeDate({
   date,
   showIcon = true,
-  className = "flex items-center gap-0.5 text-slate-600 font-medium",
-  iconClassName = "h-2.5 w-2.5 text-slate-400 shrink-0",
+  className = "flex items-center gap-0.5 font-medium text-muted-foreground",
+  iconClassName = "h-2.5 w-2.5 shrink-0 text-muted-foreground/60",
+  titlePrefix = "วันที่",
+  emptyText = "ไม่ได้ระบุ",
 }: RelativeDateProps) {
+  const mounted = useMounted();
+
   if (!date) {
     return (
       <span
-        className="flex items-center gap-0.5 font-normal text-slate-400 text-xs italic"
-        title="ยังไม่ได้ระบุวันที่อ้างอิงราคา (Price Reference Date)"
+        className="flex items-center gap-0.5 font-normal text-muted-foreground text-xs italic"
+        title={`${titlePrefix}: ${emptyText}`}
       >
         {showIcon && <Calendar className={iconClassName} />}
-        ไม่ได้ระบุ
+        {emptyText}
       </span>
     );
   }
 
-  const relativeText = formatRelativeThaiDate(date);
-  const fullText = formatThaiFullDate(date);
+  // ก่อน mount แสดงตัวยึดที่ไม่ขึ้นกับเวลา (กัน layout กระโดดน้อยที่สุด)
+  if (!mounted) {
+    return (
+      <span className={className} aria-hidden="true">
+        {showIcon && <Calendar className={iconClassName} />}
+        &nbsp;
+      </span>
+    );
+  }
 
   return (
-    <span className={className} title={`วันที่อ้างอิงราคาจริง: ${fullText}`}>
+    <span className={className} title={`${titlePrefix}: ${formatThaiFullDate(date)}`}>
       {showIcon && <Calendar className={iconClassName} />}
-      {relativeText}
+      {formatRelativeThaiDate(date)}
     </span>
   );
 }

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);
+}