@suphark/ui 0.23.0 → 0.25.0

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

@@ -0,0 +1,421 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import { Calendar } from "@suphark/ui/components/ui/calendar";
+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 { CalendarClockIcon, ClockIcon } from "lucide-react";
+import { type KeyboardEvent, useEffect, useId, useRef, useState } from "react";
+import { th } from "react-day-picker/locale";
+import { useUiText } from "../ui-text";
+
+/** "HH:mm" 24 ชั่วโมง */
+export type TimeValue = string;
+
+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)}`;
+}
+
+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}`;
+
+  // เลื่อนให้ค่าที่เลือกอยู่กลางคอลัมน์ทุกครั้งที่เปลี่ยน
+  useEffect(() => {
+    if (selected == null) return;
+    const el = listRef.current?.querySelector<HTMLElement>(`[data-value="${selected}"]`);
+    el?.scrollIntoView?.({ block: "center" });
+  }, [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 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>
+  );
+}
+
+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 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
+        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())}`;
+}
+
+/**
+ * เลือกวัน + เวลาในกล่องเดียว (ปฏิทิน + คอลัมน์ชั่วโมง/นาที) — นัดหมาย, กำหนดส่ง, เวลาเตือน
+ * ค่าเป็น `Date | null`; เลือกวันก่อนเวลา = ใช้ `defaultTime`; `name` ส่ง "YYYY-MM-DDTHH:mm" (เวลาท้องถิ่น) ใน FormData
+ *
+ *   <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 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
+    ? date.toLocaleString("th-TH", { dateStyle: "medium", timeStyle: "short" })
+    : (placeholder ?? text?.dateTimePlaceholder ?? "เลือกวันและเวลา");
+
+  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 ? toLocalDateTimeString(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/initials.tsx

@@ -1,6 +1,7 @@
 import { Avatar, AvatarFallback, AvatarImage } from "@suphark/ui/components/ui/avatar";
 import { cn } from "@suphark/ui/lib/utils";
 import type { ComponentProps } from "react";
+import { type Presence, PresenceDot } from "./presence-dot";
 
 /** ตัวอักษรย่อจากชื่อ (ไทย/อังกฤษ): "สมชาย ใจดี" → "สจ", "Suphark A." → "SA" */
 export function initialsOf(name: string | null | undefined, fallback = "?"): string {
@@ -11,13 +12,20 @@ export function initialsOf(name: string | null | undefined, fallback = "?"): str
   return (first + last).toUpperCase();
 }
 
-/** Avatar ของ shadcn + ตัวย่อชื่อ + สีพื้นคงที่ต่อชื่อ (ไม่ต้องมีรูป) */
+/** Avatar ของ shadcn + ตัวย่อชื่อ + สีพื้นคงที่ต่อชื่อ (ไม่ต้องมีรูป) + จุดสถานะ `status` */
 export function Initials({
   name,
   src,
+  status,
   className,
+  children,
   ...props
-}: ComponentProps<typeof Avatar> & { name: string | null | undefined; src?: string | null }) {
+}: ComponentProps<typeof Avatar> & {
+  name: string | null | undefined;
+  src?: string | null;
+  /** จุดสถานะมุมล่างขวา: online / away / busy / offline */
+  status?: Presence;
+}) {
   const hue = [...(name ?? "")].reduce((h, c) => (h * 31 + c.codePointAt(0)!) % 360, 7);
   return (
     <Avatar className={cn("shrink-0", className)} {...props}>
@@ -28,6 +36,8 @@ export function Initials({
       >
         {initialsOf(name)}
       </AvatarFallback>
+      {status && <PresenceDot status={status} />}
+      {children}
     </Avatar>
   );
 }

package/src/components/shared/notice.tsx

@@ -1,7 +1,12 @@
-import { Alert, AlertDescription, AlertTitle } from "@suphark/ui/components/ui/alert";
+"use client";
+
+import { Alert, AlertAction, AlertDescription, AlertTitle } from "@suphark/ui/components/ui/alert";
+import { Button } from "@suphark/ui/components/ui/button";
 import { cn } from "@suphark/ui/lib/utils";
-import type { ComponentProps, ReactNode } from "react";
+import { CircleAlertIcon, CircleCheckIcon, InfoIcon, TriangleAlertIcon, XIcon } from "lucide-react";
+import { type ComponentProps, type ReactNode, useState } from "react";
 import type { Tone } from "./status-badge";
+import { useUiText } from "./ui-text";
 
 export type NoticeTone = Exclude<Tone, "neutral">;
 
@@ -13,21 +18,66 @@ const TONE: Record<NoticeTone, string> = {
   danger: "border-destructive-border bg-destructive-subtle text-destructive-subtle-foreground",
 };
 
-/** Alert ของ shadcn + สีตามความหมาย (info/success/warning/danger) */
+const TONE_ICON: Record<NoticeTone, ReactNode> = {
+  info: <InfoIcon />,
+  success: <CircleCheckIcon />,
+  warning: <TriangleAlertIcon />,
+  danger: <CircleAlertIcon />,
+};
+
+/**
+ * Alert ของ shadcn + สีตามความหมาย (info/success/warning/danger)
+ * `icon` = true ใช้ไอคอนตามโทน หรือส่งไอคอนเอง · `dismissible` = มีปุ่ม X ซ่อนเองเมื่อกด (+ `onDismiss` เช่นจำไว้ใน cookie)
+ *
+ *   <Notice tone="warning" icon dismissible title="ยังไม่ได้ยืนยันอีเมล">ตรวจกล่องจดหมาย…</Notice>
+ */
 export function Notice({
   tone = "info",
   title,
+  icon,
+  dismissible = false,
+  onDismiss,
   children,
   className,
   ...props
 }: Omit<ComponentProps<typeof Alert>, "variant" | "title"> & {
   tone?: NoticeTone;
   title?: ReactNode;
+  /** true = ไอคอนตามโทน, ReactNode = ไอคอนเอง */
+  icon?: ReactNode | boolean;
+  /** แสดงปุ่มปิด (UiText.close) — กดแล้วซ่อนกล่องนี้ */
+  dismissible?: boolean;
+  onDismiss?: () => void;
 }) {
+  const closeLabel = useUiText().close ?? "ปิด";
+  const [hidden, setHidden] = useState(false);
+  if (hidden) return null;
+  const iconNode = icon === true ? TONE_ICON[tone] : icon || null;
   return (
-    <Alert className={cn(TONE[tone], className)} {...props}>
+    <Alert
+      className={cn(TONE[tone], dismissible && "has-data-[slot=alert-action]:pr-9", className)}
+      {...props}
+    >
+      {iconNode}
       {title && <AlertTitle>{title}</AlertTitle>}
       <AlertDescription className="text-inherit">{children}</AlertDescription>
+      {dismissible && (
+        <AlertAction className="top-1.5 right-1.5">
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-xs"
+            aria-label={closeLabel}
+            className="text-current hover:bg-current/10 hover:text-current"
+            onClick={() => {
+              setHidden(true);
+              onDismiss?.();
+            }}
+          >
+            <XIcon />
+          </Button>
+        </AlertAction>
+      )}
     </Alert>
   );
 }

package/src/components/shared/presence-dot.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { AvatarBadge } from "@suphark/ui/components/ui/avatar";
+import { cn } from "@suphark/ui/lib/utils";
+import { useUiText } from "./ui-text";
+
+export type Presence = "online" | "away" | "busy" | "offline";
+
+const PRESENCE_CLASS: Record<Presence, string> = {
+  online: "bg-success",
+  away: "bg-warning",
+  busy: "bg-destructive",
+  offline: "bg-muted-foreground",
+};
+
+const PRESENCE_TH: Record<Presence, string> = {
+  online: "ออนไลน์",
+  away: "ไม่อยู่",
+  busy: "ไม่ว่าง",
+  offline: "ออฟไลน์",
+};
+
+/** จุดสถานะมุมล่างขวาของ Avatar (ใช้ใน `Initials status`) — ชื่อสถานะอ่านได้ด้วย screen reader */
+export function PresenceDot({ status, className }: { status: Presence; className?: string }) {
+  const label = useUiText().presence?.[status] ?? PRESENCE_TH[status];
+  return (
+    <AvatarBadge data-presence={status} className={cn(PRESENCE_CLASS[status], className)}>
+      <span className="sr-only">{label}</span>
+    </AvatarBadge>
+  );
+}