gladvn 0.2.36 → 0.2.37

package/src/components/micro/sidebar.tsx

@@ -4,9 +4,6 @@ import * as React from "react";
 
 import { cn } from "../../lib/utils";
 
-// ─────────────────────────────────────────────────────────────────────────────
-// 1. Sidebar (Wrapper)
-// ─────────────────────────────────────────────────────────────────────────────
 const Sidebar = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<"div"> & {
@@ -27,7 +24,7 @@ const Sidebar = React.forwardRef<
     },
     ref,
   ) => {
-    // will-change only during animation, not always-on
+    
     const handleTransitionStart = (
       e: React.TransitionEvent<HTMLDivElement>,
     ) => {
@@ -39,7 +36,7 @@ const Sidebar = React.forwardRef<
     };
 
     return (
-      // Outer: only this div animates width. No layout children to reflow.
+      
       <div
         ref={ref}
         role="navigation"
@@ -55,7 +52,9 @@ const Sidebar = React.forwardRef<
           "transition-[width,border-width] duration-[400ms]",
           "data-[state=expanded]:w-[var(--sb-expanded)]",
           "data-[state=collapsed]:w-[var(--sb-collapsed)]",
-          collapsedWidth === 0 && "data-[state=collapsed]:border-r-0",
+          {
+            "data-[state=collapsed]:border-r-0": collapsedWidth === 0
+          },
           className,
         )}
         data-state={defaultState}

package/src/components/micro/sonner.tsx

