@godxjp/ui 5.0.2 → 6.0.0

package/src/components/data-entry/__tests__/cascader-tree-transfer.test.tsx

@@ -0,0 +1,417 @@
+import { describe, expect, it, vi } from "vitest";
+import * as React from "react";
+import { renderWithUi, screen, userEvent, waitFor } from "@/test/render";
+import { Cascader } from "../cascader";
+import { TreeSelect } from "../tree-select";
+import { Transfer } from "../transfer";
+import { REGION_OPTIONS, ORG_TREE, TRANSFER_MOCK } from "../__fixtures__/tree-options";
+import {
+  collectAllPaths,
+  collectLeafPaths,
+  filterTreeOptions,
+  formatPathLabels,
+  getNodeByPath,
+  normalizeTreeOptions,
+  pathKey,
+} from "../tree-utils";
+
+describe("tree-utils", () => {
+  const options = normalizeTreeOptions(REGION_OPTIONS);
+
+  it("resolves path labels", () => {
+    const path = ["vn", "hcm", "q1"];
+    expect(formatPathLabels(getNodeByPath(options, path))).toBe(
+      "Việt Nam / TP. Hồ Chí Minh / Quận 1",
+    );
+  });
+
+  it("collects leaf paths", () => {
+    const paths = collectAllPaths(options);
+    expect(paths.some((p) => pathKey(p.path) === pathKey(["jp", "tokyo", "shibuya"]))).toBe(true);
+  });
+
+  it("collects nested leaf path labels from tree root", () => {
+    const paths = collectLeafPaths(options);
+    const shinjuku = paths.find((p) => pathKey(p.path) === pathKey(["jp", "tokyo", "shinjuku"]));
+    expect(shinjuku?.labels.join(" / ")).toBe("日本 / 東京都 / 新宿区");
+  });
+
+  it("collects nested node labels from tree root", () => {
+    const paths = collectAllPaths(options);
+    const tokyo = paths.find((p) => pathKey(p.path) === pathKey(["jp", "tokyo"]));
+    expect(tokyo?.labels.join(" / ")).toBe("日本 / 東京都");
+  });
+
+  it("filters leaf paths by label (case-insensitive)", () => {
+    const matches = filterTreeOptions(options, "QUẬN 1");
+    expect(matches).toHaveLength(1);
+    expect(matches[0]?.labels.join(" / ")).toBe("Việt Nam / TP. Hồ Chí Minh / Quận 1");
+  });
+
+  it("returns empty array for blank search query", () => {
+    expect(filterTreeOptions(options, "   ")).toEqual([]);
+  });
+
+  it("matches any segment in the path chain", () => {
+    const matches = filterTreeOptions(options, "東京都");
+    expect(matches.some((m) => pathKey(m.path) === pathKey(["jp", "tokyo", "shinjuku"]))).toBe(
+      true,
+    );
+    expect(matches.some((m) => pathKey(m.path) === pathKey(["jp", "tokyo", "shibuya"]))).toBe(true);
+  });
+});
+
+describe("Cascader", () => {
+  it("renders trigger with placeholder", () => {
+    renderWithUi(<Cascader options={REGION_OPTIONS} />);
+    expect(screen.getByRole("combobox")).toBeInTheDocument();
+    expect(screen.getByText("Chọn…")).toBeInTheDocument();
+  });
+
+  it("selects a leaf path", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    renderWithUi(<Cascader options={REGION_OPTIONS} onChange={onChange} />);
+    await user.click(screen.getByRole("combobox"));
+
+    await user.click(screen.getByRole("button", { name: /việt nam/i }));
+    await user.click(screen.getByRole("button", { name: /tp\. hồ chí minh/i }));
+    await user.click(screen.getByRole("button", { name: /quận 1/i }));
+
+    expect(onChange).toHaveBeenCalledWith(["vn", "hcm", "q1"], expect.any(Array));
+  });
+
+  it("shows cascade columns when showSearch is on and query is empty", async () => {
+    const user = userEvent.setup();
+
+    renderWithUi(
+      <Cascader options={REGION_OPTIONS} showSearch defaultValue={["jp", "tokyo", "shinjuku"]} />,
+    );
+    await user.click(screen.getByRole("combobox"));
+
+    expect(screen.getByRole("button", { name: /việt nam/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /^日本$/i })).toBeInTheDocument();
+    expect(screen.queryByRole("option")).not.toBeInTheDocument();
+  });
+
+  it("filters leaf paths when searching", async () => {
+    const user = userEvent.setup();
+
+    renderWithUi(<Cascader options={REGION_OPTIONS} showSearch />);
+    await user.click(screen.getByRole("combobox"));
+    await user.type(screen.getByPlaceholderText(/tìm kiếm/i), "新宿");
+
+    expect(await screen.findByRole("button", { name: /新宿区/i })).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /^việt nam$/i })).not.toBeInTheDocument();
+  });
+
+  it("selects a path from search results", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    renderWithUi(<Cascader options={REGION_OPTIONS} showSearch onChange={onChange} />);
+    await user.click(screen.getByRole("combobox"));
+    await user.type(screen.getByPlaceholderText(/tìm kiếm/i), "quận 3");
+
+    await user.click(await screen.findByRole("button", { name: /quận 3/i }));
+
+    expect(onChange).toHaveBeenCalledWith(["vn", "hcm", "q3"], expect.any(Array));
+  });
+
+  it("shows default value label on trigger", () => {
+    renderWithUi(
+      <Cascader options={REGION_OPTIONS} showSearch defaultValue={["jp", "tokyo", "shinjuku"]} />,
+    );
+
+    expect(screen.getByRole("combobox")).toHaveTextContent("日本 / 東京都 / 新宿区");
+  });
+
+  it("clears search when popover closes", async () => {
+    const user = userEvent.setup();
+
+    renderWithUi(<Cascader options={REGION_OPTIONS} showSearch />);
+    await user.click(screen.getByRole("combobox"));
+    await user.type(screen.getByPlaceholderText(/tìm kiếm/i), "新宿");
+    expect(await screen.findByRole("button", { name: /新宿区/i })).toBeInTheDocument();
+
+    await user.keyboard("{Escape}");
+    await user.click(screen.getByRole("combobox"));
+
+    expect(screen.getByPlaceholderText(/tìm kiếm/i)).toHaveValue("");
+    expect(screen.getByRole("button", { name: /việt nam/i })).toBeInTheDocument();
+  });
+
+  it("expands cascade columns when clicking a parent node", async () => {
+    const user = userEvent.setup();
+
+    renderWithUi(<Cascader options={REGION_OPTIONS} />);
+    await user.click(screen.getByRole("combobox"));
+    await user.click(screen.getByRole("button", { name: /việt nam/i }));
+
+    expect(screen.getByRole("button", { name: /tp\. hồ chí minh/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /hà nội/i })).toBeInTheDocument();
+  });
+
+  it("commits intermediate path when changeOnSelect is enabled", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    renderWithUi(<Cascader options={REGION_OPTIONS} changeOnSelect onChange={onChange} />);
+    await user.click(screen.getByRole("combobox"));
+    await user.click(screen.getByRole("button", { name: /việt nam/i }));
+
+    expect(onChange).toHaveBeenCalledWith(["vn"], expect.any(Array));
+  });
+
+  it("clears selected value via clear icon", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    renderWithUi(
+      <Cascader options={REGION_OPTIONS} defaultValue={["vn", "hcm", "q1"]} onChange={onChange} />,
+    );
+
+    const combobox = screen.getByRole("combobox");
+    const clearIcon = combobox.querySelector("svg.lucide-x");
+    expect(clearIcon).toBeTruthy();
+    await user.click(clearIcon!);
+
+    expect(onChange).toHaveBeenCalledWith([], expect.any(Array));
+    expect(combobox).toHaveTextContent("Chọn…");
+  });
+
+  it("shows empty state when search has no matches", async () => {
+    const user = userEvent.setup();
+
+    renderWithUi(<Cascader options={REGION_OPTIONS} showSearch />);
+    await user.click(screen.getByRole("combobox"));
+    await user.type(screen.getByPlaceholderText(/tìm kiếm/i), "xyz-no-match");
+
+    expect(await screen.findByText(/không có kết quả/i)).toBeInTheDocument();
+  });
+
+  it("does not open when disabled", async () => {
+    const user = userEvent.setup();
+
+    renderWithUi(<Cascader options={REGION_OPTIONS} disabled defaultValue={["vn", "hcm", "q1"]} />);
+    await user.click(screen.getByRole("combobox"));
+
+    expect(screen.queryByRole("button", { name: /việt nam/i })).not.toBeInTheDocument();
+  });
+
+  it("supports multiple selection without closing panel", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    renderWithUi(<Cascader options={REGION_OPTIONS} multiple showSearch onChange={onChange} />);
+    await user.click(screen.getByRole("combobox"));
+    await user.type(screen.getByPlaceholderText(/tìm kiếm/i), "quận 1");
+    await user.click(await screen.findByRole("button", { name: /quận 1/i }));
+
+    expect(onChange).toHaveBeenCalledWith([["vn", "hcm", "q1"]], expect.any(Array));
+    expect(screen.getAllByRole("combobox")[0]).toHaveTextContent(
+      "Việt Nam / TP. Hồ Chí Minh / Quận 1",
+    );
+
+    const search = screen.getByPlaceholderText(/tìm kiếm/i);
+    await user.clear(search);
+    await user.type(search, "quận 3");
+    await user.click(await screen.findByRole("button", { name: /quận 3/i }));
+
+    expect(onChange).toHaveBeenLastCalledWith(
+      expect.arrayContaining([
+        ["vn", "hcm", "q1"],
+        ["vn", "hcm", "q3"],
+      ]),
+      expect.any(Array),
+    );
+  });
+
+  it("reflects controlled single value on trigger", () => {
+    renderWithUi(
+      <Cascader options={REGION_OPTIONS} value={["jp", "tokyo", "shibuya"]} onChange={vi.fn()} />,
+    );
+    expect(screen.getByRole("combobox")).toHaveTextContent("日本 / 東京都 / 渋谷区");
+  });
+});
+
+describe("TreeSelect", () => {
+  it("renders tree trigger", () => {
+    renderWithUi(<TreeSelect treeData={ORG_TREE} />);
+    expect(screen.getByRole("combobox")).toBeInTheDocument();
+    expect(screen.getByText("Chọn…")).toBeInTheDocument();
+  });
+
+  it("selects a leaf in single mode and closes panel", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    renderWithUi(<TreeSelect treeData={ORG_TREE} treeDefaultExpandAll onChange={onChange} />);
+    await user.click(screen.getByRole("combobox"));
+    await user.click(screen.getByRole("button", { name: /kho osaka/i }));
+
+    expect(onChange).toHaveBeenCalledWith("warehouse-osaka");
+    expect(screen.queryByRole("button", { name: /kho osaka/i })).not.toBeInTheDocument();
+  });
+
+  it("filters visible nodes when showSearch is enabled", async () => {
+    const user = userEvent.setup();
+
+    renderWithUi(<TreeSelect treeData={ORG_TREE} showSearch treeDefaultExpandAll />);
+    await user.click(screen.getByRole("combobox"));
+    await user.type(screen.getByPlaceholderText(/tìm kiếm/i), "media");
+
+    expect(screen.getByRole("button", { name: /^media$/i })).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /kho osaka/i })).not.toBeInTheDocument();
+  });
+
+  it("expands and collapses branch nodes", async () => {
+    const user = userEvent.setup();
+
+    renderWithUi(<TreeSelect treeData={ORG_TREE} />);
+    await user.click(screen.getByRole("combobox"));
+
+    expect(screen.queryByRole("button", { name: /^logistics$/i })).not.toBeInTheDocument();
+    await user.click(screen.getAllByRole("button", { name: /mở rộng/i })[0]);
+    expect(screen.getByRole("button", { name: /^logistics$/i })).toBeInTheDocument();
+    await user.click(screen.getAllByRole("button", { name: /thu gọn/i })[0]);
+    expect(screen.queryByRole("button", { name: /^logistics$/i })).not.toBeInTheDocument();
+  });
+
+  it("selects a node in checkable mode", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    function Demo() {
+      const [value, setValue] = React.useState<string[]>([]);
+      return (
+        <TreeSelect
+          treeData={ORG_TREE}
+          treeCheckable
+          treeDefaultExpandAll
+          value={value}
+          onChange={(v) => {
+            setValue(Array.isArray(v) ? v : v ? [v] : []);
+            onChange(v);
+          }}
+        />
+      );
+    }
+
+    renderWithUi(<Demo />);
+    await user.click(screen.getByRole("combobox"));
+    await user.click(screen.getByRole("checkbox", { name: /kho osaka/i }));
+
+    expect(onChange).toHaveBeenCalledWith(expect.arrayContaining(["warehouse-osaka"]));
+  });
+
+  it("clears selection via clear icon", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    renderWithUi(
+      <TreeSelect
+        treeData={ORG_TREE}
+        treeDefaultExpandAll
+        defaultValue="warehouse-osaka"
+        onChange={onChange}
+      />,
+    );
+
+    const combobox = screen.getByRole("combobox");
+    const clearIcon = combobox.querySelector("svg.lucide-x");
+    expect(clearIcon).toBeTruthy();
+    await user.click(clearIcon!);
+
+    expect(onChange).toHaveBeenCalledWith(undefined);
+    expect(combobox).toHaveTextContent("Chọn…");
+  });
+});
+
+describe("Transfer", () => {
+  it("moves items to target", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    function Demo() {
+      const [targetKeys, setTargetKeys] = React.useState<string[]>([]);
+      return (
+        <Transfer
+          dataSource={TRANSFER_MOCK}
+          targetKeys={targetKeys}
+          onChange={(next, direction, moveKeys) => {
+            setTargetKeys(next);
+            onChange(next, direction, moveKeys);
+          }}
+          showSearch
+        />
+      );
+    }
+
+    renderWithUi(<Demo />);
+    await user.click(screen.getByText("NV-001"));
+    await user.click(screen.getByRole("button", { name: /chuyển sang đích/i }));
+
+    expect(onChange).toHaveBeenCalledWith(["user-1"], "right", ["user-1"]);
+  });
+
+  it("filters source list via search", async () => {
+    const user = userEvent.setup();
+
+    renderWithUi(
+      <Transfer dataSource={TRANSFER_MOCK} targetKeys={[]} onChange={vi.fn()} showSearch />,
+    );
+    const searchInputs = screen.getAllByRole("searchbox");
+    await user.type(searchInputs[0], "NV-012");
+
+    await waitFor(() => {
+      expect(screen.getByText("NV-012")).toBeInTheDocument();
+      expect(screen.queryByText("NV-001")).not.toBeInTheDocument();
+    });
+  });
+
+  it("moves items back to source", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    function Demo() {
+      const [targetKeys, setTargetKeys] = React.useState<string[]>(["user-1"]);
+      return (
+        <Transfer
+          dataSource={TRANSFER_MOCK}
+          targetKeys={targetKeys}
+          onChange={(next, direction, moveKeys) => {
+            setTargetKeys(next);
+            onChange(next, direction, moveKeys);
+          }}
+        />
+      );
+    }
+
+    renderWithUi(<Demo />);
+    await user.click(screen.getByText("NV-001"));
+    await user.click(screen.getByRole("button", { name: /chuyển về nguồn/i }));
+
+    expect(onChange).toHaveBeenCalledWith([], "left", ["user-1"]);
+  });
+
+  it("selects all enabled items in a panel", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    renderWithUi(
+      <Transfer dataSource={TRANSFER_MOCK} targetKeys={[]} onChange={onChange} showSearch />,
+    );
+
+    const selectAll = screen.getAllByRole("checkbox", { name: /select all source/i })[0];
+    await user.click(selectAll);
+    await user.click(screen.getByRole("button", { name: /chuyển sang đích/i }));
+
+    expect(onChange).toHaveBeenCalledWith(
+      expect.arrayContaining(TRANSFER_MOCK.map((item) => item.key)),
+      "right",
+      expect.any(Array),
+    );
+  });
+});

