@suphark/ui 0.24.0 → 0.25.1

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

@@ -0,0 +1,154 @@
+"use client";
+
+import { NumberField } from "@base-ui/react/number-field";
+import { cn } from "@suphark/ui/lib/utils";
+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" },
+} as const;
+
+/**
+ * ช่องตัวเลขพร้อมปุ่ม −/+ (Base UI NumberField) — แทน `<Input type="number">` + InputGroup + state เอง
+ * ลูกศรขึ้น/ลง (Shift = `largeStep`), จัดรูปแบบตาม locale (`format` เช่น ทศนิยม/สกุลเงิน), `prefix`/`suffix` เช่น ฿ หรือ %
+ * `name` ส่งค่าใน FormData ของ server action ได้ (ค่าดิบไม่มีจุลภาค)
+ *
+ *   <NumberInput name="amount" prefix="฿" min={0} step={100} format={{ maximumFractionDigits: 2 }} />
+ *   <NumberInput value={qty} onValueChange={setQty} min={1} max={99} aria-label="จำนวน" />
+ */
+export function NumberInput({
+  value,
+  defaultValue,
+  onValueChange,
+  min,
+  max,
+  step = 1,
+  largeStep,
+  format,
+  locale,
+  prefix,
+  suffix,
+  hideButtons = false,
+  size = "default",
+  name,
+  id,
+  required,
+  disabled,
+  readOnly,
+  placeholder,
+  className,
+  inputClassName,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+}: {
+  value?: number | null;
+  defaultValue?: number;
+  onValueChange?: (value: number | null) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  /** ก้าวเมื่อกด Shift + ลูกศร / PageUp-PageDown (ค่าเริ่มต้น step × 10) */
+  largeStep?: number;
+  /** Intl.NumberFormatOptions เช่น `{ maximumFractionDigits: 2 }` หรือ `{ style: "percent" }` */
+  format?: Intl.NumberFormatOptions;
+  /** ค่าเริ่มต้น th-TH */
+  locale?: Intl.LocalesArgument;
+  /** ข้อความ/ไอคอนหน้าตัวเลข เช่น "฿" */
+  prefix?: ReactNode;
+  /** ข้อความ/ไอคอนหลังตัวเลข เช่น "%", "ชิ้น" */
+  suffix?: ReactNode;
+  /** ซ่อนปุ่ม −/+ (ยังใช้ลูกศรคีย์บอร์ดได้) */
+  hideButtons?: boolean;
+  size?: "sm" | "default";
+  name?: string;
+  id?: string;
+  required?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  placeholder?: string;
+  className?: string;
+  inputClassName?: string;
+  "aria-label"?: string;
+  "aria-describedby"?: string;
+  "aria-invalid"?: boolean | "true" | "false";
+}) {
+  const text = useUiText().number;
+  const s = SIZE[size];
+  const buttonClass = cn(
+    "flex shrink-0 items-center justify-center text-muted-foreground transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:bg-muted disabled:pointer-events-none disabled:opacity-50",
+    s.button,
+  );
+  const affix = "flex shrink-0 items-center px-2 text-muted-foreground text-sm select-none";
+  return (
+    <NumberField.Root
+      id={id}
+      name={name}
+      value={value}
+      defaultValue={defaultValue}
+      onValueChange={(v) => onValueChange?.(v)}
+      min={min}
+      max={max}
+      step={step}
+      largeStep={largeStep ?? step * 10}
+      format={format}
+      locale={locale ?? "th-TH"}
+      required={required}
+      disabled={disabled}
+      readOnly={readOnly}
+      inputRef={relaxHiddenStep}
+      className={cn("w-full", className)}
+    >
+      <NumberField.Group
+        data-slot="number-input"
+        className={cn(
+          "flex w-full min-w-0 items-stretch overflow-hidden rounded-lg border border-input bg-transparent transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-disabled:opacity-50 dark:bg-input/30",
+          s.group,
+        )}
+      >
+        {!hideButtons && (
+          <NumberField.Decrement
+            aria-label={text?.decrement ?? "ลด"}
+            className={cn(buttonClass, "border-r border-input")}
+          >
+            <MinusIcon />
+          </NumberField.Decrement>
+        )}
+        {prefix && <span className={cn(affix, !hideButtons && "pr-0")}>{prefix}</span>}
+        <NumberField.Input
+          placeholder={placeholder}
+          aria-label={ariaLabel}
+          aria-describedby={ariaDescribedBy}
+          aria-invalid={ariaInvalid}
+          className={cn(
+            "min-w-0 flex-1 bg-transparent px-2.5 tabular-nums outline-none placeholder:text-muted-foreground",
+            hideButtons ? "text-left" : "text-center",
+            s.text,
+            inputClassName,
+          )}
+        />
+        {suffix && <span className={cn(affix, !hideButtons && "pl-0")}>{suffix}</span>}
+        {!hideButtons && (
+          <NumberField.Increment
+            aria-label={text?.increment ?? "เพิ่ม"}
+            className={cn(buttonClass, "border-l border-input")}
+          >
+            <PlusIcon />
+          </NumberField.Increment>
+        )}
+      </NumberField.Group>
+    </NumberField.Root>
+  );
+}

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

