gladvn 0.2.22 → 0.2.27

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

@@ -0,0 +1,96 @@
+
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "./accordion";
+
+describe("Accordion", () => {
+  it("[3C.13-01] [P1] renders correctly and is closed by default", () => {
+    // Given
+    render(
+      <Accordion>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Section 1</AccordionTrigger>
+          <AccordionContent>Content 1</AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    );
+
+    const trigger = screen.getByRole("button", { name: "Section 1" });
+    // Then
+    expect(trigger).toBeInTheDocument();
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+
+    // Content is either not in document or hidden based on Base UI implementation
+    const content = screen.queryByText("Content 1");
+    if (content) {
+      expect(content).not.toBeVisible();
+    }
+  });
+
+  it("[3C.13-02] [P1] expands the content when trigger is clicked", async () => {
+    // Given
+    const user = userEvent.setup();
+    render(
+      <Accordion>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Section 1</AccordionTrigger>
+          <AccordionContent>Content 1</AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    );
+
+    const trigger = screen.getByRole("button", { name: "Section 1" });
+    // When
+    await user.click(trigger);
+
+    // Then
+    await waitFor(() => {
+      expect(trigger).toHaveAttribute("aria-expanded", "true");
+      expect(screen.getByText("Content 1")).toBeVisible();
+    });
+  });
+
+  it("[3C.13-03] [P1] supports keyboard navigation", async () => {
+    // Given
+    const user = userEvent.setup();
+    render(
+      <Accordion>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Section 1</AccordionTrigger>
+          <AccordionContent>Content 1</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionTrigger>Section 2</AccordionTrigger>
+          <AccordionContent>Content 2</AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    );
+
+    const trigger1 = screen.getByRole("button", { name: "Section 1" });
+    const trigger2 = screen.getByRole("button", { name: "Section 2" });
+
+    // Focus first
+    // When
+    await user.tab();
+    // Then
+    expect(trigger1).toHaveFocus();
+
+    // Tab to move to next item
+    await user.tab();
+    expect(trigger2).toHaveFocus();
+
+    // Enter to expand
+    await user.keyboard("[Enter]");
+    await waitFor(() => {
+      expect(trigger2).toHaveAttribute("aria-expanded", "true");
+      expect(screen.getByText("Content 2")).toBeVisible();
+    });
+  });
+});

package/src/components/micro/alert-dialog.tsx

@@ -212,5 +212,5 @@ export {
   AlertDialogMedia,
   AlertDialogOverlay,
   AlertDialogTitle,
-  AlertDialogTrigger,
+  AlertDialogTrigger
 };

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

@@ -0,0 +1,77 @@
+
+import { render, screen } from "@testing-library/react";
+import { InfoIcon } from "lucide-react";
+import { describe, expect, it } from "vitest";
+
+import {
+  Alert,
+  AlertAction,
+  AlertDescription,
+  AlertIcon,
+  AlertTitle,
+} from "./alert";
+
+describe("Alert", () => {
+  it("[3C.12-01] [P1] renders all alert parts correctly", () => {
+    // Given
+    render(
+      <Alert data-testid="alert">
+        <AlertIcon render={<InfoIcon />} data-testid="alert-icon" />
+        <AlertTitle>Alert Title</AlertTitle>
+        <AlertDescription>Alert Description</AlertDescription>
+        <AlertAction data-testid="alert-action">Action</AlertAction>
+      </Alert>,
+    );
+
+    // Then
+    expect(screen.getByTestId("alert")).toBeInTheDocument();
+    expect(screen.getByTestId("alert-icon")).toBeInTheDocument();
+    expect(screen.getByText("Alert Title")).toBeInTheDocument();
+    expect(screen.getByText("Alert Description")).toBeInTheDocument();
+    expect(screen.getByTestId("alert-action")).toHaveTextContent("Action");
+  });
+
+  it("[3C.12-02] [P1] applies the color variants correctly", () => {
+    // Given
+    const { rerender } = render(
+      <Alert color="destructive" data-testid="alert-destructive">
+        Error
+      </Alert>,
+    );
+    // Then
+    expect(screen.getByTestId("alert-destructive")).toHaveAttribute(
+      "data-color",
+      "destructive",
+    );
+
+    // When
+    rerender(
+      <Alert color="success" data-testid="alert-success">
+        Success
+      </Alert>,
+    );
+    expect(screen.getByTestId("alert-success")).toHaveAttribute(
+      "data-color",
+      "success",
+    );
+  });
+
+  it("[3C.12-03] [P1] applies the size variants correctly", () => {
+    // Given
+    const { rerender } = render(
+      <Alert size="sm" data-testid="alert-sm">
+        Small
+      </Alert>,
+    );
+    // Then
+    expect(screen.getByTestId("alert-sm")).toHaveAttribute("data-size", "sm");
+
+    // When
+    rerender(
+      <Alert size="lg" data-testid="alert-lg">
+        Large
+      </Alert>,
+    );
+    expect(screen.getByTestId("alert-lg")).toHaveAttribute("data-size", "lg");
+  });
+});

