gladvn 0.2.36 → 0.2.37

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

@@ -15,7 +15,7 @@ import {
 
 describe("DropdownMenu", () => {
   it("[3C.5-01] [P1] renders trigger correctly and content is hidden initially", () => {
-    // Given
+    
     render(
       <DropdownMenu>
         <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
@@ -31,15 +31,14 @@ describe("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>
@@ -54,10 +53,9 @@ describe("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();
@@ -69,7 +67,7 @@ describe("DropdownMenu", () => {
   });
 
   it("[3C.5-03] [P1] closes the menu when an item is clicked", async () => {
-    // Given
+    
     const user = userEvent.setup();
     render(
       <DropdownMenu>
@@ -80,10 +78,8 @@ describe("DropdownMenu", () => {
       </DropdownMenu>,
     );
 
-    // When
     await user.click(screen.getByRole("button", { name: "Open Menu" }));
 
-    // Then
     await waitFor(() => {
       expect(screen.getByRole("menu")).toBeInTheDocument();
     });
@@ -97,7 +93,7 @@ describe("DropdownMenu", () => {
   });
 
   it("[3C.5-04] [P1] supports keyboard navigation (ArrowDown, Escape)", async () => {
-    // Given
+    
     const user = userEvent.setup();
     render(
       <DropdownMenu>
@@ -110,19 +106,17 @@ describe("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(() => {

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

@@ -22,8 +22,6 @@ function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
 }
 DropdownMenu.displayName = "DropdownMenu";
 
-
-
 const DropdownMenuTrigger = React.forwardRef<
   HTMLButtonElement,
   MenuPrimitive.Trigger.Props

package/src/components/micro/field.tsx

@@ -73,7 +73,7 @@ const fieldVariants = cva("group/field flex min-w-fit", {
     orientation: {
       vertical: "flex-col [&>.sr-only]:w-auto",
       horizontal: "flex-row items-center [&>[data-slot=field-label]]:flex-auto",
-      // Responsive: vertical on mobile, horizontal on @md breakpoint.
+      
       responsive:
         "flex-col @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>[data-slot=field-label]]:flex-auto [&>.sr-only]:w-auto",
     },
@@ -200,9 +200,9 @@ const FieldDescription = React.forwardRef<
       ref={ref}
       data-slot="field-description"
       className={cn(
-        // Pull up when after a legend variant; balance text when inside horizontal Field
+        
         "text-left leading-normal font-normal text-muted-foreground group-data-[orientation=horizontal]/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
-        // Tighten gap: no margin when last child, pull up when second-to-last (before FieldError)
+        
         "last:mt-0 nth-last-2:-mt-1",
         "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         "text-sm group-data-[size=sm]/field:text-xs",

package/src/components/micro/hover-card.tsx

@@ -39,8 +39,6 @@ const HoverCardTrigger = React.forwardRef<
 ));
 HoverCardTrigger.displayName = "HoverCardTrigger";
 
-
-
 const HoverCardContent = React.forwardRef<
   HTMLDivElement,
   React.ComponentPropsWithoutRef<typeof PreviewCardPrimitive.Popup> &

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

@@ -13,28 +13,23 @@ import { type VariantProps, cva } from "class-variance-authority";
 
 import { cn } from "../../lib/utils";
 
-/* ── InputGroup ─────────────────────────────────────────────────
-   Wrapper that groups inputs, addons, and action buttons.
-   `size` is set once here and propagated to all children via
-   CSS group modifiers: group-data-[size=sm|md|lg]/input-group:*
-   ─────────────────────────────────────────────────────────────── */
 const inputGroupVariants = cva(
   [
     "group/input-group relative flex min-w-0 items-center overflow-hidden rounded-lg border border-input transition-colors outline-none",
-    // Disabled state delegated from inner elements
+    
     "has-disabled:bg-input/50 has-disabled:opacity-50 has-disabled:cursor-not-allowed dark:has-disabled:bg-input/80",
-    // Focus ring delegated from [data-slot=input-group-control]
+    
     "has-[[data-slot=input-group-control]:focus-visible]:border-ring",
     "has-[[data-slot=input-group-control]:focus-visible]:ring-3",
     "has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
     "has-[[data-slot=input-group-control]:focus-visible]:ring-offset-1",
     "has-[[data-slot=input-group-control]:focus-visible]:ring-offset-background",
-    // Error state delegated from aria-invalid on inner control
+    
     "has-[[data-slot][aria-invalid=true]]:border-destructive",
     "has-[[data-slot][aria-invalid=true]:focus-visible]:ring-3",
     "has-[[data-slot][aria-invalid=true]:focus-visible]:ring-destructive/50",
     "has-[[data-slot][aria-invalid=true]:focus-visible]:border-destructive",
-    // Dark mode base
+    
     "dark:bg-input/30",
   ],
   {
@@ -66,11 +61,6 @@ const InputGroup = React.forwardRef<
 });
 InputGroup.displayName = "InputGroup";
 
-/* ── InputGroupAddon ─────────────────────────────────────────────
-   Decorative slot for text/icon labels only (non-interactive).
-   Clicking the addon area focuses the nearest input/textarea.
-   Use `align="start"` (default) or `align="end"`.
-   ─────────────────────────────────────────────────────────────── */
 const inputGroupAddonVariants = cva(
   [
     "flex h-auto cursor-text items-center justify-center gap-2 font-medium text-muted-foreground select-none",
@@ -114,12 +104,6 @@ const InputGroupAddon = React.forwardRef<
 });
 InputGroupAddon.displayName = "InputGroupAddon";
 
-/* ── InputGroupText ──────────────────────────────────────────────
-   Inline label text or icon+text combo inside an InputGroupAddon.
-   @note Decorative icons placed here should include `aria-hidden="true"`
-   to prevent screen readers from announcing them, e.g.:
-   <InputGroupText><SearchIcon aria-hidden="true" /></InputGroupText>
-   ─────────────────────────────────────────────────────────────── */
 const InputGroupText = React.forwardRef<
   HTMLSpanElement,
   React.ComponentPropsWithoutRef<"span">
@@ -139,26 +123,15 @@ const InputGroupText = React.forwardRef<
 });
 InputGroupText.displayName = "InputGroupText";
 
-/* ── InputGroupButton ────────────────────────────────────────────
-   Self-contained native <button>. Place directly inside InputGroup
-   (not inside InputGroupAddon). Size is always inherited from the
-   parent InputGroup via CSS group modifiers — no `size` prop.
-
-   Separator borders (border-l / border-r) are applied automatically
-   based on DOM position within the flex container.
-
-   icon={true}  → square icon-only button (width = row height)
-   icon={false} → text button with horizontal padding (default)
-   ─────────────────────────────────────────────────────────────── */
 const inputGroupButtonVariants = cva(
   [
     "inline-flex shrink-0 self-stretch cursor-pointer items-center justify-center gap-1.5 font-medium whitespace-nowrap transition-colors duration-150 select-none",
-    // Self-managed focus ring (separate from wrapper delegation)
+    
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
     "disabled:pointer-events-none disabled:opacity-50",
-    // Auto separator borders based on sibling position
+    
     "[&:not(:first-child)]:border-l [&:not(:last-child)]:border-r border-border",
-    // Icon sizing — base (md/lg), overridden for sm. Shared by both icon and text modes.
+    
     "[&>svg:not([class*='size-'])]:size-4",
     "group-data-[size=sm]/input-group:[&>svg:not([class*='size-'])]:size-3.5",
   ],
@@ -174,13 +147,13 @@ const inputGroupButtonVariants = cva(
       },
       icon: {
         true: [
-          // Square: width = min-h of wrapper
+          
           "group-data-[size=sm]/input-group:w-7",
           "group-data-[size=md]/input-group:w-8",
           "group-data-[size=lg]/input-group:w-9",
         ],
         false: [
-          // Text button: horizontal padding + font size from group
+          
           "group-data-[size=sm]/input-group:px-2 group-data-[size=sm]/input-group:text-xs",
           "group-data-[size=md]/input-group:px-2.5 group-data-[size=md]/input-group:text-sm",
           "group-data-[size=lg]/input-group:px-3 group-data-[size=lg]/input-group:text-sm",
@@ -212,9 +185,6 @@ const InputGroupButton = React.forwardRef<
 });
 InputGroupButton.displayName = "InputGroupButton";
 
-/* ── InputGroupInput ─────────────────────────────────────────────
-   Self-contained native <input>. Size inherited from InputGroup.
-   ─────────────────────────────────────────────────────────────── */
 const InputGroupInput = React.forwardRef<
   HTMLInputElement,
   React.ComponentPropsWithoutRef<"input">
@@ -236,9 +206,6 @@ const InputGroupInput = React.forwardRef<
 });
 InputGroupInput.displayName = "InputGroupInput";
 
-/* ── InputGroupTextarea ──────────────────────────────────────────
-   Self-contained native <textarea>. Size inherited from InputGroup.
-   ─────────────────────────────────────────────────────────────── */
 const InputGroupTextarea = React.forwardRef<
   HTMLTextAreaElement,
   React.ComponentPropsWithoutRef<"textarea">

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

@@ -7,88 +7,79 @@ 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/navigation-menu.tsx

@@ -190,8 +190,6 @@ const NavigationMenuLink = React.forwardRef<
 });
 NavigationMenuLink.displayName = "NavigationMenuLink";
 
-
-
 export {
   NavigationMenu,
   NavigationMenuContent,

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

@@ -13,7 +13,7 @@ import {
 
 describe("Popover", () => {
   it("[3C.14-01] [P1] renders trigger correctly and content is hidden initially", () => {
-    // Given
+    
     render(
       <Popover>
         <PopoverTrigger>Open Popover</PopoverTrigger>
@@ -25,15 +25,14 @@ describe("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>
@@ -45,17 +44,16 @@ describe("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>
@@ -66,10 +64,8 @@ describe("Popover", () => {
       </Popover>,
     );
 
-    // When
     await user.click(screen.getByRole("button", { name: "Open Popover" }));
 
-    // Then
     await waitFor(() => {
       expect(screen.getByText("Popover Title")).toBeInTheDocument();
     });

package/src/components/micro/progress.tsx

@@ -62,7 +62,11 @@ function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
     <ProgressPrimitive.Track
       className={cn(
         "relative flex w-full items-center overflow-x-hidden rounded-full bg-muted",
-        size ? sizeClasses[size] : "",
+        {
+          "h-1": size === "sm",
+          "h-1.5": size === "md",
+          "h-2": size === "lg",
+        },
         className,
       )}
       data-slot="progress-track"

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

@@ -14,7 +14,7 @@ import {
 
 describe("Select", () => {
   it("[3C.3-01] [P1] renders correctly with default closed state", () => {
-    // Given
+    
     render(
       <Select>
         <SelectTrigger aria-label="Food">
@@ -27,20 +27,17 @@ describe("Select", () => {
       </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 = () => {
@@ -62,28 +59,22 @@ describe("Select", () => {
 
     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">
@@ -99,20 +90,16 @@ describe("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(() => {

package/src/components/micro/select.tsx

@@ -44,8 +44,6 @@ const SelectValue = React.forwardRef<
 ));
 SelectValue.displayName = "SelectValue";
 
-
-
 const selectTriggerVariants = cva(
   "inline-flex items-center justify-between rounded-lg border border-input bg-transparent text-foreground text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-3 aria-invalid:focus-visible:ring-destructive/50 data-placeholder:text-muted-foreground [&_[data-slot=select-value]]:line-clamp-1 [&_[data-slot=select-value]]:flex [&_[data-slot=select-value]]:items-center [&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4 dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:focus-visible:ring-destructive/50",
   {
@@ -120,9 +118,9 @@ const SelectContent = React.forwardRef<
             data-align-trigger={alignItemWithTrigger}
             className={cn(
               "relative isolate z-50 max-h-(--available-height) w-[calc(var(--anchor-width)+8px)] overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-              alignItemWithTrigger
-                ? "origin-(--transform-origin) data-[align-trigger=true]:animate-none"
-                : "",
+              {
+                "origin-(--transform-origin) data-[align-trigger=true]:animate-none": alignItemWithTrigger,
+              },
               className,
             )}
             {...props}

package/src/components/micro/separator.tsx

@@ -26,7 +26,7 @@ function Separator({
       data-slot="separator"
       orientation={orientation}
       className={cn(
-        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=vertical]:w-px",
         className,
       )}
       {...props}

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

@@ -14,7 +14,7 @@ import {
 
 describe("Sheet", () => {
   it("[3C.15-01] [P1] renders trigger correctly and content is hidden initially", () => {
-    // Given
+    
     render(
       <Sheet>
         <SheetTrigger>Open Sheet</SheetTrigger>
@@ -28,15 +28,14 @@ describe("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>
@@ -51,10 +50,9 @@ describe("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();
@@ -64,7 +62,7 @@ describe("Sheet", () => {
   });
 
   it("[3C.15-03] [P1] closes the sheet when default Close button is clicked", async () => {
-    // Given
+    
     const user = userEvent.setup();
     render(
       <Sheet>
@@ -75,16 +73,12 @@ describe("Sheet", () => {
       </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);
 
@@ -94,7 +88,7 @@ describe("Sheet", () => {
   });
 
   it("[3C.15-04] [P1] closes the sheet when Escape is pressed", async () => {
-    // Given
+    
     const user = userEvent.setup();
     render(
       <Sheet>
@@ -105,10 +99,8 @@ describe("Sheet", () => {
       </Sheet>,
     );
 
-    // When
     await user.click(screen.getByRole("button", { name: "Open Sheet" }));
 
-    // Then
     await waitFor(() => {
       expect(screen.getByRole("dialog")).toBeInTheDocument();
     });

package/src/components/micro/sheet.tsx

@@ -28,8 +28,6 @@ function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
   return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
 }
 
-
-
 function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
   return (
     <SheetPrimitive.Backdrop