gladvn 0.2.22 → 0.2.27

package/src/components/micro/dialog.test.tsx

@@ -0,0 +1,127 @@
+
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./dialog";
+
+describe("Dialog", () => {
+  it("[3C.4-01] [P1] renders trigger correctly and content is hidden initially", () => {
+    // Given
+    render(
+      <Dialog>
+        <DialogTrigger>Open Dialog</DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Dialog Title</DialogTitle>
+            <DialogDescription>Dialog description</DialogDescription>
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>,
+    );
+
+    const trigger = screen.getByRole("button", { name: "Open Dialog" });
+    // Then
+    expect(trigger).toBeInTheDocument();
+
+    // Content should not be in the document
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+  it("[3C.4-02] [P1] opens the dialog when trigger is clicked", async () => {
+    // Given
+    const user = userEvent.setup();
+    render(
+      <Dialog>
+        <DialogTrigger>Open Dialog</DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Dialog Title</DialogTitle>
+            <DialogDescription>Dialog description</DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <DialogClose>Close</DialogClose>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>,
+    );
+
+    const trigger = screen.getByRole("button", { name: "Open Dialog" });
+    // When
+    await user.click(trigger);
+
+    // Then
+    await waitFor(() => {
+      const dialog = screen.getByRole("dialog");
+      expect(dialog).toBeInTheDocument();
+      expect(screen.getByText("Dialog Title")).toBeInTheDocument();
+      expect(screen.getByText("Dialog description")).toBeInTheDocument();
+    });
+  });
+
+  it("[3C.4-03] [P1] closes the dialog when Close button is clicked", async () => {
+    // Given
+    const user = userEvent.setup();
+    render(
+      <Dialog>
+        <DialogTrigger>Open Dialog</DialogTrigger>
+        <DialogContent>
+          <DialogTitle>Dialog Title</DialogTitle>
+          <DialogClose>Close Me</DialogClose>
+        </DialogContent>
+      </Dialog>,
+    );
+
+    // Open
+    // When
+    await user.click(screen.getByRole("button", { name: "Open Dialog" }));
+
+    // Then
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument();
+    });
+
+    // Close
+    await user.click(screen.getByRole("button", { name: "Close Me" }));
+
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+  });
+
+  it("[3C.4-04] [P1] closes the dialog when Escape is pressed", async () => {
+    // Given
+    const user = userEvent.setup();
+    render(
+      <Dialog>
+        <DialogTrigger>Open Dialog</DialogTrigger>
+        <DialogContent>
+          <DialogTitle>Dialog Title</DialogTitle>
+        </DialogContent>
+      </Dialog>,
+    );
+
+    // When
+    await user.click(screen.getByRole("button", { name: "Open Dialog" }));
+
+    // Then
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument();
+    });
+
+    await user.keyboard("[Escape]");
+
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+  });
+});

package/src/components/micro/dialog.tsx

@@ -144,5 +144,5 @@ export {
   DialogHeader,
   DialogOverlay,
   DialogTitle,
-  DialogTrigger,
+  DialogTrigger
 };

package/src/components/micro/direction.tsx

@@ -9,5 +9,5 @@
 
 export {
   DirectionProvider,
-  useDirection,
+  useDirection
 } from "@base-ui/react/direction-provider";

package/src/components/micro/drawer.tsx

@@ -10,7 +10,7 @@
 import * as React from "react";
 
 // Fix TS2883: The inferred type cannot be named without a reference to @radix-ui/react-dialog
-import type {} from "@radix-ui/react-dialog";
+import type { } from "@radix-ui/react-dialog";
 import { Drawer as DrawerPrimitive } from "vaul";
 
 import { cn } from "../../lib/utils";
@@ -150,5 +150,5 @@ export {
   DrawerHeader,
   DrawerOverlay,
   DrawerTitle,
-  DrawerTrigger,
+  DrawerTrigger
 };

package/src/components/micro/dropdown-menu.test.tsx

