gladvn 0.2.17 → 0.2.18

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

@@ -5,12 +5,13 @@
  * - Form Control Parity
  * - CSS Delegated Logic
  */
-import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
 import * as React from "react";
 
-import { cn } from "../../lib/utils";
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
 import { ChevronDownIcon } from "lucide-react";
 
+import { cn } from "../../lib/utils";
+
 /**
  * @description A collection of links for navigating websites.
  * @requires NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent
@@ -131,20 +132,20 @@ const NavigationMenuPositioner = React.forwardRef<
   ) => {
     return (
       <NavigationMenuPrimitive.Positioner
-            ref={ref}
-            side={side}
-            sideOffset={sideOffset}
-            align={align}
-            alignOffset={alignOffset}
-            className={cn(
-              "isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0",
-              className,
-            )}
-            {...props}
-          >
-            <NavigationMenuPrimitive.Popup className="data-ending-style:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0">
-              <NavigationMenuViewport />
-            </NavigationMenuPrimitive.Popup>
+        ref={ref}
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        className={cn(
+          "isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0",
+          className,
+        )}
+        {...props}
+      >
+        <NavigationMenuPrimitive.Popup className="data-ending-style:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0">
+          <NavigationMenuViewport />
+        </NavigationMenuPrimitive.Popup>
       </NavigationMenuPrimitive.Positioner>
     );
   },
@@ -192,6 +193,6 @@ export {
   NavigationMenuPortal,
   NavigationMenuPositioner,
   NavigationMenuTrigger,
-  NavigationMenuViewport,
   navigationMenuTriggerStyle,
+  NavigationMenuViewport,
 };

package/src/components/micro/pagination.tsx

@@ -6,6 +6,7 @@
  * - CSS Delegated Logic
  */
 import * as React from "react";
