@suphark/ui 0.15.0 → 0.16.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.16.0] — 2026-09-30
+
+### Added
+
+- **`SearchInput`** (barrel) — ช่องค้นหามาตรฐานที่ Pi Auth (~15 จุด) / Pi PDF (5) / DueBell (8) เขียนซ้ำ: ไอคอนแว่นขยายซ้าย, ปุ่มล้าง (X) ขวาเมื่อมีข้อความ (กดแล้ว focus กลับที่ช่อง), **Escape ล้างค่า** (`clearOnEscape`), `type="search"` แต่ซ่อนปุ่ม X ของ WebKit; controlled ล้วน `value` + `onValueChange(next)` (แอปคุม state/debounce เอง), `onClear`, `size` xs|sm|default (h-7/h-8/h-9), `label`/`clearLabel`/`placeholder` (ค่าเริ่มต้นจาก **`UiText.search`** `{ placeholder, label, clear }` — key ใหม่), `groupClassName` (กรอบ) แยกจาก `className` (ตัว `<input>`), ส่ง `ref` ถึง input ได้; props อื่นของ `<input>` ส่งผ่านหมด
+- showcase: หน้า `/components/search-input`; **เมนูซ้ายของ `/components` มีช่องค้นหาแล้ว** — กรองตามชื่อ/slug/ชื่อ export/คำอธิบาย, บอกจำนวนที่พบ (`aria-live`), กด `/` ที่ไหนก็ได้เพื่อโฟกัสช่องค้นหา (ไม่ดักเมื่อกำลังพิมพ์ในช่องอื่น)
+
 ## [0.15.0] — 2026-09-30
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.15.0",
+  "version": "0.16.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/shared/form/search-input.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@suphark/ui/components/ui/input-group";
+import { cn } from "@suphark/ui/lib/utils";
+import { Search, X } from "lucide-react";
+import { type ComponentProps, useRef } from "react";
+
+export interface SearchInputProps
+  extends Omit<ComponentProps<"input">, "size" | "value" | "onChange" | "type"> {
+  value: string;
+  /** รับค่าใหม่ตรง ๆ (ไม่ใช่ event) — ปุ่มล้างก็เรียกด้วย `""` */
+  onValueChange: (value: string) => void;
+  /** เรียกเพิ่มหลังกดปุ่มล้าง/Escape (เช่นรีเซ็ตหน้า pagination) */
+  onClear?: () => void;
+  /** xs = h-7, sm = h-8 (ค่าเริ่มต้น), default = h-9 */
+  size?: "xs" | "sm" | "default";
+  /** aria-label ของช่อง (ค่าเริ่มต้น `UiText.search.label`) */
+  label?: string;
+  /** aria-label ของปุ่มล้าง (ค่าเริ่มต้น `UiText.search.clear`) */
+  clearLabel?: string;
+  /** Escape ในช่องล้างค่า (ค่าเริ่มต้น true) */
+  clearOnEscape?: boolean;
+  /** class ของกรอบ (InputGroup) — `className` ไปที่ `<input>` */
+  groupClassName?: string;
+}
+
+/**
+ * ช่องค้นหามาตรฐาน: ไอคอนแว่นขยายซ้าย + ปุ่มล้าง (X) ขวาเมื่อมีข้อความ + Escape ล้างค่า
+ * เป็น controlled ล้วน (แอปคุม state/debounce เอง) — ซ้ำอยู่ใน Pi Auth/Pi PDF/DueBell จึงยกมาไว้ที่นี่
+ *
+ *   const [q, setQ] = useState("");
+ *   <SearchInput value={q} onValueChange={setQ} placeholder="ค้นหาสมาชิก…" />
+ */
+export function SearchInput({
+  value,
+  onValueChange,
+  onClear,
+  size = "sm",
+  label,
+  clearLabel,
+  clearOnEscape = true,
+  placeholder,
+  className,
+  groupClassName,
+  disabled,
+  onKeyDown,
+  ref,
+  ...props
+}: SearchInputProps) {
+  const text = useUiText();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  function clear() {
+    onValueChange("");
+    onClear?.();
+    inputRef.current?.focus();
+  }
+
+  return (
+    <InputGroup
+      data-slot="search-input"
+      className={cn(size === "xs" ? "h-7" : size === "default" ? "h-9" : "h-8", groupClassName)}
+    >
+      <InputGroupAddon>
+        <Search aria-hidden="true" className={size === "xs" ? "size-3.5" : undefined} />
+      </InputGroupAddon>
+      <InputGroupInput
+        {...props}
+        ref={(node) => {
+          inputRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        }}
+        type="search"
+        value={value}
+        disabled={disabled}
+        placeholder={placeholder ?? text.search?.placeholder ?? "ค้นหา…"}
+        aria-label={label ?? text.search?.label ?? "ค้นหา"}
+        autoComplete="off"
+        spellCheck={false}
+        onChange={(e) => onValueChange(e.target.value)}
+        onKeyDown={(e) => {
+          onKeyDown?.(e);
+          if (clearOnEscape && e.key === "Escape" && value && !e.defaultPrevented) {
+            e.preventDefault();
+            clear();
+          }
+        }}
+        className={cn(
+          // ซ่อนปุ่ม X ของ type=search ใน WebKit — เรามีปุ่มล้างของเราเอง
+          "[&::-webkit-search-cancel-button]:appearance-none",
+          size === "xs" && "text-xs",
+          className,
+        )}
+      />
+      {value && !disabled && (
+        <InputGroupAddon align="inline-end">
+          <InputGroupButton
+            size={size === "xs" ? "icon-xs" : "icon-sm"}
+            onClick={clear}
+            aria-label={clearLabel ?? text.search?.clear ?? "ล้างการค้นหา"}
+          >
+            <X aria-hidden="true" />
+          </InputGroupButton>
+        </InputGroupAddon>
+      )}
+    </InputGroup>
+  );
+}

