@hellboy/ds 0.1.2

package/src/components/page-index/PageIndex.tsx

@@ -0,0 +1,275 @@
+import * as React from "react";
+import "../../style/components/page-index/page-index.css";
+
+export interface PageIndexItem {
+  id: string;
+  title: string;
+  level: number;
+  element: HTMLElement;
+}
+
+export interface PageIndexProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Custom title for the index
+   */
+  title?: string;
+  /**
+   * Whether the sidebar is collapsed
+   */
+  collapsed?: boolean;
+}
+
+export const PageIndex: React.FC<PageIndexProps> = ({
+  title = "On this page",
+  collapsed = false,
+  className = "",
+  ...props
+}) => {
+  const [items, setItems] = React.useState<PageIndexItem[]>([]);
+  const [activeId, setActiveId] = React.useState<string>("");
+  const [manualNavigation, setManualNavigation] = React.useState<boolean>(false);
+
+  // Function to extract text content from element
+  const getTextContent = React.useCallback((element: HTMLElement): string => {
+    // For headings, get text content
+    if (element.tagName.match(/^H[1-6]$/)) {
+      return element.textContent || "";
+    }
+    // For other elements, try to find a title attribute or data attribute
+    return element.getAttribute("data-page-index-title") ||
+           element.getAttribute("title") ||
+           element.textContent ||
+           "";
+  }, []);
+
+  // Function to generate ID from text
+  const generateId = React.useCallback((text: string): string => {
+    return text
+      .toLowerCase()
+      .replace(/[^\w\s-]/g, "") // Remove special characters
+      .replace(/\s+/g, "-") // Replace spaces with hyphens
+      .replace(/-+/g, "-") // Replace multiple hyphens with single
+      .trim();
+  }, []);
+
+  // Scan the page for headings that are direct children of sections within pages
+  const scanPage = React.useCallback(() => {
+    const newItems: PageIndexItem[] = [];
+    const seenIds = new Set<string>(); // Track seen IDs to prevent duplicates
+
+    // Find all pages (main elements) and their sections
+    const pages = document.querySelectorAll('main');
+    pages.forEach((page) => {
+      const pageElement = page as HTMLElement;
+
+      // Skip pages that are inside the page-index component
+      if (pageElement.closest('.page-index')) {
+        return;
+      }
+
+      // Find all sections within this page
+      const sections = pageElement.querySelectorAll('section');
+      sections.forEach((section) => {
+        const sectionElement = section as HTMLElement;
+
+        // Skip sections that are inside the page-index component
+        if (sectionElement.closest('.page-index')) {
+          return;
+        }
+
+        // Find direct child headings (h1, h2, h3, h4, h5, h6) of this section
+        // Using Array.from and filtering for better browser compatibility
+        const childElements = Array.from(sectionElement.children);
+        const headings = childElements.filter(child =>
+          child.tagName.match(/^H[1-6]$/)
+        ) as HTMLElement[];
+
+        headings.forEach((element) => {
+          const text = getTextContent(element);
+          if (text.trim()) {
+            // Skip headings inside component previews, demo containers, or dialogs/drawers
+            if (element.closest('.component-preview, [data-demo], .demo, .example, .drawer, [role="dialog"]')) {
+              return;
+            }
+
+            const id = element.id || generateId(text);
+            
+            // Skip if we've already seen this ID (prevent duplicates)
+            if (seenIds.has(id)) {
+              return;
+            }
+            seenIds.add(id);
+
+            // Ensure the element has an ID
+            if (!element.id) {
+              element.id = id;
+            }
+
+            // Determine level based on heading tag
+            const tagName = element.tagName.toLowerCase();
+            const level = parseInt(tagName.substring(1)); // h1 -> 1, h2 -> 2, etc.
+
+            newItems.push({
+              id,
+              title: text.trim(),
+              level,
+              element,
+            });
+          }
+        });
+      });
+    });
+
+    // Sort items by their position in the document
+    newItems.sort((a, b) => {
+      const aRect = a.element.getBoundingClientRect();
+      const bRect = b.element.getBoundingClientRect();
+      return aRect.top - bRect.top;
+    });
+
+    setItems(newItems);
+  }, [getTextContent, generateId]);
+
+  // Set up intersection observer to track active section
+  React.useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        // Skip intersection updates during manual navigation
+        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]);
+
+  // Scan page on mount and when dependencies change
+  React.useEffect(() => {
+    // Small delay to ensure DOM is ready
+    const timer = setTimeout(() => {
+      scanPage();
+    }, 100);
+
+    // Also re-scan when URL changes (for SPA navigation)
+    const handleLocationChange = () => {
+      setTimeout(() => {
+        scanPage();
+      }, 150); // Slightly longer delay for route transitions
+    };
+
+    // Listen for popstate (browser back/forward)
+    window.addEventListener('popstate', handleLocationChange);
+    
+    // Listen for custom navigation events
+    window.addEventListener('locationchange', handleLocationChange);
+
+    // MutationObserver to detect DOM changes
+    const observer = new MutationObserver(() => {
+      // Debounce the scan to avoid too many re-scans
+      clearTimeout(timer);
+      setTimeout(() => {
+        scanPage();
+      }, 200);
+    });
+
+    // Observe changes to the main content area
+    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]);
+
+  // Handle click on index item
+  const handleItemClick = React.useCallback((id: string) => {
+    const element = document.getElementById(id);
+    if (element) {
+      // Set manual navigation flag to prevent intersection observer interference
+      setManualNavigation(true);
+      setActiveId(id);
+
+      element.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+      });
+
+      // Reset manual navigation flag after scroll animation completes
+      setTimeout(() => {
+        setManualNavigation(false);
+      }, 1000); // 1 second should be enough for smooth scroll
+    }
+  }, []);
+
+  const classes = [
+    "page-index",
+    collapsed && "page-index--collapsed",
+    className,
+  ].filter(Boolean).join(" ");
+
+  if (items.length === 0) {
+    return null;
+  }
+
+  // Remove custom props that shouldn't be passed to DOM
+  const { sidebarWidth, setSidebarWidth, ...domProps } = props as any;
+
+  return (
+    <div className={classes} {...domProps}>
+      {!collapsed && (
+        <h3 className="page-index__title">{title}</h3>
+      )}
+      <nav className="page-index__nav" aria-label="Page contents">
+        <ul className="page-index__list">
+          {items.map((item) => (
+            <li
+              key={item.id}
+              className={`page-index__item page-index__item--level-${item.level}`}
+            >
+              <button
+                className={`page-index__link ${
+                  activeId === item.id ? "page-index__link--active" : ""
+                }`}
+                onClick={() => handleItemClick(item.id)}
+                aria-current={activeId === item.id ? "location" : undefined}
+              >
+                {collapsed ? (
+                  <span className="page-index__link-text--collapsed">
+                    {item.title.charAt(0)}
+                  </span>
+                ) : (
+                  item.title
+                )}
+              </button>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </div>
+  );
+};

package/src/components/page-index/index.ts

@@ -0,0 +1 @@
+export * from "./PageIndex";

package/src/components/popover/index.ts

@@ -0,0 +1 @@
+export { Popover, type PopoverProps } from './popover';

package/src/components/popover/popover.tsx

@@ -0,0 +1,199 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import "../../style/components/popover/popover.css";
+
+export interface PopoverProps {
+  trigger: React.ReactNode;
+  children: React.ReactNode;
+  isOpen?: boolean;
+  onToggle?: () => void;
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+type ResolvedPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+export const Popover: React.FC<PopoverProps> = ({
+  trigger,
+  children,
+  isOpen = false,
+  onToggle,
+  placement = 'bottom'
+}) => {
+  const [internalOpen, setInternalOpen] = React.useState(false);
+  const triggerRef = React.useRef<HTMLDivElement>(null);
+  const popoverRef = React.useRef<HTMLDivElement>(null);
+  const [popoverStyle, setPopoverStyle] = React.useState<React.CSSProperties>({});
+  const [resolvedPlacement, setResolvedPlacement] = React.useState<ResolvedPlacement>(placement);
+
+  const open = isOpen !== undefined ? isOpen : internalOpen;
+  const toggle = onToggle || (() => setInternalOpen(!internalOpen));
+
+  // Fecha ao clicar fora
+  React.useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        triggerRef.current &&
+        !triggerRef.current.contains(event.target as Node) &&
+        popoverRef.current &&
+        !popoverRef.current.contains(event.target as Node)
+      ) {
+        if (onToggle) {
+          onToggle();
+        } else {
+          setInternalOpen(false);
+        }
+      }
+    };
+
+    if (open) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [open, onToggle]);
+
+  // Calcula posição com ajuste automático baseado no espaço disponível
+  React.useEffect(() => {
+    if (!open || !triggerRef.current || !popoverRef.current) {
+      return;
+    }
+
+    const updatePosition = () => {
+      if (!triggerRef.current || !popoverRef.current) {
+        return;
+      }
+
+      const triggerRect = triggerRef.current.getBoundingClientRect();
+      const popoverRect = popoverRef.current.getBoundingClientRect();
+      const gap = 8;
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      // Calcula espaço disponível em cada direção
+      const spaceTop = triggerRect.top;
+      const spaceBottom = viewportHeight - triggerRect.bottom;
+      const spaceLeft = triggerRect.left;
+      const spaceRight = viewportWidth - triggerRect.right;
+
+      // Determina o melhor placement baseado no espaço disponível
+      let finalPlacement: ResolvedPlacement = placement as ResolvedPlacement;
+
+      if (placement === 'right' && spaceRight < popoverRect.width + gap) {
+        finalPlacement = spaceLeft >= popoverRect.width + gap ? 'left' : 'bottom';
+      } else if (placement === 'left' && spaceLeft < popoverRect.width + gap) {
+        finalPlacement = spaceRight >= popoverRect.width + gap ? 'right' : 'bottom';
+      } else if (placement === 'bottom' && spaceBottom < popoverRect.height + gap) {
+        finalPlacement = spaceTop >= popoverRect.height + gap ? 'top' : 'bottom';
+      } else if (placement === 'top' && spaceTop < popoverRect.height + gap) {
+        finalPlacement = spaceBottom >= popoverRect.height + gap ? 'bottom' : 'top';
+      }
+
+      setResolvedPlacement(finalPlacement);
+
+      const newStyle: React.CSSProperties = {
+        position: 'fixed',
+        zIndex: 9999,
+        opacity: 1,
+        visibility: 'visible',
+        pointerEvents: 'auto',
+      };
+
+      // Calcula posição baseada no placement final
+      switch (finalPlacement) {
+        case 'right':
+          newStyle.top = triggerRect.top;
+          newStyle.left = triggerRect.right + gap;
+          break;
+        case 'left':
+          newStyle.top = triggerRect.top;
+          newStyle.left = triggerRect.left - popoverRect.width - gap;
+          break;
+        case 'top':
+          newStyle.top = triggerRect.top - popoverRect.height - gap;
+          newStyle.left = triggerRect.left;
+          break;
+        case 'bottom':
+        default:
+          newStyle.top = triggerRect.bottom + gap;
+          newStyle.left = triggerRect.left;
+      }
+
+      // Ajuste para não sair da viewport horizontalmente
+      if (typeof newStyle.left === 'number') {
+        if (newStyle.left + popoverRect.width > viewportWidth - gap) {
+          newStyle.left = viewportWidth - popoverRect.width - gap;
+        }
+        if (newStyle.left < gap) {
+          newStyle.left = gap;
+        }
+      }
+
+      // Ajuste para não sair da viewport verticalmente
+      if (typeof newStyle.top === 'number') {
+        if (newStyle.top + popoverRect.height > viewportHeight - gap) {
+          newStyle.top = viewportHeight - popoverRect.height - gap;
+        }
+        if (newStyle.top < gap) {
+          newStyle.top = gap;
+        }
+      }
+
+      setPopoverStyle(newStyle);
+    };
+
+    // Usa requestAnimationFrame para garantir que o popover foi renderizado
+    requestAnimationFrame(updatePosition);
+
+    window.addEventListener('resize', updatePosition);
+    window.addEventListener('scroll', updatePosition, true);
+
+    return () => {
+      window.removeEventListener('resize', updatePosition);
+      window.removeEventListener('scroll', updatePosition, true);
+    };
+  }, [open, placement]);
+
+  const handleTriggerClick = () => {
+    toggle();
+  };
+
+  return (
+    <>
+      <div 
+        ref={triggerRef} 
+        onClick={handleTriggerClick} 
+        style={{ display: 'inline-block', position: 'relative' }}
+      >
+        {React.isValidElement(trigger) 
+          ? React.cloneElement(trigger as React.ReactElement, { 
+              onClick: (e: React.MouseEvent) => {
+                e.stopPropagation();
+                handleTriggerClick();
+                (trigger as React.ReactElement).props?.onClick?.(e);
+              }
+            })
+          : trigger}
+      </div>
+      {open &&
+        ReactDOM.createPortal(
+          <div
+            ref={popoverRef}
+            className={`popover popover--${resolvedPlacement}`}
+            style={{
+              ...popoverStyle,
+              // Start with opacity 0 and visibility hidden to prevent initial flash
+              opacity: popoverStyle.top !== undefined ? 1 : 0,
+              visibility: popoverStyle.top !== undefined ? 'visible' : 'hidden',
+            }}
+          >
+            <div className="popover__content">
+              {children}
+            </div>
+          </div>,
+          document.body
+        )}
+    </>
+  );
+};