package/src/components/micro/avatar.tsx

@@ -140,5 +140,5 @@ export {
   AvatarFallback,
   AvatarGroup,
   AvatarGroupCount,
-  AvatarImage,
+  AvatarImage
 };

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

@@ -0,0 +1,57 @@
+
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Badge } from "./badge";
+
+describe("Badge", () => {
+  it("[3C.10-01] [P1] renders correctly with default styles", () => {
+    // Given
+    render(<Badge data-testid="badge">Hello</Badge>);
+    const badge = screen.getByTestId("badge");
+
+    // Then
+    expect(badge).toBeInTheDocument();
+    expect(badge).toHaveTextContent("Hello");
+  });
+
+  it("[3C.10-02] [P1] applies variant and color correctly", () => {
+    // Given
+    const { rerender } = render(
+      <Badge
+        variant="outline"
+        color="destructive"
+        data-testid="badge-outline-destructive"
+      >
+        Error
+      </Badge>,
+    );
+    const outlineBadge = screen.getByTestId("badge-outline-destructive");
+    // Then
+    expect(outlineBadge).toHaveClass("border-destructive", "text-destructive");
+
+    // When
+    rerender(
+      <Badge variant="soft" color="success" data-testid="badge-soft-success">
+        Success
+      </Badge>,
+    );
+    const softBadge = screen.getByTestId("badge-soft-success");
+    expect(softBadge).toHaveClass("bg-success/15", "text-success");
+  });
+
+  it("[3C.10-03] [P1] supports polymorphism via render prop", () => {
+    // Given
+    render(
+      <Badge render={<a href="/test" data-testid="badge-link" />}>
+        Link Badge
+      </Badge>,
+    );
+
+    const link = screen.getByTestId("badge-link");
+    // Then
+    expect(link.tagName).toBe("A");
+    expect(link).toHaveAttribute("href", "/test");
+    expect(link).toHaveTextContent("Link Badge");
+  });
+});

package/src/components/micro/breadcrumb.tsx

@@ -159,5 +159,5 @@ export {
   BreadcrumbLink,
   BreadcrumbList,
   BreadcrumbPage,
-  BreadcrumbSeparator,
+  BreadcrumbSeparator
 };

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

