UI & Twoslash: Move Twoslash UI components to fumadocs-twoslash

.changeset/red-queens-bake.md

@@ -0,0 +1,28 @@
+---
+'fumadocs-twoslash': major
+'fumadocs-ui': major
+---
+
+**Move Twoslash UI components to `fumadocs-twoslash`**
+
+**why:** Isolate logic from Fumadocs UI
+
+**migrate:** 
+
+Before:
+
+```ts
+import "fumadocs-ui/twoslash.css"
+
+import { Popup } from "fumadocs-ui/twoslash/popup"
+```
+
+After:
+
+```ts
+import "fumadocs-twoslash/twoslash.css"
+
+import { Popup } from "fumadocs-twoslash/ui"
+```
+
+**Tailwind CSS is now required for Twoslash integration.**

apps/docs/app/docs/[...slug]/page.tsx

@@ -9,7 +9,7 @@ import {
 import { notFound } from 'next/navigation';
 import { type ComponentProps, type FC, Fragment } from 'react';
 import defaultComponents from 'fumadocs-ui/mdx';
-import { Popup, PopupContent, PopupTrigger } from 'fumadocs-ui/twoslash/popup';
+import { Popup, PopupContent, PopupTrigger } from 'fumadocs-twoslash/ui';
 import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 import { Callout } from 'fumadocs-ui/components/callout';
 import { TypeTable } from 'fumadocs-ui/components/type-table';

apps/docs/app/docs/layout.tsx

@@ -1,7 +1,7 @@
 import { DocsLayout } from 'fumadocs-ui/layouts/docs';
 import type { ReactNode } from 'react';
 import { docsOptions } from '@/app/layout.config';
-import 'fumadocs-ui/twoslash.css';
+import 'fumadocs-twoslash/twoslash.css';
 
 export default function Layout({
   children,

apps/docs/content/docs/ui/(integrations)/twoslash.mdx

@@ -40,11 +40,11 @@ export default withMDX(config);
 Add stylings and components.
 
 ```ts title="layout.tsx"
-import 'fumadocs-ui/twoslash.css';
+import 'fumadocs-twoslash/twoslash.css';
 ```
 
 ```ts
-import { Popup, PopupContent, PopupTrigger } from 'fumadocs-ui/twoslash/popup';
+import { Popup, PopupContent, PopupTrigger } from 'fumadocs-twoslash/ui';
 
 const mdxComponents = {
   Popup,

packages/twoslash/package.json

@@ -12,6 +12,17 @@
   "license": "MIT",
   "author": "Fuma Nama",
   "type": "module",
+  "exports": {
+    "./twoslash.css": "./dist/twoslash.css",
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./ui": {
+      "import": "./dist/ui/index.js",
+      "types": "./dist/ui/index.d.ts"
+    }
+  },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
@@ -25,21 +36,29 @@
     "types:check": "tsc --noEmit"
   },
   "dependencies": {
+    "@radix-ui/react-popover": "^1.1.1",
     "@shikijs/twoslash": "^1.16.2",
     "mdast-util-from-markdown": "^2.0.1",
     "mdast-util-gfm": "^3.0.0",
-    "mdast-util-to-hast": "^13.2.0"
+    "mdast-util-to-hast": "^13.2.0",
+    "tailwind-merge": "^2.5.2"
   },
   "devDependencies": {
     "@types/hast": "^3.0.4",
     "@types/mdast": "^4.0.3",
+    "@types/node": "22.5.4",
+    "@types/react": "^18.3.5",
     "eslint-config-custom": "workspace:*",
     "fumadocs-ui": "workspace:*",
+    "postcss": "^8.4.45",
+    "postcss-lightningcss": "^1.0.1",
     "shiki": "^1.16.2",
+    "tailwindcss": "^3.4.10",
     "tsconfig": "workspace:*"
   },
   "peerDependencies": {
     "fumadocs-ui": "13.x.x",
+    "react": ">= 18",
     "shiki": "1.x.x"
   },
   "publishConfig": {

packages/twoslash/postcss.config.js

@@ -0,0 +1,8 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    'postcss-lightningcss': {
+      browsers: '>= .25%',
+    },
+  },
+};

packages/twoslash/src/ui/cn.ts

@@ -0,0 +1 @@
+export { twMerge as cn } from 'tailwind-merge';

packages/twoslash/src/ui/index.ts

@@ -0,0 +1 @@
+export * from './popup';

packages/twoslash/src/ui/popover.tsx

@@ -0,0 +1,31 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as React from 'react';
+import { cn } from './cn';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      side="bottom"
+      className={cn(
+        'z-50 min-w-[220px] max-w-[98vw] rounded-lg border bg-fd-popover p-2 text-sm text-fd-popover-foreground shadow-md data-[state=closed]:animate-fd-popover-out data-[state=open]:animate-fd-popover-in',
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+const PopoverClose = PopoverPrimitive.PopoverClose;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverClose };

packages/ui/src/twoslash/popup.tsx → packages/twoslash/src/ui/popup.tsx

@@ -1,12 +1,8 @@
 'use client';
 
 import * as React from 'react';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover';
-import { cn } from '@/utils/cn';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+import { cn } from './cn';
 
 interface PopupContextObject {
   open: boolean;

packages/twoslash/tailwind.config.js

@@ -0,0 +1,7 @@
+import { createPreset } from 'fumadocs-ui/tailwind-plugin';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{ts,tsx}'],
+  presets: [createPreset()],
+};

packages/twoslash/tsup.config.ts

@@ -1,8 +1,11 @@
+import * as fs from 'node:fs';
 import { defineConfig } from 'tsup';
 
+fs.copyFileSync('./styles/twoslash.css', './dist/twoslash.css');
+
 export default defineConfig({
   dts: true,
   target: 'es6',
   format: 'esm',
-  entry: ['src/index.ts'],
+  entry: ['src/index.ts', 'src/ui/index.ts'],
 });

packages/ui/package.json

@@ -13,7 +13,6 @@
   "type": "module",
   "exports": {
     "./style.css": "./dist/style.css",
-    "./twoslash.css": "./dist/twoslash.css",
     "./image-zoom.css": "./dist/image-zoom.css",
     "./tailwind-plugin": {
       "import": "./dist/tailwind-plugin.js",
@@ -24,10 +23,6 @@
       "import": "./dist/components/*.js",
       "types": "./dist/components/*.d.ts"
     },
-    "./twoslash/*": {
-      "import": "./dist/twoslash/*.js",
-      "types": "./dist/twoslash/*.d.ts"
-    },
     "./i18n": {
       "import": "./dist/i18n.js",
       "types": "./dist/i18n.d.ts"
@@ -53,37 +48,6 @@
       "types": "./dist/og.d.ts"
     }
   },
-  "typesVersions": {
-    "*": {
-      "tailwind-plugin": [
-        "./dist/tailwind-plugin.d.ts"
-      ],
-      "components/*": [
-        "./dist/components/*.d.ts"
-      ],
-      "twoslash/*": [
-        "./dist/twoslash/*.d.ts"
-      ],
-      "i18n": [
-        "./dist/i18n.d.ts"
-      ],
-      "layouts/*": [
-        "./dist/layouts/*.d.ts"
-      ],
-      "page": [
-        "./dist/page.d.ts"
-      ],
-      "provider": [
-        "./dist/provider.d.ts"
-      ],
-      "mdx": [
-        "./dist/mdx.d.ts"
-      ],
-      "og": [
-        "./dist/og.d.ts"
-      ]
-    }
-  },
   "files": [
     "dist/*"
   ],

packages/ui/tsup.config.ts

@@ -35,7 +35,6 @@ export default defineConfig({
     `./src/components/{${exportedComponents.join(',')}}.tsx`,
     './src/layouts/{docs,shared,home}.tsx',
     './src/{i18n,home-layout,layout,page,provider,mdx,tailwind-plugin,og}.{ts,tsx}',
-    './src/twoslash/popup.tsx',
     './src/**/*.client.tsx',
   ],
   external: ['server-only', '../../dist/image-zoom.css', 'tailwindcss'],