@@ -0,0 +1,132 @@
+
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "./dropdown-menu";
+
+describe("DropdownMenu", () => {
+  it("[3C.5-01] [P1] renders trigger correctly and content is hidden initially", () => {
+    // Given
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>My Account</DropdownMenuLabel>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>Profile</DropdownMenuItem>
+          <DropdownMenuItem>Settings</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    );
+
+    const trigger = screen.getByRole("button", { name: "Open Menu" });
+    // Then
+    expect(trigger).toBeInTheDocument();
+
+    // Base UI Menu might not use role="dialog" or "menu" before open, but it's hidden
+    expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+  });
+
+  it("[3C.5-02] [P1] opens the menu when trigger is clicked", async () => {
+    // Given
+    const user = userEvent.setup();
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>My Account</DropdownMenuLabel>
+          </DropdownMenuGroup>
+          <DropdownMenuItem>Profile</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    );
+
+    const trigger = screen.getByRole("button", { name: "Open Menu" });
+    // When
+    await user.click(trigger);
+
+    // Then
+    await waitFor(() => {
+      const menu = screen.getByRole("menu");
+      expect(menu).toBeInTheDocument();
+      expect(screen.getByText("My Account")).toBeInTheDocument();
+      expect(
+        screen.getByRole("menuitem", { name: "Profile" }),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it("[3C.5-03] [P1] closes the menu when an item is clicked", async () => {
+    // Given
+    const user = userEvent.setup();
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Profile</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    );
+
+    // When
+    await user.click(screen.getByRole("button", { name: "Open Menu" }));
+
+    // Then
+    await waitFor(() => {
+      expect(screen.getByRole("menu")).toBeInTheDocument();
+    });
+
+    const menuItem = screen.getByRole("menuitem", { name: "Profile" });
+    await user.click(menuItem);
+
+    await waitFor(() => {
+      expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+    });
+  });
+
+  it("[3C.5-04] [P1] supports keyboard navigation (ArrowDown, Escape)", async () => {
+    // Given
+    const user = userEvent.setup();
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Profile</DropdownMenuItem>
+          <DropdownMenuItem>Settings</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    );
+
+    const trigger = screen.getByRole("button", { name: "Open Menu" });
+    // When
+    await user.tab();
+    // Then
+    expect(trigger).toHaveFocus();
+
+    // Open with ArrowDown or Enter
+    await user.keyboard("[Enter]");
+
+    await waitFor(() => {
+      expect(screen.getByRole("menu")).toBeInTheDocument();
+    });
+
+    // Close with Escape
+    await user.keyboard("[Escape]");
+
+    await waitFor(() => {
+      expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+    });
+  });
+});

package/src/components/micro/dropdown-menu.tsx

@@ -307,5 +307,5 @@ export {
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
+  DropdownMenuTrigger
 };

package/src/components/micro/empty.tsx

@@ -141,5 +141,5 @@ export {
   EmptyDescription,
   EmptyHeader,
   EmptyMedia,
-  EmptyTitle,
+  EmptyTitle
 };

package/src/components/micro/field.tsx

@@ -308,5 +308,5 @@ export {
   FieldLegend,
   FieldSeparator,
   FieldSet,
-  FieldTitle,
+  FieldTitle
 };

package/src/components/micro/input-group.tsx

@@ -266,5 +266,5 @@ export {
   InputGroupButton,
   InputGroupInput,
   InputGroupText,
-  InputGroupTextarea,
+  InputGroupTextarea
 };

package/src/components/micro/input.test.tsx

@@ -0,0 +1,95 @@
+import * as React from "react";
+
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { Input } from "./input";
+
+describe("Input", () => {
+  // 1. Rendering & Attributes (API Surface)
+  it("[3C.2-01] [P1] renders correctly with default props", () => {
+    // Given
+    render(<Input placeholder="Enter email" />);
+    const input = screen.getByPlaceholderText("Enter email");
+    // Then
+    expect(input).toBeInTheDocument();
+    expect(input.tagName).toBe("INPUT");
+    expect(input).toHaveAttribute("data-slot", "input");
+  });
+
+  it("[3C.2-02] [P1] applies sizing correctly", () => {
+    // Given
+    render(<Input placeholder="Small input" size="sm" />);
+    const input = screen.getByPlaceholderText("Small input");
+    // We check the merged class string instead of exact match to avoid fragility,
+    // but a basic check that it received the size classes is fine.
+    // The cva variant for sm contains "h-7"
+    // Then
+    expect(input.className).toContain("h-7");
+  });
+
+  it("[3C.2-03] [P1] merges custom classNames properly", () => {
+    // Given
+    render(<Input placeholder="Classy input" className="custom-test-class" />);
+    const input = screen.getByPlaceholderText("Classy input");
+    // Then
+    expect(input).toHaveClass("custom-test-class");
+  });
+
+  // 2. Behaviors (Interaction & Events)
+  it("[3C.2-04] [P1] handles user typing correctly", async () => {
+    // Given
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+    render(<Input placeholder="Type here" onChange={handleChange} />);
+
+    const input = screen.getByPlaceholderText("Type here");
+    // When
+    await user.type(input, "Hello");
+
+    // Then
+    expect(input).toHaveValue("Hello");
+    expect(handleChange).toHaveBeenCalled();
+  });
+
+  it("[3C.2-05] [P1] can be focused and activated via keyboard", async () => {
+    // Given
+    const user = userEvent.setup();
+    render(<Input placeholder="Focus me" />);
+
+    const input = screen.getByPlaceholderText("Focus me");
+
+    // Test focus
+    // When
+    await user.tab();
+    // Then
+    expect(input).toHaveFocus();
+  });
+
+  it("[3C.2-06] [P1] handles disabled state correctly and blocks typing", async () => {
+    // Given
+    const user = userEvent.setup();
+    render(<Input placeholder="Disabled" disabled />);
+
+    const input = screen.getByPlaceholderText("Disabled");
+    // Then
+    expect(input).toBeDisabled();
+
+    // When
+    await user.type(input, "Hello");
+    expect(input).toHaveValue("");
+  });
+
+  // 3. Architecture & Integration
+  it("[3C.2-07] [P1] forwards the ref to the underlying DOM element", () => {
+    // Given
+    const ref = React.createRef<HTMLInputElement>();
+    render(
+      <Input ref={ref} placeholder="Ref input" defaultValue="ref value" />,
+    );
+    // Then
+    expect(ref.current).toBeInstanceOf(HTMLInputElement);
+    expect(ref.current?.value).toBe("ref value");
+  });
+});

package/src/components/micro/item.tsx

@@ -203,5 +203,5 @@ export {
   ItemHeader,
   ItemMedia,
   ItemSeparator,
-  ItemTitle,
+  ItemTitle
 };

package/src/components/micro/menubar.tsx

@@ -291,5 +291,5 @@ export {
   MenubarSub,
   MenubarSubContent,
   MenubarSubTrigger,
-  MenubarTrigger,
+  MenubarTrigger
 };

package/src/components/micro/navigation-menu.tsx

@@ -201,5 +201,5 @@ export {
   NavigationMenuPositioner,
   NavigationMenuTrigger,
   navigationMenuTriggerStyle,
-  NavigationMenuViewport,
+  NavigationMenuViewport
 };

package/src/components/micro/pagination.tsx

@@ -159,5 +159,5 @@ export {
   PaginationItem,
   PaginationLink,
   PaginationNext,
-  PaginationPrevious,
+  PaginationPrevious
 };

package/src/components/micro/popover.test.tsx

@@ -0,0 +1,83 @@
+
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverTitle,
+  PopoverTrigger,
+} from "./popover";
+
+describe("Popover", () => {
+  it("[3C.14-01] [P1] renders trigger correctly and content is hidden initially", () => {
+    // Given
+    render(
+      <Popover>
+        <PopoverTrigger>Open Popover</PopoverTrigger>
+        <PopoverContent>
+          <PopoverTitle>Popover Title</PopoverTitle>
+          <PopoverDescription>Popover Description</PopoverDescription>
+        </PopoverContent>
+      </Popover>,
+    );
+
+    const trigger = screen.getByRole("button", { name: "Open Popover" });
+    // Then
+    expect(trigger).toBeInTheDocument();
+
+    // Content should not be in the document
+    expect(screen.queryByText("Popover Title")).not.toBeInTheDocument();
+  });
+
+  it("[3C.14-02] [P1] opens the popover when trigger is clicked", async () => {
+    // Given
+    const user = userEvent.setup();
+    render(
+      <Popover>
+        <PopoverTrigger>Open Popover</PopoverTrigger>
+        <PopoverContent>
+          <PopoverTitle>Popover Title</PopoverTitle>
+        </PopoverContent>
+      </Popover>,
+    );
+
+    const trigger = screen.getByRole("button", { name: "Open Popover" });
+    // When
+    await user.click(trigger);
+
+    // Then
+    await waitFor(() => {
+      expect(screen.getByText("Popover Title")).toBeInTheDocument();
+    });
+  });
+
+  it("[3C.14-03] [P1] closes the popover when Escape is pressed", async () => {
+    // Given
+    const user = userEvent.setup();
+    render(
+      <Popover>
+        <PopoverTrigger>Open Popover</PopoverTrigger>
+        <PopoverContent>
+          <PopoverTitle>Popover Title</PopoverTitle>
+        </PopoverContent>
+      </Popover>,
+    );
+
+    // When
+    await user.click(screen.getByRole("button", { name: "Open Popover" }));
+
+    // Then
+    await waitFor(() => {
+      expect(screen.getByText("Popover Title")).toBeInTheDocument();
+    });
+
+    await user.keyboard("[Escape]");
+
+    await waitFor(() => {
+      expect(screen.queryByText("Popover Title")).not.toBeInTheDocument();
+    });
+  });
+});

