gladvn 0.2.22 → 0.2.27

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

@@ -0,0 +1,122 @@
+
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger
+} from "./sheet";
+
+describe("Sheet", () => {
+  it("[3C.15-01] [P1] renders trigger correctly and content is hidden initially", () => {
+    // Given
+    render(
+      <Sheet>
+        <SheetTrigger>Open Sheet</SheetTrigger>
+        <SheetContent>
+          <SheetHeader>
+            <SheetTitle>Sheet Title</SheetTitle>
+            <SheetDescription>Sheet description</SheetDescription>
+          </SheetHeader>
+        </SheetContent>
+      </Sheet>,
+    );
+
+    const trigger = screen.getByRole("button", { name: "Open Sheet" });
+    // Then
+    expect(trigger).toBeInTheDocument();
+
+    // Content should not be in the document
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+  it("[3C.15-02] [P1] opens the sheet when trigger is clicked", async () => {
+    // Given
+    const user = userEvent.setup();
+    render(
+      <Sheet>
+        <SheetTrigger>Open Sheet</SheetTrigger>
+        <SheetContent>
+          <SheetHeader>
+            <SheetTitle>Sheet Title</SheetTitle>
+            <SheetDescription>Sheet description</SheetDescription>
+          </SheetHeader>
+        </SheetContent>
+      </Sheet>,
+    );
+
+    const trigger = screen.getByRole("button", { name: "Open Sheet" });
+    // When
+    await user.click(trigger);
+
+    // Then
+    await waitFor(() => {
+      const sheet = screen.getByRole("dialog");
+      expect(sheet).toBeInTheDocument();
+      expect(screen.getByText("Sheet Title")).toBeInTheDocument();
+      expect(screen.getByText("Sheet description")).toBeInTheDocument();
+    });
+  });
+
+  it("[3C.15-03] [P1] closes the sheet when default Close button is clicked", async () => {
+    // Given
+    const user = userEvent.setup();
+    render(
+      <Sheet>
+        <SheetTrigger>Open Sheet</SheetTrigger>
+        <SheetContent showCloseButton={true}>
+          <SheetTitle>Sheet Title</SheetTitle>
+        </SheetContent>
+      </Sheet>,
+    );
+
+    // Open
+    // When
+    await user.click(screen.getByRole("button", { name: "Open Sheet" }));
+
+    // Then
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument();
+    });
+
+    // Close via default 'X' button
+    const closeBtn = screen.getByRole("button", { name: "Close" });
+    await user.click(closeBtn);
+
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+  });
+
+  it("[3C.15-04] [P1] closes the sheet when Escape is pressed", async () => {
+    // Given
+    const user = userEvent.setup();
+    render(
+      <Sheet>
+        <SheetTrigger>Open Sheet</SheetTrigger>
+        <SheetContent>
+          <SheetTitle>Sheet Title</SheetTitle>
+        </SheetContent>
+      </Sheet>,
+    );
+
+    // When
+    await user.click(screen.getByRole("button", { name: "Open Sheet" }));
+
+    // Then
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument();
+    });
+
+    await user.keyboard("[Escape]");
+
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+  });
+});

package/src/components/micro/sheet.tsx

@@ -146,5 +146,5 @@ export {
   SheetHeader,
   SheetOverlay,
   SheetTitle,
-  SheetTrigger,
+  SheetTrigger
 };

package/src/components/micro/sidebar.tsx

@@ -237,5 +237,5 @@ export {
   SidebarLabel,
   SidebarLogo,
   SidebarMenuItem,
-  SidebarMenuItemList,
+  SidebarMenuItemList
 };

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

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

package/src/components/micro/table.tsx

@@ -207,5 +207,5 @@ export {
   TableFooter,
   TableHead,
   TableHeader,
-  TableRow,
+  TableRow
 };

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

