From 8ea32c98e31f165348caa761f938bb5fa48a8b4b Mon Sep 17 00:00:00 2001
From: Aaron Reisman <aaron.reisman@plane.so>
Date: Wed, 10 Jun 2026 21:54:49 +0700
Subject: [PATCH] docs: fence the TSDoc usage examples for Tabs and Dropdown

Autodocs renders the component description as Markdown, so an indented JSX example
gets parsed with its tags as raw HTML and the wrapper tag (e.g. </Tabs>) leaks
outside the code box. Wrap both examples in ```tsx fences so they render as a
single code block. Same fix as Popover (#53).
---
 .../propel/src/components/dropdown/index.tsx   | 18 ++++++++++--------
 packages/propel/src/components/tabs/index.tsx  | 18 ++++++++++--------
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/packages/propel/src/components/dropdown/index.tsx b/packages/propel/src/components/dropdown/index.tsx
index 6a8386d6..e23a7907 100644
--- a/packages/propel/src/components/dropdown/index.tsx
+++ b/packages/propel/src/components/dropdown/index.tsx
@@ -8,14 +8,16 @@ import { CheckboxVisual } from "../checkbox/index";
  * The dropdown menu root — a Base UI `Menu.Root`. Holds open state and wires the
  * trigger to the content. Compose it with `DropdownTrigger` + `DropdownContent`:
  *
- *   <Dropdown>
- *     <DropdownTrigger>Open</DropdownTrigger>
- *     <DropdownContent>
- *       <DropdownItem label="Edit" />
- *       <DropdownSeparator />
- *       <DropdownItem label="Delete" />
- *     </DropdownContent>
- *   </Dropdown>
+ * ```tsx
+ * <Dropdown>
+ *   <DropdownTrigger>Open</DropdownTrigger>
+ *   <DropdownContent>
+ *     <DropdownItem label="Edit" />
+ *     <DropdownSeparator />
+ *     <DropdownItem label="Delete" />
+ *   </DropdownContent>
+ * </Dropdown>
+ * ```
  */
 export const Dropdown = Menu.Root;
 export type DropdownProps = React.ComponentProps<typeof Menu.Root>;
diff --git a/packages/propel/src/components/tabs/index.tsx b/packages/propel/src/components/tabs/index.tsx
index 52abd4e8..95967230 100644
--- a/packages/propel/src/components/tabs/index.tsx
+++ b/packages/propel/src/components/tabs/index.tsx
@@ -38,14 +38,16 @@ export type TabsProps = Omit<
  * Root of a tab set. Groups a `TabsList` of `Tab`s with their `TabsPanel`s and
  * tracks which tab is active. Build the compound API from its parts:
  *
- *   <Tabs variant="contained" defaultValue="overview">
- *     <TabsList>
- *       <Tab value="overview">Overview</Tab>
- *       <Tab value="activity">Activity</Tab>
- *     </TabsList>
- *     <TabsPanel value="overview">…</TabsPanel>
- *     <TabsPanel value="activity">…</TabsPanel>
- *   </Tabs>
+ * ```tsx
+ * <Tabs variant="contained" defaultValue="overview">
+ *   <TabsList>
+ *     <Tab value="overview">Overview</Tab>
+ *     <Tab value="activity">Activity</Tab>
+ *   </TabsList>
+ *   <TabsPanel value="overview">…</TabsPanel>
+ *   <TabsPanel value="activity">…</TabsPanel>
+ * </Tabs>
+ * ```
  */
 export function Tabs({ variant, ...props }: TabsProps) {
   return (