@gv-tech/ui-web 2.15.1 → 2.16.0

package/src/menubar.tsx

@@ -51,7 +51,7 @@ const Menubar = React.forwardRef<
     {...props}
   />
 ));
-Menubar.displayName = MenubarPrimitive.Root.displayName;
+Menubar.displayName = MenubarPrimitive.Root?.displayName || 'Menubar';
 
 const MenubarTrigger = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Trigger>,
@@ -66,7 +66,7 @@ const MenubarTrigger = React.forwardRef<
     {...props}
   />
 ));
-MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
+MenubarTrigger.displayName = MenubarPrimitive.Trigger?.displayName || 'MenubarTrigger';
 
 const MenubarSubTrigger = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
@@ -85,7 +85,7 @@ const MenubarSubTrigger = React.forwardRef<
     <ChevronRight className="ml-auto h-4 w-4" />
   </MenubarPrimitive.SubTrigger>
 ));
-MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger?.displayName || 'MenubarSubTrigger';
 
 const MenubarSubContent = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.SubContent>,
@@ -100,7 +100,7 @@ const MenubarSubContent = React.forwardRef<
     {...props}
   />
 ));
-MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
+MenubarSubContent.displayName = MenubarPrimitive.SubContent?.displayName || 'MenubarSubContent';
 
 const MenubarContent = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Content>,
@@ -120,7 +120,7 @@ const MenubarContent = React.forwardRef<
     />
   </MenubarPrimitive.Portal>
 ));
-MenubarContent.displayName = MenubarPrimitive.Content.displayName;
+MenubarContent.displayName = MenubarPrimitive.Content?.displayName || 'MenubarContent';
 
 const MenubarItem = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Item>,
@@ -136,7 +136,7 @@ const MenubarItem = React.forwardRef<
     {...props}
   />
 ));
-MenubarItem.displayName = MenubarPrimitive.Item.displayName;
+MenubarItem.displayName = MenubarPrimitive.Item?.displayName || 'MenubarItem';
 
 const MenubarCheckboxItem = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
@@ -159,7 +159,7 @@ const MenubarCheckboxItem = React.forwardRef<
     {children}
   </MenubarPrimitive.CheckboxItem>
 ));
-MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem?.displayName || 'MenubarCheckboxItem';
 
 const MenubarRadioItem = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.RadioItem>,
@@ -181,7 +181,7 @@ const MenubarRadioItem = React.forwardRef<
     {children}
   </MenubarPrimitive.RadioItem>
 ));
-MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem?.displayName || 'MenubarRadioItem';
 
 const MenubarLabel = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Label>,
@@ -193,7 +193,7 @@ const MenubarLabel = React.forwardRef<
     {...props}
   />
 ));
-MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
+MenubarLabel.displayName = MenubarPrimitive.Label?.displayName || 'MenubarLabel';
 
 const MenubarSeparator = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Separator>,
@@ -201,7 +201,7 @@ const MenubarSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <MenubarPrimitive.Separator ref={ref} className={cn('bg-muted -mx-1 my-1 h-px', className)} {...props} />
 ));
-MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
+MenubarSeparator.displayName = MenubarPrimitive.Separator?.displayName || 'MenubarSeparator';
 
 const MenubarShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement> & MenubarShortcutBaseProps) => {
   return <span className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)} {...props} />;

package/src/navigation-menu.tsx

@@ -30,7 +30,7 @@ const NavigationMenu = React.forwardRef<
     <NavigationMenuViewport />
   </NavigationMenuPrimitive.Root>
 ));
-NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+NavigationMenu.displayName = NavigationMenuPrimitive.Root?.displayName || 'NavigationMenu';
 
 const NavigationMenuList = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.List>,
@@ -42,7 +42,7 @@ const NavigationMenuList = React.forwardRef<
     {...props}
   />
 ));
-NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+NavigationMenuList.displayName = NavigationMenuPrimitive.List?.displayName || 'NavigationMenuList';
 
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
@@ -66,7 +66,7 @@ const NavigationMenuTrigger = React.forwardRef<
     />
   </NavigationMenuPrimitive.Trigger>
 ));
-NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger?.displayName || 'NavigationMenuTrigger';
 
 const NavigationMenuContent = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Content>,
@@ -81,7 +81,7 @@ const NavigationMenuContent = React.forwardRef<
     {...props}
   />
 ));
-NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content?.displayName || 'NavigationMenuContent';
 
 const NavigationMenuLink = NavigationMenuPrimitive.Link;
 