package/src/components/data-entry/__tests__/checkbox-group.test.tsx

@@ -0,0 +1,40 @@
+import { describe, expect, it, vi } from "vitest";
+import { renderWithUi, screen, userEvent } from "@/test/render";
+import { Checkbox } from "../checkbox";
+
+const exportDocs = [
+  { label: "Commercial invoice", value: "invoice" },
+  { label: "Packing list", value: "packing" },
+  { label: "MSDS (pin lithium)", value: "msds" },
+];
+
+describe("Checkbox.Group", () => {
+  it("renders group from options with default selection", () => {
+    renderWithUi(
+      <Checkbox.Group options={exportDocs} defaultValue={["invoice"]} aria-label="Export docs" />,
+    );
+    expect(screen.getByRole("group")).toBeInTheDocument();
+    expect(screen.getByRole("checkbox", { name: /Commercial invoice/ })).toBeChecked();
+    expect(screen.getByRole("checkbox", { name: /Packing list/ })).not.toBeChecked();
+  });
+
+  it("toggles values and calls onChange with array", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderWithUi(
+      <Checkbox.Group options={exportDocs} defaultValue={["invoice"]} onChange={onChange} />,
+    );
+
+    await user.click(screen.getByRole("checkbox", { name: /Packing list/ }));
+    expect(onChange).toHaveBeenLastCalledWith(["invoice", "packing"]);
+
+    await user.click(screen.getByRole("checkbox", { name: /Commercial invoice/ }));
+    expect(onChange).toHaveBeenLastCalledWith(["packing"]);
+  });
+});
+
+describe("Checkbox namespace", () => {
+  it("exposes Group on Checkbox.Group", () => {
+    expect(Checkbox.Group).toBeDefined();
+  });
+});

