@suphark/ui 0.24.0 → 0.25.0

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.25.0] — 2026-10-02
+
+input ใหม่ตามแผนจาก shadcnstudio.com — เพิ่มอย่างเดียว
+
+### Added
+
+- **`NumberInput`** — ช่องตัวเลขพร้อมปุ่ม −/+ (Base UI NumberField): `min`/`max`/`step`/`largeStep` (Shift+ลูกศร), `format` (Intl เช่น ทศนิยม 2 ตำแหน่ง/สกุลเงิน), `locale` (ค่าเริ่มต้น th-TH), `prefix`/`suffix` (฿, %, ชิ้น), `hideButtons`, `size` sm|default, `name` ส่งค่าดิบใน FormData — แทน `<Input type="number">` + InputGroup + state
+- **`TimePicker`** — ช่องเวลา 24 ชม. ค่า `"HH:mm"`: พิมพ์ได้เลย (`"1430"`, `"9.15"`, `"14:30 น."` → แปลงตอน blur/Enter, ผิดรูปแบบ = `aria-invalid`) หรือกดไอคอนนาฬิกาเลือกจากคอลัมน์ชั่วโมง/นาที (`minuteStep`, ปุ่ม "ตอนนี้"); `name` ส่งใน FormData
+- **`DateTimePicker`** — ปฏิทิน (ภาษาไทย) + คอลัมน์เวลาในกล่องเดียว ค่า `Date | null`, `defaultTime` เมื่อเลือกวันครั้งแรก, ปุ่มล้าง; `name` ส่ง `"YYYY-MM-DDTHH:mm"` (เวลาท้องถิ่น แบบ datetime-local)
+- `TimeColumns` (คอลัมน์ listbox ใช้ลูกศร/Home/End), `parseTimeInput`, `toLocalDateTimeString`, `type TimeValue`
+- **`TagsInput`** — พิมพ์หลายค่าเป็นป้าย: Enter/จุลภาค (+ เว้นวรรคถ้า `splitOnSpace`) เพิ่ม, วางหลายค่าพร้อมกัน, Backspace ลบตัวสุดท้าย, ไม่รับค่าซ้ำ (`allowDuplicates`), `max`, `transform`, `validate` คืนข้อความ error (ค่าที่ไม่ผ่านคงอยู่ในช่องให้แก้), ปลอดภัยกับ IME ไทย; `name` ส่งทุกค่า → `formData.getAll(name)` — redirect URI/โดเมน/อีเมล
+- **`StepForm`** — ฟอร์มหลายขั้น (wizard) จาก array `steps` (`title`, `description`, `content`, `validate(formData)`): แถบขั้นตอน (ขั้นที่ผ่านแล้วกดย้อนได้, จอแคบแสดง "ขั้นที่ x จาก y"), ปุ่มย้อนกลับ/ถัดไป/ส่ง, "ถัดไป" ตรวจ required/pattern + `validate` ของขั้นนั้น, ส่ง = ตรวจทุกขั้นอีกครั้งแล้วพากลับไปขั้นที่ผิด, input ตัวแทนที่ซ่อนของ Base UI ผิด = แสดงข้อความใต้ฟอร์ม; ทุกขั้นอยู่ใน form เดียว → `onSubmit(formData)` ได้ค่าครบ (ส่ง server action ต่อได้), throw = แสดงข้อความ, ปุ่มหมุนระหว่างรอ, โฟกัสย้ายไปหัวข้อขั้นใหม่
+- `UiText` key ใหม่: `number`, `time`, `tags`, `stepForm`
+- showcase: หน้า `/components/{number-input,time-picker,tags-input,step-form}` (129 หน้า); tests 11 กรณี
+
+### Performance
+
+- **barrel ไม่ใช้ `export *` แล้ว** (`index.ts` 66 บรรทัด, `next.ts`, `data-table.ts`, `components/data-table/index.ts` → รายชื่อ export ชัด ๆ แยก `type`; รายชื่อ export เท่าเดิมทุกตัว ตรวจด้วย TypeScript แล้ว) — วัดบน showcase (Next 16.3 Turbopack): server component ที่ import จาก `@suphark/ui` แบบ `export *` ทำให้ client component แทบทั้งแพ็กเกจ (ปฏิทิน, date-fns, cmdk, input-otp, accordion, questionnaire …) ถูกส่งไปทุกหน้า — **root layout ที่ใช้แค่ `ThemeProvider`/`Toaster` ลดจาก 988 kB (gzip 311 kB) เหลือ 61 kB (gzip 18 kB)**, หน้า `/login` 991 → 114 kB; แอปไม่ต้องแก้โค้ด แค่ bump (`optimizePackageImports` / `turbopackRemoveUnused*` ไม่ช่วย — ลองแล้ว)
+- `scripts/barrel-exports.mjs`: `pnpm check:barrel` (ใน verify + CI — เจอ `export *` ใน `packages/ui/src` = ล้ม) และ `pnpm fix:barrel` (แปลงให้หลัง `shadcn add`)
+- หมายเหตุ: ตัวเลข date-fns 824 kB บน bundlephobia คือทั้งไลบรารี — ใน build จริงมีเฉพาะฟังก์ชันที่ใช้ + locale ไทย/อังกฤษ
+
 ## [0.24.0] — 2026-10-02
 
 เติมของเดิมตามที่สำรวจ shadcnstudio.com (หยิบเฉพาะ "หน้าที่" ที่ยังไม่มี ทำเป็นตัวเดียว + props) — เพิ่มอย่างเดียว ค่าเริ่มต้นหน้าตาเดิม

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "private": false,
   "type": "module",
   "description": "Design system กลางของ Suphark apps: shadcn/ui (base-nova, Base UI, Tailwind v4) + shared components + token/ฟอนต์ Noto Sans Thai Looped — ส่งเป็น source ให้แอป Next transpile เอง",

package/src/components/data-table/index.ts

@@ -1,9 +1,9 @@
-export * from "./data-table";
-export * from "./data-table-column-header";
-export * from "./data-table-date-range-filter";
-export * from "./data-table-faceted-filter";
-export * from "./data-table-pagination";
-export * from "./data-table-toolbar";
-export * from "./data-table-view-option";
-export * from "./types";
-export * from "./use-data-table";
+export { DataTable } from "./data-table";
+export { DataTableColumnHeader } from "./data-table-column-header";
+export { DataTableDateRangeFilter } from "./data-table-date-range-filter";
+export { DataTableFacetedFilter } from "./data-table-faceted-filter";
+export { DataTablePagination } from "./data-table-pagination";
+export { DataTableToolbar } from "./data-table-toolbar";
+export { DataTableViewOptions } from "./data-table-view-option";
+export type { DataTableProps, FacetedFilterConfig } from "./types";
+export { useDataTable } from "./use-data-table";

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

@@ -0,0 +1,144 @@
+"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";
+
+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}
+      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,192 @@
+"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();
+    setDraft(add(pasted.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>
+  );
+}