@@ -100,7 +100,7 @@ const NavigationMenuViewport = React.forwardRef<
     />
   </div>
 ));
-NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
+NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport?.displayName || 'NavigationMenuViewport';
 
 const NavigationMenuIndicator = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
@@ -117,7 +117,7 @@ const NavigationMenuIndicator = React.forwardRef<
     <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
   </NavigationMenuPrimitive.Indicator>
 ));
-NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
+NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator?.displayName || 'NavigationMenuIndicator';
 
 export {
   NavigationMenu,

package/src/popover.tsx

@@ -34,7 +34,7 @@ const PopoverContent = React.forwardRef<
     />
   </PopoverPrimitive.Portal>
 ));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+PopoverContent.displayName = PopoverPrimitive.Content?.displayName || 'PopoverContent';
 
 export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
 export type {

package/src/progress.tsx

@@ -22,7 +22,7 @@ const Progress = React.forwardRef<
     />
   </ProgressPrimitive.Root>
 ));
-Progress.displayName = ProgressPrimitive.Root.displayName;
+Progress.displayName = ProgressPrimitive.Root?.displayName || 'Progress';
 
 export { Progress };
 export type { ProgressBaseProps as ProgressProps };

package/src/radio-group.tsx

@@ -14,7 +14,7 @@ const RadioGroup = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.
     return <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={ref} />;
   },
 );
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+RadioGroup.displayName = RadioGroupPrimitive.Root?.displayName || 'RadioGroup';
 
 export interface RadioGroupItemProps
   extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, RadioGroupItemBaseProps {}
@@ -37,6 +37,6 @@ const RadioGroupItem = React.forwardRef<React.ElementRef<typeof RadioGroupPrimit
     );
   },
 );
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+RadioGroupItem.displayName = RadioGroupPrimitive.Item?.displayName || 'RadioGroupItem';
 
 export { RadioGroup, RadioGroupItem };

package/src/scroll-area.tsx

@@ -16,7 +16,7 @@ const ScrollArea = React.forwardRef<
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
 ));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+ScrollArea.displayName = ScrollAreaPrimitive.Root?.displayName || 'ScrollArea';
 
 const ScrollBar = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
@@ -36,7 +36,7 @@ const ScrollBar = React.forwardRef<
     <ScrollAreaPrimitive.ScrollAreaThumb className="bg-border relative flex-1 rounded-full" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar?.displayName || 'ScrollBar';
 
 export { ScrollArea, ScrollBar };
 export type { ScrollAreaBaseProps as ScrollAreaProps, ScrollBarBaseProps as ScrollBarProps };

package/src/search.tsx

@@ -59,7 +59,10 @@ export function Search({ children, open: customOpen, onOpenChange }: SearchProps
 export interface SearchTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, SearchTriggerBaseProps {}
 
 export const SearchTrigger = React.forwardRef<HTMLButtonElement, SearchTriggerProps>(
-  ({ className, placeholder = 'Search docs...', variant = 'default', ...props }, ref) => {
+  ({ className, placeholder, variant = 'default', responsive = false, ...props }, ref) => {
+    const defaultPlaceholder = variant === 'compact' ? 'Search...' : 'Search docs...';
+    const activePlaceholder = placeholder || defaultPlaceholder;
+
     return (
       <Button
         variant="outline"
@@ -67,7 +70,7 @@ export const SearchTrigger = React.forwardRef<HTMLButtonElement, SearchTriggerPr
           'text-muted-foreground relative h-9 text-sm transition-all transition-colors',
           variant === 'default'
             ? 'w-full justify-start pr-12'
-            : 'w-9 justify-center px-0 md:w-40 md:justify-start md:px-3 md:pr-12 lg:w-64',
+            : cn('w-9 justify-center px-0', responsive && '2xl:w-48 2xl:justify-start 2xl:px-3 2xl:pr-12'),
           className,
         )}
         ref={ref}
@@ -75,9 +78,17 @@ export const SearchTrigger = React.forwardRef<HTMLButtonElement, SearchTriggerPr
       >
         <span className="inline-flex items-center gap-2">
           <SearchIcon className="h-4 w-4 shrink-0" />
-          <span className={cn('truncate', variant === 'compact' && 'hidden md:inline')}>{placeholder}</span>
+          <span className={cn('truncate', variant === 'compact' && (responsive ? 'hidden 2xl:inline' : 'hidden'))}>
+            {activePlaceholder}
+          </span>
         </span>
-        <kbd className="bg-muted pointer-events-none absolute top-1.5 right-1.5 hidden h-6 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none sm:flex">
+        <kbd
+          className={cn(
+            'bg-muted pointer-events-none absolute top-1.5 right-1.5 hidden h-6 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none',
+            variant === 'default' && 'sm:flex',
+            variant === 'compact' && responsive && '2xl:flex',
+          )}
+        >
           <span className="text-xs">⌘</span>K
         </kbd>
       </Button>

package/src/select.tsx

@@ -42,7 +42,7 @@ const SelectTrigger = React.forwardRef<
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+SelectTrigger.displayName = SelectPrimitive.Trigger?.displayName || 'SelectTrigger';
 
 const SelectScrollUpButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
@@ -56,7 +56,7 @@ const SelectScrollUpButton = React.forwardRef<
     <ChevronUp className="h-4 w-4" />
   </SelectPrimitive.ScrollUpButton>
 ));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton?.displayName || 'SelectScrollUpButton';
 
 const SelectScrollDownButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
@@ -70,7 +70,7 @@ const SelectScrollDownButton = React.forwardRef<
     <ChevronDown className="h-4 w-4" />
   </SelectPrimitive.ScrollDownButton>
 ));
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton?.displayName || 'SelectScrollDownButton';
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
@@ -102,7 +102,7 @@ const SelectContent = React.forwardRef<
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
 ));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