package/src/components/micro/popover.tsx

@@ -134,5 +134,5 @@ export {
   PopoverDescription,
   PopoverHeader,
   PopoverTitle,
-  PopoverTrigger,
+  PopoverTrigger
 };

package/src/components/micro/progress.tsx

@@ -141,5 +141,5 @@ export {
   ProgressIndicator,
   ProgressLabel,
   ProgressTrack,
-  ProgressValue,
+  ProgressValue
 };

package/src/components/micro/select.test.tsx

@@ -0,0 +1,122 @@
+import * as React from "react";
+
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./select";
+
+describe("Select", () => {
+  it("[3C.3-01] [P1] renders correctly with default closed state", () => {
+    // Given
+    render(
+      <Select>
+        <SelectTrigger aria-label="Food">
+          <SelectValue placeholder="Select a fruit" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+        </SelectContent>
+      </Select>,
+    );
+
+    // The trigger should be visible
+    const trigger = screen.getByRole("combobox", { name: "Food" });
+    // Then
+    expect(trigger).toBeInTheDocument();
+
+    // Check placeholder
+    expect(trigger).toHaveTextContent("Select a fruit");
+
+    // The popup content should not be in the document initially
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+
+  it("[3C.3-02] [P1] opens the popup on click and allows selection", async () => {
+    // Given
+    const user = userEvent.setup();
+
+    const ControlledSelect = () => {
+      const [val, setVal] = React.useState<string | null>("apple");
+      return (
+        <Select value={val} onValueChange={setVal}>
+          <SelectTrigger aria-label="Food">
+            <SelectValue placeholder="Select a fruit" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="apple">Apple</SelectItem>
+            <SelectItem value="banana">Banana</SelectItem>
+          </SelectContent>
+        </Select>
+      );
+    };
+
+    render(<ControlledSelect />);
+
+    const trigger = screen.getByRole("combobox", { name: "Food" });
+
+    // Click trigger to open
+    // When
+    await user.click(trigger);
+
+    // Wait for the popup to appear in the document
+    // Then
+    await waitFor(() => {
+      expect(screen.getByRole("listbox")).toBeInTheDocument();
+    });
+
+    // Select Banana
+    const bananaItem = screen.getByRole("option", { name: "Banana" });
+    await user.click(bananaItem);
+
+    // Wait for the trigger to update
+    await waitFor(() => {
+      expect(trigger).toHaveTextContent(/banana/i);
+    });
+  });
+
+  it("[3C.3-03] [P1] can be navigated via keyboard", async () => {
+    // Given
+    const user = userEvent.setup();
+    render(
+      <Select defaultValue="apple">
+        <SelectTrigger aria-label="Food">
+          <SelectValue placeholder="Select a fruit" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+        </SelectContent>
+      </Select>,
+    );
+
+    const trigger = screen.getByRole("combobox", { name: "Food" });
+
+    // Focus trigger
+    // When
+    await user.tab();
+    // Then
+    expect(trigger).toHaveFocus();
+
+    // Open menu with Enter (or Space)
+    await user.keyboard("[Enter]");
+
+    await waitFor(() => {
+      expect(screen.getByRole("listbox")).toBeInTheDocument();
+    });
+
+    // Pressing Escape should close it
+    await user.keyboard("[Escape]");
+
+    await waitFor(() => {
+      expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+    });
+  });
+});

package/src/components/micro/select.tsx

@@ -238,5 +238,5 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
-  selectTriggerVariants,
+  selectTriggerVariants
 };