package/src/components/data-entry/__tests__/checkbox.test.tsx

@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest";
+import { renderWithUi, screen } from "@/test/render";
+import { Checkbox } from "../checkbox";
+
+describe("Checkbox", () => {
+  it("renders checkbox role", () => {
+    renderWithUi(<Checkbox aria-label="accept" />);
+    expect(screen.getByRole("checkbox")).toHaveAttribute("data-slot", "checkbox");
+  });
+
+  it("can be checked", async () => {
+    const { userEvent } = await import("@/test/render");
+    const user = userEvent.setup();
+    renderWithUi(<Checkbox aria-label="accept" />);
+    const box = screen.getByRole("checkbox");
+    expect(box).not.toBeChecked();
+    await user.click(box);
+    expect(box).toBeChecked();
+  });
+});

package/src/components/data-entry/__tests__/date-autocomplete.test.tsx

@@ -0,0 +1,94 @@
+import { describe, expect, it, vi } from "vitest";
+import { renderWithUi, screen, userEvent, waitFor } from "@/test/render";
+import { Calendar } from "../calendar";
+import { DatePicker } from "../date-picker";
+import { DateRangePicker } from "../date-range-picker";
+import { Autocomplete } from "../autocomplete";
+import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from "../command";
+
+describe("Calendar", () => {
+  it("renders month grid", () => {
+    renderWithUi(<Calendar mode="single" />);
+    expect(screen.getByRole("grid")).toBeInTheDocument();
+  });
+});
+
+describe("DatePicker", () => {
+  it("shows placeholder and opens calendar popover", async () => {
+    const user = userEvent.setup();
+    renderWithUi(<DatePicker placeholder="Chọn ngày ETD" />);
+    const trigger = screen.getByRole("button", { name: /chọn ngày etd/i });
+    expect(trigger).toBeInTheDocument();
+    await user.click(trigger);
+    await waitFor(() => {
+      expect(screen.getByRole("grid")).toBeInTheDocument();
+    });
+  });
+
+  it("calls onChange when a day is selected", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderWithUi(<DatePicker value={new Date(2026, 4, 1)} onChange={onChange} />);
+    await user.click(screen.getByRole("button"));
+    const dayButtons = screen.getAllByRole("gridcell").filter((cell) => cell.textContent === "15");
+    const dayButton = dayButtons[0]?.querySelector("button");
+    expect(dayButton).toBeTruthy();
+    if (dayButton) await user.click(dayButton);
+    expect(onChange).toHaveBeenCalled();
+  });
+});
+
+describe("DateRangePicker", () => {
+  it("renders trigger with formatted range", () => {
+    renderWithUi(
+      <DateRangePicker
+        value={{ from: new Date(2026, 4, 1), to: new Date(2026, 4, 10) }}
+        onChange={() => undefined}
+      />,
+    );
+    expect(screen.getByRole("button")).toHaveTextContent("01/05/2026");
+    expect(screen.getByRole("button")).toHaveTextContent("10/05/2026");
+  });
+});
+
+describe("Autocomplete", () => {
+  const options = [
+    { value: "osaka", label: "Osaka Hub" },
+    { value: "tokyo", label: "Tokyo Hub" },
+  ];
+
+  it("opens list and selects option", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    renderWithUi(
+      <Autocomplete
+        options={options}
+        value="osaka"
+        onValueChange={onValueChange}
+        placeholder="Chọn hub"
+      />,
+    );
+    await user.click(screen.getByRole("combobox"));
+    await user.click(screen.getByRole("option", { name: "Tokyo Hub" }));
+    expect(onValueChange).toHaveBeenCalledWith("tokyo");
+  });
+});
+
+describe("Command", () => {
+  it("filters items by search input", async () => {
+    const user = userEvent.setup();
+    renderWithUi(
+      <Command>
+        <CommandInput placeholder="Tìm HAWB" />
+        <CommandList>
+          <CommandEmpty>Không có kết quả</CommandEmpty>
+          <CommandItem value="GX-001">GX-001</CommandItem>
+          <CommandItem value="GX-002">GX-002</CommandItem>
+        </CommandList>
+      </Command>,
+    );
+    await user.type(screen.getByPlaceholderText("Tìm HAWB"), "002");
+    expect(screen.getByText("GX-002")).toBeInTheDocument();
+    expect(screen.queryByText("GX-001")).not.toBeInTheDocument();
+  });
+});

