@suphark/ui 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.1.1] — 2026-09-18
+
+### Added
+
+- `NativeSelect` / `NativeSelectOption` (shadcn `native-select` — `<select>` ธรรมดาสำหรับฟอร์ม server action/FormData) ตามที่ Pi Auth ใช้ 17 ไฟล์
+- dependency `cn` (^0.3.0) — shadcn CLI รุ่นใหม่สร้างไฟล์ที่ `import { cn } from "cn"` แทน `lib/utils`; ทั้งสองทางใช้ได้ ไฟล์เดิม 59 ตัวยังใช้ `@suphark/ui/lib/utils`
+
+### Changed
+
+- ตัด `__tests__`/`*.test.*` ออกจาก tarball (`files` ใน package.json) — test ยังอยู่ใน repo
+
+### Notes
+
+- `ThemeToggle` props `persistedTheme` / `onThemeChange` เป็น optional อยู่แล้ว — ไม่ส่ง = ใช้ next-themes อย่างเดียว (ใช้แทน ThemeToggle ของ @pi/ui ได้โดยไม่ต้องเปลี่ยน call site)
+
 ## [0.1.0] — 2026-09-18
 
 รุ่นแรก — ยกจาก `supplychainnextjs-1` (source of truth) + ชุด generic จาก Pi Auth `@pi/ui`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "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 เอง",
@@ -24,6 +24,8 @@
   ],
   "files": [
     "src",
+    "!src/**/__tests__",
+    "!src/**/*.test.*",
     "scripts",
     "components.json",
     "README.md",
@@ -48,6 +50,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "cn": "^0.3.0",
     "date-fns": "^4.4.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.5.0",

package/src/components/ui/native-select.tsx

@@ -0,0 +1,54 @@
+import { cn } from "cn";
+import { ChevronDownIcon } from "lucide-react";
+import type * as React from "react";
+
+type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
+  size?: "sm" | "default";
+};
+
+function NativeSelect({ className, size = "default", ...props }: NativeSelectProps) {
+  return (
+    <div
+      className={cn(
+        "group/native-select relative w-fit has-[select:disabled]:opacity-50",
+        className,
+      )}
+      data-slot="native-select-wrapper"
+      data-size={size}
+    >
+      <select
+        data-slot="native-select"
+        data-size={size}
+        className="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
+        {...props}
+      />
+      <ChevronDownIcon
+        className="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none"
+        aria-hidden="true"
+        data-slot="native-select-icon"
+      />
+    </div>
+  );
+}
+
+function NativeSelectOption({ className, ...props }: React.ComponentProps<"option">) {
+  return (
+    <option
+      data-slot="native-select-option"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  );
+}
+
+function NativeSelectOptGroup({ className, ...props }: React.ComponentProps<"optgroup">) {
+  return (
+    <optgroup
+      data-slot="native-select-optgroup"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  );
+}
+
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };

package/src/index.ts

@@ -106,6 +106,7 @@ export * from "./components/ui/item";
 export * from "./components/ui/kbd";
 export * from "./components/ui/label";
 export * from "./components/ui/menubar";
+export * from "./components/ui/native-select";
 export * from "./components/ui/navigation-menu";
 export * from "./components/ui/pagination";
 export * from "./components/ui/popover";

package/src/components/shared/__tests__/multi-select-combobox.test.tsx