+SelectContent.displayName = SelectPrimitive.Content?.displayName || 'SelectContent';
 
 const SelectLabel = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Label>,
@@ -110,7 +110,7 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label ref={ref} className={cn('px-2 py-1.5 text-sm font-semibold', className)} {...props} />
 ));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
+SelectLabel.displayName = SelectPrimitive.Label?.displayName || 'SelectLabel';
 
 const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
@@ -132,7 +132,7 @@ const SelectItem = React.forwardRef<
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
 ));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
+SelectItem.displayName = SelectPrimitive.Item?.displayName || 'SelectItem';
 
 const SelectSeparator = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Separator>,
@@ -140,7 +140,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator ref={ref} className={cn('bg-muted -mx-1 my-1 h-px', className)} {...props} />
 ));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+SelectSeparator.displayName = SelectPrimitive.Separator?.displayName || 'SelectSeparator';
 
 export {
   Select,

package/src/separator.tsx

@@ -18,7 +18,7 @@ const Separator = React.forwardRef<
     {...props}
   />
 ));
-Separator.displayName = SeparatorPrimitive.Root.displayName;
+Separator.displayName = SeparatorPrimitive.Root?.displayName || 'Separator';
 
 export { Separator };
 export type { SeparatorBaseProps as SeparatorProps };

package/src/sheet.tsx

@@ -40,7 +40,7 @@ const SheetOverlay = React.forwardRef<
     ref={ref}
   />
 ));
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+SheetOverlay.displayName = SheetPrimitive.Overlay?.displayName || 'SheetOverlay';
 
 const sheetVariants = cva(
   'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out',
@@ -81,7 +81,7 @@ const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Con
     </SheetPortal>
   ),
 );
-SheetContent.displayName = SheetPrimitive.Content.displayName;
+SheetContent.displayName = SheetPrimitive.Content?.displayName || 'SheetContent';
 
 const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement> & SheetHeaderBaseProps) => (
   <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
@@ -99,7 +99,7 @@ const SheetTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Title ref={ref} className={cn('text-foreground text-lg font-semibold', className)} {...props} />
 ));
-SheetTitle.displayName = SheetPrimitive.Title.displayName;
+SheetTitle.displayName = SheetPrimitive.Title?.displayName || 'SheetTitle';
 
 const SheetDescription = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Description>,
@@ -107,7 +107,7 @@ const SheetDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Description ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
 ));
-SheetDescription.displayName = SheetPrimitive.Description.displayName;
+SheetDescription.displayName = SheetPrimitive.Description?.displayName || 'SheetDescription';
 
 export {
   Sheet,

package/src/slider.tsx

@@ -21,7 +21,7 @@ const Slider = React.forwardRef<
     <SliderPrimitive.Thumb className="border-primary/50 bg-background focus-visible:ring-ring block h-4 w-4 rounded-full border shadow transition-colors focus-visible:ring-1 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50" />
   </SliderPrimitive.Root>
 ));
-Slider.displayName = SliderPrimitive.Root.displayName;
+Slider.displayName = SliderPrimitive.Root?.displayName || 'Slider';
 
 export { Slider };
 export type { SliderBaseProps as SliderProps };

package/src/switch.tsx

