@hellboy/ds 0.1.2 → 0.2.7

package/{src/style/components/page-index → dist/components}/page-index.css

@@ -1,25 +1,19 @@
-/* Page Index Component Styles */
+/* src/style/components/page-index/page-index.css */
 .page-index {
   padding: var(--spacing-4);
-  /* background-color: var(--color-bg-1);
-  border-radius: var(--radius-md);
-  border: 1px solid var(--color-bg-3); */
 }
-
 .page-index__title {
   margin: 0 0 var(--spacing-3) 0;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
-  color: var(--color-foreground-5);
+  color: var(--color-foreground-3);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
-
 .page-index__nav {
   overflow-y: auto;
   max-height: calc(100vh - 200px);
 }
-
 .page-index__list {
   list-style: none;
   margin: 0;
@@ -28,40 +22,31 @@
   flex-direction: column;
   gap: var(--spacing-1);
 }
-
 .page-index__item {
   margin: 0;
   padding: 0;
 }
-
 .page-index__item--level-1 {
   margin-top: var(--spacing-2);
 }
-
 .page-index__item--level-1:first-child {
   margin-top: 0;
 }
-
 .page-index__item--level-2 {
   margin-left: var(--spacing-3);
 }
-
 .page-index__item--level-3 {
   margin-left: var(--spacing-6);
 }
-
 .page-index__item--level-4 {
   margin-left: var(--spacing-9);
 }
-
 .page-index__item--level-5 {
   margin-left: var(--spacing-12);
 }
-
 .page-index__item--level-6 {
   margin-left: var(--spacing-15);
 }
-
 .page-index__link {
   width: 100%;
   padding: var(--spacing-1) var(--spacing-2);
@@ -77,43 +62,34 @@
   text-decoration: none;
   line-height: 1.4;
 }
-
 .page-index__link:hover {
   background-color: var(--color-bg-2);
   color: var(--color-foreground-1);
 }
-
 .page-index__link--active {
   background-color: var(--color-primary);
   color: var(--color-on-primary);
   font-weight: var(--font-weight-medium);
 }
-
 .page-index__link--active:hover {
   background-color: var(--color-primary);
   color: var(--color-on-primary);
 }
-
 .page-index__link:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
-
-/* Collapsed state */
 .page-index--collapsed {
   padding: var(--spacing-2);
   width: 48px;
   text-align: center;
 }
-
 .page-index--collapsed .page-index__title {
   display: none;
 }
-
 .page-index--collapsed .page-index__list {
   gap: var(--spacing-1);
 }
-
 .page-index--collapsed .page-index__item--level-2,
 .page-index--collapsed .page-index__item--level-3,
 .page-index--collapsed .page-index__item--level-4,
@@ -121,7 +97,6 @@
 .page-index--collapsed .page-index__item--level-6 {
   margin-left: 0;
 }
-
 .page-index--collapsed .page-index__link {
   padding: var(--spacing-1);
   width: 32px;
@@ -131,28 +106,8 @@
   justify-content: center;
   border-radius: var(--radius-sm);
 }
-
 .page-index--collapsed .page-index__link-text--collapsed {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   text-transform: uppercase;
 }
-
-/* Scrollbar styling */
-.page-index__nav::-webkit-scrollbar {
-  width: 4px;
-}
-
-.page-index__nav::-webkit-scrollbar-track {
-  background: var(--color-bg-2);
-  border-radius: 2px;
-}
-
-.page-index__nav::-webkit-scrollbar-thumb {
-  background: var(--color-bg-3);
-  border-radius: 2px;
-}
-
-.page-index__nav::-webkit-scrollbar-thumb:hover {
-  background: var(--color-foreground-3);
-}

package/dist/components/page-index.d.mts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+interface PageIndexItem {
+    id: string;
+    title: string;
+    level: number;
+    element: HTMLElement;
+}
+interface PageIndexProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Custom title for the index
+     */
+    title?: string;
+    /**
+     * Whether the sidebar is collapsed
+     */
+    collapsed?: boolean;
+    /**
+     * Callback when sidebar width changes (used by Layout component)
+     */
+    onRequestWidthChange?: (width: number) => void;
+}
+declare const PageIndex: React.FC<PageIndexProps>;
+
+export { PageIndex, type PageIndexItem, type PageIndexProps };

