gladvn 0.2.36 → 0.2.37

package/src/components/micro/badge.tsx

@@ -35,7 +35,7 @@ const badgeVariants = cva(
       },
     },
     compoundVariants: [
-      // Solid
+      
       {
         variant: "solid",
         color: "primary",
@@ -82,7 +82,6 @@ const badgeVariants = cva(
         className: "bg-accent text-accent-foreground",
       },
 
-      // Outline
       {
         variant: "outline",
         color: "primary",
@@ -125,7 +124,6 @@ const badgeVariants = cva(
         className: "border-accent text-accent-foreground",
       },
 
-      // Soft
       {
         variant: "soft",
         color: "primary",

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

@@ -7,82 +7,77 @@ import { describe, expect, it, vi } from "vitest";
 import { Button } from "./button";
 
 describe("Button", () => {
-  // 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();
     expect(button).toHaveAttribute("data-variant", "solid");
     expect(button).toHaveAttribute("data-color", "primary");
   });
 
   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(
@@ -92,29 +87,27 @@ describe("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");

package/src/components/micro/button.tsx

@@ -36,7 +36,7 @@ const buttonVariants = cva(
   "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-border text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:ring-3 focus-visible:ring-offset-1 focus-visible:ring-offset-background active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-3 aria-invalid:focus-visible:ring-destructive/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:focus-visible:ring-destructive/50 data-[icon=true]:aspect-square data-[icon=true]:px-0",
   {
     variants: {
-      // ── Visual style ─────────────────────────────────────────────
+      
       variant: {
         solid: "border-transparent",
         outline: "bg-transparent",
@@ -45,8 +45,6 @@ const buttonVariants = cva(
         link: "border-transparent bg-transparent underline-offset-4 hover:underline",
       },
 
-      // ── Semantic color ───────────────────────────────────────────
-      // Left empty — actual classes are injected via compoundVariants below
       color: {
         primary: "",
         secondary: "",
@@ -59,7 +57,6 @@ const buttonVariants = cva(
         accent: "",
       },
 
-      // ── Size ─────────────────────────────────────────────────────
       size: {
         sm: "h-7 gap-1 px-3 text-xs",
         md: "h-8 gap-1.5 px-3.5",
@@ -67,9 +64,8 @@ const buttonVariants = cva(
       },
     },
 
-    // ── variant × color combinations ─────────────────────────────
     compoundVariants: [
-      // solid — filled background, foreground text
+      
       {
         variant: "solid",
         color: "primary",
@@ -125,7 +121,6 @@ const buttonVariants = cva(
           "bg-accent      text-accent-foreground      hover:bg-accent/85",
       },
 
-      // outline — border + semantic text, tinted hover
       {
         variant: "outline",
         color: "primary",
@@ -174,7 +169,6 @@ const buttonVariants = cva(
           "border-accent      text-accent-foreground hover:bg-accent/10",
       },
 
-      // soft — tinted background, semantic text
       {
         variant: "soft",
         color: "primary",
@@ -222,7 +216,6 @@ const buttonVariants = cva(
           "bg-accent/50      text-accent-foreground hover:bg-accent/80",
       },
 
-      // ghost — transparent, semantic text, tinted hover
       {
         variant: "ghost",
         color: "primary",
@@ -269,7 +262,6 @@ const buttonVariants = cva(
         className: "text-accent-foreground hover:bg-accent/10",
       },
 
-      // link — just semantic text + underline on hover
       { variant: "link", color: "primary", className: "text-primary" },
       { variant: "link", color: "secondary", className: "text-secondary" },
       { variant: "link", color: "destructive", className: "text-destructive" },
@@ -279,7 +271,7 @@ const buttonVariants = cva(
       { variant: "link", color: "tertiary", className: "text-tertiary" },
       { variant: "link", color: "muted", className: "text-muted-foreground" },
       { variant: "link", color: "accent", className: "text-accent-foreground" },
-      // focus ring — semantic color at /15 opacity with offset
+      
       { color: "primary", className: "focus-visible:ring-primary/50" },
       { color: "secondary", className: "focus-visible:ring-secondary/50" },
       { color: "destructive", className: "focus-visible:ring-destructive/50" },

package/src/components/micro/calendar.tsx

@@ -345,31 +345,30 @@ function CalendarDayButton({
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        // Base layout — size driven by parent group
+        
         "relative isolate z-10 flex aspect-square size-7 flex-col items-center justify-center gap-1 rounded-md font-normal leading-none transition-colors outline-none select-none",
         "group-[.calendar-sm]/calendar:size-6 group-[.calendar-lg]/calendar:size-8",
-        // Text size — responsive via parent group
+        
         "text-sm group-[.calendar-sm]/calendar:text-xs",
-        // Hover
+        
         "hover:bg-accent hover:text-accent-foreground",
-        // Focus ring (standard)
+        
         "focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
-        // Press feedback
+        
         "active:translate-y-px",
-        // Disabled
+        
         "disabled:pointer-events-none disabled:opacity-50",
-        // Keyboard focus from react-day-picker
+        
         "group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-3 group-data-[focused=true]/day:ring-ring/50",
-        // Selected single
+        
         "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[selected-single=true]:hover:bg-primary/90",
-        // Range start
+        
         "data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground",
-        // Range end
+        
         "data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground",
-        // Range middle
+        
         "data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground",
-        // Content spans (event dots etc.) — consumer should use data-slot on spans
-        // Dark mode
+
         "dark:hover:text-foreground",
         className,
       )}

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

@@ -13,7 +13,7 @@ import {
 
 describe("Card", () => {
   it("[3C.11-01] [P1] renders all card parts correctly", () => {
-    // Given
+    
     render(
       <Card data-testid="card">
         <CardHeader>
@@ -25,7 +25,6 @@ describe("Card", () => {
       </Card>,
     );
 
-    // Then
     expect(screen.getByTestId("card")).toBeInTheDocument();
     expect(screen.getByText("Card Title")).toBeInTheDocument();
     expect(screen.getByText("Card Description")).toBeInTheDocument();
@@ -34,16 +33,15 @@ describe("Card", () => {
   });
 
   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

package/src/components/micro/carousel.tsx

@@ -172,7 +172,6 @@ const CarouselContent = React.forwardRef<
 >(({ className, ...props }, ref) => {
   const { carouselRef } = useCarousel();
 
-  // Combine forwarded ref and internal embla ref
   const setRefs = React.useCallback(
     (node: HTMLDivElement) => {
       carouselRef(node);

package/src/components/micro/chart.tsx

@@ -14,7 +14,6 @@ import * as RechartsPrimitive from "recharts";
 
 import { cn } from "../../lib/utils";
 
-// Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: "", dark: ".dark" } as const;
 
 const INITIAL_DIMENSION = { width: 320, height: 200 } as const;
@@ -229,7 +228,9 @@ function ChartTooltipContent({
                 key={index}
                 className={cn(
                   "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
-                  indicator === "dot" && "items-center",
+                  {
+                    "items-center": indicator === "dot"
+                  }
                 )}
               >
                 {formatter && item?.value !== undefined && item.name ? (

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

@@ -8,16 +8,16 @@ 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(
@@ -26,42 +26,34 @@ describe("Checkbox", () => {
 
     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(
@@ -73,20 +65,19 @@ describe("Checkbox", () => {
     );
 
     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

@@ -80,7 +80,7 @@ function ComboboxInput({ className, ...props }: ComboboxPrimitive.Input.Props) {
       data-slot="combobox-input"
       className={cn(
         "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-        // Clear standalone styles when inside InputGroup
+        
         "group-data-[slot=input-group]/input-group:border-0",
         "group-data-[slot=input-group]/input-group:shadow-none",
         "group-data-[slot=input-group]/input-group:h-auto",
@@ -239,8 +239,6 @@ function ComboboxSeparator({
   );
 }
 
-
-
 const comboboxChipsVariants = cva(
   "group/combobox-chips flex flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:focus-within:ring-3 has-aria-invalid:focus-within:ring-destructive/20 has-[[data-slot=combobox-chip]]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:focus-within:ring-destructive/40 has-disabled:opacity-50 has-disabled:cursor-not-allowed has-disabled:pointer-events-none",
   {

package/src/components/micro/command.tsx

@@ -68,17 +68,21 @@ const CommandInput = React.forwardRef<
       data-slot="command-input-wrapper"
       className={cn(
         "pb-0",
-        size === "sm" && "p-1",
-        size === "md" && "p-2",
-        size === "lg" && "p-3",
+        {
+          "p-1": size === "sm",
+          "p-2": size === "md",
+          "p-3": size === "lg",
+        }
       )}
     >
       <InputGroup
         className={cn(
           "rounded-lg border-input/30 bg-input/30 shadow-none",
-          size === "sm" && "h-8",
-          size === "md" && "h-10",
-          size === "lg" && "h-11",
+          {
+            "h-8": size === "sm",
+            "h-10": size === "md",
+            "h-11": size === "lg",
+          }
         )}
       >
         <CommandPrimitive.Input
@@ -88,10 +92,16 @@ const CommandInput = React.forwardRef<
           {...props}
         />
         <InputGroupAddon
-          className={cn("shrink-0", size === "lg" ? "pl-3" : "pl-2")}
+          className={cn("shrink-0", {
+            "pl-3": size === "lg",
+            "pl-2": size !== "lg",
+          })}
         >
           <SearchIcon
-            className={cn("opacity-50", size === "lg" ? "size-5" : "size-4")}
+            className={cn("opacity-50", {
+              "size-5": size === "lg",
+              "size-4": size !== "lg",
+            })}
           />
         </InputGroupAddon>
       </InputGroup>
@@ -127,9 +137,11 @@ const CommandEmpty = React.forwardRef<
       data-slot="command-empty"
       className={cn(
         "text-center",
-        size === "sm" && "py-4 text-xs",
-        size === "md" && "py-6 text-sm",
-        size === "lg" && "py-8 text-base",
+        {
+          "py-4 text-xs": size === "sm",
+          "py-6 text-sm": size === "md",
+          "py-8 text-base": size === "lg",
+        },
         className,
       )}
       {...props}

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

@@ -33,8 +33,6 @@ function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
 }
 ContextMenu.displayName = "ContextMenu";
 
-
-
 const ContextMenuTrigger = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Trigger>

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

@@ -16,7 +16,7 @@ import {
 
 describe("Dialog", () => {
   it("[3C.4-01] [P1] renders trigger correctly and content is hidden initially", () => {
-    // Given
+    
     render(
       <Dialog>
         <DialogTrigger>Open Dialog</DialogTrigger>
@@ -30,15 +30,14 @@ describe("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>
@@ -56,10 +55,9 @@ describe("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();
@@ -69,7 +67,7 @@ describe("Dialog", () => {
   });
 
   it("[3C.4-03] [P1] closes the dialog when Close button is clicked", async () => {
-    // Given
+    
     const user = userEvent.setup();
     render(
       <Dialog>
@@ -81,16 +79,12 @@ describe("Dialog", () => {
       </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(() => {
@@ -99,7 +93,7 @@ describe("Dialog", () => {
   });
 
   it("[3C.4-04] [P1] closes the dialog when Escape is pressed", async () => {
-    // Given
+    
     const user = userEvent.setup();
     render(
       <Dialog>
@@ -110,10 +104,8 @@ describe("Dialog", () => {
       </Dialog>,
     );
 
-    // When
     await user.click(screen.getByRole("button", { name: "Open Dialog" }));
 
-    // Then
     await waitFor(() => {
       expect(screen.getByRole("dialog")).toBeInTheDocument();
     });

package/src/components/micro/dialog.tsx

@@ -26,8 +26,6 @@ const DialogTrigger = React.forwardRef<
 ));
 DialogTrigger.displayName = "DialogTrigger";
 
-
-
 const DialogClose = React.forwardRef<
   HTMLButtonElement,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>

package/src/components/micro/drawer.tsx

@@ -9,7 +9,6 @@
 
 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 { Drawer as DrawerPrimitive } from "vaul";
 
@@ -31,8 +30,6 @@ const DrawerTrigger = React.forwardRef<
 ));
 DrawerTrigger.displayName = "DrawerTrigger";
 
-
-
 const DrawerClose = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Close>,
   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Close>