@suphark/ui 0.25.0 → 0.25.1

package/src/components/shared/auth-parts.tsx

@@ -7,6 +7,7 @@ import {
   InputGroupButton,
   InputGroupInput,
 } from "@suphark/ui/components/ui/input-group";
+import { Spinner } from "@suphark/ui/components/ui/spinner";
 import { cn } from "@suphark/ui/lib/utils";
 import { EyeIcon, EyeOffIcon } from "lucide-react";
 import { type ComponentProps, type ReactNode, useState } from "react";
@@ -73,9 +74,10 @@ export function ProviderButtons({
           p.label,
         );
         const label = p.text ?? (grid ? p.label : full);
+        const busy = pendingId === p.id;
         const content = (
           <>
-            {p.icon}
+            {busy ? <Spinner /> : p.icon}
             <span className={grid ? "truncate" : "min-w-0 text-balance"}>{label}</span>
             {p.badge &&
               (badgePlacement === "corner" ? (
@@ -97,14 +99,14 @@ export function ProviderButtons({
           p.badge && badgePlacement === "corner" && "relative",
         );
         const a11y = grid ? { "aria-label": full, title: full } : {};
-        const busy = pendingId === p.id;
         const disabled = p.disabled || (pendingId != null && !busy);
         return p.href ? (
           <Button
             key={p.id}
             variant="outline"
             className={buttonClass}
-            disabled={disabled}
+            disabled={disabled || busy}
+            aria-busy={busy || undefined}
             nativeButton={false}
             render={<a href={p.href} {...a11y} />}
           >

package/src/components/shared/button/confirm-action-button.tsx

@@ -19,6 +19,15 @@ export function errorMessage(err: unknown, fallback: string): string {
   return err instanceof Error && err.message ? err.message : fallback;
 }
 
+/** action คืน `FormState` แบบ `{ ok: false, error }` (ไม่ได้ throw) = ล้มเหลว → ข้อความ error; อย่างอื่น = null */
+export function failedResult(result: unknown, fallback: string): string | null {
+  if (result && typeof result === "object" && "ok" in result && result.ok === false) {
+    const error = "error" in result ? result.error : undefined;
+    return typeof error === "string" && error ? error : fallback;
+  }
+  return null;
+}
+
 /**
  * ปุ่มเดี่ยวที่ถามยืนยัน (ConfirmDialog) ก่อนเรียก server action — ใช้แทน `<form action>` + window.confirm
  * `confirm` เหมือน `RowAction.confirm`; `action` + `data` เหมือน RowAction; refresh หน้าเมื่อเสร็จ
@@ -74,11 +83,16 @@ export function ConfirmActionButton({
           const fd = new FormData();
           for (const [k, v] of Object.entries(data ?? {})) fd.set(k, v);
           start(async () => {
-            // action โยน error → แจ้งด้วย toast แล้วคง dialog ไว้ให้ลองใหม่ (ไม่ปล่อยขึ้น error boundary ทั้งหน้า)
+            // action โยน error หรือคืน { ok: false } → แจ้งด้วย toast แล้วคง dialog ไว้ให้ลองใหม่ (ไม่ปล่อยขึ้น error boundary ทั้งหน้า)
+            const fallback = text.actionFailed ?? "ดำเนินการไม่สำเร็จ";
             try {
-              await action(fd);
+              const failed = failedResult(await action(fd), fallback);
+              if (failed) {
+                toast.error(failed);
+                return;
+              }
             } catch (err) {
-              toast.error(errorMessage(err, text.actionFailed ?? "ดำเนินการไม่สำเร็จ"));
+              toast.error(errorMessage(err, fallback));
               return;
             }
             onDone?.();

package/src/components/shared/chat-thread.tsx

@@ -27,6 +27,7 @@ import { Spinner } from "@suphark/ui/components/ui/spinner";
 import { cn } from "@suphark/ui/lib/utils";
 import { ArrowDown, SendHorizontal } from "lucide-react";
 import { type ReactNode, useState } from "react";
+import { toast } from "sonner";
 import { useUiText } from "./ui-text";
 
 export interface ChatMessage {
@@ -150,6 +151,7 @@ function ChatComposer({
 }) {
   const [value, setValue] = useState("");
   const [pending, setPending] = useState(false);
+  const failedText = useUiText().actionFailed;
   const canSend = value.trim() !== "" && !disabled && !pending;
 
   const send = async () => {
@@ -158,6 +160,11 @@ function ChatComposer({
     try {
       await onSend(value.trim());
       setValue("");
+    } catch (err) {
+      // ส่งไม่สำเร็จ: คงข้อความไว้ในช่องให้ลองใหม่ + แจ้งผู้ใช้ (เดิมเงียบ — unhandled rejection)
+      toast.error(
+        err instanceof Error && err.message ? err.message : (failedText ?? "ดำเนินการไม่สำเร็จ"),
+      );
     } finally {
       setPending(false);
     }

package/src/components/shared/client-redirect.tsx

@@ -2,9 +2,24 @@
 
 import { useEffect } from "react";
 
+/**
+ * redirect ฝั่ง browser (`location.replace`) — รับเฉพาะ http(s) และ path ภายใน
+ * `javascript:`/`data:` ถูกปฏิเสธ (location.replace ไม่มีตัวกันแบบ `<a href>`/router ของ Next)
+ * ถ้า `to` มาจาก URL/ผู้ใช้ แอปต้องเช็กเองว่าเป็นปลายทางที่อนุญาต (กัน open redirect ไปโดเมนอื่น)
+ */
 export function ClientRedirect({ to }: { to: string }) {
   useEffect(() => {
-    window.location.replace(to);
+    let url: URL;
+    try {
+      url = new URL(to, window.location.href);
+    } catch {
+      return;
+    }
+    if (url.protocol !== "http:" && url.protocol !== "https:") {
+      console.error(`ClientRedirect: ปฏิเสธปลายทางที่ไม่ใช่ http(s): ${url.protocol}`);
+      return;
+    }
+    window.location.replace(url.href);
   }, [to]);
 
   return null;

package/src/components/shared/form/date-time-picker.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import { Calendar } from "@suphark/ui/components/ui/calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "@suphark/ui/components/ui/popover";
+import { useMounted } from "@suphark/ui/hooks/use-mounted";
+import { cn } from "@suphark/ui/lib/utils";
+import { CalendarClockIcon } from "lucide-react";
+import { useState } from "react";
+import { th } from "react-day-picker/locale/th";
+import { useUiText } from "../ui-text";
+import {
+  pad,
+  splitTime,
+  TimeColumns,
+  type TimeValue,
+  toLocalDateTimeString,
+  useControllable,
+} from "./time-picker";
+
+/** "YYYY-MM-DDTHH:mm+07:00" — เวลาท้องถิ่นพร้อม offset (ISO 8601) ให้ server ที่อยู่โซนอื่น parse ได้ถูก */
+function toOffsetDateTimeString(date: Date): string {
+  const offset = -date.getTimezoneOffset();
+  const sign = offset >= 0 ? "+" : "-";
+  const abs = Math.abs(offset);
+  return `${toLocalDateTimeString(date)}${sign}${pad(Math.floor(abs / 60))}:${pad(abs % 60)}`;
+}
+
+/**
+ * เลือกวัน + เวลาในกล่องเดียว (ปฏิทิน + คอลัมน์ชั่วโมง/นาที) — นัดหมาย, กำหนดส่ง, เวลาเตือน
+ * ค่าเป็น `Date | null`; เลือกวันก่อนเวลา = ใช้ `defaultTime`; `name` ส่ง "YYYY-MM-DDTHH:mm+07:00" (เวลาท้องถิ่น + offset)
+ * ใน FormData → `new Date(formData.get(name))` บน server (UTC) ได้เวลาที่ถูกต้อง
+ * ข้อความวัน/เวลาแสดงหลัง hydrate (server กับ browser อยู่คนละโซนเวลา — กัน hydration mismatch)
+ *
+ *   <DateTimePicker value={dueAt} onValueChange={setDueAt} minuteStep={15} />
+ */
+export function DateTimePicker({
+  value,
+  defaultValue = null,
+  onValueChange,
+  minuteStep = 5,
+  defaultTime = "09:00",
+  name,
+  id,
+  disabled,
+  placeholder,
+  className,
+  "aria-label": ariaLabel,
+  "aria-invalid": ariaInvalid,
+}: {
+  value?: Date | null;
+  defaultValue?: Date | null;
+  onValueChange?: (value: Date | null) => void;
+  minuteStep?: number;
+  /** เวลาที่ใช้เมื่อเลือกวันครั้งแรก */
+  defaultTime?: TimeValue;
+  name?: string;
+  id?: string;
+  disabled?: boolean;
+  placeholder?: string;
+  className?: string;
+  "aria-label"?: string;
+  "aria-invalid"?: boolean;
+}) {
+  const ui = useUiText();
+  const text = ui.time;
+  const [date, setDate] = useControllable<Date | null>(value, defaultValue, onValueChange);
+  const [open, setOpen] = useState(false);
+  const mounted = useMounted();
+  const time = date ? `${pad(date.getHours())}:${pad(date.getMinutes())}` : null;
+
+  const withTime = (day: Date, t: TimeValue) => {
+    const [h, m] = splitTime(t) ?? [9, 0];
+    const d = new Date(day);
+    d.setHours(h, m, 0, 0);
+    return d;
+  };
+
+  const label = !date
+    ? (placeholder ?? text?.dateTimePlaceholder ?? "เลือกวันและเวลา")
+    : !mounted
+      ? " " // ก่อน hydrate: เว้นที่ไว้ ไม่แสดงเวลาของ server
+      : date.toLocaleString("th-TH", { dateStyle: "medium", timeStyle: "short" });
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
+        render={
+          <Button
+            id={id}
+            type="button"
+            variant="outline"
+            disabled={disabled}
+            aria-label={ariaLabel}
+            aria-invalid={ariaInvalid || undefined}
+            data-slot="date-time-picker"
+            className={cn(
+              "w-full justify-start gap-2 font-normal",
+              !date && "text-muted-foreground",
+              className,
+            )}
+          />
+        }
+      >
+        <CalendarClockIcon className="text-muted-foreground" />
+        <span className="truncate">{label}</span>
+      </PopoverTrigger>
+      {name && (
+        <input
+          type="hidden"
+          name={name}
+          value={date && mounted ? toOffsetDateTimeString(date) : ""}
+        />
+      )}
+      <PopoverContent align="start" className="w-auto gap-0 p-0">
+        <div className="flex flex-col sm:flex-row">
+          <Calendar
+            mode="single"
+            locale={th}
+            selected={date ?? undefined}
+            defaultMonth={date ?? undefined}
+            onSelect={(day) => day && setDate(withTime(day, time ?? defaultTime))}
+            className="p-3"
+          />
+          <div className="flex justify-center border-t p-2 sm:border-t-0 sm:border-l">
+            <TimeColumns
+              value={time}
+              minuteStep={minuteStep}
+              onValueChange={(t) => setDate(withTime(date ?? new Date(), t))}
+            />
+          </div>
+        </div>
+        <div className="flex justify-between gap-2 border-t p-2">
+          <Button
+            type="button"
+            size="xs"
+            variant="ghost"
+            disabled={!date}
+            onClick={() => setDate(null)}
+          >
+            {text?.clear ?? "ล้าง"}
+          </Button>
+          <Button type="button" size="xs" onClick={() => setOpen(false)}>
+            {ui.done}
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

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

@@ -0,0 +1,93 @@
+"use client";
+
+/** variant "autocomplete" ของ FormFieldInput — แยกไฟล์เพราะ cmdk หนัก โหลดเฉพาะเมื่อใช้ (React.lazy) */
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+} from "@suphark/ui/components/ui/command";
+import { cn } from "@suphark/ui/lib/utils";
+import { Command as CommandPrimitive } from "cmdk";
+import { Check } from "lucide-react";
+import { useState } from "react";
+import type { ControllerRenderProps, FieldValues, Path, PathValue } from "react-hook-form";
+
+export type AutocompleteOption = {
+  value: string;
+  label: string;
+};
+
+export function AutocompleteInput<T extends FieldValues>({
+  field,
+  data,
+  placeholder,
+  disabled,
+  emptyMessage = "No results found.",
+  required,
+}: {
+  field: ControllerRenderProps<T, Path<T>>;
+  data: AutocompleteOption[];
+  placeholder?: string;
+  disabled?: boolean;
+  emptyMessage?: string;
+  required?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Command className="overflow-visible bg-transparent">
+      <div
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm ring-offset-background focus-within:border-ring focus-within:ring-1 focus-within:ring-ring",
+          disabled && "cursor-not-allowed opacity-50",
+          required && !field.value && "border-input",
+        )}
+      >
+        <CommandPrimitive.Input
+          value={field.value as string}
+          onValueChange={field.onChange}
+          onFocus={() => setOpen(true)}
+          onBlur={() => setOpen(false)}
+          placeholder={placeholder}
+          disabled={disabled}
+          className="w-full bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed"
+        />
+      </div>
+      <div className="relative mt-1">
+        {open && field.value && (
+          <CommandList className="fade-in-0 zoom-in-95 absolute top-0 z-50 w-full animate-in rounded-md border bg-popover text-popover-foreground shadow-md outline-none">
+            <CommandEmpty className="py-2 text-center text-muted-foreground text-sm">
+              {emptyMessage}
+            </CommandEmpty>
+            <CommandGroup>
+              {data.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={`${option.label} ${option.value}`}
+                  onSelect={() => {
+                    field.onChange(option.value as PathValue<T, Path<T>>);
+                    setOpen(false);
+                  }}
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      field.value === option.value ? "opacity-100" : "opacity-0",
+                    )}
+                  />
+                  {option.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        )}
+      </div>
+    </Command>
+  );
+}

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

@@ -1,12 +1,5 @@
 "use client";
 
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandList,
-} from "@suphark/ui/components/ui/command";
 import {
   FormControl,
   FormField,
@@ -24,10 +17,9 @@ import {
 import { Textarea } from "@suphark/ui/components/ui/textarea";
 import { useCopyToClipboard } from "@suphark/ui/hooks/use-copy-to-clipboard";
 import { cn } from "@suphark/ui/lib/utils";
-import { Command as CommandPrimitive } from "cmdk";
 import { Check, CircleAlert, Copy } from "lucide-react";
 import type { ComponentProps } from "react";
-import { useState } from "react";
+import { lazy, Suspense } from "react";
 import type { ControllerRenderProps, FieldValues, Path, PathValue } from "react-hook-form";
 
 // --- Types ---
@@ -49,13 +41,11 @@ type StandardInputProps<T extends FieldValues> = BaseProps<T> & {
 } & Omit<ComponentProps<typeof Input>, "required" | "form" | "name" | "value" | "onChange">;
 
 // Variant 2: Autocomplete
-export type AutocompleteOption = {
-  value: string;
-  label: string;
-};
+export type { AutocompleteOption } from "./form-field-autocomplete";
+
 type AutocompleteProps<T extends FieldValues> = BaseProps<T> & {
   variant: "autocomplete";
-  data: AutocompleteOption[];
+  data: import("./form-field-autocomplete").AutocompleteOption[];
   emptyMessage?: string;
   placeholder?: string;
   disabled?: boolean;
@@ -82,76 +72,28 @@ export type FormFieldInputProps<T extends FieldValues> =
 
 // --- Helper Components ---
 
-function AutocompleteInput<T extends FieldValues>({
-  field,
-  data,
-  placeholder,
-  disabled,
-  emptyMessage = "No results found.",
-  required,
-}: {
-  field: ControllerRenderProps<T, Path<T>>;
-  data: AutocompleteOption[];
-  placeholder?: string;
-  disabled?: boolean;
-  emptyMessage?: string;
-  required?: boolean;
-}) {
-  const [open, setOpen] = useState(false);
+// variant autocomplete ใช้ cmdk (+ Radix Dialog ที่ cmdk พ่วงมา) — แยกไฟล์และโหลดแบบ lazy
+// ไม่งั้นทุกฟอร์มที่ใช้ FormFieldInput ธรรมดาต้องพก cmdk ไปด้วย
+const LazyAutocompleteInput = lazy(() =>
+  import("./form-field-autocomplete").then((m) => ({ default: m.AutocompleteInput })),
+) as unknown as typeof import("./form-field-autocomplete").AutocompleteInput;
 
+function AutocompleteInput<T extends FieldValues>(
+  props: ComponentProps<typeof import("./form-field-autocomplete").AutocompleteInput<T>>,
+) {
   return (
-    <Command className="overflow-visible bg-transparent">
-      <div
-        className={cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm ring-offset-background focus-within:border-ring focus-within:ring-1 focus-within:ring-ring",
-          disabled && "cursor-not-allowed opacity-50",
-          required && !field.value && "border-input",
-        )}
-      >
-        <CommandPrimitive.Input
-          value={field.value as string}
-          onValueChange={field.onChange}
-          onFocus={() => setOpen(true)}
-          onBlur={() => setOpen(false)}
-          placeholder={placeholder}
-          disabled={disabled}
-          className="w-full bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed"
+    <Suspense
+      fallback={
+        <Input
+          value={(props.field.value as string) ?? ""}
+          placeholder={props.placeholder}
+          disabled
+          readOnly
         />
-      </div>
-      <div className="relative mt-1">
-        {open && field.value && (
-          <CommandList className="fade-in-0 zoom-in-95 absolute top-0 z-50 w-full animate-in rounded-md border bg-popover text-popover-foreground shadow-md outline-none">
-            <CommandEmpty className="py-2 text-center text-muted-foreground text-sm">
-              {emptyMessage}
-            </CommandEmpty>
-            <CommandGroup>
-              {data.map((option) => (
-                <CommandItem
-                  key={option.value}
-                  value={`${option.label} ${option.value}`}
-                  onSelect={() => {
-                    field.onChange(option.value as PathValue<T, Path<T>>);
-                    setOpen(false);
-                  }}
-                  onMouseDown={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                  }}
-                >
-                  <Check
-                    className={cn(
-                      "mr-2 h-4 w-4",
-                      field.value === option.value ? "opacity-100" : "opacity-0",
-                    )}
-                  />
-                  {option.label}
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        )}
-      </div>
-    </Command>
+      }
+    >
+      <LazyAutocompleteInput {...props} />
+    </Suspense>
   );
 }
 

package/src/components/shared/form/number-input.tsx

@@ -6,6 +6,15 @@ import { MinusIcon, PlusIcon } from "lucide-react";
 import type { ReactNode } from "react";
 import { useUiText } from "../ui-text";
 
+/**
+ * input ซ่อนของ Base UI (ที่ส่งค่าใน FormData) ได้ attribute step ไปด้วย → browser ปฏิเสธค่าที่ไม่ลง step นับจาก min
+ * (เช่น 12.50 เมื่อ step=1, 150 เมื่อ min=0 step=100) ทั้งที่ step มีไว้แค่ให้ปุ่ม −/+ เลื่อน — ตั้ง step="any" ให้ input ซ่อน
+ * (React ไม่เขียน attribute ทับเพราะ prop step ไม่เปลี่ยน) ส่วน min/max ยังตรวจตามเดิม
+ */
+function relaxHiddenStep(el: HTMLInputElement | null) {
+  if (el) el.step = "any";
+}
+
 const SIZE = {
   sm: { group: "h-7", button: "w-7 [&_svg]:size-3.5", text: "text-sm" },
   default: { group: "h-8", button: "w-8 [&_svg]:size-4", text: "text-base md:text-sm" },
@@ -99,6 +108,7 @@ export function NumberInput({
       required={required}
       disabled={disabled}
       readOnly={readOnly}
+      inputRef={relaxHiddenStep}
       className={cn("w-full", className)}
     >
       <NumberField.Group

package/src/components/shared/form/tags-input.tsx

@@ -116,7 +116,12 @@ export function TagsInput({
     const pasted = e.clipboardData.getData("text");
     if (!separator.test(pasted)) return;
     e.preventDefault();
-    setDraft(add(pasted.split(separator)));
+    // แทรกที่ตำแหน่ง cursor ของข้อความที่พิมพ์ค้างไว้ก่อนแยก (เช่น พิมพ์ "https://" แล้ววาง "a.com,b.com")
+    const el = e.currentTarget;
+    const start = el.selectionStart ?? draft.length;
+    const end = el.selectionEnd ?? draft.length;
+    const combined = draft.slice(0, start) + pasted + draft.slice(end);
+    setDraft(add(combined.split(separator)));
   };
 
   const remove = (index: number) => {