@gv-tech/ui-web 2.15.2 → 2.16.0

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 {

package/src/toast.tsx

@@ -21,7 +21,7 @@ const ToastViewport = React.forwardRef<
     {...props}
   />
 ));
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+ToastViewport.displayName = ToastPrimitives.Viewport?.displayName || 'ToastViewport';
 
 const toastVariants = cva(
   'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
@@ -44,7 +44,7 @@ const Toast = React.forwardRef<
 >(({ className, variant, ...props }, ref) => {
   return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />;
 });
-Toast.displayName = ToastPrimitives.Root.displayName;
+Toast.displayName = ToastPrimitives.Root?.displayName || 'Toast';
 
 const ToastAction = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Action>,
@@ -59,7 +59,7 @@ const ToastAction = React.forwardRef<
     {...props}
   />
 ));
-ToastAction.displayName = ToastPrimitives.Action.displayName;
+ToastAction.displayName = ToastPrimitives.Action?.displayName || 'ToastAction';
 
 const ToastClose = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Close>,
@@ -77,7 +77,7 @@ const ToastClose = React.forwardRef<
     <X className="h-4 w-4" />
   </ToastPrimitives.Close>
 ));
-ToastClose.displayName = ToastPrimitives.Close.displayName;
+ToastClose.displayName = ToastPrimitives.Close?.displayName || 'ToastClose';
 
 const ToastTitle = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Title>,
@@ -85,7 +85,7 @@ const ToastTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Title ref={ref} className={cn('text-sm font-semibold [&+div]:text-xs', className)} {...props} />
 ));
-ToastTitle.displayName = ToastPrimitives.Title.displayName;
+ToastTitle.displayName = ToastPrimitives.Title?.displayName || 'ToastTitle';
 
 const ToastDescription = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Description>,
@@ -93,7 +93,7 @@ const ToastDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Description ref={ref} className={cn('text-sm opacity-90', className)} {...props} />
 ));
-ToastDescription.displayName = ToastPrimitives.Description.displayName;
+ToastDescription.displayName = ToastPrimitives.Description?.displayName || 'ToastDescription';
 
 type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
 

package/src/toggle-group.tsx

@@ -23,7 +23,7 @@ const ToggleGroup = React.forwardRef<React.ElementRef<typeof ToggleGroupPrimitiv
   ),
 );
 
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+ToggleGroup.displayName = ToggleGroupPrimitive.Root?.displayName || 'ToggleGroup';
 
 export type ToggleGroupItemProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
   VariantProps<typeof toggleVariants>;
@@ -50,6 +50,6 @@ const ToggleGroupItem = React.forwardRef<React.ElementRef<typeof ToggleGroupPrim
   },
 );
 
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item?.displayName || 'ToggleGroupItem';
 
 export { ToggleGroup, ToggleGroupItem };

package/src/toggle.tsx

@@ -19,6 +19,6 @@ const Toggle = React.forwardRef<React.ElementRef<typeof TogglePrimitive.Root>, T
   ),
 );
 
-Toggle.displayName = TogglePrimitive.Root.displayName;
+Toggle.displayName = TogglePrimitive.Root?.displayName || 'Toggle';
 
 export { Toggle, toggleVariants };

package/src/tooltip.tsx

@@ -28,7 +28,7 @@ export type TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipP
 const TooltipTrigger = React.forwardRef<React.ElementRef<typeof TooltipPrimitive.Trigger>, TooltipTriggerProps>(
   ({ className, ...props }, ref) => <TooltipPrimitive.Trigger ref={ref} className={className} {...props} />,
 );
-TooltipTrigger.displayName = TooltipPrimitive.Trigger.displayName;
+TooltipTrigger.displayName = TooltipPrimitive.Trigger?.displayName || 'TooltipTrigger';
 
 export type TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> &
   TooltipContentBaseProps;
@@ -46,6 +46,6 @@ const TooltipContent = React.forwardRef<React.ElementRef<typeof TooltipPrimitive
     />
   ),
 );
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+TooltipContent.displayName = TooltipPrimitive.Content?.displayName || 'TooltipContent';
 
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/utils-B6yFEsav.mjs

@@ -1,8 +0,0 @@
-import { clsx as o } from "clsx";
-import { twMerge as t } from "tailwind-merge";
-function m(...r) {
-  return t(o(r));
-}
-export {
-  m as c
-};

package/dist/utils-IjLH3w2e.js

@@ -1 +0,0 @@
-"use strict";const r=require("clsx"),c=require("tailwind-merge");function n(...e){return c.twMerge(r.clsx(e))}exports.cn=n;