@@ -0,0 +1,197 @@
+"use client";
+
+import { cn } from "@suphark/ui/lib/utils";
+import { XIcon } from "lucide-react";
+import { type ClipboardEvent, type KeyboardEvent, useId, useRef, useState } from "react";
+import { useUiText } from "../ui-text";
+
+/**
+ * ช่องพิมพ์หลายค่าเป็นป้าย (chip) — พิมพ์แล้วกด Enter หรือจุลภาค, วางหลายค่าพร้อมกันได้ (แยกด้วย , ; เว้นวรรค หรือขึ้นบรรทัด)
+ * Backspace ในช่องว่างลบป้ายสุดท้าย; ไม่รับค่าซ้ำ; `validate` คืนข้อความ error เพื่อปฏิเสธค่า (แสดงใต้ช่อง)
+ * `name` ส่งทุกค่าใน FormData (`formData.getAll(name)`) — แทน input + state array + map ป้าย + ปุ่มลบเอง
+ *
+ *   <TagsInput name="redirectUris" placeholder="https://…"
+ *     validate={(v) => (URL.canParse(v) ? null : "ต้องเป็น URL")} />
+ */
+export function TagsInput({
+  value,
+  defaultValue = [],
+  onValueChange,
+  validate,
+  transform = (v) => v.trim(),
+  max,
+  allowDuplicates = false,
+  splitOnSpace = false,
+  name,
+  id,
+  disabled,
+  placeholder,
+  className,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+}: {
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+  /** คืน string = ข้อความ error (ไม่เพิ่มค่า), null/undefined = ผ่าน */
+  validate?: (tag: string, current: string[]) => string | null | undefined;
+  /** แปลงค่าก่อนเพิ่ม (ค่าเริ่มต้น trim) เช่น `(v) => v.trim().toLowerCase()` */
+  transform?: (raw: string) => string;
+  /** จำนวนป้ายสูงสุด */
+  max?: number;
+  allowDuplicates?: boolean;
+  /** เว้นวรรคก็ตัดเป็นป้ายใหม่ (เหมาะกับอีเมล/โดเมน) */
+  splitOnSpace?: boolean;
+  name?: string;
+  id?: string;
+  disabled?: boolean;
+  placeholder?: string;
+  className?: string;
+  "aria-label"?: string;
+  "aria-describedby"?: string;
+  "aria-invalid"?: boolean;
+}) {
+  const text = useUiText().tags;
+  const [inner, setInner] = useState(defaultValue);
+  const tags = value ?? inner;
+  const [draft, setDraft] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const errorId = useId();
+  const full = max != null && tags.length >= max;
+
+  const commit = (next: string[]) => {
+    if (value === undefined) setInner(next);
+    onValueChange?.(next);
+  };
+
+  /** เพิ่มหลายค่า — คืนค่าที่ไม่ผ่าน (ให้คงไว้ในช่องพิมพ์) */
+  const add = (raws: string[]): string => {
+    const next = [...tags];
+    let firstError: string | null = null;
+    const rejected: string[] = [];
+    for (const raw of raws) {
+      const tag = transform(raw);
+      if (!tag) continue;
+      let message: string | null | undefined = null;
+      if (max != null && next.length >= max) {
+        message = (text?.max ?? "เพิ่มได้สูงสุด {max} รายการ").replace("{max}", String(max));
+      } else if (!allowDuplicates && next.includes(tag)) {
+        message = (text?.duplicate ?? "มี “{tag}” แล้ว").replace("{tag}", tag);
+      } else {
+        message = validate?.(tag, next);
+      }
+      if (message) {
+        firstError ??= message;
+        rejected.push(raw.trim());
+      } else {
+        next.push(tag);
+      }
+    }
+    if (next.length !== tags.length) commit(next);
+    setError(firstError);
+    return rejected.join(", ");
+  };
+
+  const separator = splitOnSpace ? /[,;\n\s]+/ : /[,;\n]+/;
+
+  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.nativeEvent.isComposing) return; // กำลังประกอบคำด้วย IME
+    if (e.key === "Enter" || e.key === "," || (splitOnSpace && e.key === " ")) {
+      if (!draft.trim()) {
+        if (e.key !== "Enter") e.preventDefault();
+        return;
+      }
+      e.preventDefault();
+      setDraft(add([draft]));
+    } else if (e.key === "Backspace" && draft === "" && tags.length > 0) {
+      e.preventDefault();
+      commit(tags.slice(0, -1));
+      setError(null);
+    }
+  };
+
+  const onPaste = (e: ClipboardEvent<HTMLInputElement>) => {
+    const pasted = e.clipboardData.getData("text");
+    if (!separator.test(pasted)) return;
+    e.preventDefault();
+    // แทรกที่ตำแหน่ง 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) => {
+    commit(tags.filter((_, i) => i !== index));
+    setError(null);
+    inputRef.current?.focus();
+  };
+
+  const describedBy =
+    [ariaDescribedBy, error ? errorId : null].filter(Boolean).join(" ") || undefined;
+
+  return (
+    <div data-slot="tags-input" className={cn("flex w-full flex-col gap-1.5", className)}>
+      <div
+        onClick={() => inputRef.current?.focus()}
+        className={cn(
+          "flex min-h-8 w-full flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent px-1.5 py-1 transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 dark:bg-input/30",
+          (error || ariaInvalid) &&
+            "border-destructive ring-3 ring-destructive/20 focus-within:border-destructive focus-within:ring-destructive/20",
+          disabled && "pointer-events-none opacity-50",
+        )}
+      >
+        {tags.map((tag, i) => (
+          <span
+            // biome-ignore lint/suspicious/noArrayIndexKey: allowDuplicates ทำให้ค่าซ้ำได้ ใช้ตำแหน่งร่วม
+            key={`${tag}-${i}`}
+            className="inline-flex h-6 max-w-full items-center gap-0.5 rounded-md bg-secondary pr-0.5 pl-2 text-secondary-foreground text-sm"
+          >
+            <span className="truncate">{tag}</span>
+            <button
+              type="button"
+              disabled={disabled}
+              aria-label={(text?.remove ?? "ลบ {tag}").replace("{tag}", tag)}
+              onClick={(e) => {
+                e.stopPropagation();
+                remove(i);
+              }}
+              className="flex size-5 shrink-0 items-center justify-center rounded-sm text-muted-foreground outline-none hover:bg-background/60 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 [&_svg]:size-3.5"
+            >
+              <XIcon />
+            </button>
+            {name && <input type="hidden" name={name} value={tag} />}
+          </span>
+        ))}
+        <input
+          ref={inputRef}
+          id={id}
+          value={draft}
+          disabled={disabled || full}
+          placeholder={full ? undefined : (placeholder ?? text?.placeholder ?? "พิมพ์แล้วกด Enter")}
+          aria-label={ariaLabel}
+          aria-describedby={describedBy}
+          aria-invalid={error || ariaInvalid ? true : undefined}
+          onChange={(e) => {
+            setDraft(e.currentTarget.value);
+            if (error) setError(null);
+          }}
+          onKeyDown={onKeyDown}
+          onPaste={onPaste}
+          onBlur={() => {
+            if (draft.trim()) setDraft(add([draft]));
+          }}
+          className="h-6 min-w-24 flex-1 bg-transparent px-1 text-base outline-none placeholder:text-muted-foreground md:text-sm"
+        />
+      </div>
+      {error && (
+        <p id={errorId} role="alert" className="text-destructive text-xs">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,321 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@suphark/ui/components/ui/input-group";
+import { Popover, PopoverContent, PopoverTrigger } from "@suphark/ui/components/ui/popover";
+import { cn } from "@suphark/ui/lib/utils";
+import { ClockIcon } from "lucide-react";
+import { type KeyboardEvent, useEffect, useId, useRef, useState } from "react";
+import { useUiText } from "../ui-text";
+
+/** "HH:mm" 24 ชั่วโมง */
+export type TimeValue = string;
+
+export const pad = (n: number) => String(n).padStart(2, "0");
+
+/**
+ * แปลงข้อความที่พิมพ์เป็น "HH:mm": "14:30" "14.30" "1430" "930" "9" "9:5" → null ถ้าไม่ใช่เวลาที่ถูกต้อง
+ */
+export function parseTimeInput(input: string): TimeValue | null {
+  const s = input.trim().replace(/\s*(น\.|นาฬิกา)$/, "");
+  if (!s) return null;
+  let h: number;
+  let m: number;
+  const sep = s.match(/^(\d{1,2})[:.](\d{1,2})$/);
+  if (sep) {
+    h = Number(sep[1]);
+    m = Number(sep[2]);
+  } else if (/^\d{1,4}$/.test(s)) {
+    if (s.length <= 2) {
+      h = Number(s);
+      m = 0;
+    } else {
+      h = Number(s.slice(0, s.length - 2));
+      m = Number(s.slice(-2));
+    }
+  } else {
+    return null;
+  }
+  if (h > 23 || m > 59) return null;
+  return `${pad(h)}:${pad(m)}`;
+}
+
+export function splitTime(value: TimeValue | null | undefined): [number, number] | null {
+  const parsed = value ? parseTimeInput(value) : null;
+  if (!parsed) return null;
+  const [h, m] = parsed.split(":").map(Number);
+  return [h ?? 0, m ?? 0];
+}
+
+/** คอลัมน์เลือกค่า (listbox): คลิก หรือโฟกัสแล้วใช้ลูกศรขึ้น/ลง Home/End */
+function TimeColumn({
+  label,
+  options,
+  selected,
+  onSelect,
+}: {
+  label: string;
+  options: number[];
+  selected: number | null;
+  onSelect: (value: number) => void;
+}) {
+  const baseId = useId();
+  const listRef = useRef<HTMLDivElement>(null);
+  const optionId = (v: number) => `${baseId}-${v}`;
+
+  // เลื่อนเฉพาะในคอลัมน์ให้ค่าที่เลือกอยู่กลาง — ไม่ใช้ scrollIntoView เพราะจะเลื่อนทั้งหน้าไปด้วย
+  useEffect(() => {
+    const list = listRef.current;
+    if (selected == null || !list) return;
+    const el = list.querySelector<HTMLElement>(`[data-value="${selected}"]`);
+    if (el) list.scrollTop = el.offsetTop - (list.clientHeight - el.offsetHeight) / 2;
+  }, [selected]);
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    const i = selected == null ? -1 : options.indexOf(selected);
+    let next: number | undefined;
+    if (e.key === "ArrowDown") next = options[Math.min(i + 1, options.length - 1)];
+    else if (e.key === "ArrowUp") next = options[Math.max(i - 1, 0)];
+    else if (e.key === "Home") next = options[0];
+    else if (e.key === "End") next = options[options.length - 1];
+    if (next !== undefined) {
+      e.preventDefault();
+      onSelect(next);
+    }
+  };
+
+  return (
+    <div
+      ref={listRef}
+      role="listbox"
+      tabIndex={0}
+      aria-label={label}
+      aria-activedescendant={selected == null ? undefined : optionId(selected)}
+      onKeyDown={onKeyDown}
+      className="no-scrollbar relative flex max-h-56 w-14 flex-col gap-0.5 overflow-y-auto rounded-md p-0.5 outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+    >
+      {options.map((v) => (
+        <div
+          key={v}
+          id={optionId(v)}
+          role="option"
+          aria-selected={v === selected}
+          data-value={v}
+          tabIndex={-1}
+          onClick={() => onSelect(v)}
+          className={cn(
+            "flex h-8 shrink-0 cursor-default items-center justify-center rounded-md text-sm tabular-nums select-none hover:bg-muted",
+            v === selected && "bg-primary text-primary-foreground hover:bg-primary",
+          )}
+        >
+          {pad(v)}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/** คอลัมน์ชั่วโมง + นาที (ใช้ใน TimePicker / DateTimePicker) */
+export function TimeColumns({
+  value,
+  onValueChange,
+  minuteStep = 5,
+  className,
+}: {
+  value: TimeValue | null | undefined;
+  onValueChange: (value: TimeValue) => void;
+  /** ระยะห่างนาทีในคอลัมน์ (ค่านาทีที่ไม่ลงตัวยังแสดงถ้าเลือกอยู่) */
+  minuteStep?: number;
+  className?: string;
+}) {
+  const text = useUiText().time;
+  const current = splitTime(value);
+  const hours = Array.from({ length: 24 }, (_, i) => i);
+  const minutes = Array.from({ length: Math.ceil(60 / minuteStep) }, (_, i) => i * minuteStep);
+  if (current && !minutes.includes(current[1])) {
+    minutes.push(current[1]);
+    minutes.sort((a, b) => a - b);
+  }
+  const set = (h: number, m: number) => onValueChange(`${pad(h)}:${pad(m)}`);
+  return (
+    <div data-slot="time-columns" className={cn("flex gap-1", className)}>
+      <TimeColumn
+        label={text?.hour ?? "ชั่วโมง"}
+        options={hours}
+        selected={current?.[0] ?? null}
+        onSelect={(h) => set(h, current?.[1] ?? 0)}
+      />
+      <TimeColumn
+        label={text?.minute ?? "นาที"}
+        options={minutes}
+        selected={current?.[1] ?? null}
+        onSelect={(m) => set(current?.[0] ?? 0, m)}
+      />
+    </div>
+  );
+}
+
+/** state แบบ controlled/uncontrolled (ใช้ร่วมกับ DateTimePicker) */
+export function useControllable<T>(
+  value: T | undefined,
+  defaultValue: T,
+  onChange?: (v: T) => void,
+) {
+  const [inner, setInner] = useState(defaultValue);
+  const controlled = value !== undefined;
+  const current = controlled ? value : inner;
+  const set = (v: T) => {
+    if (!controlled) setInner(v);
+    onChange?.(v);
+  };
+  return [current, set] as const;
+}
+
+const nowTime = (): TimeValue => {
+  const d = new Date();
+  return `${pad(d.getHours())}:${pad(d.getMinutes())}`;
+};
+
+/**
+ * ช่องเวลา 24 ชม. — พิมพ์ได้เลย ("1430", "9.15", "14:30") หรือกดไอคอนนาฬิกาเลือกจากคอลัมน์ชั่วโมง/นาที
+ * ค่าเป็น string "HH:mm" (หรือ null) — `name` ส่งใน FormData ได้; พิมพ์ผิดรูปแบบช่องจะเป็นสีแดงจนแก้
+ *
+ *   <TimePicker name="remindAt" defaultValue="09:00" minuteStep={15} aria-label="เวลาเตือน" />
+ */
+export function TimePicker({
+  value,
+  defaultValue = null,
+  onValueChange,
+  minuteStep = 5,
+  name,
+  id,
+  required,
+  disabled,
+  placeholder,
+  className,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+}: {
+  value?: TimeValue | null;
+  defaultValue?: TimeValue | null;
+  onValueChange?: (value: TimeValue | null) => void;
+  minuteStep?: number;
+  name?: string;
+  id?: string;
+  required?: boolean;
+  disabled?: boolean;
+  /** ค่าเริ่มต้น "--:--" */
+  placeholder?: string;
+  className?: string;
+  "aria-label"?: string;
+  "aria-describedby"?: string;
+  "aria-invalid"?: boolean;
+}) {
+  const ui = useUiText();
+  const text = ui.time;
+  const [time, setTime] = useControllable<TimeValue | null>(value, defaultValue, onValueChange);
+  const [draft, setDraft] = useState<string | null>(null);
+  const [open, setOpen] = useState(false);
+  const draftInvalid = draft != null && draft.trim() !== "" && parseTimeInput(draft) == null;
+  const invalidMessage = text?.invalid ?? "รูปแบบเวลาไม่ถูกต้อง (เช่น 14:30)";
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // ข้อความที่พิมพ์ผิด = ช่องนี้ invalid จริง → ฟอร์มไม่ส่ง (ไม่งั้น input ซ่อนจะส่งค่าเดิมไปเงียบ ๆ)
+  useEffect(() => {
+    inputRef.current?.setCustomValidity(draftInvalid ? invalidMessage : "");
+  }, [draftInvalid, invalidMessage]);
+
+  const commitDraft = () => {
+    if (draft == null) return;
+    if (draft.trim() === "") {
+      setTime(null);
+      setDraft(null);
+      return;
+    }
+    const parsed = parseTimeInput(draft);
+    if (parsed) {
+      setTime(parsed);
+      setDraft(null);
+    }
+  };
+
+  return (
+    <InputGroup data-slot="time-picker" className={cn("w-32", className)}>
+      <InputGroupInput
+        ref={inputRef}
+        id={id}
+        inputMode="numeric"
+        autoComplete="off"
+        placeholder={placeholder ?? "--:--"}
+        value={draft ?? time ?? ""}
+        disabled={disabled}
+        required={required}
+        aria-label={ariaLabel}
+        aria-describedby={ariaDescribedBy}
+        aria-invalid={draftInvalid || ariaInvalid || undefined}
+        onChange={(e) => setDraft(e.currentTarget.value)}
+        onBlur={commitDraft}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            commitDraft();
+          }
+        }}
+        className="tabular-nums"
+      />
+      {name && <input type="hidden" name={name} value={time ?? ""} />}
+      <InputGroupAddon align="inline-end">
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger
+            render={
+              <InputGroupButton
+                size="icon-xs"
+                disabled={disabled}
+                aria-label={text?.choose ?? "เลือกเวลา"}
+              />
+            }
+          >
+            <ClockIcon />
+          </PopoverTrigger>
+          <PopoverContent align="end" className="w-auto gap-2 p-2">
+            <TimeColumns
+              value={time}
+              minuteStep={minuteStep}
+              onValueChange={(v) => {
+                setTime(v);
+                setDraft(null);
+              }}
+            />
+            <div className="flex justify-between gap-2 border-t pt-2">
+              <Button
+                type="button"
+                size="xs"
+                variant="ghost"
+                onClick={() => {
+                  setTime(nowTime());
+                  setDraft(null);
+                }}
+              >
+                {text?.now ?? "ตอนนี้"}
+              </Button>
+              <Button type="button" size="xs" onClick={() => setOpen(false)}>
+                {ui.done}
+              </Button>
+            </div>
+          </PopoverContent>
+        </Popover>
+      </InputGroupAddon>
+    </InputGroup>
+  );
+}
+
+/** "YYYY-MM-DDTHH:mm" ตามเวลาท้องถิ่น (รูปแบบเดียวกับ input datetime-local) — ใช้เป็นค่าใน FormData */
+export function toLocalDateTimeString(date: Date): string {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}