@bug-on/m3-expressive 1.3.2 → 1.3.3

package/dist/layout.d.mts

@@ -1,6 +1,6 @@
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React$1 from 'react';
-import { HTMLAttributes, ReactNode } from 'react';
+import React__default, { HTMLAttributes, ReactNode } from 'react';
 import { HTMLMotionProps } from 'motion/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { b as ScrollAreaProps } from './scroll-area-CVS6HyLl.mjs';
@@ -861,6 +861,12 @@ interface ToCItem {
     id: string;
     /** Human-readable label shown in the ToC. */
     label: string;
+    /**
+     * Heading level depth (1 for h2, 2 for h3, etc.).
+     * Indents lower-level items visually.
+     * @default 1
+     */
+    depth?: number;
 }
 /**
  * Props for the `TableOfContents` component.
@@ -881,6 +887,11 @@ interface TableOfContentsProps {
      * @default { type: "hover" }
      */
     scrollAreaProps?: Omit<ScrollAreaProps, "children">;
+    /**
+     * Optional ref to the scroll container element (e.g. ScrollArea viewport).
+     * If provided, IntersectionObserver will use this container as its root.
+     */
+    scrollContainerRef?: React__default.RefObject<HTMLElement | null | undefined>;
 }
 /**
  * Table of Contents sidebar component.
@@ -897,9 +908,9 @@ interface TableOfContentsProps {
  * @example
  * ```tsx
  * const toc: ToCItem[] = [
- *   { id: "overview", label: "Overview" },
- *   { id: "props", label: "Props" },
- *   { id: "examples", label: "Examples" },
+ *   { id: "overview", label: "Overview", depth: 1 },
+ *   { id: "props", label: "Props", depth: 2 },
+ *   { id: "examples", label: "Examples", depth: 1 },
  * ];
  *
  * <TableOfContents items={toc} />
@@ -907,7 +918,7 @@ interface TableOfContentsProps {
  *
  * @see https://m3.material.io/foundations/content-design/navigation
  */
-declare function TableOfContents({ items, className, scrollAreaProps, }: TableOfContentsProps): react_jsx_runtime.JSX.Element;
+declare function TableOfContents({ items, className, scrollAreaProps, scrollContainerRef, }: TableOfContentsProps): react_jsx_runtime.JSX.Element;
 
 /**
  * TypeScaleTokens - MD3 Expressive Typography Physical Tokens

package/dist/layout.d.ts

@@ -1,6 +1,6 @@
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React$1 from 'react';
-import { HTMLAttributes, ReactNode } from 'react';
+import React__default, { HTMLAttributes, ReactNode } from 'react';
 import { HTMLMotionProps } from 'motion/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { b as ScrollAreaProps } from './scroll-area-CVS6HyLl.js';
@@ -861,6 +861,12 @@ interface ToCItem {
     id: string;
     /** Human-readable label shown in the ToC. */
     label: string;
+    /**
+     * Heading level depth (1 for h2, 2 for h3, etc.).
+     * Indents lower-level items visually.
+     * @default 1
+     */
+    depth?: number;
 }
 /**
  * Props for the `TableOfContents` component.
@@ -881,6 +887,11 @@ interface TableOfContentsProps {
      * @default { type: "hover" }
      */
     scrollAreaProps?: Omit<ScrollAreaProps, "children">;
+    /**
+     * Optional ref to the scroll container element (e.g. ScrollArea viewport).
+     * If provided, IntersectionObserver will use this container as its root.
+     */
+    scrollContainerRef?: React__default.RefObject<HTMLElement | null | undefined>;
 }
 /**
  * Table of Contents sidebar component.
@@ -897,9 +908,9 @@ interface TableOfContentsProps {
  * @example
  * ```tsx
  * const toc: ToCItem[] = [
- *   { id: "overview", label: "Overview" },
- *   { id: "props", label: "Props" },
- *   { id: "examples", label: "Examples" },
+ *   { id: "overview", label: "Overview", depth: 1 },
+ *   { id: "props", label: "Props", depth: 2 },
+ *   { id: "examples", label: "Examples", depth: 1 },
  * ];
  *
  * <TableOfContents items={toc} />
@@ -907,7 +918,7 @@ interface TableOfContentsProps {
  *
  * @see https://m3.material.io/foundations/content-design/navigation
  */