+
 import {
   ChevronLeftIcon,
   ChevronRightIcon,
@@ -13,8 +14,8 @@ import {
 } from "lucide-react";
 
 import { Button } from "../../components/micro/button";
-import { cn } from "../../lib/utils";
 import type { Size } from "../../lib/types";
+import { cn } from "../../lib/utils";
 
 const ellipsisSizeMap: Record<Size, { container: string; icon: string }> = {
   sm: { container: "size-7", icon: "[&>svg:not([class*='size-'])]:size-3" },

package/src/components/micro/popover.tsx

@@ -8,9 +8,10 @@
  */
 "use client";
 
-import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
 import * as React from "react";
 
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+
 import { cn } from "../../lib/utils";
 
 function Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {

package/src/components/micro/progress.tsx

@@ -7,9 +7,10 @@
  */
 "use client";
 
-import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
 import * as React from "react";
 
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
+
 import { type Color, type Size } from "../../lib/types";
 import { cn } from "../../lib/utils";
 

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

@@ -7,11 +7,11 @@
  */
 "use client";
 
-import { Radio as RadioPrimitive } from "@base-ui/react/radio";
-import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
 import * as React from "react";
 
-import { cva, type VariantProps } from "class-variance-authority";
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import { type VariantProps, cva } from "class-variance-authority";
 
 import { type Size } from "../../lib/types";
 import { cn } from "../../lib/utils";

package/src/components/micro/select.tsx

@@ -7,13 +7,14 @@
  */
 "use client";
 
-import { Select as SelectPrimitive } from "@base-ui/react/select";
-import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "../../lib/utils";
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+import { type VariantProps, cva } from "class-variance-authority";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 
+import { cn } from "../../lib/utils";
+
 const Select = SelectPrimitive.Root;
 
 const SelectGroup = React.forwardRef<
@@ -229,6 +230,6 @@ export {
   SelectScrollUpButton,
   SelectSeparator,
   SelectTrigger,
-  selectTriggerVariants,
   SelectValue,
+  selectTriggerVariants,
 };

package/src/components/micro/sheet.tsx

@@ -7,8 +7,9 @@
  */
 "use client";
 
-import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
 import * as React from "react";
+
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
 import { XIcon } from "lucide-react";
 
 import { Button } from "../../components/micro/button";

package/src/components/micro/sidebar.tsx

@@ -1,6 +1,9 @@
-import { cn } from "../../lib/utils";
+"use client";
+
 import * as React from "react";
 
+import { cn } from "../../lib/utils";
+
 // ─────────────────────────────────────────────────────────────────────────────
 // 1. Sidebar (Wrapper)
 // ─────────────────────────────────────────────────────────────────────────────

package/src/components/micro/skeleton.tsx

@@ -5,9 +5,10 @@
  * - Form Control Parity
  * - CSS Delegated Logic
  */
-import { cn } from "../../lib/utils";
 import * as React from "react";
 
+import { cn } from "../../lib/utils";
+
 /**
  * @description Use to show a placeholder while content is loading.
  * @example

package/src/components/micro/slider.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 /**
  * ✅ AUDITED & REFACTORED
  * - Design System Compliant (22 Commandments)
@@ -5,9 +7,10 @@
  * - Form Control Parity
  * - CSS Delegated Logic
  */
+import * as React from "react";
+
 import { Slider as SliderPrimitive } from "@base-ui/react/slider";
 import { cva } from "class-variance-authority";
-import * as React from "react";
 
 import { type Size } from "../../lib/types";
 import { cn } from "../../lib/utils";

package/src/components/micro/sonner.tsx

@@ -7,14 +7,15 @@
  */
 "use client";
 
-import { Toaster as Sonner, type ToasterProps } from "sonner";
 import * as React from "react";
+
 import {
   CircleCheckIcon,
   InfoIcon,
   OctagonXIcon,
   TriangleAlertIcon,
 } from "lucide-react";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
 
 import { Spinner } from "../../components/micro/spinner";
 import { useTheme } from "../../components/micro/theme-provider";

package/src/components/micro/spinner.tsx

@@ -6,11 +6,10 @@
  * - CSS Delegated Logic
  */
 import * as React from "react";
+
 import { type VariantProps, cva } from "class-variance-authority";
 import { Loader2Icon } from "lucide-react";
 
-import { cn } from "../../lib/utils";
-
 const spinnerVariants = cva("animate-spin motion-reduce:animate-none", {
   variants: {
     size: {

package/src/components/micro/switch.tsx

@@ -7,10 +7,10 @@
  */
 "use client";
 
-import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
 import * as React from "react";
 
-import { cva, type VariantProps } from "class-variance-authority";
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+import { type VariantProps, cva } from "class-variance-authority";
 
 import { cn } from "../../lib/utils";
 

package/src/components/micro/table.tsx

@@ -7,9 +7,10 @@
  */
 "use client";
 
-import { ChevronDown, ChevronUp } from "lucide-react";
 import * as React from "react";
 
+import { ChevronDown, ChevronUp } from "lucide-react";
+
 import { cn } from "../../lib/utils";
 
 const Table = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(

package/src/components/micro/tabs.tsx

@@ -7,10 +7,11 @@
  */
 "use client";
 
-import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
-import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { type VariantProps, cva } from "class-variance-authority";
+
 import { cn } from "../../lib/utils";
 
 const Tabs = React.forwardRef<
@@ -97,4 +98,4 @@ const TabsContent = React.forwardRef<
 });
 TabsContent.displayName = "TabsContent";
 
-export { Tabs, TabsContent, TabsList, tabsListVariants, TabsTrigger };
+export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants };

package/src/components/micro/textarea.tsx

@@ -5,9 +5,10 @@
  * - Form Control Parity
  * - CSS Delegated Logic
  */
-import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
+import { type VariantProps, cva } from "class-variance-authority";
+
 import { type Size } from "../../lib/types";
 import { cn } from "../../lib/utils";
 

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

@@ -8,6 +8,7 @@
 "use client";
 
 import * as React from "react";
+
 import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
 import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
 import { type VariantProps } from "class-variance-authority";

package/src/components/micro/toggle.tsx

@@ -8,9 +8,7 @@
 "use client";
 
 import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "../../lib/utils";
+import { type VariantProps, cva } from "class-variance-authority";
 
 const toggleVariants = cva(
   "group/toggle inline-flex items-center justify-center rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground 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:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-3 aria-invalid:focus-visible:ring-destructive/50 dark:aria-invalid:focus-visible:ring-destructive/50 aria-pressed:bg-muted aria-pressed:text-foreground data-[state=on]:bg-muted data-[state=on]:text-foreground [&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4 bg-transparent",

package/src/components/micro/tooltip.tsx

@@ -7,9 +7,10 @@
  */
 "use client";
 
-import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
 import * as React from "react";
 
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+
 import { cn } from "../../lib/utils";
 
 /**
@@ -94,7 +95,6 @@ const TooltipContent = React.forwardRef<
           {...props}
         >
           {children}
-
         </TooltipPrimitive.Popup>
       </TooltipPrimitive.Positioner>
     );
@@ -102,4 +102,10 @@ const TooltipContent = React.forwardRef<
 );
 TooltipContent.displayName = "TooltipContent";
 
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TooltipPortal };
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipPortal,
+  TooltipProvider,
+  TooltipTrigger,
+};

package/src/dev/App.tsx

@@ -1,7 +1,14 @@
-import { Badge } from "../components/micro/badge";
-import { Button } from "../components/micro/button";
-import { Separator } from "../components/micro/separator";
-import { useTheme } from "../components/micro/theme-provider";
+import React, { Suspense, lazy, useCallback, useEffect, useState } from "react";
+
+import {
+  LayersIcon,
+  MenuIcon,
+  MoonIcon,
+  SearchIcon,
+  SunIcon,
+  XIcon,
+} from "lucide-react";
+
 import {
   Command,
   CommandDialog,
@@ -10,34 +17,30 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-  CommandSeparator,
 } from "../components/macro/command-preset";
+import { Button } from "../components/micro/button";
+import { Separator } from "../components/micro/separator";
+import { useTheme } from "../components/micro/theme-provider";
+import { GladvnLogo } from "../dev/components/GladvnLogo";
 import { useDevContext } from "../dev/components/dev-context";
 import { SizeToggle } from "../dev/components/showcase";
-import { GladvnLogo } from "../dev/components/GladvnLogo";
 import { COMPONENTS } from "../dev/data";
 import OverviewSection from "../dev/showcase/overview";
-import {
-  LayersIcon,
-  MenuIcon,
-  XIcon,
-  SunIcon,
-  MoonIcon,
-  SearchIcon,
-} from "lucide-react";
-import React, { Suspense, lazy, useCallback, useEffect, useState } from "react";
 
 const components: Record<string, React.LazyExoticComponent<any>> = {};
 COMPONENTS.forEach((comp) => {
   components[comp.id] = lazy(() => import(`./showcase/${comp.id}.tsx`));
 });
 
-const groupedComponents = COMPONENTS.reduce((acc, comp) => {
-  const cat = (comp as any).category || "Other";
-  if (!acc[cat]) acc[cat] = [];
-  acc[cat].push(comp);
-  return acc;
-}, {} as Record<string, typeof COMPONENTS[number][]>);
+const groupedComponents = COMPONENTS.reduce(
+  (acc, comp) => {
+    const cat = (comp as any).category || "Other";
+    if (!acc[cat]) acc[cat] = [];
+    acc[cat].push(comp);
+    return acc;
+  },
+  {} as Record<string, (typeof COMPONENTS)[number][]>,
+);
 
 const categoryOrder = [
   "Layout & Structure",
@@ -45,7 +48,7 @@ const categoryOrder = [
   "Feedback & Overlays",
   "Navigation",
   "Data Display",
-  "Other"
+  "Other",
 ];
 
 function ComponentViewer({ id }: { id: string }) {
@@ -163,7 +166,10 @@ export default function App() {
                 <MenuIcon className="size-5" />
               )}
             </button>
-            <a href="/" className="inline-flex items-center hover:opacity-80 transition-opacity">
+            <a
+              href="/"
+              className="inline-flex items-center hover:opacity-80 transition-opacity"
+            >
               <GladvnLogo variant="wordmark" />
             </a>
           </div>
@@ -176,7 +182,9 @@ export default function App() {
             aria-label="Tìm component (⌘K)"
           >
             <SearchIcon className="size-3.5 shrink-0" />
-            <span className="flex-1 text-left text-[13px]">Tìm component...</span>
+            <span className="flex-1 text-left text-[13px]">
+              Tìm component...
+            </span>
             <kbd className="text-[10px] bg-background border border-border/80 rounded px-1.5 py-0.5 font-sans leading-none">
               ⌘K
             </kbd>
@@ -187,23 +195,39 @@ export default function App() {
             <Button
               variant="ghost"
               iconOnly
-              render={<a href="https://github.com/duongacy/gladvn" target="_blank" rel="noreferrer" />}
+              render={
+                <a
+                  href="https://github.com/duongacy/gladvn"
+                  target="_blank"
+                  rel="noreferrer"
+                />
+              }
               nativeButton={false}
               className="text-muted-foreground hover:text-foreground hidden sm:inline-flex"
             >
               {/* GitHub SVG mark */}
-              <svg viewBox="0 0 24 24" className="size-4" fill="currentColor" aria-hidden="true">
+              <svg
+                viewBox="0 0 24 24"
+                className="size-4"
+                fill="currentColor"
+                aria-hidden="true"
+              >
                 <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z" />
               </svg>
               <span className="sr-only">GitHub</span>
             </Button>
 
-            <Separator orientation="vertical" className="h-4 mx-1 hidden sm:block" />
+            <Separator
+              orientation="vertical"
+              className="h-4 mx-1 hidden sm:block"
+            />
 
             <Button
               variant="ghost"
               iconOnly
-              onClick={() => theme?.setMode(theme.mode === "light" ? "dark" : "light")}
+              onClick={() =>
+                theme?.setMode(theme.mode === "light" ? "dark" : "light")
+              }
               className="text-muted-foreground hover:text-foreground relative"
             >
               <SunIcon className="size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
@@ -226,16 +250,18 @@ export default function App() {
 
         {/* Sidebar */}
         <aside
-          className={`fixed inset-y-0 left-0 z-50 w-64 transform border-r bg-background border-border pt-4 px-3 transition-transform duration-200 ease-in-out md:sticky md:top-16 md:block md:h-[calc(100vh-4rem)] md:w-56 md:translate-x-0 md:pt-6 md:z-0 overflow-y-auto custom-scrollbar ${isMobileMenuOpen ? "translate-x-0 shadow-2xl" : "-translate-x-full"
-            }`}
+          className={`fixed inset-y-0 left-0 z-50 w-64 transform border-r bg-background border-border pt-4 px-3 transition-transform duration-200 ease-in-out md:sticky md:top-16 md:block md:h-[calc(100vh-4rem)] md:w-56 md:translate-x-0 md:pt-6 md:z-0 overflow-y-auto custom-scrollbar ${
+            isMobileMenuOpen ? "translate-x-0 shadow-2xl" : "-translate-x-full"
+          }`}
         >
           <nav className="space-y-0.5">
             <button
               onClick={() => setActive("overview")}
-              className={`w-full flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-[13px] transition-colors text-left mb-2 ${active === "overview"
-                ? "bg-accent text-accent-foreground font-medium"
-                : "text-muted-foreground hover:bg-muted/60 hover:text-foreground"
-                }`}
+              className={`w-full flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-[13px] transition-colors text-left mb-2 ${
+                active === "overview"
+                  ? "bg-accent text-accent-foreground font-medium"
+                  : "text-muted-foreground hover:bg-muted/60 hover:text-foreground"
+              }`}
             >
               <LayersIcon className="size-3.5" />
               Overview
@@ -243,7 +269,7 @@ export default function App() {
           </nav>
 
           <div className="mt-6">
-            {categoryOrder.map(cat => {
+            {categoryOrder.map((cat) => {
               const comps = groupedComponents[cat];
               if (!comps || comps.length === 0) return null;
               return (
@@ -256,10 +282,11 @@ export default function App() {
                       <button
                         key={id}
                         onClick={() => setActive(id)}
-                        className={`w-full flex items-center justify-between gap-2.5 rounded-md px-2.5 py-1.5 text-[13px] transition-colors text-left ${active === id
-                          ? "bg-accent text-accent-foreground font-medium"
-                          : "text-muted-foreground hover:bg-muted/60 hover:text-foreground"
-                          }`}
+                        className={`w-full flex items-center justify-between gap-2.5 rounded-md px-2.5 py-1.5 text-[13px] transition-colors text-left ${
+                          active === id
+                            ? "bg-accent text-accent-foreground font-medium"
+                            : "text-muted-foreground hover:bg-muted/60 hover:text-foreground"
+                        }`}
                       >
                         <span>{label}</span>
                       </button>
@@ -269,8 +296,6 @@ export default function App() {
               );
             })}
           </div>
-
-
         </aside>
 
         {/* Main */}

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

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from "react";
-import { createHighlighter, type Highlighter } from "shiki";
+
+import { type Highlighter, createHighlighter } from "shiki";
 
 // Singleton highlighter — loaded once, reused across all CodeHighlighter instances
 let highlighterPromise: Promise<Highlighter> | null = null;

package/src/dev/components/dev-context.tsx

@@ -1,4 +1,5 @@
 import React, { createContext, useContext, useState } from "react";
+
 import type { Size } from "../../lib/types";
 
 interface DevContextType {

package/src/dev/components/showcase.tsx

@@ -1,3 +1,7 @@
+import React, { useState } from "react";
+
+import { BookOpenIcon, CheckIcon, CopyIcon } from "lucide-react";
+
 import { Button } from "../../components/micro/button";
 import {
   Tabs,
@@ -9,9 +13,6 @@ import { CodeHighlighter } from "../../dev/components/code-highlighter";
 import { COLORS, COLOR_INFO } from "../../dev/data";
 import { type Size } from "../../lib/types";
 import { cn } from "../../lib/utils";
-import { BookOpenIcon, CheckIcon, CopyIcon } from "lucide-react";
-import React, { useState } from "react";
-
 
 /* ─────────────────────────────────────────────────────────────────
    SectionHeader  –  page‐level title bar
@@ -176,9 +177,7 @@ export function ExampleSection({
             )}
           >
             <div className="absolute inset-0 -z-10 opacity-[0.03] dark:opacity-[0.05] [background-size:24px_24px] [background-image:radial-gradient(circle_at_center,var(--color-foreground)_1.5px,transparent_1.5px)]" />
-            <div className="relative z-10 w-full">
-              {children}
-            </div>
+            <div className="relative z-10 w-full">{children}</div>
           </div>
         </TabsContent>
 
@@ -358,14 +357,14 @@ export function Showcase({
         )}
         {hasTabs
           ? tabs.map((tab) => (
-            <TabsContent
-              key={tab.label}
-              value={tab.label}
-              className="mt-0 focus-visible:outline-none"
-            >
-              {tab.content}
-            </TabsContent>
-          ))
+              <TabsContent
+                key={tab.label}
+                value={tab.label}
+                className="mt-0 focus-visible:outline-none"
+              >
+                {tab.content}
+              </TabsContent>
+            ))
           : tabs[0]?.content}
       </div>
     </>