@suphark/ui 0.25.0 → 0.26.0

package/src/components/design-system/design-system-showcase.tsx

@@ -12,14 +12,38 @@ import {
   Zap,
 } from "lucide-react";
 import * as React from "react";
-import { ShowcaseDataDisplay } from "./sections/showcase-data-display";
-import { ShowcaseFeedback } from "./sections/showcase-feedback";
-import { ShowcaseForms } from "./sections/showcase-forms";
-import { ShowcaseFoundations } from "./sections/showcase-foundations";
-import { ShowcaseGuidelinesRecipes } from "./sections/showcase-guidelines-recipes";
-import { ShowcaseOverlaysNavigation } from "./sections/showcase-overlays-navigation";
 import { ShowcaseOverview } from "./sections/showcase-overview";
-import { ShowcasePrimitives } from "./sections/showcase-primitives";
+
+// แท็บอื่นนอกจากภาพรวมโหลดเมื่อเปิดแท็บนั้น — เดิม import ทุกแท็บ (ปฏิทิน, ตาราง, dnd-kit, cmdk …) ~1 MB ทั้งที่เห็นทีละแท็บ
+const ShowcaseDataDisplay = React.lazy(() =>
+  import("./sections/showcase-data-display").then((m) => ({ default: m.ShowcaseDataDisplay })),
+);
+const ShowcaseFeedback = React.lazy(() =>
+  import("./sections/showcase-feedback").then((m) => ({ default: m.ShowcaseFeedback })),
+);
+const ShowcaseForms = React.lazy(() =>
+  import("./sections/showcase-forms").then((m) => ({ default: m.ShowcaseForms })),
+);
+const ShowcaseFoundations = React.lazy(() =>
+  import("./sections/showcase-foundations").then((m) => ({ default: m.ShowcaseFoundations })),
+);
+const ShowcaseGuidelinesRecipes = React.lazy(() =>
+  import("./sections/showcase-guidelines-recipes").then((m) => ({
+    default: m.ShowcaseGuidelinesRecipes,
+  })),
+);
+const ShowcaseOverlaysNavigation = React.lazy(() =>
+  import("./sections/showcase-overlays-navigation").then((m) => ({
+    default: m.ShowcaseOverlaysNavigation,
+  })),
+);
+const ShowcasePrimitives = React.lazy(() =>
+  import("./sections/showcase-primitives").then((m) => ({ default: m.ShowcasePrimitives })),
+);
+
+function SectionLoading() {
+  return <div className="h-96 animate-pulse rounded-xl bg-muted/40" aria-busy="true" />;
+}
 
 export function DesignSystemShowcase({
   links,
@@ -32,10 +56,13 @@ export function DesignSystemShowcase({
 
   /** สลับแท็บแล้วเลื่อนไปหัวข้อ — เลื่อนใน effect หลังแท็บใหม่ render แล้ว (ตำแหน่งจึงถูก) ชดเชย header ที่ sticky */
   const [pendingAnchor, setPendingAnchor] = React.useState<string | null>(null);
+  const tries = React.useRef(0);
+  const [retry, setRetry] = React.useState(0);
   const jumpTo = React.useCallback((tab: string, anchor?: string) => {
     setActiveTab(tab);
     setPendingAnchor(anchor ?? "__top__");
   }, []);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: retry ใช้เป็นตัวกระตุ้นให้ลองหาหัวข้อซ้ำระหว่างรอแท็บ lazy
   React.useEffect(() => {
     if (!pendingAnchor) return;
     // หน่วงเล็กน้อยให้ Tabs โฟกัส trigger ใหม่เสร็จก่อน (การโฟกัสเลื่อนหน้าไปที่แถบแท็บ) แล้วค่อยเลื่อนไปหัวข้อ
@@ -47,15 +74,22 @@ export function DesignSystemShowcase({
       }
       const el = document.getElementById(pendingAnchor);
       if (!el) {
+        // แท็บที่โหลดแบบ lazy อาจยัง render ไม่เสร็จ — ลองใหม่ได้ถึง ~2 วินาที
+        if (tries.current++ < 25) {
+          setRetry((r) => r + 1);
+          return;
+        }
+        tries.current = 0;
         setPendingAnchor(null);
         return;
       }
+      tries.current = 0;
       el.style.scrollMarginTop = "88px"; // ชดเชย header ที่ sticky
       el.scrollIntoView({ behavior: "smooth", block: "start" });
       setPendingAnchor(null);
     }, 80);
     return () => window.clearTimeout(timer);
-  }, [pendingAnchor]);
+  }, [pendingAnchor, retry]);
 
   const tabItems = [
     { value: "overview", label: "ภาพรวม", icon: LayoutGrid },
@@ -109,31 +143,45 @@ export function DesignSystemShowcase({
         </TabsContent>
 
         <TabsContent value="foundations" className="mt-0 outline-none">
-          <ShowcaseFoundations />
+          <React.Suspense fallback={<SectionLoading />}>
+            <ShowcaseFoundations />
+          </React.Suspense>
         </TabsContent>
 
         <TabsContent value="primitives" className="mt-0 outline-none">
-          <ShowcasePrimitives />
+          <React.Suspense fallback={<SectionLoading />}>
+            <ShowcasePrimitives />
+          </React.Suspense>
         </TabsContent>
 
         <TabsContent value="forms" className="mt-0 outline-none">
-          <ShowcaseForms />
+          <React.Suspense fallback={<SectionLoading />}>
+            <ShowcaseForms />
+          </React.Suspense>
         </TabsContent>
 
         <TabsContent value="data-display" className="mt-0 outline-none">
-          <ShowcaseDataDisplay />
+          <React.Suspense fallback={<SectionLoading />}>
+            <ShowcaseDataDisplay />
+          </React.Suspense>
         </TabsContent>
 
         <TabsContent value="overlays" className="mt-0 outline-none">
-          <ShowcaseOverlaysNavigation />
+          <React.Suspense fallback={<SectionLoading />}>
+            <ShowcaseOverlaysNavigation />
+          </React.Suspense>
         </TabsContent>
 
         <TabsContent value="feedback" className="mt-0 outline-none">
-          <ShowcaseFeedback />
+          <React.Suspense fallback={<SectionLoading />}>
+            <ShowcaseFeedback />
+          </React.Suspense>
         </TabsContent>
 
         <TabsContent value="guidelines-recipes" className="mt-0 outline-none">
-          <ShowcaseGuidelinesRecipes />
+          <React.Suspense fallback={<SectionLoading />}>
+            <ShowcaseGuidelinesRecipes />
+          </React.Suspense>
         </TabsContent>
       </Tabs>
     </div>

package/src/components/pwa/pull-to-refresh.tsx

@@ -113,11 +113,31 @@ export function PullToRefresh({
       window.setTimeout(() => setIsRefreshing(false), 700);
     };
 
+    // touchmove ต้อง non-passive (preventDefault ระหว่างดึง) ซึ่งทำให้ browser ต้องรอ JS ก่อนเลื่อนหน้าทุกครั้ง
+    // → ติดตั้งเฉพาะตอนที่ดึงได้จริง (จอมือถือ + หน้าอยู่บนสุด) ถอดออกเมื่อเลื่อนลงไปแล้ว
+    let moveAttached = false;
+    const syncMoveListener = () => {
+      const root = getRoot();
+      const want = isMobileViewport() && !!root && isRootAtTop(root);
+      if (want && !moveAttached) {
+        window.addEventListener("touchmove", handleTouchMove, { passive: false });
+        moveAttached = true;
+      } else if (!want && moveAttached && !isPullingRef.current) {
+        window.removeEventListener("touchmove", handleTouchMove);
+        moveAttached = false;
+      }
+    };
+    const root = getRoot();
+    syncMoveListener();
+    root?.addEventListener("scroll", syncMoveListener, { passive: true });
+    window.addEventListener("resize", syncMoveListener, { passive: true });
+
     window.addEventListener("touchstart", handleTouchStart, { passive: true });
-    window.addEventListener("touchmove", handleTouchMove, { passive: false });
     window.addEventListener("touchend", handleTouchEnd, { passive: true });
     window.addEventListener("touchcancel", resetPull, { passive: true });
     return () => {
+      root?.removeEventListener("scroll", syncMoveListener);
+      window.removeEventListener("resize", syncMoveListener);
       window.removeEventListener("touchstart", handleTouchStart);
       window.removeEventListener("touchmove", handleTouchMove);
       window.removeEventListener("touchend", handleTouchEnd);

package/src/components/shared/action-menu.tsx

@@ -13,6 +13,7 @@ import {
 } from "@suphark/ui/components/ui/dropdown-menu";
 import { MoreHorizontal } from "lucide-react";
 import { type ReactElement, type ReactNode, useState } from "react";
+import { toast } from "sonner";
 import { ConfirmDialog, type ConfirmSpec, normalizeConfirm } from "./confirm-dialog";
 import { useUiText } from "./ui-text";
 
@@ -64,16 +65,32 @@ export function ActionMenu({
   const [confirming, setConfirming] = useState<ActionMenuCommand | null>(null);
   const [pending, setPending] = useState(false);
 
-  const run = async (fn?: () => unknown) => {
-    if (!fn) return;
+  /** คืน true เมื่อสำเร็จ — throw/reject = toast แจ้ง (ไม่ปล่อยเป็น unhandled rejection เงียบ ๆ) */
+  const run = async (fn?: () => unknown): Promise<boolean> => {
+    if (!fn) return true;
     setPending(true);
     try {
       await fn();
+      return true;
+    } catch (err) {
+      toast.error(
+        err instanceof Error && err.message
+          ? err.message
+          : (text.actionFailed ?? "ดำเนินการไม่สำเร็จ"),
+      );
+      return false;
     } finally {
       setPending(false);
     }
   };
 
+  /** ลิงก์ที่มี confirm: ไปหลังยืนยันแล้วเท่านั้น */
+  const follow = (item: ActionMenuCommand) => {
+    if (!item.href) return;
+    if (item.external) window.open(item.href, "_blank", "noopener,noreferrer");
+    else window.location.assign(item.href);
+  };
+
   const spec = confirming?.confirm ? normalizeConfirm(confirming.confirm) : null;
 
   return (
@@ -113,7 +130,8 @@ export function ActionMenu({
                   variant={item.destructive ? "destructive" : "default"}
                   disabled={item.disabled}
                   render={
-                    item.href ? (
+                    // มี confirm = ยังไม่เป็นลิงก์จริง (กดแล้วถามก่อน แล้วค่อยไป)
+                    item.href && !item.confirm ? (
                       <a
                         href={item.href}
                         target={item.external ? "_blank" : undefined}
@@ -122,9 +140,8 @@ export function ActionMenu({
                     ) : undefined
                   }
                   onClick={() => {
-                    if (item.href) return;
                     if (item.confirm) setConfirming(item);
-                    else void run(item.onClick);
+                    else if (!item.href) void run(item.onClick);
                   }}
                 >
                   {content}
@@ -147,8 +164,10 @@ export function ActionMenu({
           destructive={spec.destructive ?? confirming.destructive}
           pending={pending}
           onConfirm={async () => {
-            await run(confirming.onClick);
+            // ล้มเหลว = คง dialog ไว้ให้ลองใหม่ (toast แจ้งแล้วใน run)
+            if (!(await run(confirming.onClick))) return;
             setConfirming(null);
+            follow(confirming);
           }}
         />
       )}

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/base/action-button.tsx

@@ -1,12 +1,7 @@
 "use client";
 
 import { Button } from "@suphark/ui/components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@suphark/ui/components/ui/tooltip";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@suphark/ui/components/ui/tooltip";
 import {
   type CheckPermissionOptions,
   type CheckPermissionRequirement,
@@ -118,14 +113,12 @@ export function ActionButton({
   // 5. Wrap with Tooltip if provided or auto-generated
   if (finalTooltip) {
     return (
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger render={buttonContent as React.ReactElement} />
-          <TooltipContent side={tooltipSide}>
-            {typeof finalTooltip === "string" ? <p>{finalTooltip}</p> : finalTooltip}
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger delay={0} render={buttonContent as React.ReactElement} />
+        <TooltipContent side={tooltipSide}>
+          {typeof finalTooltip === "string" ? <p>{finalTooltip}</p> : finalTooltip}
+        </TooltipContent>
+      </Tooltip>
     );
   }
 

package/src/components/shared/button/base/link-button.tsx

@@ -2,12 +2,7 @@
 
 // [FIX 1.1] นำเข้าเฉพาะ Button
 import { Button } from "@suphark/ui/components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@suphark/ui/components/ui/tooltip";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@suphark/ui/components/ui/tooltip";
 import {
   type CheckPermissionOptions,
   type CheckPermissionRequirement,
@@ -114,14 +109,10 @@ export function LinkButton({
   // 3. Wrap with Tooltip if provided
   if (tooltip) {
     return (
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger render={buttonContent as React.ReactElement} />
-          <TooltipContent>
-            {typeof tooltip === "string" ? <p>{tooltip}</p> : tooltip}
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger delay={0} render={buttonContent as React.ReactElement} />
+        <TooltipContent>{typeof tooltip === "string" ? <p>{tooltip}</p> : tooltip}</TooltipContent>
+      </Tooltip>
     );
   }
 

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