@docubook/create 1.12.0 → 1.13.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docubook/create",
-  "version": "1.12.0",
+  "version": "1.13.5",
   "main": "src/index.js",
   "type": "module",
   "bin": {

package/src/dist/.vscode/card.code-snippets

@@ -1,16 +1,54 @@
 {
-    "DocuCards": {
-      "prefix": "card",
-      "body": [
-        "<CardGroup cols={2}>",
-            "<Card title=\"${1:Heading2}\" icon=\"${2:Heading2}\">",
-            "   This is an example of card content with columns.",
-            "</Card>",
-            "<Card title=\"${3:Heading3}\" icon=\"${4:Heading3}\">",
-            "   This is an example of card content with columns.",
-            "</Card>",
-        "</CardGroup>"
-      ],
-      "description": "Create a DocuCards component on markdown."
-    }
+  "Docu Card Group": {
+    "prefix": "card-group",
+    "body": [
+      "<CardGroup cols={${1:2}}>",
+      "  <Card title=\"${2:Card Title}\" icon=\"${3:Home}\">",
+      "    ${4:Card content goes here. You can add **markdown** content.}",
+      "  </Card>",
+      "  <Card title=\"${5:Another Card}\" icon=\"${6:Settings}\">",
+      "    ${7:More content here.}",
+      "  </Card>",
+      "</CardGroup>"
+    ],
+    "description": "Create a group of cards in a responsive grid"
+  },
+  "Docu Card": {
+    "prefix": "card",
+    "body": [
+      "<Card ",
+      "  title=\"${1:Card Title}\"",
+      "  icon=\"${2:Home}\"",
+      "  href=\"${3:/optional-link}\"",
+      "  ${4:horizontal}>",
+      "  ${5:Card content goes here. You can add **markdown** content.}",
+      "</Card>"
+    ],
+    "description": "Create a single card component"
+  },
+  "Docu Horizontal Card": {
+    "prefix": "card-horizontal",
+    "body": [
+      "<Card ",
+      "  title=\"${1:Card Title}\"",
+      "  icon=\"${2:Home}\"",
+      "  href=\"${3:/optional-link}\"",
+      "  horizontal>",
+      "  ${4:Content appears next to the icon in a horizontal layout.}",
+      "</Card>"
+    ],
+    "description": "Create a horizontal card layout"
+  },
+  "Docu Card With Link": {
+    "prefix": "card-link",
+    "body": [
+      "<Card ",
+      "  title=\"${1:Card Title}\"",
+      "  icon=\"${2:ExternalLink}\"",
+      "  href=\"${3:https://example.com}\">",
+      "  ${4:This card is clickable and links to an external URL.}",
+      "</Card>"
+    ],
+    "description": "Create a clickable card that links to a URL"
   }
+}

package/src/dist/.vscode/table.code-snippets

@@ -1,20 +1,12 @@
 {
-    "DocuTable": {
-      "prefix": "table",
-      "body": [
-        "| **${1:Feature}**                     | **${2:Description}**                                       |",
-        "| ------------------------------- | ----------------------------------------------------- |",
-        "| ${3:MDX Support}                     | ${4:Write interactive documentation with MDX.}             |",
-        "| Nested Pages                    | Organize content in a nested, hierarchical structure. |",
-        "| Blog Section                    | Include a dedicated blog section.                     |",
-        "| Pagination                      | Split content across multiple pages.                  |",
-        "| Syntax Highlighting             | Highlight code for better readability.                |",
-        "| Code Line Highlighting & Titles | Highlight specific lines with descriptive titles.     |",
-        "| Interactive Code Blocks         | Language-specific and interactive code display.       |",
-        "| Custom Markdown Components      | Embed custom, reusable components in your docs.       |",
-        "| Static Site Generation          | Generate a static, high-performance site.             |",
-        "| SEO-Optimized                   | Structured for optimal search engine indexing.        |"
-      ],
-      "description": "Create a DocuTable component on markdown."
-    }
+  "DocuTable": {
+    "prefix": "table",
+    "body": [
+      "| **${1:Header 1}** | **${2:Header 2}** |",
+      "| ---------------- | ---------------- |",
+      "| ${3:Row 1, Col 1} | ${4:Row 1, Col 2} |",
+      "| ${5:Row 2, Col 1} | ${6:Row 2, Col 2} |"
+    ],
+    "description": "Create a simple 2x2 markdown table"
   }
+}

package/src/dist/app/page.tsx

@@ -15,7 +15,7 @@ export default function Home() {
   return (
     <div className="flex flex-col items-center justify-center px-2 py-8 text-center sm:py-36">
       <Link
-        href="/docs/getting-started/changelog"
+        href="/docs/changelog/version-1"
         className="mb-5 sm:text-lg flex items-center gap-2 underline underline-offset-4 sm:-mt-12"
       >
         <div className="z-10 flex min-h-10 items-center justify-center max-[800px]:mt-10">
@@ -25,7 +25,7 @@ export default function Home() {
             )}
           >
             <AnimatedShinyText className="inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-100 hover:duration-300 hover:dark:text-neutral-200">
-              <span>🚀 New Version - Release v1.12.0</span>
+              <span>🚀 New Version - Release v1.13.5</span>
               <ArrowRightIcon className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
             </AnimatedShinyText>
           </div>

package/src/dist/components/context-popover.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { usePathname, useRouter } from "next/navigation";
+import { useState, useEffect } from "react";
+import { ROUTES, EachRoute } from "@/lib/routes-config";
+import { cn } from "@/lib/utils";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import * as LucideIcons from "lucide-react";
+import { ChevronsUpDown, Check, type LucideIcon } from "lucide-react";
+
+interface ContextPopoverProps {
+  className?: string;
+}
+
+// Get all root-level routes with context
+function getContextRoutes(): EachRoute[] {
+  return ROUTES.filter(route => route.context);
+}
+
+// Get the first item's href from a route
+function getFirstItemHref(route: EachRoute): string {
+  return route.items?.[0]?.href ? `${route.href}${route.items[0].href}` : route.href;
+}
+
+// Get the active context route from the current path
+function getActiveContextRoute(path: string): EachRoute | undefined {
+  if (!path.startsWith('/docs')) return undefined;
+  const docPath = path.replace(/^\/docs/, '');
+  return getContextRoutes().find(route => docPath.startsWith(route.href));
+}
+
+// Get icon component by name
+function getIcon(name: string) {
+  const Icon = LucideIcons[name as keyof typeof LucideIcons] as LucideIcon | undefined;
+  if (!Icon) return <LucideIcons.FileQuestion className="h-4 w-4" />;
+  return <Icon className="h-4 w-4" />;
+}
+
+export default function ContextPopover({ className }: ContextPopoverProps) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const [activeRoute, setActiveRoute] = useState<EachRoute>();
+  const contextRoutes = getContextRoutes();
+
+  useEffect(() => {
+    if (pathname.startsWith("/docs")) {
+      setActiveRoute(getActiveContextRoute(pathname));
+    } else {
+      setActiveRoute(undefined);
+    }
+  }, [pathname]);
+
+  if (!pathname.startsWith("/docs") || contextRoutes.length === 0) {
+    return null;
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          className={cn(
+            "w-full max-w-[240px] flex items-center justify-between font-semibold text-foreground px-0 pt-8",
+            "hover:bg-transparent hover:text-foreground",
+            className
+          )}
+        >
+          <div className="flex items-center gap-2">
+            {activeRoute?.context?.icon && (
+              <span className="text-primary bg-primary/10 border border-primary dark:border dark:border-accent dark:bg-accent/10 dark:text-accent rounded p-0.5">
+                {getIcon(activeRoute.context.icon)}
+              </span>
+            )}
+            <span className="truncate text-sm">
+              {activeRoute?.context?.title || activeRoute?.title || 'Select context'}
+            </span>
+          </div>
+          <ChevronsUpDown className="h-4 w-4 text-foreground/50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-64 p-2"
+        align="start"
+        sideOffset={6}
+      >
+        <div className="space-y-1">
+          {contextRoutes.map((route) => {
+            const isActive = activeRoute?.href === route.href;
+            const firstItemPath = getFirstItemHref(route);
+            const contextPath = `/docs${firstItemPath}`;
+
+            return (
+              <button
+                key={route.href}
+                onClick={() => router.push(contextPath)}
+                className={cn(
+                  "relative flex w-full items-center gap-2 rounded px-2 py-1.5 text-sm",
+                  "text-left outline-none transition-colors",
+                  isActive
+                    ? "bg-primary/20 text-primary dark:bg-accent/20 dark:text-accent"
+                    : "text-foreground/80 hover:bg-primary/20 dark:text-foreground/60 dark:hover:bg-accent/20"
+                )}
+              >
+                {route.context?.icon && (
+                  <span className={cn(
+                    "flex h-4 w-4 items-center justify-center",
+                    isActive ? "text-primary dark:text-accent" : "text-foreground/60"
+                  )}>
+                    {getIcon(route.context.icon)}
+                  </span>
+                )}
+                <div className="flex-1 min-w-0 overflow-hidden">
+                  <div className="truncate font-medium">
+                    {route.context?.title || route.title}
+                  </div>
+                  {route.context?.description && (
+                    <div className="text-xs text-muted-foreground truncate text-ellipsis overflow-hidden max-w-full">
+                      {route.context.description}
+                    </div>
+                  )}
+                </div>
+                {isActive && (
+                  <Check className="h-3.5 w-3.5" />
+                )}
+              </button>
+            );
+          })}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/dist/components/docs-menu.tsx

@@ -1,44 +1,62 @@
 "use client";
 
-import { ROUTES } from "@/lib/routes-config";
+import { ROUTES, EachRoute } from "@/lib/routes-config";
 import SubLink from "./sublink";
 import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
 
 interface DocsMenuProps {
   isSheet?: boolean;
   className?: string;
 }
 
+// Get the current context from the path
+function getCurrentContext(path: string): string | undefined {
+  if (!path.startsWith('/docs')) return undefined;
+
+  // Extract the first segment after /docs/
+  const match = path.match(/^\/docs\/([^\/]+)/);
+  return match ? match[1] : undefined;
+}
+
+// Get the route that matches the current context
+function getContextRoute(contextPath: string): EachRoute | undefined {
+  return ROUTES.find(route => {
+    const normalizedHref = route.href.replace(/^\/+|\/+$/g, '');
+    return normalizedHref === contextPath;
+  });
+}
+
 export default function DocsMenu({ isSheet = false, className = "" }: DocsMenuProps) {
   const pathname = usePathname();
 
   // Skip rendering if not on a docs page
   if (!pathname.startsWith("/docs")) return null;
 
+  // Get the current context
+  const currentContext = getCurrentContext(pathname);
+
+  // Get the route for the current context
+  const contextRoute = currentContext ? getContextRoute(currentContext) : undefined;
+
+  // If no context route is found, don't render anything
+  if (!contextRoute) return null;
+
   return (
     <nav
       aria-label="Documentation navigation"
-      className={className}
+      className={cn("transition-all duration-200", className)}
     >
-      <ul className="flex flex-col gap-3.5 mt-5 pr-2 pb-6">
-        {ROUTES.map((item, index) => {
-          // Normalize href - hapus leading/trailing slashes
-          const normalizedHref = `/${item.href.replace(/^\/+|\/+$/g, '')}`;
-          const itemHref = `/docs${normalizedHref}`;
-
-          const modifiedItems = {
-            ...item,
-            href: itemHref,
-            level: 0,
-            isSheet,
-          };
-
-          return (
-            <li key={`${item.title}-${index}`}>
-              <SubLink {...modifiedItems} />
-            </li>
-          );
-        })}
+      <ul className="flex flex-col gap-1.5 py-4">
+        {/* Display only the items from the current context */}
+        <li key={contextRoute.title}>
+          <SubLink
+            {...contextRoute}
+            href={`/docs${contextRoute.href}`}
+            level={0}
+            isSheet={isSheet}
+          />
+        </li>
       </ul>
     </nav>
   );

package/src/dist/components/footer.tsx

@@ -63,8 +63,9 @@ export function FooterButtons() {
             target="_blank"
             rel="noopener noreferrer"
             aria-label={item.name}
+            className="text-muted-foreground hover:text-foreground transition-colors"
           >
-            <IconComponent className="w-4 h-4 text-gray-800 transition-colors dark:text-gray-400 hover:text-primary" />
+            <IconComponent className="w-4 h-4" />
           </Link>
         );
       })}
@@ -79,7 +80,8 @@ export function MadeWith() {
       <span className="text-primary">
         <Link href="https://www.docubook.pro" target="_blank" rel="noopener noreferrer" className="underline underline-offset-2 text-muted-foreground">
             DocuBook
-        </Link></span>
+        </Link>
+        </span>
     </>
   );
 }