package/src/components/data-entry/__tests__/form-field.test.tsx

@@ -0,0 +1,49 @@
+import { describe, expect, it } from "vitest";
+import { renderWithUi, screen } from "@/test/render";
+import { FormField } from "../form-field";
+import { Input } from "../input";
+
+describe("FormField", () => {
+  it("links label to input via htmlFor/id", () => {
+    renderWithUi(
+      <FormField id="email" label="Email">
+        <Input id="email" />
+      </FormField>,
+    );
+    expect(screen.getByLabelText("Email")).toHaveAttribute("id", "email");
+  });
+
+  it("shows required asterisk when required", () => {
+    renderWithUi(
+      <FormField id="name" label="Name" required>
+        <Input id="name" />
+      </FormField>,
+    );
+    expect(screen.getByText("*")).toHaveAttribute("aria-hidden", "true");
+    expect(screen.getByRole("textbox")).toHaveAttribute("aria-required", "true");
+  });
+
+  it("shows helper text and wires aria-describedby", () => {
+    renderWithUi(
+      <FormField id="x" label="Field" helper="Hint text">
+        <Input id="x" />
+      </FormField>,
+    );
+    const input = screen.getByRole("textbox");
+    expect(screen.getByText("Hint text")).toHaveAttribute("id", "x-helper");
+    expect(input).toHaveAttribute("aria-describedby", "x-helper");
+  });
+
+  it("shows error instead of helper and sets aria-invalid", () => {
+    renderWithUi(
+      <FormField id="x" label="Field" helper="Hint" error="Required">
+        <Input id="x" />
+      </FormField>,
+    );
+    const input = screen.getByRole("textbox");
+    expect(screen.getByRole("alert")).toHaveTextContent("Required");
+    expect(screen.queryByText("Hint")).not.toBeInTheDocument();
+    expect(input).toHaveAttribute("aria-invalid", "true");
+    expect(input).toHaveAttribute("aria-describedby", "x-error");
+  });
+});