@@ -0,0 +1,90 @@
+
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
+
+describe("Tabs", () => {
+  it("[3C.8-01] [P1] renders correctly and shows default content", () => {
+    // Given
+    render(
+      <Tabs defaultValue="tab1">
+        <TabsList>
+          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+          <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+        </TabsList>
+        <TabsContent value="tab1">Content 1</TabsContent>
+        <TabsContent value="tab2">Content 2</TabsContent>
+      </Tabs>,
+    );
+
+    // Then
+    expect(screen.getByRole("tab", { name: "Tab 1" })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "Tab 2" })).toBeInTheDocument();
+
+    // Tab 1 content should be visible
+    expect(screen.getByText("Content 1")).toBeInTheDocument();
+
+    // Tab 2 content should NOT be visible
+    expect(screen.queryByText("Content 2")).not.toBeInTheDocument();
+  });
+
+  it("[3C.8-02] [P1] switches content when another tab is clicked", async () => {
+    // Given
+    const user = userEvent.setup();
+    render(
+      <Tabs defaultValue="tab1">
+        <TabsList>
+          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+          <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+        </TabsList>
+        <TabsContent value="tab1">Content 1</TabsContent>
+        <TabsContent value="tab2">Content 2</TabsContent>
+      </Tabs>,
+    );
+
+    const tab2 = screen.getByRole("tab", { name: "Tab 2" });
+    // When
+    await user.click(tab2);
+
+    // Then
+    expect(screen.queryByText("Content 1")).not.toBeInTheDocument();
+    expect(screen.getByText("Content 2")).toBeInTheDocument();
+  });
+
+  it("[3C.8-03] [P1] supports keyboard navigation", async () => {
+    // Given
+    const user = userEvent.setup();
+    render(
+      <Tabs defaultValue="tab1">
+        <TabsList>
+          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+          <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+        </TabsList>
+        <TabsContent value="tab1">Content 1</TabsContent>
+        <TabsContent value="tab2">Content 2</TabsContent>
+      </Tabs>,
+    );
+
+    const tab1 = screen.getByRole("tab", { name: "Tab 1" });
+    const tab2 = screen.getByRole("tab", { name: "Tab 2" });
+
+    // When
+    await user.tab();
+    // Then
+    expect(tab1).toHaveFocus();
+
+    // ArrowRight should move focus and potentially activate the next tab
+    await user.keyboard("[ArrowRight]");
+    await waitFor(() => {
+      expect(tab2).toHaveFocus();
+    });
+
+    await user.keyboard("[Enter]");
+
+    await waitFor(() => {
+      expect(screen.getByText("Content 2")).toBeInTheDocument();
+    });
+  });
+});

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

@@ -0,0 +1,107 @@
+
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./tooltip";
+
+describe("Tooltip", () => {
+  it("[3C.9-01] [P1] renders trigger and hides content initially", () => {
+    // Given
+    render(
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger>Hover me</TooltipTrigger>
+          <TooltipContent>Tooltip info</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>,
+    );
+
+    // Then
+    expect(
+      screen.getByRole("button", { name: "Hover me" }),
+    ).toBeInTheDocument();
+
+    // Content should not be visible initially
+    expect(screen.queryByText("Tooltip info")).not.toBeInTheDocument();
+  });
+
+  it("[3C.9-02] [P1] shows tooltip content on hover", async () => {
+    // Given
+    const user = userEvent.setup();
+    render(
+      <TooltipProvider delay={0}>
+        <Tooltip>
+          <TooltipTrigger>Hover me</TooltipTrigger>
+          <TooltipContent>Tooltip info</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>,
+    );
+
+    const trigger = screen.getByRole("button", { name: "Hover me" });
+    // When
+    await user.hover(trigger);
+
+    // Then
+    await waitFor(() => {
+      expect(screen.getByText("Tooltip info")).toBeVisible();
+    });
+  });
+
+  it("[3C.9-03] [P1] shows tooltip content on focus", async () => {
+    // Given
+    const user = userEvent.setup();
+    render(
+      <TooltipProvider delay={0}>
+        <Tooltip>
+          <TooltipTrigger>Hover me</TooltipTrigger>
+          <TooltipContent>Tooltip info</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>,
+    );
+
+    const trigger = screen.getByRole("button", { name: "Hover me" });
+
+    // When
+    await user.tab();
+    // Then
+    expect(trigger).toHaveFocus();
+
+    await waitFor(() => {
+      expect(screen.getByText("Tooltip info")).toBeVisible();
+    });
+  });
+
+  it("[3C.9-04] [P1] hides tooltip when Escape is pressed", async () => {
+    // Given
+    const user = userEvent.setup();
+    render(
+      <TooltipProvider delay={0}>
+        <Tooltip>
+          <TooltipTrigger>Hover me</TooltipTrigger>
+          <TooltipContent>Tooltip info</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>,
+    );
+
+    const trigger = screen.getByRole("button", { name: "Hover me" });
+    // When
+    await user.hover(trigger);
+
+    // Then
+    await waitFor(() => {
+      expect(screen.getByText("Tooltip info")).toBeVisible();
+    });
+
+    await user.keyboard("[Escape]");
+
+    await waitFor(() => {
+      expect(screen.queryByText("Tooltip info")).not.toBeInTheDocument();
+    });
+  });
+});

package/src/components/micro/tooltip.tsx

@@ -112,5 +112,5 @@ export {
   Tooltip,
   TooltipContent,
   TooltipProvider,
-  TooltipTrigger,
+  TooltipTrigger
 };

package/src/dev/data.ts

@@ -484,4 +484,12 @@ export const COMPONENTS = [
     status: "stable",
     hasSize: true,
   },
+  {
+    id: "why",
+    category: "Other",
+    label: "Why gladvn?",
+    hasMicro: false,
+    hasMacro: false,
+    status: "stable",
+  },
 ];

package/src/dev/main.tsx

@@ -2,6 +2,10 @@ import { StrictMode, useEffect } from "react";
 
 import { createRoot } from "react-dom/client";
 
+import "@fontsource/inter/400.css";
+import "@fontsource/inter/500.css";
+import "@fontsource/inter/600.css";
+import "@fontsource/inter/700.css";
 import { ThemeProvider, useTheme } from "../components/micro/theme-provider";
 import App from "../dev/App";
 import { DevContextProvider } from "../dev/components/dev-context";