package/src/dist/components/leftbar.tsx

@@ -10,11 +10,11 @@ import {
 import { Logo, NavMenu } from "@/components/navbar";
 import { Button } from "@/components/ui/button";
 import { AlignLeftIcon, PanelLeftClose, PanelLeftOpen } from "lucide-react";
-import { FooterButtons } from "@/components/footer";
 import { DialogTitle, DialogDescription } from "@/components/ui/dialog";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import DocsMenu from "@/components/docs-menu";
 import { ModeToggle } from "@/components/theme-toggle";
+import ContextPopover from "@/components/context-popover";
 
 // Toggle Button Component
 export function ToggleButton({
@@ -52,9 +52,14 @@ export function Leftbar() {
       ${collapsed ? "w-[24px]" : "w-[280px]"} flex flex-col pr-2`}
     >
       <ToggleButton collapsed={collapsed} onToggle={toggleCollapse} />
-      {/* Scrollable DocsMenu */}
+      {/* Scrollable Content */}
       <ScrollArea className="flex-1 px-0.5 pb-4">
-        {!collapsed && <DocsMenu />}
+        {!collapsed && (
+          <div className="space-y-2">
+            <ContextPopover />
+            <DocsMenu />
+          </div>
+        )}
       </ScrollArea>
     </aside>
   );
@@ -82,7 +87,8 @@ export function SheetLeftbar() {
           <div className="flex flex-col gap-2.5 mt-3 mx-2 px-5">
             <NavMenu isSheet />
           </div>
-          <div className="mx-2 px-5">
+          <div className="mx-2 px-5 space-y-2">
+            <ContextPopover />
             <DocsMenu isSheet />
           </div>
           <div className="flex w-2/4 px-5">

package/src/dist/components/markdown/CardGroupMdx.tsx

@@ -13,7 +13,7 @@ const CardGroup: React.FC<CardGroupProps> = ({ children, cols = 2, className })
   return (
     <div
       className={clsx(
-        "grid gap-4",
+        "grid gap-4 text-foreground",
         `grid-cols-1 sm:grid-cols-${cols}`,
         className
       )}

package/src/dist/components/markdown/CardMdx.tsx

@@ -20,8 +20,9 @@ const Card: React.FC<CardProps> = ({ title, icon, href, horizontal, children, cl
   const content = (
     <div
       className={clsx(
-        "border rounded-lg shadow-sm p-4 transition-all duration-200 bg-white dark:bg-gray-900",
-        "hover:bg-gray-50 dark:hover:bg-gray-800",
+        "border rounded-lg shadow-sm p-4 transition-all duration-200",
+        "bg-card text-card-foreground border-border",
+        "hover:bg-accent/5 hover:border-accent/30",
         "flex gap-2",
         horizontal ? "flex-row items-center gap-1" : "flex-col space-y-1",
         className
@@ -29,8 +30,8 @@ const Card: React.FC<CardProps> = ({ title, icon, href, horizontal, children, cl
     >
       {Icon && <Icon className="w-5 h-5 text-primary flex-shrink-0" />}
       <div className="flex-1 min-w-0 my-auto h-full">
-        <span className="text-base font-semibold">{title}</span>
-        <div className="text-sm text-gray-600 dark:text-gray-400 -mt-3">{children}</div>
+        <span className="text-base font-semibold text-foreground">{title}</span>
+        <div className="text-sm text-muted-foreground -mt-3">{children}</div>
       </div>
     </div>
   );

package/src/dist/components/markdown/FileTreeMdx.tsx

@@ -1,12 +1,7 @@
 'use client';
 
 import React, { useState, ReactNode, Children, isValidElement, cloneElement } from 'react';
-import { ChevronRight, ChevronDown, File as FileIcon, Folder as FolderIcon, FolderOpen } from 'lucide-react';
-
-interface FileTreeProps {
-  children: ReactNode;
-  defaultOpen?: boolean;
-}
+import { ChevronRight, File as FileIcon, Folder as FolderIcon, FolderOpen } from 'lucide-react';
 
 interface FileProps {
   name: string;
@@ -15,24 +10,27 @@ interface FileProps {
 
 const FileComponent = ({ name }: FileProps) => {
   const [isHovered, setIsHovered] = useState(false);
+  const fileExtension = name.split('.').pop()?.toUpperCase();
 
   return (
     <div
       className={`
-        flex items-center gap-2 py-1.5 pl-7 pr-3 text-sm
-        transition-all duration-200 ease-in-out rounded-md
-        ${isHovered
-          ? 'bg-blue-50 dark:bg-blue-900/30'
-          : 'hover:bg-gray-50 dark:hover:bg-gray-800/50'}
+        flex items-center gap-2 py-1.5 pl-7 pr-3 text-sm rounded-md
+        transition-colors duration-150 cursor-default select-none
+        ${isHovered ? 'bg-accent/10' : 'hover:bg-muted/50'}
       `}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
+      tabIndex={-1}
     >
-      <FileIcon className={`h-3.5 w-3.5 transition-colors ${isHovered ? 'text-blue-500' : 'text-gray-400 dark:text-gray-500'}`} />
-      <span className="font-mono text-sm text-gray-700 dark:text-gray-300">{name}</span>
-      {isHovered && (
-        <span className="ml-auto text-xs text-gray-400 dark:text-gray-500">
-          {name.split('.').pop()?.toUpperCase()}
+      <FileIcon className={`
+        h-3.5 w-3.5 flex-shrink-0 transition-colors
+        ${isHovered ? 'text-accent' : 'text-muted-foreground'}
+      `} />
+      <span className="font-mono text-sm text-foreground truncate">{name}</span>
+      {isHovered && fileExtension && (
+        <span className="ml-auto text-xs text-muted-foreground/80">
+          {fileExtension}
         </span>
       )}
     </div>
@@ -48,31 +46,49 @@ const FolderComponent = ({ name, children }: FileProps) => {
     <div className="relative">
       <div
         className={`
-          flex items-center gap-2 py-1.5 pl-4 pr-3 rounded-md cursor-pointer
-          transition-all duration-200 ease-in-out
-          ${isHovered ? 'bg-gray-50 dark:bg-gray-800/50' : ''}
-          ${isOpen ? 'text-blue-600 dark:text-blue-400' : 'text-gray-800 dark:text-gray-200'}
+          flex items-center gap-2 py-1.5 pl-4 pr-3 rounded-md
+          transition-colors duration-150 select-none
+          ${isHovered ? 'bg-muted/60' : ''}
+          ${isOpen ? 'text-foreground' : 'text-foreground/80'}
+          ${hasChildren ? 'cursor-pointer' : 'cursor-default'}
         `}
-        onClick={() => setIsOpen(!isOpen)}
+        onClick={() => hasChildren && setIsOpen(!isOpen)}
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
+        tabIndex={-1}
+        onKeyDown={(e) => e.preventDefault()}
       >
         {hasChildren ? (
           <ChevronRight
-            className={`h-3.5 w-3.5 transition-transform duration-200 ${isOpen ? 'transform rotate-90' : ''}`}
+            className={`
+              h-3.5 w-3.5 flex-shrink-0 transition-transform duration-200
+              ${isOpen ? 'rotate-90' : ''}
+              ${isHovered ? 'text-foreground/70' : 'text-muted-foreground'}
+            `}
           />
         ) : (
           <div className="w-3.5" />
         )}
         {isOpen ? (
-          <FolderOpen className="h-4 w-4 text-blue-500 dark:text-blue-400" />
+          <FolderOpen className={`
+            h-4 w-4 flex-shrink-0 transition-colors
+            ${isHovered ? 'text-accent' : 'text-muted-foreground'}
+          `} />
         ) : (
-          <FolderIcon className="h-4 w-4 text-blue-400 dark:text-blue-500" />
+          <FolderIcon className={`
+            h-4 w-4 flex-shrink-0 transition-colors
+            ${isHovered ? 'text-accent/80' : 'text-muted-foreground/80'}
+          `} />
         )}
-        <span className="font-medium">{name}</span>
+        <span className={`
+          font-medium transition-colors duration-150
+          ${isHovered ? 'text-accent' : ''}
+        `}>
+          {name}
+        </span>
       </div>
       {isOpen && hasChildren && (
-        <div className="ml-5 border-l-2 border-gray-100 dark:border-gray-700/50 pl-2">
+        <div className="ml-5 border-l-2 border-muted/50 pl-2">
           {children}
         </div>
       )}
@@ -82,13 +98,16 @@ const FolderComponent = ({ name, children }: FileProps) => {
 
 export const Files = ({ children }: { children: ReactNode }) => {
   return (
-    <div className="
-      rounded-xl border border-gray-100 dark:border-gray-700/50
-      bg-white/50 dark:bg-gray-800/30 backdrop-blur-sm
-      shadow-sm overflow-hidden
-      transition-all duration-200
-      hover:shadow-md hover:border-gray-200 dark:hover:border-gray-600/50
-    ">
+    <div
+      className="
+        rounded-xl border border-muted/50
+        bg-card/50 backdrop-blur-sm
+        shadow-sm overflow-hidden
+        transition-all duration-200
+        hover:shadow-md hover:border-muted/60
+      "
+      onKeyDown={(e) => e.preventDefault()}
+    >
       <div className="p-2">
         {Children.map(children, (child, index) => {
           if (isValidElement(child)) {

package/src/dist/components/markdown/KeyboardMdx.tsx

@@ -88,7 +88,7 @@ const KbdComponent: React.FC<KbdProps> = ({
 
   return (
     <kbd
-      className="inline-flex items-center justify-center px-2 py-1 mx-0.5 text-xs font-mono font-medium text-gray-800 bg-gray-100 border border-gray-300 rounded-md dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600"
+      className="inline-flex items-center justify-center px-2 py-1 mx-0.5 text-xs font-mono font-medium text-foreground bg-secondary/70 border rounded-md"
       {...props}
     >
       {renderContent()}

package/src/dist/components/markdown/NoteMdx.tsx

@@ -29,7 +29,7 @@ export default function Note({
     "dark:bg-stone-950/25 bg-stone-50": type === "note",
     "dark:bg-red-950 bg-red-100 border-red-200 dark:border-red-900":
       type === "danger",
-    "dark:bg-orange-950 bg-orange-100 border-orange-200 dark:border-orange-900":
+    "bg-orange-50 border-orange-200 dark:border-orange-900 dark:bg-orange-900/50":
       type === "warning",
     "dark:bg-green-950 bg-green-100 border-green-200 dark:border-green-900":
       type === "success",

package/src/dist/components/markdown/StepperMdx.tsx

@@ -11,13 +11,13 @@ export function Stepper({ children }: PropsWithChildren) {
         return (
           <div
             className={cn(
-              "border-l pl-9 ml-3 relative",
+              "border-l border-muted pl-9 ml-3 relative",
               clsx({
                 "pb-5 ": index < length - 1,
               })
             )}
           >
-            <div className="bg-muted w-8 h-8 text-xs font-medium rounded-md border flex items-center justify-center absolute -left-4 font-code">
+            <div className="bg-muted text-muted-foreground w-8 h-8 text-xs font-medium rounded-md border border-border/50 flex items-center justify-center absolute -left-4 font-code">
               {index + 1}
             </div>
             {child}

package/src/dist/components/markdown/TooltipsMdx.tsx

@@ -11,14 +11,17 @@ const Tooltip: React.FC<TooltipProps> = ({ text, tip }) => {
 
   return (
     <span
-      className="relative inline-block cursor-pointer underline decoration-dotted text-blue-500"
+      className="relative inline-flex items-center cursor-help text-primary hover:text-primary/80 transition-colors"
       onMouseEnter={() => setVisible(true)}
       onMouseLeave={() => setVisible(false)}
     >
-      {text}
+      <span className="border-b border-dashed border-primary/60 pb-0.5">
+        {text}
+      </span>
       {visible && (
-        <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl bg-background text-foreground text-sm p-2 rounded shadow-md break-words text-center outline outline-1 outline-offset-2">
+        <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-64 bg-popover text-popover-foreground text-sm p-3 rounded-md shadow-lg border border-border/50 break-words text-left z-50">
           {tip}
+          <span className="absolute -bottom-1.5 left-1/2 -translate-x-1/2 w-3 h-3 bg-popover rotate-45 border-b border-r border-border/50 -z-10" />
         </span>
       )}
     </span>