package/src/components/data-entry/__tests__/input-textarea.test.tsx

@@ -0,0 +1,38 @@
+import { describe, expect, it, vi } from "vitest";
+import { renderWithUi, screen, userEvent } from "@/test/render";
+import { Input } from "../input";
+import { Textarea } from "../textarea";
+
+describe("Input", () => {
+  it("accepts typed value", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderWithUi(<Input aria-label="test" onChange={onChange} />);
+    await user.type(screen.getByRole("textbox"), "abc");
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("applies ui-control class", () => {
+    renderWithUi(<Input aria-label="test" />);
+    expect(screen.getByRole("textbox")).toHaveClass("ui-control");
+  });
+
+  it("exposes shadcn data-slot and invalid state classes", () => {
+    renderWithUi(<Input aria-label="test" aria-invalid />);
+    const input = screen.getByRole("textbox");
+    expect(input).toHaveAttribute("data-slot", "input");
+    expect(input).toHaveClass("aria-invalid:border-destructive");
+  });
+});
+
+describe("Textarea", () => {
+  it("renders multiline control", () => {
+    renderWithUi(<Textarea aria-label="notes" />);
+    expect(screen.getByRole("textbox")).toBeInTheDocument();
+  });
+
+  it("applies ui-control-multiline class", () => {
+    renderWithUi(<Textarea aria-label="notes" />);
+    expect(screen.getByRole("textbox")).toHaveClass("ui-control-multiline");
+  });
+});