package/dist/components/page-index.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+interface PageIndexItem {
+    id: string;
+    title: string;
+    level: number;
+    element: HTMLElement;
+}
+interface PageIndexProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Custom title for the index
+     */
+    title?: string;
+    /**
+     * Whether the sidebar is collapsed
+     */
+    collapsed?: boolean;
+    /**
+     * Callback when sidebar width changes (used by Layout component)
+     */
+    onRequestWidthChange?: (width: number) => void;
+}
+declare const PageIndex: React.FC<PageIndexProps>;
+
+export { PageIndex, type PageIndexItem, type PageIndexProps };

package/dist/components/page-index.js

@@ -0,0 +1,239 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/page-index/index.ts
+var page_index_exports = {};
+__export(page_index_exports, {
+  PageIndex: () => PageIndex
+});
+module.exports = __toCommonJS(page_index_exports);
+
+// src/components/page-index/PageIndex.tsx
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var PageIndex = ({
+  title = "On this page",
+  collapsed = false,
+  className = "",
+  onRequestWidthChange,
+  ...props
+}) => {
+  const [items, setItems] = React.useState([]);
+  const [activeId, setActiveId] = React.useState("");
+  const [manualNavigation, setManualNavigation] = React.useState(false);
+  const getTextContent = React.useCallback((element) => {
+    if (element.tagName.match(/^H[1-6]$/)) {
+      const text = element.textContent || "";
+      return text.replace(/#$/, "").trim();
+    }
+    return element.getAttribute("data-page-index-title") || element.getAttribute("title") || element.textContent || "";
+  }, []);
+  const generateId = React.useCallback((text) => {
+    return text.toLowerCase().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").trim();
+  }, []);
+  const scanPage = React.useCallback(() => {
+    const newItems = [];
+    const seenIds = /* @__PURE__ */ new Set();
+    const pages = document.querySelectorAll("main");
+    pages.forEach((page) => {
+      const pageElement = page;
+      if (pageElement.closest(".page-index")) {
+        return;
+      }
+      const header = pageElement.querySelector("header");
+      if (header) {
+        const headerElement = header;
+        if (!headerElement.closest(".page-index")) {
+          const headerTitle = headerElement.querySelector("h1");
+          if (headerTitle) {
+            const text = getTextContent(headerTitle);
+            if (text.trim()) {
+              const id = headerElement.id || generateId(text);
+              if (!seenIds.has(id)) {
+                seenIds.add(id);
+                if (!headerElement.id) {
+                  headerElement.id = id;
+                }
+                newItems.push({
+                  id,
+                  title: text.trim(),
+                  level: 1,
+                  element: headerElement
+                  // Target the header container, not just the h1
+                });
+              }
+            }
+          }
+        }
+      }
+      const sections = pageElement.querySelectorAll("section");
+      sections.forEach((section) => {
+        const sectionElement = section;
+        if (sectionElement.closest(".page-index")) {
+          return;
+        }
+        const childElements = Array.from(sectionElement.children);
+        const headings = childElements.filter(
+          (child) => child.tagName.match(/^H[1-6]$/)
+        );
+        headings.forEach((element) => {
+          const text = getTextContent(element);
+          if (text.trim()) {
+            if (element.closest('.component-preview, [data-demo], .demo, .example, .drawer, [role="dialog"]')) {
+              return;
+            }
+            const id = element.id || generateId(text);
+            if (seenIds.has(id)) {
+              return;
+            }
+            seenIds.add(id);
+            if (!element.id) {
+              element.id = id;
+            }
+            const tagName = element.tagName.toLowerCase();
+            const level = parseInt(tagName.substring(1));
+            newItems.push({
+              id,
+              title: text.trim(),
+              level,
+              element
+            });
+          }
+        });
+      });
+    });
+    newItems.sort((a, b) => {
+      const aRect = a.element.getBoundingClientRect();
+      const bRect = b.element.getBoundingClientRect();
+      return aRect.top - bRect.top;
+    });
+    setItems(newItems);
+  }, [getTextContent, generateId]);
+  React.useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (manualNavigation) return;
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id);
+          }
+        });
+      },
+      {
+        rootMargin: "-80px 0px -80% 0px",
+        threshold: 0
+      }
+    );
+    items.forEach((item) => {
+      observer.observe(item.element);
+    });
+    return () => {
+      items.forEach((item) => {
+        observer.unobserve(item.element);
+      });
+    };
+  }, [items, manualNavigation]);
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      scanPage();
+    }, 100);
+    const handleLocationChange = () => {
+      setTimeout(() => {
+        scanPage();
+      }, 150);
+    };
+    window.addEventListener("popstate", handleLocationChange);
+    window.addEventListener("locationchange", handleLocationChange);
+    const observer = new MutationObserver(() => {
+      clearTimeout(timer);
+      setTimeout(() => {
+        scanPage();
+      }, 200);
+    });
+    const mainContent = document.querySelector("main") || document.body;
+    observer.observe(mainContent, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["data-section-title", "id"]
+    });
+    return () => {
+      clearTimeout(timer);
+      window.removeEventListener("popstate", handleLocationChange);
+      window.removeEventListener("locationchange", handleLocationChange);
+      observer.disconnect();
+    };
+  }, [scanPage]);
+  const handleItemClick = React.useCallback((id) => {
+    const element = document.getElementById(id);
+    if (element) {
+      setManualNavigation(true);
+      setActiveId(id);
+      element.scrollIntoView({
+        behavior: "smooth",
+        block: "start"
+      });
+      setTimeout(() => {
+        setManualNavigation(false);
+      }, 1e3);
+    }
+  }, []);
+  const classes = [
+    "page-index",
+    collapsed && "page-index--collapsed",
+    className
+  ].filter(Boolean).join(" ");
+  if (items.length === 0) {
+    return null;
+  }
+  const { sidebarWidth, setSidebarWidth, ...domProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: classes, ...domProps, children: [
+    !collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "page-index__title", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: "page-index__nav scrollable", "aria-label": "Page contents", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "page-index__list", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "li",
+      {
+        className: `page-index__item page-index__item--level-${item.level}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            className: `page-index__link ${activeId === item.id ? "page-index__link--active" : ""}`,
+            onClick: () => handleItemClick(item.id),
+            "aria-current": activeId === item.id ? "location" : void 0,
+            children: collapsed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "page-index__link-text--collapsed", children: item.title.charAt(0) }) : item.title
+          }
+        )
+      },
+      item.id
+    )) }) })
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PageIndex
+});

package/dist/components/page-index.mjs

@@ -0,0 +1,202 @@
+// src/components/page-index/PageIndex.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PageIndex = ({
+  title = "On this page",
+  collapsed = false,
+  className = "",
+  onRequestWidthChange,
+  ...props
+}) => {
+  const [items, setItems] = React.useState([]);
+  const [activeId, setActiveId] = React.useState("");
+  const [manualNavigation, setManualNavigation] = React.useState(false);
+  const getTextContent = React.useCallback((element) => {
+    if (element.tagName.match(/^H[1-6]$/)) {
+      const text = element.textContent || "";
+      return text.replace(/#$/, "").trim();
+    }
+    return element.getAttribute("data-page-index-title") || element.getAttribute("title") || element.textContent || "";
+  }, []);
+  const generateId = React.useCallback((text) => {
+    return text.toLowerCase().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").trim();
+  }, []);
+  const scanPage = React.useCallback(() => {
+    const newItems = [];
+    const seenIds = /* @__PURE__ */ new Set();
+    const pages = document.querySelectorAll("main");
+    pages.forEach((page) => {
+      const pageElement = page;
+      if (pageElement.closest(".page-index")) {
+        return;
+      }
+      const header = pageElement.querySelector("header");
+      if (header) {
+        const headerElement = header;
+        if (!headerElement.closest(".page-index")) {
+          const headerTitle = headerElement.querySelector("h1");
+          if (headerTitle) {
+            const text = getTextContent(headerTitle);
+            if (text.trim()) {
+              const id = headerElement.id || generateId(text);
+              if (!seenIds.has(id)) {
+                seenIds.add(id);
+                if (!headerElement.id) {
+                  headerElement.id = id;
+                }
+                newItems.push({
+                  id,
+                  title: text.trim(),
+                  level: 1,
+                  element: headerElement
+                  // Target the header container, not just the h1
+                });
+              }
+            }
+          }
+        }
+      }
+      const sections = pageElement.querySelectorAll("section");
+      sections.forEach((section) => {
+        const sectionElement = section;
+        if (sectionElement.closest(".page-index")) {
+          return;
+        }
+        const childElements = Array.from(sectionElement.children);
+        const headings = childElements.filter(
+          (child) => child.tagName.match(/^H[1-6]$/)
+        );
+        headings.forEach((element) => {
+          const text = getTextContent(element);
+          if (text.trim()) {
+            if (element.closest('.component-preview, [data-demo], .demo, .example, .drawer, [role="dialog"]')) {
+              return;
+            }
+            const id = element.id || generateId(text);
+            if (seenIds.has(id)) {
+              return;
+            }
+            seenIds.add(id);
+            if (!element.id) {
+              element.id = id;
+            }
+            const tagName = element.tagName.toLowerCase();
+            const level = parseInt(tagName.substring(1));
+            newItems.push({
+              id,
+              title: text.trim(),
+              level,
+              element
+            });
+          }
+        });
+      });
+    });
+    newItems.sort((a, b) => {
+      const aRect = a.element.getBoundingClientRect();
+      const bRect = b.element.getBoundingClientRect();
+      return aRect.top - bRect.top;
+    });
+    setItems(newItems);
+  }, [getTextContent, generateId]);
+  React.useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (manualNavigation) return;
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id);
+          }
+        });
+      },
+      {
+        rootMargin: "-80px 0px -80% 0px",
+        threshold: 0
+      }
+    );
+    items.forEach((item) => {
+      observer.observe(item.element);
+    });
+    return () => {
+      items.forEach((item) => {
+        observer.unobserve(item.element);
+      });
+    };
+  }, [items, manualNavigation]);
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      scanPage();
+    }, 100);
+    const handleLocationChange = () => {
+      setTimeout(() => {
+        scanPage();
+      }, 150);
+    };
+    window.addEventListener("popstate", handleLocationChange);
+    window.addEventListener("locationchange", handleLocationChange);
+    const observer = new MutationObserver(() => {
+      clearTimeout(timer);
+      setTimeout(() => {
+        scanPage();
+      }, 200);
+    });
+    const mainContent = document.querySelector("main") || document.body;
+    observer.observe(mainContent, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["data-section-title", "id"]
+    });
+    return () => {
+      clearTimeout(timer);
+      window.removeEventListener("popstate", handleLocationChange);
+      window.removeEventListener("locationchange", handleLocationChange);
+      observer.disconnect();
+    };
+  }, [scanPage]);
+  const handleItemClick = React.useCallback((id) => {
+    const element = document.getElementById(id);
+    if (element) {
+      setManualNavigation(true);
+      setActiveId(id);
+      element.scrollIntoView({
+        behavior: "smooth",
+        block: "start"
+      });
+      setTimeout(() => {
+        setManualNavigation(false);
+      }, 1e3);
+    }
+  }, []);
+  const classes = [
+    "page-index",
+    collapsed && "page-index--collapsed",
+    className
+  ].filter(Boolean).join(" ");
+  if (items.length === 0) {
+    return null;
+  }
+  const { sidebarWidth, setSidebarWidth, ...domProps } = props;
+  return /* @__PURE__ */ jsxs("div", { className: classes, ...domProps, children: [
+    !collapsed && /* @__PURE__ */ jsx("h3", { className: "page-index__title", children: title }),
+    /* @__PURE__ */ jsx("nav", { className: "page-index__nav scrollable", "aria-label": "Page contents", children: /* @__PURE__ */ jsx("ul", { className: "page-index__list", children: items.map((item) => /* @__PURE__ */ jsx(
+      "li",
+      {
+        className: `page-index__item page-index__item--level-${item.level}`,
+        children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: `page-index__link ${activeId === item.id ? "page-index__link--active" : ""}`,
+            onClick: () => handleItemClick(item.id),
+            "aria-current": activeId === item.id ? "location" : void 0,
+            children: collapsed ? /* @__PURE__ */ jsx("span", { className: "page-index__link-text--collapsed", children: item.title.charAt(0) }) : item.title
+          }
+        )
+      },
+      item.id
+    )) }) })
+  ] });
+};
+export {
+  PageIndex
+};

package/{src/style/components/page → dist/components}/page.css

@@ -1,45 +1,34 @@
-/* Page Component Styles */
-
+/* src/style/components/page/page.css */
 .page {
   width: 100%;
   margin: 0 auto;
-  padding: var(--spacing-6) var(--spacing-4);
+  padding: 0;
 }
-
-/* Width Variants */
 .page--full {
   max-width: none;
   padding: 0;
 }
-
 .page--wide {
   max-width: 1400px;
 }
-
 .page--medium {
   max-width: 1200px;
 }
-
 .page--narrow {
   max-width: 800px;
 }
-
-/* Responsive Padding */
 @media (min-width: 768px) {
   .page {
-    padding: var(--spacing-8) var(--spacing-6);
+    padding: 0;
   }
-
   .page--full {
     padding: 0;
   }
 }
-
 @media (min-width: 1024px) {
   .page {
-    padding: var(--spacing-10) var(--spacing-8);
+    padding: 0;
   }
-
   .page--full {
     padding: 0;
   }