@@ -1,180 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { MultiSelectCombobox, type MultiSelectOption } from "../multi-select-combobox";
-
-class ResizeObserverMock {
-  observe() {}
-  unobserve() {}
-  disconnect() {}
-}
-
-beforeEach(() => {
-  globalThis.ResizeObserver = ResizeObserverMock as unknown as typeof ResizeObserver;
-  window.HTMLElement.prototype.scrollIntoView = vi.fn();
-});
-
-const mockOptions: MultiSelectOption[] = [
-  { label: "หมวดงานโครงสร้าง", value: "structure" },
-  { label: "หมวดงานสถาปัตย์", value: "architecture" },
-  { label: "หมวดงานระบบไฟฟ้า", value: "electrical" },
-  { label: "หมวดงานสุขาภิบาล", value: "sanitary" },
-];
-
-describe("MultiSelectCombobox", () => {
-  it("renders with placeholder when no value is selected", () => {
-    const onChange = vi.fn();
-    render(
-      <MultiSelectCombobox
-        options={mockOptions}
-        value={[]}
-        onChange={onChange}
-        placeholder="เลือกหมวดหมู่งาน..."
-      />,
-    );
-
-    expect(screen.getByText("เลือกหมวดหมู่งาน...")).toBeInTheDocument();
-  });
-
-  it("renders selected items always at the top of the dropdown list", async () => {
-    const onChange = vi.fn();
-    // 'electrical' is selected
-    render(
-      <MultiSelectCombobox options={mockOptions} value={["electrical"]} onChange={onChange} />,
-    );
-
-    const trigger = screen.getByRole("combobox");
-    fireEvent.click(trigger);
-
-    // Selected item 'electrical' should be rendered first under "รายการที่เลือก"
-    expect(screen.getByText("รายการที่เลือก")).toBeInTheDocument();
-    expect(screen.getByText("ตัวเลือกทั้งหมด")).toBeInTheDocument();
-
-    const optionItems = screen.getAllByRole("option");
-    expect(optionItems[0]).toHaveTextContent("หมวดงานระบบไฟฟ้า");
-    expect(optionItems[1]).toHaveTextContent("หมวดงานโครงสร้าง");
-    expect(optionItems[2]).toHaveTextContent("หมวดงานสถาปัตย์");
-    expect(optionItems[3]).toHaveTextContent("หมวดงานสุขาภิบาล");
-  });
-
-  it("allows selecting an unselected item and calling onChange with added value", () => {
-    const onChange = vi.fn();
-    render(<MultiSelectCombobox options={mockOptions} value={["structure"]} onChange={onChange} />);
-
-    const trigger = screen.getByRole("combobox");
-    fireEvent.click(trigger);
-
-    // Click 'architecture'
-    const archOption = screen.getByText("หมวดงานสถาปัตย์");
-    fireEvent.click(archOption);
-
-    expect(onChange).toHaveBeenCalledWith(["structure", "architecture"]);
-  });
-
-  it("allows unselecting an already selected item from the dropdown", () => {
-    const onChange = vi.fn();
-    render(
-      <MultiSelectCombobox
-        options={mockOptions}
-        value={["structure", "electrical"]}
-        onChange={onChange}
-      />,
-    );
-
-    const trigger = screen.getByRole("combobox");
-    fireEvent.click(trigger);
-
-    // Click 'structure' option in dropdown to toggle off
-    const optionItems = screen.getAllByRole("option");
-    const structOption = optionItems.find((el) => el.textContent?.includes("หมวดงานโครงสร้าง"));
-    expect(structOption).toBeDefined();
-    fireEvent.click(structOption!);
-
-    expect(onChange).toHaveBeenCalledWith(["electrical"]);
-  });
-
-  it("removes a selected item when clicking the badge remove X button", () => {
-    const onChange = vi.fn();
-    render(
-      <MultiSelectCombobox
-        options={mockOptions}
-        value={["structure", "sanitary"]}
-        onChange={onChange}
-      />,
-    );
-
-    const removeBtn = screen.getByLabelText("ลบ หมวดงานโครงสร้าง");
-    fireEvent.click(removeBtn);
-
-    expect(onChange).toHaveBeenCalledWith(["sanitary"]);
-  });
-
-  it("clears all selected items when clicking the clear all button", () => {
-    const onChange = vi.fn();
-    render(
-      <MultiSelectCombobox
-        options={mockOptions}
-        value={["structure", "sanitary"]}
-        onChange={onChange}
-      />,
-    );
-
-    const clearAllBtn = screen.getByLabelText("ล้างทั้งหมด");
-    fireEvent.click(clearAllBtn);
-
-    expect(onChange).toHaveBeenCalledWith([]);
-  });
-
-  it("limits badges display with maxDisplay and shows overflow badge count", () => {
-    const onChange = vi.fn();
-    render(
-      <MultiSelectCombobox
-        options={mockOptions}
-        value={["structure", "architecture", "electrical", "sanitary"]}
-        onChange={onChange}
-        maxDisplay={2}
-      />,
-    );
-
-    expect(screen.getByText("หมวดงานโครงสร้าง")).toBeInTheDocument();
-    expect(screen.getByText("หมวดงานสถาปัตย์")).toBeInTheDocument();
-    expect(screen.queryByText("หมวดงานระบบไฟฟ้า")).not.toBeInTheDocument();
-    expect(screen.getByText("+2 รายการ")).toBeInTheDocument();
-  });
-
-  it("filters options via search input preserving selected items on top", async () => {
-    const onChange = vi.fn();
-    render(
-      <MultiSelectCombobox options={mockOptions} value={["electrical"]} onChange={onChange} />,
-    );
-
-    const trigger = screen.getByRole("combobox");
-    fireEvent.click(trigger);
-
-    const searchInput = screen.getByPlaceholderText("ค้นหา...");
-    fireEvent.change(searchInput, { target: { value: "งาน" } });
-
-    // All matching options still show, with selected 'electrical' on top
-    const options = screen.getAllByRole("option");
-    expect(options[0]).toHaveTextContent("หมวดงานระบบไฟฟ้า");
-  });
-
-  it("supports select all action when showSelectAll is true", () => {
-    const onChange = vi.fn();
-    render(
-      <MultiSelectCombobox
-        options={mockOptions}
-        value={["structure"]}
-        onChange={onChange}
-        showSelectAll={true}
-      />,
-    );
-
-    const trigger = screen.getByRole("combobox");
-    fireEvent.click(trigger);
-
-    const selectAllBtn = screen.getByText("เลือกทั้งหมด");
-    fireEvent.click(selectAllBtn);
-
-    expect(onChange).toHaveBeenCalledWith(["structure", "architecture", "electrical", "sanitary"]);
-  });
-});