package/src/components/radio/Radio.tsx

@@ -0,0 +1,176 @@
+import React from 'react';
+import { Radio as AriakitRadio, RadioProps as AriakitRadioProps, RadioGroup as AriakitRadioGroup, RadioGroupProps as AriakitRadioGroupProps, useRadioStore } from '@ariakit/react';
+
+export type RadioSize = 'sm' | 'md' | 'lg';
+
+export interface RadioProps extends Omit<AriakitRadioProps, 'children' | 'size'> {
+  /**
+   * Size of the radio button
+   * @default 'md'
+   */
+  size?: RadioSize;
+
+  /**
+   * Label text for the radio button
+   */
+  label?: React.ReactNode;
+
+  /**
+   * Error state
+   */
+  error?: boolean;
+}
+
+export interface RadioGroupProps extends Omit<AriakitRadioGroupProps, 'onChange'> {
+  /**
+   * Size of all radio buttons in the group
+   * @default 'md'
+   */
+  size?: RadioSize;
+
+  /**
+   * Label for the radio group
+   */
+  label?: string;
+
+  /**
+   * Error message to display below the radio group
+   */
+  error?: string;
+
+  /**
+   * Helper text to display below the radio group
+   */
+  helperText?: string;
+
+  /**
+   * Children (Radio components)
+   */
+  children: React.ReactNode;
+
+  /**
+   * Orientation of the radio group
+   * @default 'vertical'
+   */
+  orientation?: 'horizontal' | 'vertical';
+
+  /**
+   * The value of the selected radio button
+   */
+  value?: string | number | null;
+
+  /**
+   * Callback when the selected value changes
+   */
+  onChange?: (value: string | number | null) => void;
+}
+
+export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
+  (
+    {
+      size = 'md',
+      label,
+      error = false,
+      disabled = false,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const radioClasses = [
+      'radio',
+      `radio--${size}`,
+      error && 'radio--error',
+      disabled && 'radio--disabled',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    return (
+      <label className={radioClasses}>
+        <AriakitRadio
+          ref={ref}
+          disabled={disabled}
+          className="radio__input"
+          {...props}
+        />
+        <span className="radio__box">
+          <span className="radio__dot" />
+        </span>
+        {label && <span className="radio__label">{label}</span>}
+      </label>
+    );
+  }
+);
+
+Radio.displayName = 'Radio';
+
+export const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
+  (
+    {
+      size = 'md',
+      label,
+      error,
+      helperText,
+      children,
+      orientation = 'vertical',
+      disabled = false,
+      className,
+      value,
+      onChange,
+      ...props
+    },
+    ref
+  ) => {
+    const groupClasses = [
+      'radio-group',
+      `radio-group--${orientation}`,
+      error && 'radio-group--error',
+      disabled && 'radio-group--disabled',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    // Create radio group store
+    const radioGroupStore = useRadioStore({
+      value,
+      setValue: onChange,
+    });
+
+    // Pass size down to children
+    const childrenWithProps = React.Children.map(children, (child) => {
+      if (React.isValidElement(child) && child.type === Radio) {
+        return React.cloneElement(child, {
+          size: child.props.size || size,
+          error: error ? true : child.props.error,
+          disabled: disabled || child.props.disabled,
+        } as any);
+      }
+      return child;
+    });
+
+    return (
+      <div className={groupClasses}>
+        {label && <div className="radio-group__label">{label}</div>}
+        <AriakitRadioGroup
+          ref={ref}
+          store={radioGroupStore}
+          className="radio-group__container"
+          {...props}
+        >
+          {childrenWithProps}
+        </AriakitRadioGroup>
+        {(error || helperText) && (
+          <div className="radio-group__feedback">
+            {error && <span className="radio-group__error-text">{error}</span>}
+            {!error && helperText && <span className="radio-group__helper-text">{helperText}</span>}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+RadioGroup.displayName = 'RadioGroup';

package/src/components/radio/index.ts

@@ -0,0 +1 @@
+export * from './Radio';

package/src/components/section/index.ts

@@ -0,0 +1 @@
+export { Section, type SectionProps, type SectionSize } from './section';