@@ -25,7 +25,7 @@ const Switch = React.forwardRef<
     />
   </SwitchPrimitives.Root>
 ));
-Switch.displayName = SwitchPrimitives.Root.displayName;
+Switch.displayName = SwitchPrimitives.Root?.displayName || 'Switch';
 
 export { Switch };
 export type { SwitchBaseProps as SwitchProps };

package/src/table-of-contents.tsx

@@ -0,0 +1,285 @@
+'use client';
+
+import {
+  HeadingItem,
+  TableOfContentsBaseProps,
+  TableOfContentsContentBaseProps,
+  TableOfContentsListBaseProps,
+  TableOfContentsRootBaseProps,
+} from '@gv-tech/ui-core';
+import * as React from 'react';
+import { cn, slugify } from './lib/utils';
+
+// Context for sharing heading data
+interface TOCContextValue {
+  headings: HeadingItem[];
+  activeId: string | null;
+  activeHeadingText: string | null;
+  registerHeadings: (headings: HeadingItem[]) => void;
+  setActiveId: (id: string | null) => void;
+  config: TableOfContentsBaseProps;
+}
+
+const TOCContext = React.createContext<TOCContextValue | null>(null);
+
+function useTOC() {
+  const context = React.useContext(TOCContext);
+  if (!context) {
+    throw new Error('TOC components must be used within a TableOfContents provider');
+  }
+  return context;
+}
+
+export type TableOfContentsProps = TableOfContentsRootBaseProps;
+
+/**
+ * Root component that provides the Table of Contents context.
+ * Can be used as a wrapper OR standalone.
+ * If used as a wrapper: <TableOfContents><List /><Content>{children}</Content></TableOfContents>
+ * If used standalone: <TableOfContents /> (requires container ref or defaults to document)
+ */
+function TableOfContents({
+  children,
+  className,
+  activeId: activeIdOverride,
+  minLevel = 1,
+  maxLevel = 4,
+  selector = 'h1, h2, h3, h4, h5, h6',
+}: TableOfContentsProps) {
+  const [headings, setHeadings] = React.useState<HeadingItem[]>([]);
+  const [activeId, setActiveId] = React.useState<string | null>(null);
+
+  const activeHeadingText = React.useMemo(() => {
+    return headings.find((h) => h.id === activeId)?.text || null;
+  }, [headings, activeId]);
+
+  const registerHeadings = React.useCallback((newHeadings: HeadingItem[]) => {
+    setHeadings((prev) => {
+      if (JSON.stringify(prev) === JSON.stringify(newHeadings)) {
+        return prev;
+      }
+      return newHeadings;
+    });
+  }, []);
+
+  const value = React.useMemo(
+    () => ({
+      headings,
+      activeId: activeIdOverride || activeId,
+      activeHeadingText,
+      registerHeadings,
+      setActiveId,
+      config: { minLevel, maxLevel, selector, className },
+    }),
+    [
+      headings,
+      activeId,
+      activeIdOverride,
+      activeHeadingText,
+      registerHeadings,
+      minLevel,
+      maxLevel,
+      selector,
+      className,
+    ],
+  );
+
+  return (
+    <TOCContext.Provider value={value}>
+      <div className={cn('relative', className)}>
+        {children || (
+          <div className="flex flex-col gap-4">
+            <TableOfContentsList />
+            <TableOfContentsContent>{null}</TableOfContentsContent>
+          </div>
+        )}
+      </div>
+    </TOCContext.Provider>
+  );
+}
+
+/**
+ * Renders the actual list of links.
+ */
+function TableOfContentsList({ className }: TableOfContentsListBaseProps) {
+  const { headings, activeId, activeHeadingText } = useTOC();
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  // Auto-collapse on scroll
+  React.useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    const handleScroll = () => {
+      setIsOpen(false);
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [isOpen]);
+
+  if (headings.length === 0) {
+    return null;
+  }
+
+  const currentMinLevel = Math.min(...headings.map((h) => h.level));
+
+  const listContent = (
+    <ul className="m-0 list-none text-sm">
+      {headings.map((heading) => {
+        const isActive = activeId === heading.id;
+        const paddingLeft = `${(heading.level - currentMinLevel) * 1}rem`;
+
+        return (
+          <li key={heading.id} className="mt-0 pt-2">
+            <a
+              href={`#${heading.id}`}
+              onClick={() => setIsOpen(false)}
+              className={cn(
+                'hover:text-foreground inline-block no-underline transition-colors',
+                isActive ? 'text-primary font-medium' : 'text-muted-foreground',
+              )}
+              style={{ paddingLeft }}
+            >
+              {heading.text}
+            </a>
+          </li>
+        );
+      })}
+    </ul>
+  );
+
+  return (
+    <>
+      {/* Mobile Sticky Header */}
+      <div className={cn('bg-background/95 sticky top-0 z-40 border-b backdrop-blur xl:hidden', className)}>
+        <button
+          onClick={() => setIsOpen(!isOpen)}
+          className="flex w-full items-center justify-between px-4 py-3 text-left"
+        >
+          <div className="flex items-center gap-2 overflow-hidden">
+            <span className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">On this page:</span>
+            <span className="truncate text-sm font-medium">{activeHeadingText || 'Overview'}</span>
+          </div>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className={cn('shrink-0 transition-transform duration-200', isOpen && 'rotate-180')}
+          >
+            <path d="m6 9 6 6 6-6" />
+          </svg>
+        </button>
+
+        {isOpen && (
+          <div className="bg-background border-t px-4 pt-2 pb-6">
+            <nav aria-label="Table of contents mobile">{listContent}</nav>
+          </div>
+        )}
+      </div>
+
+      {/* Desktop Hidden List */}
+      <nav className={cn('hidden xl:block', className)} aria-label="Table of contents">
+        {listContent}
+      </nav>
+    </>
+  );
+}
+
+/**
+ * Wraps the content area and automatically detects headings within it.
+ */
+function TableOfContentsContent({ children, className }: TableOfContentsContentBaseProps) {
+  const { registerHeadings, setActiveId, config } = useTOC();
+  const contentRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    const root = contentRef.current;
+    if (!root) {
+      return;
+    }
+
+    const queryHeadings = () => {
+      const elements = Array.from(root.querySelectorAll(config.selector || 'h1, h2, h3, h4, h5, h6')).filter(
+        (element) => {
+          const level = parseInt(element.tagName.charAt(1), 10);
+          return level >= (config.minLevel ?? 1) && level <= (config.maxLevel ?? 4);
+        },
+      );
+
+      const headingItems: HeadingItem[] = elements.map((element) => {
+        if (!element.id) {
+          element.id = slugify(element.textContent || 'heading');
+        }
+        return {
+          id: element.id,
+          text: element.textContent || '',
+          level: parseInt(element.tagName.charAt(1), 10),
+        };
+      });
+
+      registerHeadings(headingItems);
+      return elements;
+    };
+
+    // Initial query
+    const elements = queryHeadings();
+
+    // Intersection Observer for active ID
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id);
+          }
+        });
+      },
+      {
+        rootMargin: '0px 0px -80% 0px',
+        threshold: 0.1,
+      },
+    );
+
+    elements.forEach((el) => observer.observe(el));
+
+    // Mutation Observer for dynamic content
+    const mutationObserver = new MutationObserver(() => {
+      const newElements = queryHeadings();
+      observer.disconnect();
+      newElements.forEach((el) => observer.observe(el));
+    });
+
+    mutationObserver.observe(root, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+    });
+
+    return () => {
+      observer.disconnect();
+      mutationObserver.disconnect();
+    };
+  }, [config.selector, config.minLevel, config.maxLevel, registerHeadings, setActiveId]);
+
+  return (
+    <div ref={contentRef} className={className}>
+      {children}
+    </div>
+  );
+}
+
+TableOfContents.List = TableOfContentsList;
+TableOfContents.Content = TableOfContentsContent;
+
+export type {
+  TableOfContentsContentBaseProps as TableOfContentsContentProps,
+  TableOfContentsListBaseProps as TableOfContentsListProps,
+} from '@gv-tech/ui-core';
+export { TableOfContents, TableOfContentsContent, TableOfContentsList };

package/src/tabs.tsx

@@ -21,7 +21,7 @@ const TabsList = React.forwardRef<
     {...props}
   />
 ));
-TabsList.displayName = TabsPrimitive.List.displayName;
+TabsList.displayName = TabsPrimitive.List?.displayName || 'TabsList';
 
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
@@ -36,7 +36,7 @@ const TabsTrigger = React.forwardRef<
     {...props}
   />
 ));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+TabsTrigger.displayName = TabsPrimitive.Trigger?.displayName || 'TabsTrigger';
 
 const TabsContent = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Content>,
@@ -51,7 +51,7 @@ const TabsContent = React.forwardRef<
     {...props}
   />
 ));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
+TabsContent.displayName = TabsPrimitive.Content?.displayName || 'TabsContent';
 
 export { Tabs, TabsContent, TabsList, TabsTrigger };
 export type {