UI: Support custom children of trigger on InlineTOC component

.changeset/rare-panthers-joke.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Support custom children of trigger on `InlineTOC` component

packages/ui/src/components/inline-toc.tsx

@@ -7,24 +7,25 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from './ui/collapsible';
+import { ComponentProps } from 'react';
+import { cn } from '@/utils/cn';
 
-export interface InlineTocProps {
+export interface InlineTocProps extends ComponentProps<typeof Collapsible> {
   items: TOCItemType[];
-  defaultOpen?: boolean;
 }
 
-export function InlineTOC({
-  items,
-  defaultOpen,
-}: InlineTocProps): React.ReactElement {
+export function InlineTOC({ items, ...props }: InlineTocProps) {
   return (
     <Collapsible
-      defaultOpen={defaultOpen}
-      className="not-prose rounded-lg border bg-fd-card text-fd-card-foreground"
+      {...props}
+      className={cn(
+        'not-prose rounded-lg border bg-fd-card text-fd-card-foreground',
+        props.className,
+      )}
     >
-      <CollapsibleTrigger className="inline-flex w-full items-center justify-between p-4 font-medium [&[data-state=open]>svg]:rotate-180">
-        Table of Contents
-        <ChevronDown className="size-4 transition-transform duration-200" />
+      <CollapsibleTrigger className="group inline-flex w-full items-center justify-between px-4 py-2.5 font-medium">
+        {props.children ?? 'Table of Contents'}
+        <ChevronDown className="size-4 transition-transform duration-200 group-data-[state=open]:rotate-180" />
       </CollapsibleTrigger>
       <CollapsibleContent>
         <div className="flex flex-col p-4 pt-0 text-sm text-fd-muted-foreground">
@@ -32,9 +33,9 @@ export function InlineTOC({
             <a
               key={item.url}
               href={item.url}
-              className="border-l py-1.5 hover:text-fd-accent-foreground"
+              className="border-s py-1.5 hover:text-fd-accent-foreground"
               style={{
-                paddingLeft: 12 * Math.max(item.depth - 1, 0),
+                paddingInlineStart: 12 * Math.max(item.depth - 1, 0),
               }}
             >
               {item.title}