package/src/components/shared/__tests__/name-id-fields.test.ts

@@ -1,24 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { toIdentifier } from "../name-id-fields";
-
-describe("toIdentifier", () => {
-  it("kebab: slug จากชื่อองค์กร", () => {
-    expect(toIdentifier("Acme PCL", "kebab")).toBe("acme-pcl");
-    expect(toIdentifier("  Acme  Co., Ltd. ", "kebab")).toBe("acme-co-ltd");
-    expect(toIdentifier("Café Résumé", "kebab")).toBe("cafe-resume");
-  });
-  it("camel: key ของ attribute", () => {
-    expect(toIdentifier("Cost Center", "camel")).toBe("costCenter");
-    expect(toIdentifier("2FA Enabled", "camel")).toBe("x2faEnabled");
-  });
-  it("upper: รหัสตำแหน่ง", () => {
-    expect(toIdentifier("Senior Director", "upper")).toBe("SENIOR_DIRECTOR");
-  });
-  it("ชื่อไทยล้วน → ว่าง (ให้ผู้ใช้ตั้งเอง); ผสม → เอาเฉพาะละติน", () => {
-    expect(toIdentifier("ฝ่ายวิศวกรรม", "kebab")).toBe("");
-    expect(toIdentifier("ฝ่าย IT Support", "kebab")).toBe("it-support");
-  });
-  it("ตัดความยาวแล้วไม่ทิ้งขีดท้าย", () => {
-    expect(toIdentifier("alpha beta gamma", "kebab", 11)).toBe("alpha-beta");
-  });
-});

package/src/components/shared/form/__tests__/simple-select.test.tsx