package/src/components/shared/ui-text.tsx

@@ -49,6 +49,8 @@ export interface UiText {
   theme?: Partial<{ label: string; light: string; dark: string; system: string }>;
   /** SectionNav: aria-label ของแถบแท็บย่อย (optional — "แท็บย่อย") */
   sectionNav?: Partial<{ tabs: string }>;
+  /** SearchInput: placeholder / aria-label ช่อง / aria-label ปุ่มล้าง (optional) */
+  search?: Partial<{ placeholder: string; label: string; clear: string }>;
 }
 
 export const UI_TEXT_TH: UiText = {
@@ -82,6 +84,7 @@ export const UI_TEXT_TH: UiText = {
   signOut: "ออกจากระบบ",
   theme: { label: "ธีม", light: "สว่าง", dark: "มืด", system: "ตามระบบ" },
   sectionNav: { tabs: "แท็บย่อย" },
+  search: { placeholder: "ค้นหา…", label: "ค้นหา", clear: "ล้างการค้นหา" },
 };
 
 export const UI_TEXT_EN: UiText = {
@@ -115,6 +118,7 @@ export const UI_TEXT_EN: UiText = {
   signOut: "Sign out",
   theme: { label: "Theme", light: "Light", dark: "Dark", system: "System" },
   sectionNav: { tabs: "Section tabs" },
+  search: { placeholder: "Search…", label: "Search", clear: "Clear search" },
 };
 
 const UiTextContext = createContext<UiText>(UI_TEXT_TH);

package/src/index.ts

@@ -76,6 +76,7 @@ export { FormFieldRadioCards } from "./components/shared/form/form-field-radio-c
 export { FormFieldRadioGroup } from "./components/shared/form/form-field-radio-group";
 export { FormFieldSelect, type SelectOption } from "./components/shared/form/form-field-select";
 export { CheckboxField, LabeledField } from "./components/shared/form/labeled-field";
+export { SearchInput, type SearchInputProps } from "./components/shared/form/search-input";
 export {
   SimpleSelect,
   type SimpleSelectGroup,