-declare function TableOfContents({ items, className, scrollAreaProps, }: TableOfContentsProps): react_jsx_runtime.JSX.Element;
+declare function TableOfContents({ items, className, scrollAreaProps, scrollContainerRef, }: TableOfContentsProps): react_jsx_runtime.JSX.Element;
 
 /**
  * TypeScaleTokens - MD3 Expressive Typography Physical Tokens

package/dist/layout.js

@@ -5883,12 +5883,15 @@ Text.displayName = "Text";
 function TableOfContents({
   items,
   className,
-  scrollAreaProps
+  scrollAreaProps,
+  scrollContainerRef
 }) {
   const [activeId, setActiveId] = React23.useState("");
   const itemIds = React23.useMemo(() => items.map((i) => i.id), [items]);
   React23.useEffect(() => {
+    var _a;
     if (typeof IntersectionObserver === "undefined") return;
+    const root = (_a = scrollContainerRef == null ? void 0 : scrollContainerRef.current) != null ? _a : null;
     const observer = new IntersectionObserver(
       (entries) => {
         for (const entry of entries) {
@@ -5896,19 +5899,20 @@ function TableOfContents({
         }
       },
       // rootMargin: top offset ~100px (fixed header), bottom -80% (early switch)
-      { rootMargin: "-100px 0% -80% 0%" }
+      { root, rootMargin: "-100px 0% -80% 0%" }
     );
     for (const id of itemIds) {
       const el = document.getElementById(id);
       if (el) observer.observe(el);
     }
     return () => observer.disconnect();
-  }, [itemIds]);
+  }, [itemIds, scrollContainerRef]);
   const handleClick = React23.useCallback(
     (e, id) => {
-      var _a;
       e.preventDefault();
-      (_a = document.getElementById(id)) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth", block: "start" });
+      const target = document.getElementById(id);
+      if (!target) return;
+      target.scrollIntoView({ behavior: "smooth", block: "start" });
     },
     []
   );
@@ -5925,19 +5929,35 @@ function TableOfContents({
             type: "hover"
           }, scrollAreaProps), {
             className: cn("flex-1 min-h-0", scrollAreaProps == null ? void 0 : scrollAreaProps.className),
-            children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-4 pr-4", children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
-              "a",
-              {
-                href: `#${item.id}`,
-                onClick: (e) => handleClick(e, item.id),
-                "aria-current": activeId === item.id ? "true" : void 0,
-                className: cn(
-                  "text-sm transition-colors hover:text-m3-primary block",
-                  activeId === item.id ? "text-m3-primary font-bold" : "text-m3-on-surface-variant font-medium"
-                ),
-                children: item.label
-              }
-            ) }, item.id)) })
+            children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2 pr-4", children: items.map((item) => {
+              var _a;
+              const depth = (_a = item.depth) != null ? _a : 1;
+              const isSubItem = depth > 1;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "li",
+                {
+                  className: cn(
+                    isSubItem && "pl-3.5 border-l border-m3-outline-variant/40 ml-1"
+                  ),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "a",
+                    {
+                      href: `#${item.id}`,
+                      onClick: (e) => handleClick(e, item.id),
+                      "aria-current": activeId === item.id ? "true" : void 0,
+                      className: cn(
+                        "transition-colors hover:text-m3-primary block truncate",
+                        isSubItem ? "text-xs py-0.5 leading-relaxed" : "text-sm py-1 font-medium leading-snug",
+                        activeId === item.id ? "text-m3-primary font-bold" : "text-m3-on-surface-variant"
+                      ),
+                      title: item.label,
+                      children: item.label
+                    }
+                  )
+                },
+                item.id
+              );
+            }) })
           })
         )
       ]