@@ -1,72 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-import { SimpleSelect, type SimpleSelectGroup, type SimpleSelectOption } from "../simple-select";
-
-describe("SimpleSelect Component", () => {
-  it("renders flat options and displays label instead of raw ID", () => {
-    const options: SimpleSelectOption[] = [
-      { value: "none", label: "ไม่ระบุ" },
-      { value: "550e8400-e29b-41d4-a716-446655440000", label: "โครงการ A" },
-      { value: "660e8400-e29b-41d4-a716-446655440001", label: "โครงการ B" },
-    ];
-
-    render(
-      <SimpleSelect
-        value="550e8400-e29b-41d4-a716-446655440000"
-        options={options}
-        onValueChange={vi.fn()}
-      />,
-    );
-
-    // Should display the label "โครงการ A"
-    expect(screen.getByText("โครงการ A")).toBeInTheDocument();
-    // Should NOT display the raw UUID
-    expect(screen.queryByText("550e8400-e29b-41d4-a716-446655440000")).not.toBeInTheDocument();
-  });
-
-  it("renders grouped options and displays label for selected item", () => {
-    const groups: SimpleSelectGroup[] = [
-      {
-        label: "กลุ่มที่ 1",
-        options: [
-          { value: "step-1::field-1", label: "เลขที่เอกสาร (Text)" },
-          { value: "step-1::field-2", label: "คู่ค้า (Select)" },
-        ],
-      },
-      {
-        label: "กลุ่มที่ 2",
-        options: [{ value: "step-2::field-3", label: "ยอดเงิน (Number)" }],
-      },
-    ];
-
-    render(<SimpleSelect value="step-1::field-2" options={groups} onValueChange={vi.fn()} />);
-
-    expect(screen.getByText("คู่ค้า (Select)")).toBeInTheDocument();
-    expect(screen.queryByText("step-1::field-2")).not.toBeInTheDocument();
-  });
-
-  it("uses fallbackLabel when the selected value is not in options", () => {
-    const options: SimpleSelectOption[] = [{ value: "opt-1", label: "ตัวเลือก 1" }];
-
-    render(
-      <SimpleSelect
-        value="orphaned-step-id::field-abc"
-        options={options}
-        fallbackLabel={(val) => `ค้นพบจากประวัติ: ${val.split("::").pop()}`}
-        onValueChange={vi.fn()}
-      />,
-    );
-
-    expect(screen.getByText("ค้นพบจากประวัติ: field-abc")).toBeInTheDocument();
-  });
-
-  it("renders placeholder when value is empty or unset", () => {
-    const options: SimpleSelectOption[] = [{ value: "opt-1", label: "ตัวเลือก 1" }];
-
-    render(
-      <SimpleSelect value="" options={options} placeholder="กรุณาเลือก..." onValueChange={vi.fn()} />,
-    );
-
-    expect(screen.getByText("กรุณาเลือก...")).toBeInTheDocument();
-  });
-});

package/src/components/ui/__tests__/combobox.test.tsx

@@ -1,40 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-import { Combobox, ComboboxContent, ComboboxInput, ComboboxItem, ComboboxList } from "../combobox";
-
-describe("ComboboxContent", () => {
-  it("renders selectable items inside a supplied modal container", () => {
-    const onValueChange = vi.fn();
-
-    render(<ModalCombobox onValueChange={onValueChange} />);
-
-    const option = screen.getByText("ครัว");
-
-    fireEvent.click(option);
-
-    expect(onValueChange).toHaveBeenCalledWith("ครัว", expect.anything());
-  });
-});
-
-function ModalCombobox({
-  onValueChange,
-}: {
-  onValueChange: (value: string | null, eventDetails: unknown) => void;
-}) {
-  return (
-    <div data-testid="modal-container">
-      <Combobox items={["ครัว"]} open onValueChange={onValueChange}>
-        <ComboboxInput />
-        <ComboboxContent>
-          <ComboboxList>
-            {(item) => (
-              <ComboboxItem key={item} value={item}>
-                {item}
-              </ComboboxItem>
-            )}
-          </ComboboxList>
-        </ComboboxContent>
-      </Combobox>
-    </div>
-  );
-}

package/src/components/ui/__tests__/date-picker.test.tsx

