@suphark/ui 0.18.0 → 0.20.0

package/src/components/shared/filter-bar.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import { NativeSelect, NativeSelectOption } from "@suphark/ui/components/ui/native-select";
+import { cn } from "@suphark/ui/lib/utils";
+import { XIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import { SearchInput } from "./form/search-input";
+import { useUiText } from "./ui-text";
+
+export interface FilterBarFilter {
+  id: string;
+  /** aria-label ของ select (ไม่มี label ที่มองเห็น) */
+  label: string;
+  value: string;
+  onValueChange: (value: string) => void;
+  options: ReadonlyArray<{ value: string; label: string }>;
+  /** ค่าที่หมายถึง "ทั้งหมด" (ไม่กรอง) — ใช้ตัดสินว่ามีตัวกรองค้างไหม และค่าที่ปุ่มล้างตั้งกลับ (ค่าเริ่มต้น "") */
+  allValue?: string;
+  className?: string;
+}
+
+/**
+ * แถบค้นหา + ตัวกรองเหนือตาราง/รายการแบบ client-side (ยกจาก Pi Auth — มี 14 หน้าเขียนซ้ำ):
+ * ช่องค้นหาซ้าย · select ตัวกรองขวา · ปุ่ม "ล้างตัวกรอง" โผล่เมื่อมีอะไรค้าง
+ * ตารางที่ใช้ tanstack ให้ใช้ toolbar ของ `@suphark/ui/data-table` แทน
+ *
+ *   <FilterBar
+ *     search={{ value: q, onValueChange: setQ, placeholder: "ค้นหาชื่อหรืออีเมล" }}
+ *     filters={[{ id: "role", label: "บทบาท", value: role, onValueChange: setRole, allValue: "ALL",
+ *                 options: [{ value: "ALL", label: "ทุกบทบาท" }, { value: "admin", label: "ผู้ดูแล" }] }]}
+ *   />
+ */
+export function FilterBar({
+  search,
+  filters = [],
+  onClear,
+  active,
+  children,
+  className,
+}: {
+  search?: { value: string; onValueChange: (value: string) => void; placeholder?: string };
+  filters?: FilterBarFilter[];
+  /** ไม่ส่ง = ล้างช่องค้นหา + ตั้งทุกตัวกรองกลับ `allValue` ให้เอง */
+  onClear?: () => void;
+  /** บังคับสถานะ "มีตัวกรองค้าง" (เช่นมีตัวกรองใน children) — ไม่ส่ง = คำนวณจาก search/filters */
+  active?: boolean;
+  /** ตัวกรองแบบอื่นที่แอปประกอบเอง (DateRangePicker, ToggleGroup …) วางต่อจาก select */
+  children?: ReactNode;
+  className?: string;
+}) {
+  const text = useUiText();
+  const isActive =
+    active ?? ((search?.value ?? "") !== "" || filters.some((f) => f.value !== (f.allValue ?? "")));
+
+  const clear = () => {
+    if (onClear) return onClear();
+    search?.onValueChange("");
+    for (const f of filters) f.onValueChange(f.allValue ?? "");
+  };
+
+  return (
+    <div
+      data-slot="filter-bar"
+      role="search"
+      aria-label={text.filters?.label ?? "ตัวกรอง"}
+      className={cn(
+        "flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between",
+        className,
+      )}
+    >
+      {search && (
+        <SearchInput
+          value={search.value}
+          onValueChange={search.onValueChange}
+          placeholder={search.placeholder}
+          groupClassName="lg:max-w-sm flex-1"
+        />
+      )}
+      {(filters.length > 0 || children || isActive) && (
+        <div className="flex flex-wrap items-center gap-2">
+          {filters.map((f) => (
+            <NativeSelect
+              key={f.id}
+              aria-label={f.label}
+              value={f.value}
+              onChange={(e) => f.onValueChange(e.target.value)}
+              className={cn("w-auto max-w-48", f.className)}
+            >
+              {f.options.map((o) => (
+                <NativeSelectOption key={o.value} value={o.value}>
+                  {o.label}
+                </NativeSelectOption>
+              ))}
+            </NativeSelect>
+          ))}
+          {children}
+          {isActive && (
+            <Button type="button" variant="ghost" size="sm" onClick={clear}>
+              <XIcon />
+              {text.filters?.clear ?? "ล้างตัวกรอง"}
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/shared/form/slider-field.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { Label } from "@suphark/ui/components/ui/label";
+import { Slider } from "@suphark/ui/components/ui/slider";
+import { cn } from "@suphark/ui/lib/utils";
+import { type ReactNode, useId } from "react";
+
+export interface SliderFieldProps {
+  label: ReactNode;
+  value: number;
+  onValueChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  /** หน่วยต่อท้ายตัวเลข เช่น "%" หรือ " px" */
+  unit?: string;
+  /** จัดรูปแบบค่าที่แสดงเอง (ทับ `unit`) */
+  formatValue?: (value: number) => ReactNode;
+  description?: ReactNode;
+  disabled?: boolean;
+  /** sm = ระยะห่างแคบ + ป้ายตัวเล็ก */
+  size?: "sm" | "default";
+  id?: string;
+  className?: string;
+}
+
+/**
+ * ช่องเลื่อนพร้อมป้ายชื่อและค่าปัจจุบันมุมขวา (ตั้งค่าที่เป็นตัวเลขต่อเนื่อง เช่น ความละเอียด/ความทึบ)
+ * — ยกจาก Pi PDF; ค่าเป็น number เดี่ยว (ช่วงค่าให้ใช้ `Slider` ตรง ๆ)
+ */
+export function SliderField({
+  label,
+  value,
+  onValueChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  unit = "",
+  formatValue,
+  description,
+  disabled = false,
+  size = "default",
+  id,
+  className,
+}: SliderFieldProps) {
+  const generatedId = useId();
+  const sliderId = id ?? generatedId;
+  return (
+    <div
+      data-slot="slider-field"
+      className={cn(
+        "flex flex-col",
+        size === "sm" ? "gap-1.5" : "gap-2.5",
+        disabled && "pointer-events-none opacity-60",
+        className,
+      )}
+    >
+      <div className="flex items-center justify-between gap-4">
+        <Label htmlFor={sliderId} className={size === "sm" ? "text-xs" : "font-medium text-sm"}>
+          {label}
+        </Label>
+        <span className="font-medium font-mono text-muted-foreground text-xs tabular-nums">
+          {formatValue ? formatValue(value) : `${value}${unit}`}
+        </span>
+      </div>
+      <Slider
+        id={sliderId}
+        value={value}
+        onValueChange={(next) => onValueChange(typeof next === "number" ? next : (next[0] ?? min))}
+        min={min}
+        max={max}
+        step={step}
+        disabled={disabled}
+        aria-label={typeof label === "string" ? label : undefined}
+      />
+      {description && <p className="text-muted-foreground text-xs">{description}</p>}
+    </div>
+  );
+}

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { SecretReveal } from "@suphark/ui/components/shared/secret-reveal";
 import { Button } from "@suphark/ui/components/ui/button";
 import {
   Dialog,
@@ -44,6 +45,9 @@ export function FormDialog<TData = undefined>({
   onOpenChange,
   keepOpen = false,
   renderSuccess,
+  revealSuccess = false,
+  successTitle,
+  successDescription,
   contentClassName,
 }: {
   /** ปุ่มเปิด (ต้องเป็น <Button> ของ shadcn — Base UI จะใช้ตัวนี้เป็น trigger โดยตรง) */
@@ -64,6 +68,17 @@ export function FormDialog<TData = undefined>({
    * ปิดแล้วเปิดใหม่ = ฟอร์มว่าง รอบใหม่ (state เดิมรวม data ถูกทิ้ง ไม่ถูกส่งกลับไปกับ submit ครั้งถัดไป)
    */
   renderSuccess?: (state: Extract<FormState<TData>, { ok: true }>) => ReactNode;
+  /**
+   * แบบไม่ต้องส่งฟังก์ชัน (ใช้จาก **server component** ได้): สำเร็จแล้วถ้า `state.data` เป็น
+   * `{ values: Record<string, string> }` จะแสดง `SecretReveal` ให้เอง พร้อมปุ่ม "เสร็จแล้ว"
+   * (เคส "สร้างแล้วโชว์ secret ครั้งเดียว" — webhook secret / SCIM token / service account key / client secret)
+   * `renderSuccess` เป็นฟังก์ชันจึงข้าม boundary ไม่ได้ (ขอจาก Pi Auth)
+   */
+  revealSuccess?: boolean;
+  /** หัวข้อของ `SecretReveal` เมื่อใช้ `revealSuccess` (ค่าเริ่มต้น `UiText.showOnce`) */
+  successTitle?: string;
+  /** ข้อความใต้หัวข้อของหน้าจอสำเร็จ (แทน `description` ของฟอร์ม) */
+  successDescription?: ReactNode;
   /** ความกว้าง/คลาสของ DialogContent (ค่าเริ่มต้น sm:max-w-md) */
   contentClassName?: string;
 }) {
@@ -84,8 +99,11 @@ export function FormDialog<TData = undefined>({
           description={description}
           action={action}
           submitLabel={submitLabel}
-          keepOpen={keepOpen || renderSuccess !== undefined}
+          keepOpen={keepOpen || renderSuccess !== undefined || revealSuccess}
           renderSuccess={renderSuccess}
+          revealSuccess={revealSuccess}
+          successTitle={successTitle}
+          successDescription={successDescription}
           close={() => setOpen(false)}
         >
           {children}
@@ -103,6 +121,9 @@ function FormDialogBody<TData>({
   children,
   keepOpen,
   renderSuccess,
+  revealSuccess,
+  successTitle,
+  successDescription,
   close,
 }: {
   title: ReactNode;
@@ -112,6 +133,9 @@ function FormDialogBody<TData>({
   children: ReactNode | ((ctx: FormRenderContext) => ReactNode);
   keepOpen: boolean;
   renderSuccess?: (state: Extract<FormState<TData>, { ok: true }>) => ReactNode;
+  revealSuccess?: boolean;
+  successTitle?: string;
+  successDescription?: ReactNode;
   close: () => void;
 }) {
   const router = useRouter();
@@ -129,15 +153,19 @@ function FormDialogBody<TData>({
     }
   }, [state, submitted]);
 
-  if (state?.ok && renderSuccess) {
+  const revealValues = revealSuccess && state?.ok ? revealableValues(state.data) : null;
+
+  if (state?.ok && (renderSuccess || revealValues)) {
+    const successDesc = successDescription ?? description;
     return (
       <div className="flex min-h-0 flex-1 flex-col gap-4">
         <DialogHeader>
           <DialogTitle>{title}</DialogTitle>
-          {description && <DialogDescription>{description}</DialogDescription>}
+          {successDesc && <DialogDescription>{successDesc}</DialogDescription>}
         </DialogHeader>
         <div className="-mx-1 flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-1">
-          {renderSuccess(state)}
+          {renderSuccess ? renderSuccess(state) : null}
+          {revealValues && <SecretReveal values={revealValues} title={successTitle} />}
         </div>
         <DialogFooter>
           <Button type="button" onClick={close}>
@@ -179,3 +207,14 @@ function FormDialogBody<TData>({
     </form>
   );
 }
+
+/** `data` ของ server action เป็น `{ values: Record<string, string> }` ไหม (ใช้กับ `revealSuccess`) */
+function revealableValues(data: unknown): Record<string, string> | null {
+  if (!data || typeof data !== "object" || !("values" in data)) return null;
+  const { values } = data as { values: unknown };
+  if (!values || typeof values !== "object") return null;
+  const entries = Object.entries(values as Record<string, unknown>).filter(
+    ([, v]) => typeof v === "string",
+  ) as Array<[string, string]>;
+  return entries.length > 0 ? Object.fromEntries(entries) : null;
+}

package/src/components/shared/month-stepper.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  compareMonth,
+  currentMonthKey,
+  formatMonthKey,
+  type MonthKey,
+  shiftMonth,
+} from "@suphark/ui/lib/month";
+import { cn } from "@suphark/ui/lib/utils";
+import { CalendarDays, ChevronLeft, ChevronRight } from "lucide-react";
+import { useCallback, useState } from "react";
+import { useUiText } from "./ui-text";
+
+export interface MonthStepperProps {
+  /** เดือนที่เลือก `"YYYY-MM"` */
+  value: MonthKey;
+  onValueChange: (value: MonthKey) => void;
+  /** เดือนแรก/สุดท้ายที่เลือกได้ (ปุ่ม ‹ › ปิดเมื่อถึงขอบ) */
+  min?: MonthKey;
+  max?: MonthKey;
+  /** `th-TH` = พ.ศ. (ค่าเริ่มต้น), `th-TH-u-ca-gregory` = ไทย ค.ศ., `en-US` */
+  locale?: string;
+  /** ชื่อเดือนเต็ม/ย่อ (มือถือแคบ ๆ ใช้ short) */
+  format?: "long" | "short";
+  /** ข้อความกลางเอง (เช่น "รอบบิล ต.ค. 69") — ไม่ส่ง = ชื่อเดือนตาม locale */
+  formatLabel?: (value: MonthKey) => string;
+  /** กดชื่อเดือนแล้วกลับเดือนปัจจุบัน (ค่าเริ่มต้น true) */
+  resetToCurrent?: boolean;
+  className?: string;
+}
+
+/**
+ * เลือกเดือนแบบ ‹ เดือน › — กดชื่อเดือนเพื่อกลับเดือนนี้ (ยกจาก DueBell `MonthSelector`)
+ * ใช้คู่กับ `CalendarMonthGrid month` ได้เลย (รูปแบบ `"YYYY-MM"` เดียวกัน)
+ *
+ *   const { month, setMonth } = useMonthCursor();
+ *   <MonthStepper value={month} onValueChange={setMonth} />
+ */
+export function MonthStepper({
+  value,
+  onValueChange,
+  min,
+  max,
+  locale = "th-TH",
+  format = "long",
+  formatLabel,
+  resetToCurrent = true,
+  className,
+}: MonthStepperProps) {
+  const text = useUiText().month;
+  const prev = shiftMonth(value, -1);
+  const next = shiftMonth(value, 1);
+  const canPrev = !min || compareMonth(prev, min) >= 0;
+  const canNext = !max || compareMonth(next, max) <= 0;
+  const now = currentMonthKey();
+  const nowInRange = (!min || compareMonth(now, min) >= 0) && (!max || compareMonth(now, max) <= 0);
+  const label = formatLabel ? formatLabel(value) : formatMonthKey(value, locale, format);
+  const isCurrent = value === now;
+
+  return (
+    <div
+      data-slot="month-stepper"
+      className={cn("inline-flex items-center gap-1 rounded-lg border bg-card p-1", className)}
+    >
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        disabled={!canPrev}
+        onClick={() => onValueChange(prev)}
+        aria-label={text?.previous ?? "เดือนก่อน"}
+      >
+        <ChevronLeft />
+      </Button>
+      {resetToCurrent ? (
+        <Button
+          type="button"
+          variant="ghost"
+          disabled={isCurrent || !nowInRange}
+          // ปุ่มกลางแสดงชื่อเดือนเสมอ — ปิดเมื่ออยู่เดือนนี้แล้วแต่ยังต้องอ่านออก ไม่ให้จางแบบ disabled ปกติ
+          className="min-w-32 gap-2 tabular-nums disabled:opacity-100"
+          onClick={() => onValueChange(now)}
+          title={isCurrent ? undefined : (text?.current ?? "กลับไปเดือนนี้")}
+          aria-live="polite"
+        >
+          <CalendarDays className="text-muted-foreground" />
+          {label}
+        </Button>
+      ) : (
+        <span
+          className="flex min-w-32 items-center justify-center gap-2 px-2 font-medium text-sm tabular-nums"
+          aria-live="polite"
+        >
+          <CalendarDays className="size-4 text-muted-foreground" />
+          {label}
+        </span>
+      )}
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        disabled={!canNext}
+        onClick={() => onValueChange(next)}
+        aria-label={text?.next ?? "เดือนถัดไป"}
+      >
+        <ChevronRight />
+      </Button>
+    </div>
+  );
+}
+
+/**
+ * state เดือนปัจจุบัน + ตัวเลื่อน — `initial` ไม่ส่ง = เดือนนี้
+ * ต้องการเก็บใน URL ให้ใช้ `useTableSearchParams`/searchParams ของแอปแทน แล้วส่ง value/onValueChange เอง
+ */
+export function useMonthCursor(initial?: MonthKey) {
+  const [month, setMonth] = useState<MonthKey>(() => initial ?? currentMonthKey());
+  const previous = useCallback(() => setMonth((m) => shiftMonth(m, -1)), []);
+  const next = useCallback(() => setMonth((m) => shiftMonth(m, 1)), []);
+  const reset = useCallback(() => setMonth(currentMonthKey()), []);
+  return { month, setMonth, previous, next, reset };
+}

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

@@ -0,0 +1,99 @@
+"use client";
+
+import { ClientDateFormatter } from "@suphark/ui/components/shared/time/client-date-formatter";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
+import { cn } from "@suphark/ui/lib/utils";
+import { AlertCircle, Check, Loader2 } from "lucide-react";
+import type { ReactNode } from "react";
+
+export type SaveState = "idle" | "saving" | "saved" | "error";
+
+export interface SaveStatusText {
+  saving: string;
+  saved: string;
+  error: string;
+  /** นำหน้าเวลาที่บันทึกล่าสุด เช่น "บันทึกเมื่อ" */
+  savedAt: string;
+}
+
+const TEXT: Record<"th" | "en", SaveStatusText> = {
+  th: { saving: "กำลังบันทึก…", saved: "บันทึกแล้ว", error: "บันทึกไม่สำเร็จ", savedAt: "บันทึกเมื่อ" },
+  en: { saving: "Saving…", saved: "Saved", error: "Couldn't save", savedAt: "Saved" },
+};
+
+/**
+ * สถานะบันทึกอัตโนมัติแบบบรรทัดเดียว (ยกจาก Pi PDF) — วางใน toolbar/หัวหน้า
+ * `savedAt` ใส่มาแล้วจะแสดงเวลาสัมพัทธ์ที่อัปเดตเองฝั่ง client (ไม่ทำ hydration mismatch)
+ */
+export function SaveStatus({
+  state,
+  savedAt,
+  error,
+  language = "th",
+  text: textProp,
+  className,
+}: {
+  state: SaveState;
+  /** เวลาที่บันทึกล่าสุด — แสดงเป็นเวลาสัมพัทธ์เมื่อ state = "saved"/"idle" */
+  savedAt?: Date | string | number | null;
+  /** ข้อความ error ของแอป (ไม่ส่ง = ข้อความเริ่มต้น) */
+  error?: ReactNode;
+  language?: "th" | "en";
+  text?: Partial<SaveStatusText>;
+  className?: string;
+}) {
+  const ui = useUiText();
+  const text: SaveStatusText = { ...TEXT[language], ...textProp };
+  const base = cn("inline-flex items-center gap-1.5 text-xs", className);
+
+  if (state === "saving") {
+    return (
+      <span
+        data-slot="save-status"
+        data-state="saving"
+        aria-live="polite"
+        className={cn(base, "text-muted-foreground")}
+      >
+        <Loader2 className="size-3.5 animate-spin" aria-hidden="true" />
+        {text.saving}
+      </span>
+    );
+  }
+  if (state === "error") {
+    return (
+      <span
+        data-slot="save-status"
+        data-state="error"
+        role="alert"
+        className={cn(base, "text-destructive")}
+      >
+        <AlertCircle className="size-3.5" aria-hidden="true" />
+        {error ?? ui.actionFailed ?? text.error}
+      </span>
+    );
+  }
+  if (state === "saved") {
+    return (
+      <span
+        data-slot="save-status"
+        data-state="saved"
+        aria-live="polite"
+        className={cn(base, "text-success")}
+      >
+        <Check className="size-3.5" aria-hidden="true" />
+        {text.saved}
+      </span>
+    );
+  }
+  if (!savedAt) return null;
+  return (
+    <span data-slot="save-status" data-state="idle" className={cn(base, "text-muted-foreground")}>
+      {text.savedAt}{" "}
+      <ClientDateFormatter
+        date={savedAt}
+        formatType="relative"
+        locale={language === "en" ? "en-US" : "th-TH"}
+      />
+    </span>
+  );
+}

package/src/components/shared/segmented-control.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { ToggleGroup, ToggleGroupItem } from "@suphark/ui/components/ui/toggle-group";
+import { cn } from "@suphark/ui/lib/utils";
+import type { ReactNode } from "react";
+import { CountBadge } from "./count-badge";
+
+export interface SegmentedOption<T extends string> {
+  value: T;
+  label: ReactNode;
+  icon?: ReactNode;
+  /** จำนวนท้ายตัวเลือก เช่นจำนวนรายการในตัวกรองนั้น */
+  count?: number;
+  disabled?: boolean;
+}
+
+/**
+ * ตัวเลือกแบบปุ่มติดกัน "เลือกได้ทีละหนึ่ง และต้องมีค่าเสมอ" (ตัวกรองสถานะ, มุมมอง รายการ/ตาราง)
+ * ต่างจาก ToggleGroup ตรง ๆ: กดตัวที่เลือกอยู่แล้วไม่หลุดเป็นค่าว่าง และ value เป็น string ไม่ใช่ array
+ * (DueBell bill-list-filter / PDF ตัวกรองโปรเจกต์ เขียนเองพร้อมตัวเลขนับ)
+ *
+ *   <SegmentedControl value={status} onValueChange={setStatus} label="สถานะ"
+ *     options={[{ value: "all", label: "ทั้งหมด", count: 12 }, { value: "due", label: "ใกล้ครบกำหนด", count: 3 }]} />
+ */
+export function SegmentedControl<T extends string>({
+  value,
+  onValueChange,
+  options,
+  label,
+  size = "default",
+  fullWidth = false,
+  className,
+}: {
+  value: T;
+  onValueChange: (value: T) => void;
+  options: ReadonlyArray<SegmentedOption<T>>;
+  /** aria-label ของกลุ่ม */
+  label: string;
+  size?: "sm" | "default";
+  fullWidth?: boolean;
+  className?: string;
+}) {
+  return (
+    <ToggleGroup
+      aria-label={label}
+      value={[value]}
+      onValueChange={(next) => {
+        // กดตัวที่เลือกอยู่ → Base UI คืน [] — คงค่าเดิมไว้ (ต้องมีค่าเสมอ)
+        const v = next[0];
+        if (v !== undefined && v !== value) onValueChange(v as T);
+      }}
+      variant="outline"
+      size={size === "sm" ? "sm" : "default"}
+      spacing={0}
+      className={cn(fullWidth && "w-full", className)}
+    >
+      {options.map((o) => (
+        <ToggleGroupItem
+          key={o.value}
+          value={o.value}
+          disabled={o.disabled}
+          className={cn("gap-1.5", fullWidth && "flex-1")}
+        >
+          {o.icon}
+          {o.label}
+          {o.count !== undefined && (
+            <CountBadge value={o.count} showZero tone={o.value === value ? "primary" : "muted"} />
+          )}
+        </ToggleGroupItem>
+      ))}
+    </ToggleGroup>
+  );
+}