package/src/dev/showcase/accordion.tsx

@@ -7,13 +7,15 @@ import {
   Accordion,
   AccordionContent,
   AccordionItem,
-  AccordionTrigger } from "../../components/micro/accordion";
+  AccordionTrigger
+} from "../../components/micro/accordion";
 import {
   DocsP,
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs } from "../../dev/components/showcase";
+  ShowcaseDocs
+} from "../../dev/components/showcase";
 
 // ──────────────────────────────────────────────────────────
 // Shared Data

package/src/dev/showcase/alert-dialog.tsx

@@ -7,7 +7,8 @@ import {
   MessageSquareWarningIcon,
   ShieldAlertIcon,
   TrashIcon,
-  XIcon } from "lucide-react";
+  XIcon
+} from "lucide-react";
 
 import { AlertDialogPreset } from "../../components/macro/alert-dialog-preset";
 import {
@@ -20,9 +21,10 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogMedia,
-  
+
   AlertDialogTitle,
-  AlertDialogTrigger } from "../../components/micro/alert-dialog";
+  AlertDialogTrigger
+} from "../../components/micro/alert-dialog";
 import { Button } from "../../components/micro/button";
 import { useDevContext } from "../../dev/components/dev-context";
 import {
@@ -30,7 +32,8 @@ import {
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs } from "../../dev/components/showcase";
+  ShowcaseDocs
+} from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
 // ──────────────────────────────────────────────────────────

package/src/dev/showcase/alert.tsx

@@ -5,7 +5,8 @@ import {
   InfoIcon,
   TriangleAlertIcon,
   XCircleIcon,
-  XIcon } from "lucide-react";
+  XIcon
+} from "lucide-react";
 
 import { AlertPreset } from "../../components/macro/alert-preset";
 import {
@@ -13,7 +14,8 @@ import {
   AlertAction,
   AlertDescription,
   AlertIcon,
-  AlertTitle } from "../../components/micro/alert";
+  AlertTitle
+} from "../../components/micro/alert";
 import { Button } from "../../components/micro/button";
 import { useDevContext } from "../../dev/components/dev-context";
 import {
@@ -24,7 +26,8 @@ import {
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs } from "../../dev/components/showcase";
+  ShowcaseDocs
+} from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
 // ──────────────────────────────────────────────────────────

package/src/dev/showcase/aspect-ratio.tsx

@@ -5,7 +5,8 @@ import {
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs } from "../../dev/components/showcase";
+  ShowcaseDocs
+} from "../../dev/components/showcase";
 
 const commonRatios = [
   { label: "16:9", ratio: 16 / 9, desc: "Widescreen — video, hero banners" },

package/src/dev/showcase/avatar.tsx

@@ -2,7 +2,8 @@ import {
   CheckCircle2Icon,
   CheckIcon,
   LayersIcon,
-  UserIcon } from "lucide-react";
+  UserIcon
+} from "lucide-react";
 
 import { AvatarPreset } from "../../components/macro/avatar-preset";
 import {
@@ -11,14 +12,16 @@ import {
   AvatarFallback,
   AvatarGroup,
   AvatarGroupCount,
-  AvatarImage } from "../../components/micro/avatar";
+  AvatarImage
+} from "../../components/micro/avatar";
 import { useDevContext } from "../../dev/components/dev-context";
 import {
   DocsP,
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs } from "../../dev/components/showcase";
+  ShowcaseDocs
+} from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
 // ──────────────────────────────────────────────────────────

package/src/dev/showcase/badge.tsx

@@ -8,7 +8,8 @@ import {
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs } from "../../dev/components/showcase";
+  ShowcaseDocs
+} from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
 export default function BadgeShowcase() {

package/src/dev/showcase/breadcrumb.tsx

@@ -8,19 +8,22 @@ import {
   BreadcrumbLink,
   BreadcrumbList,
   BreadcrumbPage,
-  BreadcrumbSeparator } from "../../components/micro/breadcrumb";
+  BreadcrumbSeparator
+} from "../../components/micro/breadcrumb";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  
-  DropdownMenuTrigger } from "../../components/micro/dropdown-menu";
+
+  DropdownMenuTrigger
+} from "../../components/micro/dropdown-menu";
 import {
   DocsP,
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs } from "../../dev/components/showcase";
+  ShowcaseDocs
+} from "../../dev/components/showcase";
 
 // ──────────────────────────────────────────────────────────
 // SECTION 1: Macro Content

package/src/dev/showcase/button.tsx

@@ -10,7 +10,8 @@ import {
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs } from "../../dev/components/showcase";
+  ShowcaseDocs
+} from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
 function ButtonMicroShowcase({ globalSize }: { globalSize: Size }) {

package/src/dev/showcase/calendar.tsx

@@ -10,7 +10,8 @@ import {
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs } from "../../dev/components/showcase";
+  ShowcaseDocs
+} from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
 function CalendarMicroShowcase({ globalSize }: { globalSize: Size }) {