@@ -1,53 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-import { DatePicker } from "../date-picker";
-
-function renderInsideForm(onChange = vi.fn(), onSubmit = vi.fn()) {
-  const view = render(
-    <form
-      onSubmit={(event) => {
-        event.preventDefault();
-        onSubmit();
-      }}
-    >
-      <DatePicker
-        value={new Date(2025, 9, 10)}
-        onChange={onChange}
-        showPresets={false}
-        allowClear={false}
-      />
-      <button type="submit">Save parent form</button>
-    </form>,
-  );
-
-  fireEvent.click(screen.getByRole("button", { name: /10 ต.ค. 2568/ }));
-  const smartInput = screen.getByPlaceholderText("เช่น 1/7, 1/7/25, 1-7-2568...");
-  fireEvent.change(smartInput, { target: { value: "16/10/2025" } });
-
-  return { ...view, smartInput };
-}
-
-describe("DatePicker smart input", () => {
-  it("confirms a typed date without submitting its parent form when clicking ตกลง", () => {
-    const onChange = vi.fn();
-    const onSubmit = vi.fn();
-    const { container } = renderInsideForm(onChange, onSubmit);
-
-    fireEvent.click(screen.getByRole("button", { name: "ตกลง" }));
-
-    expect(container.querySelectorAll("form")).toHaveLength(1);
-    expect(onSubmit).not.toHaveBeenCalled();
-    expect(onChange).toHaveBeenCalledWith(new Date(2025, 9, 16));
-  });
-
-  it("confirms a typed date without submitting its parent form when pressing Enter", () => {
-    const onChange = vi.fn();
-    const onSubmit = vi.fn();
-    const { smartInput } = renderInsideForm(onChange, onSubmit);
-
-    fireEvent.keyDown(smartInput, { key: "Enter", code: "Enter" });
-
-    expect(onSubmit).not.toHaveBeenCalled();
-    expect(onChange).toHaveBeenCalledWith(new Date(2025, 9, 16));
-  });
-});

package/src/components/ui/__tests__/slider.test.tsx

@@ -1,18 +0,0 @@
-import { render, screen, waitFor } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-import { Slider } from "../slider";
-
-describe("Slider", () => {
-  it("renders the standard accessible slider contract", async () => {
-    const { container } = render(<Slider aria-label="ระดับ" defaultValue={[25]} />);
-
-    expect(screen.getByRole("group", { name: "ระดับ" })).toBeInTheDocument();
-    expect(container.querySelector('[data-slot="slider"]')).toHaveAttribute(
-      "data-orientation",
-      "horizontal",
-    );
-    await waitFor(() => {
-      expect(container.querySelector('input[type="range"]')).toHaveAttribute("aria-valuenow", "25");
-    });
-  });
-});

package/src/components/ui/__tests__/tabs.test.tsx

@@ -1,33 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../tabs";
-
-describe("Tabs", () => {
-  it("uses the orientation data attributes supplied by Base UI", () => {
-    const { container } = render(<ExampleTabs />);
-
-    expect(container.firstElementChild).toHaveAttribute("data-horizontal");
-    expect(container.firstElementChild).toHaveAttribute("data-orientation", "horizontal");
-  });
-
-  it("changes the active panel when a trigger is selected", () => {
-    render(<ExampleTabs />);
-
-    fireEvent.click(screen.getByRole("tab", { name: "รายละเอียด" }));
-
-    expect(screen.getByRole("tabpanel")).toHaveTextContent("เนื้อหารายละเอียด");
-  });
-});
-
-function ExampleTabs() {
-  return (
-    <Tabs defaultValue="overview">
-      <TabsList>
-        <TabsTrigger value="overview">ภาพรวม</TabsTrigger>
-        <TabsTrigger value="details">รายละเอียด</TabsTrigger>
-      </TabsList>
-      <TabsContent value="overview">เนื้อหาภาพรวม</TabsContent>
-      <TabsContent value="details">เนื้อหารายละเอียด</TabsContent>
-    </Tabs>
-  );
-}