@@ -43,7 +43,6 @@ function Toaster({ ...props }: ToasterProps) {
           "--normal-border": "var(--border)",
           "--border-radius": "var(--radius)",
 
-          /* Map Sonner's internal variables to our design system variables */
           "--success-bg":
             "color-mix(in srgb, var(--success) 10%, var(--popover))",
           "--success-text": "var(--success)",

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

@@ -8,20 +8,20 @@ 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(
@@ -32,24 +32,19 @@ describe("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">
@@ -59,19 +54,16 @@ describe("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(
@@ -85,24 +77,23 @@ describe("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/switch.tsx

@@ -41,7 +41,7 @@ const Switch = React.forwardRef<
     <SwitchPrimitive.Root
       ref={ref}
       data-slot="switch"
-      /* Expand touch target area (Hit Area) minimally to 44x44px via pseudo-element (after:-inset-*) */
+      
       className={cn(switchVariants({ size, className }))}
       {...props}
     />

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

@@ -7,7 +7,7 @@ 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>
@@ -19,19 +19,16 @@ describe("Tabs", () => {
       </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">
@@ -45,16 +42,15 @@ describe("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">
@@ -70,12 +66,10 @@ describe("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();

package/src/components/micro/theme-provider.tsx

@@ -15,8 +15,6 @@
 
 import * as React from "react";
 
-// ─── Types ────────────────────────────────────────────────────────────────────
-
 type ThemeMode = "light" | "dark";
 
 type ThemeContextValue = {
@@ -26,14 +24,10 @@ type ThemeContextValue = {
   setMode: (mode: ThemeMode) => void;
 };
 
-// ─── Context ──────────────────────────────────────────────────────────────────
-
 const ThemeContext = React.createContext<ThemeContextValue | undefined>(
   undefined,
 );
 
-// ─── useTheme ─────────────────────────────────────────────────────────────────
-
 /**
  * Read and control the nearest ThemeProvider.
  * Returns `undefined` when no provider is found in the tree.
@@ -49,8 +43,6 @@ function useTheme(): ThemeContextValue | undefined {
   return React.useContext(ThemeContext);
 }
 
-// ─── ThemeProvider ────────────────────────────────────────────────────────────
-
 type ThemeProviderProps = {
   children: React.ReactNode;
 } & (
@@ -131,8 +123,6 @@ function ThemeProvider({
 
 ThemeProvider.displayName = "ThemeProvider";
 
-// ─── ThemeWrapper ─────────────────────────────────────────────────────────────
-
 /**
  * ThemeWrapper — re-applies the current theme class inside a Portal.
  * Used internally by Dialog, Tooltip, Popover, etc. to tunnel the theme
@@ -157,7 +147,5 @@ function ThemeWrapper({ children }: { children: React.ReactNode }) {
 
 ThemeWrapper.displayName = "ThemeWrapper";
 
-// ─── Exports ──────────────────────────────────────────────────────────────────
-
 export { ThemeProvider, ThemeWrapper, useTheme };
 export type { ThemeMode };

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

@@ -16,9 +16,6 @@ import { type VariantProps } from "class-variance-authority";
 import { toggleVariants } from "../../components/micro/toggle";
 import { cn } from "../../lib/utils";
 
-// ──────────────────────────────────────────────────────────
-// Context
-// ──────────────────────────────────────────────────────────
 type ToggleGroupContextValue = VariantProps<typeof toggleVariants> & {
   spacing?: number;
   orientation?: "horizontal" | "vertical";
@@ -31,9 +28,6 @@ const ToggleGroupContext = React.createContext<ToggleGroupContextValue>({
   orientation: "horizontal",
 });
 
-// ──────────────────────────────────────────────────────────
-// Types
-// ──────────────────────────────────────────────────────────
 type ToggleGroupProps = ToggleGroupPrimitive.Props &
   VariantProps<typeof toggleVariants> & {
     spacing?: number;
@@ -43,10 +37,6 @@ type ToggleGroupProps = ToggleGroupPrimitive.Props &
 type ToggleGroupItemProps = TogglePrimitive.Props &
   VariantProps<typeof toggleVariants>;
 
-// ──────────────────────────────────────────────────────────
-// Components
-// ──────────────────────────────────────────────────────────
-
 /**
  * @description A set of two-state buttons that can be toggled on or off.
  * @requires ToggleGroupItem
@@ -59,8 +49,7 @@ function ToggleGroup({
   className,
   variant,
   size,
-  // spacing is a dynamic numeric value — CSS variable is the only viable approach
-  // since Tailwind cannot generate arbitrary gap-{n} utilities at runtime.
+
   spacing = 2,
   orientation = "horizontal",
   children,

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

@@ -12,7 +12,7 @@ import {
 
 describe("Tooltip", () => {
   it("[3C.9-01] [P1] renders trigger and hides content initially", () => {
-    // Given
+    
     render(
       <TooltipProvider>
         <Tooltip>
@@ -22,17 +22,15 @@ describe("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}>
@@ -44,17 +42,16 @@ describe("Tooltip", () => {
     );
 
     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}>
@@ -67,9 +64,8 @@ describe("Tooltip", () => {
 
     const trigger = screen.getByRole("button", { name: "Hover me" });
 
-    // When
     await user.tab();
-    // Then
+    
     expect(trigger).toHaveFocus();
 
     await waitFor(() => {
@@ -78,7 +74,7 @@ describe("Tooltip", () => {
   });
 
   it("[3C.9-04] [P1] hides tooltip when Escape is pressed", async () => {
-    // Given
+    
     const user = userEvent.setup();
     render(
       <TooltipProvider delay={0}>
@@ -90,10 +86,9 @@ describe("Tooltip", () => {
     );
 
     const trigger = screen.getByRole("button", { name: "Hover me" });
-    // When
+    
     await user.hover(trigger);
 
-    // Then
     await waitFor(() => {
       expect(screen.getByText("Tooltip info")).toBeVisible();
     });

package/src/dev/App.tsx

@@ -199,7 +199,7 @@ export default function App() {
             <button
               onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
               className="md:hidden -ml-2 p-1.5 rounded-md hover:bg-muted text-muted-foreground transition-colors"
-              aria-label="Toggle Menu"
+              aria-label="Bật/tắt menu"
             >
               {isMobileMenuOpen ? (
                 <XIcon className="size-5" />
@@ -227,7 +227,7 @@ export default function App() {
                 }
               )}
             >
-              Overview
+              Tổng quan
             </button>
             <button
               onClick={() => {
@@ -272,7 +272,7 @@ export default function App() {
             >
               <SearchIcon className="size-3.5 shrink-0" />
               <span className="flex-1 text-left">
-                Search...
+                Tìm kiếm...
               </span>
               <kbd className="text-[10px] bg-background border border-border/80 rounded px-1.5 py-0.5 font-sans leading-none">
                 ⌘K
@@ -293,7 +293,7 @@ export default function App() {
                 />
               }
               nativeButton={false}
-              className="text-muted-foreground hover:text-foreground hidden sm:inline-flex"
+              className="text-muted-foreground  hover:text-foreground hidden sm:inline-flex"
             >
               {/* GitHub SVG mark */}
               <svg
@@ -322,7 +322,7 @@ export default function App() {
             >
               <SunIcon className="size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
               <MoonIcon className="absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-              <span className="sr-only">Toggle theme</span>
+              <span className="sr-only">Đổi giao diện</span>
             </Button>
           </div>
         </div>
@@ -362,7 +362,7 @@ export default function App() {
               )}
             >
               <LayersIcon className="size-3.5" />
-              Overview
+              Tổng quan
             </button>
             <div className="h-px bg-border/50 my-2 mx-1"></div>
             <button

package/src/dev/components/BlockViewer.tsx

@@ -12,16 +12,18 @@ export function BlockViewer({
   title,
   description,
   codeString,
+  className,
 }: {
   blockId: string;
   title: string;
   description?: string;
   codeString: string;
+  className?: string;
 }) {
   const [width, setWidth] = useState<"100%" | "768px" | "375px">("100%");
   
   return (
-    <div className="mb-12">
+    <div className={cn("flex flex-col gap-6", className)}>
       <SectionHeader title={title} description={description} />
       
       <Tabs defaultValue="preview" className="w-full relative group">
@@ -37,7 +39,10 @@ export function BlockViewer({
               size="sm"
               iconOnly
               onClick={() => setWidth("100%")}
-              className={cn("size-7", width === "100%" ? "bg-muted text-foreground" : "text-muted-foreground")}
+              className={cn("size-7", {
+                "bg-muted text-foreground": width === "100%",
+                "text-muted-foreground": width !== "100%",
+              })}
               aria-label="Desktop view"
             >
               <MonitorIcon className="size-3.5" />
@@ -47,7 +52,10 @@ export function BlockViewer({
               size="sm"
               iconOnly
               onClick={() => setWidth("768px")}
-              className={cn("size-7 hidden sm:flex", width === "768px" ? "bg-muted text-foreground" : "text-muted-foreground")}
+              className={cn("size-7 hidden sm:flex", {
+                "bg-muted text-foreground": width === "768px",
+                "text-muted-foreground": width !== "768px",
+              })}
               aria-label="Tablet view"
             >
               <TabletIcon className="size-3.5" />
@@ -57,7 +65,10 @@ export function BlockViewer({
               size="sm"
               iconOnly
               onClick={() => setWidth("375px")}
-              className={cn("size-7", width === "375px" ? "bg-muted text-foreground" : "text-muted-foreground")}
+              className={cn("size-7", {
+                "bg-muted text-foreground": width === "375px",
+                "text-muted-foreground": width !== "375px",
+              })}
               aria-label="Mobile view"
             >
               <SmartphoneIcon className="size-3.5" />

package/src/dev/components/Container.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+
+interface ContainerProps extends React.ComponentProps<"div"> {
+  as?: React.ElementType;
+}
+
+export const Container = React.forwardRef<HTMLElement, ContainerProps>(
+  ({ className, as: Component = "div", ...props }, ref) => {
+    return (
+      <Component
+        ref={ref}
+        className={cn("container max-w-6xl mx-auto px-4", className)}
+        {...props}
+      />
+    );
+  }
+);
+
+Container.displayName = "Container";

package/src/dev/components/GladvnLogo.tsx

@@ -2,15 +2,12 @@ import { cn } from "../../lib/utils";
 
 interface GladvnLogoProps {
   className?: string;
-  /** Size of the icon SVG */
-  iconSize?: string;
   /** Show icon only (default) or icon + wordmark */
   variant?: "icon" | "wordmark";
 }
 
 export function GladvnLogo({
   className,
-  iconSize = "size-7",
   variant = "icon",
 }: GladvnLogoProps) {
   const icon = (
@@ -18,10 +15,11 @@ export function GladvnLogo({
       viewBox="0 0 32 32"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={cn(iconSize, variant === "icon" && className)}
+      className={cn("size-7", {
+        [`${className}`]: variant === "icon" && !!className
+      })}
       aria-hidden="true"
     >
-      {/* Macro layer — outer rounded square, primary fill */}
       <rect
         x="1"
         y="1"
@@ -30,7 +28,6 @@ export function GladvnLogo({
         rx="7"
         className="fill-primary"
       />
-      {/* Micro layer — inner square, offset top-right, semi-transparent white */}
       <rect
         x="11"
         y="5"
@@ -40,7 +37,6 @@ export function GladvnLogo({
         fill="white"
         fillOpacity="0.25"
       />
-      {/* Micro inner highlight — brighter corner */}
       <rect
         x="15"
         y="5"
@@ -50,9 +46,7 @@ export function GladvnLogo({
         fill="white"
         fillOpacity="0.2"
       />
-      {/* Token dot — bottom left, CSS token representation */}
       <circle cx="8" cy="24" r="3" fill="white" fillOpacity="0.7" />
-      {/* Macro bottom bar — connects Macro to token */}
       <rect
         x="6"
         y="17"

package/src/dev/components/code-highlighter.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useRef, useState } from "react";
+import { cn } from "../../lib/utils";
 
 import { type Highlighter, createHighlighter } from "shiki";
 
-// Singleton highlighter — loaded once, reused across all CodeHighlighter instances
 let highlighterPromise: Promise<Highlighter> | null = null;
 
 function getHighlighter() {
@@ -18,9 +18,11 @@ function getHighlighter() {
 export function CodeHighlighter({
   code,
   language = "tsx",
+  className,
 }: {
   code: string;
   language?: "tsx" | "ts" | "css";
+  className?: string;
 }) {
   const [html, setHtml] = useState<string | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -50,7 +52,7 @@ export function CodeHighlighter({
 
   if (!html) {
     return (
-      <div className="overflow-x-auto text-[13px] leading-relaxed font-mono">
+      <div className={cn("overflow-x-auto text-[13px] leading-relaxed font-mono", className)}>
         <pre className="!bg-transparent !p-0 !m-0 whitespace-pre-wrap break-words">
           <code className="text-muted-foreground">Loading...</code>
         </pre>
@@ -72,7 +74,7 @@ export function CodeHighlighter({
       `}</style>
       <div
         ref={containerRef}
-        className="code-highlighter overflow-x-auto text-[13px] leading-relaxed"
+        className={cn("code-highlighter overflow-x-auto text-[13px] leading-relaxed", className)}
         dangerouslySetInnerHTML={{ __html: html }}
       />
     </>