@@ -1,26 +1,123 @@
+import * as React from "react";
+
 import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
 
 import { Button } from "./button";
 
 describe("Button", () => {
-  it("renders correctly with default props", () => {
+  // 1. Rendering & Attributes (API Surface)
+  it("[3C.1-01] [P1] renders correctly with default props", () => {
+    // Given
     render(<Button>Click me</Button>);
     const button = screen.getByRole("button", { name: "Click me" });
+    // Then
     expect(button).toBeInTheDocument();
-    // Default variant is "solid" and color is "primary"
     expect(button).toHaveAttribute("data-variant", "solid");
     expect(button).toHaveAttribute("data-color", "primary");
   });
 
-  it("applies custom variants and colors", () => {
+  it("[3C.1-02] [P1] applies custom variants and colors", () => {
+    // Given
     render(
       <Button variant="outline" color="destructive">
         Delete
       </Button>,
     );
     const button = screen.getByRole("button", { name: "Delete" });
+    // Then
     expect(button).toHaveAttribute("data-variant", "outline");
     expect(button).toHaveAttribute("data-color", "destructive");
   });
+
+  it("[3C.1-03] [P1] merges custom classNames properly", () => {
+    // Given
+    render(<Button className="custom-test-class">Classy Button</Button>);
+    const button = screen.getByRole("button", { name: "Classy Button" });
+    // Then
+    expect(button).toHaveClass("custom-test-class");
+  });
+
+  it("[3C.1-04] [P1] supports iconOnly attribute to render as square", () => {
+    // Given
+    render(<Button iconOnly>Icon</Button>);
+    const button = screen.getByRole("button", { name: "Icon" });
+    // Then
+    expect(button).toHaveAttribute("data-icon", "true");
+  });
+
+  // 2. Behaviors (Interaction & Events)
+  it("[3C.1-05] [P1] fires onClick event when clicked", async () => {
+    // Given
+    const user = userEvent.setup();
+    const handleClick = vi.fn();
+    render(<Button onClick={handleClick}>Click</Button>);
+
+    const button = screen.getByRole("button", { name: "Click" });
+    // When
+    await user.click(button);
+
+    // Then
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("[3C.1-06] [P1] can be focused and activated via keyboard", async () => {
+    // Given
+    const user = userEvent.setup();
+    const handleClick = vi.fn();
+    render(<Button onClick={handleClick}>Submit</Button>);
+
+    const button = screen.getByRole("button", { name: "Submit" });
+
+    // Test focus
+    // When
+    await user.tab();
+    // Then
+    expect(button).toHaveFocus();
+
+    // Test keyboard activation (Enter)
+    await user.keyboard("{Enter}");
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("[3C.1-07] [P1] handles disabled state correctly and blocks clicks", async () => {
+    // Given
+    const user = userEvent.setup();
+    const handleClick = vi.fn();
+    render(
+      <Button disabled onClick={handleClick}>
+        Disabled Button
+      </Button>,
+    );
+
+    const button = screen.getByRole("button", { name: "Disabled Button" });
+    // Then
+    expect(button).toBeDisabled();
+
+    // When
+    await user.click(button);
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+
+  // 3. Architecture & Integration
+  it("[3C.1-08] [P1] forwards the ref to the underlying DOM element", () => {
+    // Given
+    const ref = React.createRef<HTMLButtonElement>();
+    render(<Button ref={ref}>Ref Button</Button>);
+    // Then
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+    expect(ref.current?.textContent).toBe("Ref Button");
+  });
+
+  it("[3C.1-09] [P1] supports polymorphism via render prop (Base UI 'render' pattern)", () => {
+    // Given
+    render(<Button render={<a href="/home" />}>Link Button</Button>);
+    const link = screen.getByText("Link Button");
+    // Then
+    expect(link).toBeInTheDocument();
+    expect(link.tagName).toBe("A");
+    expect(link).toHaveAttribute("href", "/home");
+    expect(link).toHaveAttribute("data-variant", "solid");
+  });
 });

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

@@ -0,0 +1,54 @@
+
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "./card";
+
+describe("Card", () => {
+  it("[3C.11-01] [P1] renders all card parts correctly", () => {
+    // Given
+    render(
+      <Card data-testid="card">
+        <CardHeader>
+          <CardTitle>Card Title</CardTitle>
+          <CardDescription>Card Description</CardDescription>
+        </CardHeader>
+        <CardContent>Card Content</CardContent>
+        <CardFooter>Card Footer</CardFooter>
+      </Card>,
+    );
+
+    // Then
+    expect(screen.getByTestId("card")).toBeInTheDocument();
+    expect(screen.getByText("Card Title")).toBeInTheDocument();
+    expect(screen.getByText("Card Description")).toBeInTheDocument();
+    expect(screen.getByText("Card Content")).toBeInTheDocument();
+    expect(screen.getByText("Card Footer")).toBeInTheDocument();
+  });
+
+  it("[3C.11-02] [P1] applies the size variants correctly", () => {
+    // Given
+    const { rerender } = render(
+      <Card size="sm" data-testid="card-sm">
+        Content
+      </Card>,
+    );
+    // Then
+    expect(screen.getByTestId("card-sm")).toHaveAttribute("data-size", "sm");
+
+    // When
+    rerender(
+      <Card size="lg" data-testid="card-lg">
+        Content
+      </Card>,
+    );
+    expect(screen.getByTestId("card-lg")).toHaveAttribute("data-size", "lg");
+  });
+});

package/src/components/micro/card.tsx

@@ -108,5 +108,5 @@ export {
   CardDescription,
   CardFooter,
   CardHeader,
-  CardTitle,
+  CardTitle
 };

package/src/components/micro/carousel.tsx

@@ -338,5 +338,5 @@ export {
   CarouselNext,
   CarouselPrevious,
   useCarousel,
-  type CarouselApi,
+  type CarouselApi
 };

package/src/components/micro/chart.tsx

@@ -389,5 +389,5 @@ export {
   ChartLegendContent,
   ChartStyle,
   ChartTooltip,
-  ChartTooltipContent,
+  ChartTooltipContent
 };

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

@@ -0,0 +1,92 @@
+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 { Checkbox } from "./checkbox";
+
+describe("Checkbox", () => {
+  it("[3C.6-01] [P1] renders correctly", () => {
+    // Given
+    render(<Checkbox aria-label="Accept terms" />);
+    const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
+    // Then
+    expect(checkbox).toBeInTheDocument();
+    expect(checkbox).toHaveAttribute("data-slot", "checkbox");
+  });
+
+  it("[3C.6-02] [P1] handles user click to toggle state", async () => {
+    // Given
+    const user = userEvent.setup();
+    const handleCheckedChange = vi.fn();
+    render(
+      <Checkbox aria-label="Toggle" onCheckedChange={handleCheckedChange} />,
+    );
+
+    const checkbox = screen.getByRole("checkbox", { name: "Toggle" });
+
+    // Initially unchecked
+    // Then
+    expect(checkbox).not.toBeChecked();
+
+    // Click to check
+    // When
+    await user.click(checkbox);
+    expect(checkbox).toBeChecked();
+    expect(handleCheckedChange).toHaveBeenCalledWith(true, expect.anything());
+
+    // Click to uncheck
+    await user.click(checkbox);
+    expect(checkbox).not.toBeChecked();
+    expect(handleCheckedChange).toHaveBeenCalledWith(false, expect.anything());
+  });
+
+  it("[3C.6-03] [P1] can be focused and toggled via keyboard (Space)", async () => {
+    // Given
+    const user = userEvent.setup();
+    render(<Checkbox aria-label="Keyboard toggle" />);
+
+    const checkbox = screen.getByRole("checkbox", { name: "Keyboard toggle" });
+
+    // Test focus
+    // When
+    await user.tab();
+    // Then
+    expect(checkbox).toHaveFocus();
+
+    // Test keyboard activation (Space for checkbox)
+    await user.keyboard("[Space]");
+    expect(checkbox).toBeChecked();
+  });
+
+  it("[3C.6-04] [P1] handles disabled state correctly and blocks clicks", async () => {
+    // Given
+    const user = userEvent.setup();
+    const handleCheckedChange = vi.fn();
+    render(
+      <Checkbox
+        disabled
+        aria-label="Disabled"
+        onCheckedChange={handleCheckedChange}
+      />,
+    );
+
+    const checkbox = screen.getByRole("checkbox", { name: "Disabled" });
+    // Then
+    expect(checkbox).toHaveAttribute("aria-disabled", "true");
+
+    // When
+    await user.click(checkbox);
+    expect(handleCheckedChange).not.toHaveBeenCalled();
+    expect(checkbox).not.toBeChecked();
+  });
+
+  it("[3C.6-05] [P1] forwards the ref to the underlying DOM element", () => {
+    // Given
+    const ref = React.createRef<HTMLSpanElement>();
+    render(<Checkbox ref={ref} aria-label="Ref checkbox" />);
+    // Then
+    expect(ref.current).toBeInstanceOf(HTMLSpanElement);
+  });
+});

package/src/components/micro/combobox.tsx

@@ -369,5 +369,5 @@ export {
   ComboboxSeparator,
   ComboboxTrigger,
   ComboboxValue,
-  useComboboxContext,
+  useComboboxContext
 };

package/src/components/micro/command.tsx

@@ -241,5 +241,5 @@ export {
   CommandItem,
   CommandList,
   CommandSeparator,
-  CommandShortcut,
+  CommandShortcut
 };

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

@@ -298,5 +298,5 @@ export {
   ContextMenuSub,
   ContextMenuSubContent,
   ContextMenuSubTrigger,
-  ContextMenuTrigger,
+  ContextMenuTrigger
 };