@docubook/create 1.12.0 → 1.13.5

package/src/dist/components/navbar.tsx

@@ -63,15 +63,15 @@ export function NavMenu({ isSheet = false }) {
         const Comp = (
           <Anchor
             key={`${item.title}-${item.href}`}
-            activeClassName="!text-primary md:font-semibold font-medium"
+            activeClassName="text-primary dark:text-accent md:font-semibold font-medium"
             absolute
-            className="flex items-center gap-1 dark:text-stone-300/85 text-stone-800"
+            className="flex items-center gap-1 text-foreground/80 hover:text-foreground transition-colors"
             href={item.href}
             target={isExternal ? "_blank" : undefined}
             rel={isExternal ? "noopener noreferrer" : undefined}
           >
             {item.title}
-            {isExternal && <ArrowUpRight className="w-4 h-4 text-muted-foreground" />}
+            {isExternal && <ArrowUpRight className="w-4 h-4 text-foreground/80" />}
           </Anchor>
         );
         return isSheet ? (

package/src/dist/components/search.tsx

@@ -17,6 +17,23 @@ import {
 import Anchor from "./anchor";
 import { advanceSearch, cn } from "@/lib/utils";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { page_routes } from "@/lib/routes-config";
+
+// Define the ContextInfo type to match the one in routes-config
+type ContextInfo = {
+  icon: string;
+  description: string;
+  title?: string;
+};
+
+type SearchResult = {
+  title: string;
+  href: string;
+  noLink?: boolean;
+  items?: undefined;
+  score?: number;
+  context?: ContextInfo;
+};
 
 export default function Search() {
   const router = useRouter();
@@ -39,10 +56,25 @@ export default function Search() {
     };
   }, []);
 
-  const filteredResults = useMemo(
-    () => advanceSearch(searchedInput.trim()),
-    [searchedInput]
-  );
+  const filteredResults = useMemo<SearchResult[]>(() => {
+    const trimmedInput = searchedInput.trim();
+
+    // If search input is empty or less than 3 characters, show initial suggestions
+    if (trimmedInput.length < 3) {
+      return page_routes
+        .filter((route: { href: string }) => !route.href.endsWith('/')) // Filter out directory routes
+        .slice(0, 6) // Limit to 6 posts
+        .map((route: { title: string; href: string; noLink?: boolean; context?: ContextInfo }) => ({
+          title: route.title,
+          href: route.href,
+          noLink: route.noLink,
+          context: route.context
+        }));
+    }
+
+    // For search with 3 or more characters, use the advance search
+    return advanceSearch(trimmedInput) as unknown as SearchResult[];
+  }, [searchedInput]);
 
   useEffect(() => {
     setSelectedIndex(0);

package/src/dist/components/sublink.tsx

@@ -54,9 +54,10 @@ export default function SubLink({
   // Only apply active styles if it's an exact match and not a parent with active children
   const Comp = useMemo(() => (
     <Anchor
-      activeClassName={!hasActiveChild ? "text-primary font-medium" : ""}
+      activeClassName={!hasActiveChild ? "dark:text-accent text-primary font-medium" : ""}
       href={fullHref}
       className={cn(
+        "text-foreground/80 hover:text-foreground transition-colors",
         hasActiveChild && "font-medium text-foreground"
       )}
     >
@@ -72,8 +73,8 @@ export default function SubLink({
     )
   ) : (
     <h4 className={cn(
-      "font-medium sm:text-sm",
-      hasActiveChild ? "text-foreground" : "text-primary"
+      "font-medium sm:text-sm text-foreground/90 hover:text-foreground transition-colors",
+      hasActiveChild ? "text-foreground" : "text-foreground/80"
     )}>
       {title}
     </h4>
@@ -93,7 +94,7 @@ export default function SubLink({
         >
           <div className="flex items-center justify-between w-full">
             {titleOrLink}
-            <span className="ml-2">
+            <span className="ml-2 text-muted-foreground">
               {!isOpen ? (
                 <ChevronRight className="h-[0.9rem] w-[0.9rem]" aria-hidden="true" />
               ) : (
@@ -111,8 +112,8 @@ export default function SubLink({
         >
           <div
             className={cn(
-              "flex flex-col items-start sm:text-sm dark:text-stone-300/85 text-stone-800 ml-0.5 mt-2.5 gap-3",
-              level > 0 && "pl-4 border-l ml-1.5"
+              "flex flex-col items-start sm:text-sm text-foreground/80 ml-0.5 mt-2.5 gap-3 hover:[&_a]:text-foreground transition-colors",
+              level > 0 && "pl-4 border-l border-border ml-1.5"
             )}
           >
             {items?.map((innerLink) => (

package/src/dist/components/theme-toggle.tsx

@@ -28,7 +28,7 @@ export function ModeToggle() {
           setSelectedTheme(value);
         }
       }}
-      className="flex items-center gap-1 rounded-full border border-gray-300 dark:border-gray-700 p-1 transition-all"
+      className="flex items-center gap-1 rounded-full border border-border bg-background/50 p-1 transition-all"
     >
       <ToggleGroupItem
         value="light"
@@ -36,11 +36,11 @@ export function ModeToggle() {
         aria-label="Light Mode"
         className={`rounded-full p-1 transition-all ${
           selectedTheme === "light"
-            ? "bg-blue-500 text-white"
-            : "bg-transparent"
+            ? "bg-primary text-primary-foreground"
+            : "bg-transparent hover:bg-muted/50"
         }`}
       >
-        <Sun className={`h-4 w-4 ${selectedTheme === "light" ? "text-white" : "text-gray-600 dark:text-gray-300"}`} />
+        <Sun className="h-4 w-4" />
       </ToggleGroupItem>
       <ToggleGroupItem
         value="system"
@@ -48,11 +48,11 @@ export function ModeToggle() {
         aria-label="System Mode"
         className={`rounded-full p-1 transition-all ${
           selectedTheme === "system"
-            ? "bg-blue-500 text-white"
-            : "bg-transparent"
+            ? "bg-primary text-primary-foreground"
+            : "bg-transparent hover:bg-muted/50"
         }`}
       >
-        <Monitor className={`h-4 w-4 ${selectedTheme === "system" ? "text-white" : "text-gray-600 dark:text-gray-300"}`} />
+        <Monitor className="h-4 w-4" />
       </ToggleGroupItem>
       <ToggleGroupItem
         value="dark"
@@ -60,11 +60,11 @@ export function ModeToggle() {
         aria-label="Dark Mode"
         className={`rounded-full p-1 transition-all ${
           selectedTheme === "dark"
-            ? "bg-blue-500 text-white"
-            : "bg-transparent"
+            ? "bg-primary text-primary-foreground"
+            : "bg-transparent hover:bg-muted/50"
         }`}
       >
-        <Moon className={`h-4 w-4 ${selectedTheme === "dark" ? "text-white" : "text-gray-600 dark:text-gray-300"}`} />
+        <Moon className="h-4 w-4" />
       </ToggleGroupItem>
     </ToggleGroup>
   );

package/src/dist/components/toc-observer.tsx

@@ -149,7 +149,7 @@ export default function TocObserver({
 
   return (
     <div className="relative">
-      <div className="relative text-sm text-stone-600 dark:text-stone-400">
+      <div className="relative text-sm text-foreground/70 hover:text-foreground transition-colors">
         <div className="flex flex-col gap-0">
           {data.map(({ href, level, text }, index) => {
             const id = href.slice(1);
@@ -172,7 +172,7 @@ export default function TocObserver({
                     {/* Vertical line */}
                     <div className={clsx(
                       "absolute left-0 top-0 h-full w-px",
-                      isActive ? "bg-primary/20" : "bg-stone-300 dark:bg-stone-600"
+                      isActive ? "bg-primary/20 dark:bg-primary/30" : "bg-border/50 dark:bg-border/50"
                     )}>
                       {isActive && (
                         <motion.div
@@ -187,11 +187,11 @@ export default function TocObserver({
                     {/* Horizontal line */}
                     <div className={clsx(
                       "absolute left-0 top-1/2 h-px w-6",
-                      isActive ? "bg-primary/20" : "bg-stone-300 dark:bg-stone-600"
+                      isActive ? "bg-primary/20 dark:bg-primary/30" : "bg-border/50 dark:bg-border/50"
                     )}>
                       {isActive && (
                         <motion.div
-                          className="absolute left-0 top-0 h-full w-full bg-primary origin-left"
+                          className="absolute left-0 top-0 h-full w-full bg-primary dark:bg-accent origin-left"
                           initial={{ scaleX: 0 }}
                           animate={{ scaleX: scrollProgress }}
                           transition={{ duration: 0.3, delay: 0.1 }}
@@ -207,8 +207,8 @@ export default function TocObserver({
                   className={clsx(
                     "relative flex items-center py-2 transition-colors",
                     {
-                      "text-primary dark:text-primary-400 font-medium": isActive,
-                      "text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-stone-200": !isActive,
+                      "text-primary dark:text-primary font-medium": isActive,
+                      "text-muted-foreground hover:text-foreground dark:hover:text-foreground/90": !isActive,
                     }
                   )}
                   style={{
@@ -229,13 +229,13 @@ export default function TocObserver({
                     <div className={clsx(
                       "w-1.5 h-1.5 rounded-full transition-all duration-300 relative z-10",
                       {
-                        "bg-primary scale-100": isActive,
-                        "bg-stone-300 dark:bg-stone-600 scale-75 group-hover:scale-100 group-hover:bg-primary/50": !isActive,
+                        "bg-primary scale-100 dark:bg-primary/90": isActive,
+                        "bg-muted-foreground/30 dark:bg-muted-foreground/30 scale-75 group-hover:scale-100 group-hover:bg-primary/50 dark:group-hover:bg-primary/50": !isActive,
                       }
                     )}>
                       {isActive && (
                         <motion.div
-                          className="absolute inset-0 rounded-full bg-primary/20"
+                          className="absolute inset-0 rounded-full bg-primary/20 dark:bg-primary/30"
                           initial={{ scale: 1 }}
                           animate={{ scale: 1.8 }}
                           transition={{

package/src/dist/contents/docs/{getting-started/changelog → changelog/version-1}/index.mdx

@@ -1,12 +1,54 @@
 ---
-title: Changelog
+title: Release Version 1.0+
 description: List of latest changes and updates on DocuBook
 date: 24-05-2025
 ---
 
-## Version History
+<Note type="note" title="Version History">
+  This changelog contains a list of all the changes made to the DocuBook template. It will be updated with each new release and will include information about new features, bug fixes, and other improvements.
+</Note>
+
+<div className="sr-only">
+### v 1.13.5
+</div>
+
+<Release version="1.13.5" date="2025-05-31" title="Add Theme schema for consistent theme">
+  <Changes type="added">
+    - Add Theme schema
+    - Add Freshlime theme
+    - Add Coffee theme
+    - Add llms context for generated theme with AI
+  </Changes>
+  <Changes type="improved">
+    - Markdown support for theme-colors
+    - consistent theme-colors page
+    - all components now consistent with theme-colors
+    - syntax with theme-colors
+  </Changes>
+  <Changes type="fixed">
+    - fix bug FileTree component
+    - fix issue markdown with theme-colors
+  </Changes>
+</Release>
+
+<div className="sr-only">
+### v 1.13.0
+</div>
 
-> This changelog contains a list of all the changes made to the DocuBook template. It will be updated with each new release and will include information about new features, bug fixes, and other improvements.
+<Release version="1.13.0" date="2025-05-29" title="Context Menu for organize file and folder">
+  <Changes type="added">
+    - New ContextMenu component for organizing file and folder
+    - Nested docs folder and file support with context menu
+  </Changes>
+  <Changes type="improved">
+    - improve routes-config with context menu
+    - improve docu.json with context menu
+    - improve leftbar with context menu
+    - improve docs-menu with context menu
+    - improve search dialog limit result to 6 post per suggestion
+    - improve search result typing 3 characters to show suggestion
+  </Changes>
+</Release>
 
 <div className="sr-only">
 ### v 1.12.0

package/src/dist/contents/docs/components/accordion/index.mdx

@@ -0,0 +1,86 @@
+---
+title: Accordion
+description: A component used to create collapsible content that can be hidden and shown again.
+date: 22-12-2024
+---
+
+## Preview
+
+### Basic Usage
+
+<Accordion title="Click to expand" defaultOpen={true}>
+    This is a simple accordion component that can be toggled by clicking the header. The content can include any valid React nodes, including text, components, and markdown.
+</Accordion>
+
+### With Code Block
+
+<Accordion title="Code Example" className="mt-4">
+    ```javascript:utils.js showLineNumbers
+    // Example of using the Accordion component
+    import Accordion from '@/components/markdown/AccordionMdx';
+
+    function Example() {
+        return (
+            <Accordion title="Click to see code">
+                <pre>
+                    {`function greet() {\n    console.log('Hello, world!');\n}`}
+                </pre>
+            </Accordion>
+        );
+    }
+    ```
+</Accordion>
+
+### With Markdown Content
+
+<Accordion title="Markdown Example" className="mt-4">
+    ## This is a markdown heading
+
+    - List item 1
+    - List item 2
+    - List item 3
+
+    You can include **bold** and *italic* text, [links](#), and other markdown elements.
+</Accordion>
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | string | - | **Required**. The text displayed in the accordion header. |
+| `children` | ReactNode | null | The content to be displayed when the accordion is expanded. Can be plain text, markdown, or React components. |
+| `defaultOpen` | boolean | false | When true, the accordion will be expanded by default. |
+| `className` | string | undefined | Additional CSS classes to apply to the accordion container. |
+
+## Output Markdown
+
+<Tabs defaultValue="markdown" className="pt-5 pb-1">
+  <TabsList>
+    <TabsTrigger value="markdown">Markdown</TabsTrigger>
+    <TabsTrigger value="codeblock">Code Block</TabsTrigger>
+  </TabsList>
+  <TabsContent value="markdown">
+    ```plaintext
+    <Accordion title="Markdown">
+        this is an example of plain text content from the accordion component and below is markdown ;
+        1. number one
+        2. number two
+        3. number three
+    </Accordion>
+    ```
+  </TabsContent>
+  <TabsContent value="codeblock">
+    ````plaintext
+    <Accordion title="Code Block" defaultOpen={true}>
+        ```javascript:main.js showLineNumbers {3-4}
+        function isRocketAboutToCrash() {
+            // Check if the rocket is stable
+            if (!isStable()) {
+                NoCrash(); // Prevent the crash
+            }
+        }
+        ```
+    </Accordion>
+    ````
+  </TabsContent>
+</Tabs>

package/src/dist/contents/docs/components/button/index.mdx

@@ -0,0 +1,40 @@
+---
+title: Button
+description: A component used to create buttons that can be used to trigger actions or navigate to other pages.
+date: 14-12-2024
+---
+
+## Preview
+
+<Button
+  text="Learn More"
+  href="https://learn.example.com"
+  icon="MoveUpRight"
+  size="md"
+  target="_blank"
+  variation="primary"
+/>
+
+## Props
+
+| Prop        | Type     | Default     | Description                                  |
+| ----------- | -------- | ----------- | -------------------------------------------- |
+| `text`      | string   | undefined   | The button text                              |
+| `href`      | string   | **required**| The URL to navigate to                       |
+| `icon`      | string   | undefined   | Lucide icon name (e.g. "MoveUpRight")       |
+| `size`      | string   | "md"        | Button size: `"sm"`, `"md"`, or `"lg"`      |
+| `target`    | string   | undefined   | Link target (e.g. "_blank")                 |
+| `variation` | string   | "primary"   | Button style: `"primary"`, `"accent"`, or `"outline"` |
+
+## Output Markdown
+
+```markdown
+<Button
+  text="Learn More"
+  href="https://learn.example.com"
+  icon="MoveUpRight"
+  size="md"
+  target="_blank"
+  variation="primary"
+/>
+```

package/src/dist/contents/docs/{getting-started/components → components}/card/index.mdx

@@ -4,13 +4,11 @@ description: A component used to create cards that can be used to display conten
 date: 20-02-2025
 ---
 
-The Card component is a component used to create cards that can be used to display content in a compact and organized way.
-
 ## Example
 
 ### Card with Link and icon
 
-<Card title="Click on me" icon="Link" href="/docs/getting-started/components/card-group">
+<Card title="Click on me" icon="Link" href="/docs/components/card-group">
   This is how you use a card with an icon and a link. Clicking on this card
   brings you to the Card Group page.
 </Card>
@@ -32,18 +30,18 @@ The Card component is a component used to create cards that can be used to displ
 
 | Prop          | Type     | Default | Description                                             |
 | ------------- | -------- | ------- | ------------------------------------------------------- |
-| `title`       | `string` | `""`    | The value of card title.                                |
-| `icon`        | `string` | `null`  | The value of card icon render from lucide.              |
-| `href`        | `string` | `null`  | The value of card link url.              |
-| `horizontal`   | `boolean` | `""`    | horizontal layout for card. |
+| `title`       | string   | null    | The value of card title.                                |
+| `icon`        | string   | null  | The value of card icon render from lucide.              |
+| `href`        | string   | null  | The value of card link url.              |
+| `horizontal`   | boolean  | undefined    | horizontal layout for card. |
 
-## Code
+## Output Markdown
 
 <Tabs defaultValue="link" className="pt-5 pb-1">
   <TabsList>
-    <TabsTrigger value="link">Card with Link & Icon</TabsTrigger>
-    <TabsTrigger value="horizontal">Card Horizontal</TabsTrigger>
-    <TabsTrigger value="simple">Card Simple</TabsTrigger>
+    <TabsTrigger value="link">Link & Icon</TabsTrigger>
+    <TabsTrigger value="horizontal">Horizontal</TabsTrigger>
+    <TabsTrigger value="simple">Simple</TabsTrigger>
   </TabsList>
   <TabsContent value="link">
     ```markdown

package/src/dist/contents/docs/{getting-started/components → components}/card-group/index.mdx

@@ -4,8 +4,6 @@ description: A component used to create card groups that can be used to display
 date: 20-02-2025
 ---
 
-The CardGroup component is a component used to create card groups that can be used to display multiple cards in a compact and organized way.
-
 ## Preview
 
 <CardGroup cols={2}>
@@ -27,9 +25,9 @@ The CardGroup component is a component used to create card groups that can be us
 
 | Prop          | Type     | Default | Description                                             |
 | ------------- | -------- | ------- | ------------------------------------------------------- |
-| `cols`       | `number` | `{2}`    | By default 2 The number of columns per row                                |
+| `cols`       | number | {2}    | By default 2 The number of columns per row                                |
 
-## Code
+## Output Markdown
 
 ```markdown
 <CardGroup cols={2}>

package/src/dist/contents/docs/{getting-started/components → components}/code-block/index.mdx

@@ -4,8 +4,6 @@ description: A component used to display code snippets with optional line number
 date: 14-12-2024
 ---
 
-The Code Block component is a component used to display code snippets with optional line numbering and line highlighting.
-
 ## Preview
 
 ```javascript:main.js showLineNumbers {3-4}
@@ -19,7 +17,7 @@ function isRocketAboutToCrash() {
 
 In this example, line numbers are displayed for lines 1 to 4. You can specify which lines to highlight using the format `{2,3-5}`.
 
-## Usage
+## Output Markdown
 
 You can directly use the following syntax to create a code block with line numbers and highlight specific lines:
 
@@ -34,7 +32,7 @@ function isRocketAboutToCrash() {
 ```
 ````
 
-### Features
+## Features
 
 - **Line Numbers**: Enable line numbers by adding `showLineNumbers` after the opening backticks.
 - **Highlight Lines**: Specify lines to highlight using curly braces (e.g., `{2,3-5}`).

package/src/dist/contents/docs/{getting-started/components → components}/file-tree/index.mdx

@@ -51,14 +51,14 @@ The root component that wraps the entire file tree.
 
 | Prop     | Type     | Required | Description                           |
 |----------|----------|----------|---------------------------------------|
-| name     | string   | Yes      | The name of the folder                |
-| children | ReactNode | No      | Child elements (File or Folder)       |
+| `name`     | string   | Yes      | The name of the folder                |
+| `children` | ReactNode | No      | Child elements (File or Folder)       |
 
 ### File
 
 | Prop | Type   | Required | Description                |
 |------|--------|----------|----------------------------|
-| name | string | Yes      | The name of the file       |
+| `name` | string | Yes      | The name of the file       |
 
 
 ## Examples

package/src/dist/contents/docs/{getting-started/components → components}/index.mdx

@@ -6,4 +6,4 @@ date: 29-11-2024
 
 Explore the custom components we've defined for easy integration and development within your projects. Each component is designed to enhance your workflow and streamline your development process.
 
-<Outlet path="getting-started/components" />
+<Outlet path="components" />

package/src/dist/contents/docs/{getting-started/components → components}/keyboard/index.mdx

@@ -49,9 +49,9 @@ Renders as: <Kbd show="custom">Custom</Kbd>
 
 | Prop      | Type                | Default    | Description |
 |-----------|---------------------|------------|-------------|
-| `show`    | `string`            | (required) | The key identifier (e.g., 'cmd', 'ctrl', 'a') |
-| `type`    | `string` | `window` | for device type `mac` or `window` | Platform style or custom content |
-| `children`| `ReactNode`         | -          | Custom content to display (overrides automatic rendering) |
+| `show`    | string            | (required) | The key identifier (e.g., 'cmd', 'ctrl', 'a') |
+| `type`    | string | `window` | for device type `mac` or `window` | Platform style or custom content |
+| `children`| ReactNode         | -          | Custom content to display (overrides automatic rendering) |
 
 ## Supported Keys
 

package/src/dist/contents/docs/{getting-started/components → components}/note/index.mdx

@@ -4,8 +4,6 @@ description: A component used to display different types of messages such as gen
 date: 14-12-2024
 ---
 
-The `Note` component allows you to display different types of messages such as general notes, warnings, or success notifications. Each type is styled accordingly, providing a clear visual cue to the user.
-
 ## Preview
 
 <Note type="note" title="Note">
@@ -25,12 +23,12 @@ The `Note` component allows you to display different types of messages such as g
 
 | Prop    | Type                                           | Default | Description                              |
 | ------- | ---------------------------------------------- | ------- | ---------------------------------------- |
-| `title` | `string`                                       | "Note"  | Sets the title of the note.              |
-| `type`  | `"note"`, `"danger"`, `"warning"`, `"success"` | "note"  | Determines the visual style of the note. |
+| `title` | string                                       | "Note"  | Sets the title of the note.              |
+| `type`  | "note" "danger" "success" "warning" | undefined | Determines the visual style of the note. |
 
-## Code
+## Output Markdown
 
-```jsx
+```markdown
 <Note type="note" title="Note">
   This is a general note to convey information to the user.
 </Note>

package/src/dist/contents/docs/{getting-started/components → components}/release-note/index.mdx

@@ -10,7 +10,7 @@ The Release Note component makes it easy for you to write and display changelogs
 
 Here is a basic example of using the Release Note component:
 
-```jsx
+```markdown
 <Release version="1.10.1" date="2025-05-24" title="Accessibility Improvements and Bug Fixes">
   <Changes type="added">
     - New feature to improve accessibility
@@ -49,7 +49,7 @@ The `Release` component is used to display key information about a release versi
 | `date` | string | ❌ | Release date in a valid format (example: "2025-05-24") |
 | `children` | ReactNode | ✅ | Child content, typically `Changes` components |
 
-```jsx
+```markdown
 <Release
   version="1.10.1"
   date="2025-05-24"

package/src/dist/contents/docs/{getting-started/components → components}/stepper/index.mdx

@@ -8,8 +8,6 @@ In this guide, we utilize a custom `Stepper` component, specifically designed fo
 
 ## Preview
 
-##
-
 <Stepper>
   <StepperItem title="Step 1: Clone the DocuBook Repository">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum,
@@ -26,9 +24,9 @@ In this guide, we utilize a custom `Stepper` component, specifically designed fo
   </StepperItem>
 </Stepper>
 
-## Code
+## Output Markdown
 
-```jsx
+```markdown
 <Stepper>
   <StepperItem title="Step 1: Clone the DocuBook Repository">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum,

package/src/dist/contents/docs/{getting-started/components → components}/tabs/index.mdx

@@ -38,12 +38,12 @@ The `Tabs` component allows you to organize content into multiple sections, enab
 
 | Prop           | Type     | Default | Description                                            |
 | -------------- | -------- | ------- | ------------------------------------------------------ |
-| `defaultValue` | `string` | `null`  | The value of the tab that is selected by default.      |
-| `className`    | `string` | `""`    | Additional CSS classes for styling the Tabs component. |
+| `defaultValue` | string   | null    | The value of the tab that is selected by default.      |
+| `className`    | string   | null    | Additional CSS classes for styling the Tabs component. |
 
-## Code
+## Output Markdown
 
-````jsx
+````plaintext
 <Tabs defaultValue="java" className="pt-5 pb-1">
   <TabsList>
     <TabsTrigger value="java">Java</TabsTrigger>

package/src/dist/contents/docs/{getting-started/components → components}/tooltips/index.mdx

@@ -13,7 +13,7 @@ You can use tooltips in your Markdown content to provide additional information
 
 What do you know about <Tooltip text="DocuBook" tip="npx @docubook/create@latest" /> ? Create interactive nested documentations using MDX.
 
-### Code
+### Output Markdown
 
 The above Markdown is converted to: