@hellboy/ds 0.1.2

package/src/components/table/Table.tsx

@@ -0,0 +1,147 @@
+import * as React from "react";
+import "../../style/components/table/table.css";
+
+export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+  /**
+   * Whether the table should have a border
+   */
+  bordered?: boolean;
+  /**
+   * Whether the table should have striped rows
+   */
+  striped?: boolean;
+  /**
+   * Whether the table should have hover effects
+   */
+  hover?: boolean;
+  /**
+   * Size variant for the table
+   */
+  size?: "sm" | "md" | "lg";
+}
+
+export interface TableHeadProps extends React.HTMLAttributes<HTMLTableSectionElement> {}
+
+export interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {}
+
+export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {}
+
+export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+  /**
+   * Whether this is a header cell
+   */
+  header?: boolean;
+}
+
+export interface TableContainerProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const Table: React.FC<TableProps> = ({
+  bordered = false,
+  striped = true,
+  hover = true,
+  size = "md",
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = [
+    "table",
+    bordered && "table--bordered",
+    striped && "table--striped",
+    hover && "table--hover",
+    size && `table--${size}`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <table className={classes} {...props}>
+      {children}
+    </table>
+  );
+};
+
+export const TableHead: React.FC<TableHeadProps> = ({
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = ["table__head", className].filter(Boolean).join(" ");
+
+  return (
+    <thead className={classes} {...props}>
+      {children}
+    </thead>
+  );
+};
+
+export const TableBody: React.FC<TableBodyProps> = ({
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = ["table__body", className].filter(Boolean).join(" ");
+
+  return (
+    <tbody className={classes} {...props}>
+      {children}
+    </tbody>
+  );
+};
+
+export const TableRow: React.FC<TableRowProps> = ({
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = ["table__row", className].filter(Boolean).join(" ");
+
+  return (
+    <tr className={classes} {...props}>
+      {children}
+    </tr>
+  );
+};
+
+export const TableCell: React.FC<TableCellProps> = ({
+  header = false,
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = [
+    header ? "table__cell--header" : "table__cell",
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  if (header) {
+    return (
+      <th className={classes} {...props}>
+        {children}
+      </th>
+    );
+  }
+
+  return (
+    <td className={classes} {...props}>
+      {children}
+    </td>
+  );
+};
+
+export const TableContainer: React.FC<TableContainerProps> = ({
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = ["table-container", className].filter(Boolean).join(" ");
+
+  return (
+    <div className={classes} {...props}>
+      {children}
+    </div>
+  );
+};

package/src/components/table/index.ts

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

package/src/components/theme-control/index.ts

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

package/src/components/theme-control/theme-control.tsx

@@ -0,0 +1,78 @@
+import * as React from "react";
+import { getSavedTheme, setTheme } from "../../utils/theme";
+import "../../style/components/theme-control/theme-control.css";
+
+type Theme = 'light' | 'dark';
+
+interface ThemeOption {
+  value: Theme;
+  label: string;
+  icon: React.ReactNode;
+}
+
+const themeOptions: ThemeOption[] = [
+  {
+    value: 'light',
+    label: 'Light',
+    icon: (
+      <svg className="theme-control__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <circle cx="12" cy="12" r="5"/>
+        <line x1="12" y1="1" x2="12" y2="3"/>
+        <line x1="12" y1="21" x2="12" y2="23"/>
+        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
+        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+        <line x1="1" y1="12" x2="3" y2="12"/>
+        <line x1="21" y1="12" x2="23" y2="12"/>
+        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
+        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+      </svg>
+    ),
+  },
+  {
+    value: 'dark',
+    label: 'Dark',
+    icon: (
+      <svg className="theme-control__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+      </svg>
+    ),
+  },
+];
+
+export interface ThemeControlProps {
+  onThemeChange?: (theme: Theme) => void;
+}
+
+export const ThemeControl: React.FC<ThemeControlProps> = ({ onThemeChange }) => {
+  const [currentTheme, setCurrentTheme] = React.useState<Theme>(() => {
+    // Get initial theme from localStorage or default to light
+    return getSavedTheme();
+  });
+
+  React.useEffect(() => {
+    // Apply theme to document and save to localStorage
+    setTheme(currentTheme);
+    onThemeChange?.(currentTheme);
+  }, [currentTheme, onThemeChange]);
+
+  const handleThemeSelect = (theme: Theme) => {
+    setCurrentTheme(theme);
+  };
+
+  return (
+    <div className="theme-control">
+      {themeOptions.map((option) => (
+        <div
+          key={option.value}
+          className={`theme-control__option ${
+            currentTheme === option.value ? 'theme-control__option--active' : ''
+          }`}
+          onClick={() => handleThemeSelect(option.value)}
+        >
+          {option.icon}
+          <span>{option.label}</span>
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/components/tooltip/index.ts

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

package/src/components/tooltip/tooltip.tsx

@@ -0,0 +1,207 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import "../../style/components/tooltip/tooltip.css";
+
+export interface TooltipProps {
+  content: React.ReactNode;
+  children: React.ReactNode;
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+  delay?: number;
+  disabled?: boolean;
+}
+
+type ResolvedPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+export const Tooltip: React.FC<TooltipProps> = ({
+  content,
+  children,
+  placement = 'top',
+  delay = 0,
+  disabled = false
+}) => {
+  const [isVisible, setIsVisible] = React.useState(false);
+  const [tooltipStyle, setTooltipStyle] = React.useState<React.CSSProperties>({});
+  const [resolvedPlacement, setResolvedPlacement] = React.useState<ResolvedPlacement>(placement);
+
+  const triggerRef = React.useRef<HTMLDivElement>(null);
+  const tooltipRef = React.useRef<HTMLDivElement>(null);
+  const timeoutRef = React.useRef<number>();
+
+  // Calcula posição com ajuste automático baseado no espaço disponível
+  React.useEffect(() => {
+    if (!isVisible || !triggerRef.current || !tooltipRef.current) {
+      return;
+    }
+
+    const updatePosition = () => {
+      if (!triggerRef.current || !tooltipRef.current) {
+        console.log('Tooltip refs not ready:', { trigger: !!triggerRef.current, tooltip: !!tooltipRef.current });
+        return;
+      }
+
+      const triggerRect = triggerRef.current.getBoundingClientRect();
+      const tooltipRect = tooltipRef.current.getBoundingClientRect();
+      
+      // Verifica se o tooltip tem dimensões válidas
+      if (tooltipRect.width === 0 || tooltipRect.height === 0) {
+        // Tenta novamente após um pequeno delay
+        setTimeout(updatePosition, 10);
+        return;
+      }
+      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 < tooltipRect.width + gap) {
+        finalPlacement = spaceLeft >= tooltipRect.width + gap ? 'left' : 'bottom';
+      } else if (placement === 'left' && spaceLeft < tooltipRect.width + gap) {
+        finalPlacement = spaceRight >= tooltipRect.width + gap ? 'right' : 'bottom';
+      } else if (placement === 'bottom' && spaceBottom < tooltipRect.height + gap) {
+        finalPlacement = spaceTop >= tooltipRect.height + gap ? 'top' : 'bottom';
+      } else if (placement === 'top' && spaceTop < tooltipRect.height + gap) {
+        finalPlacement = spaceBottom >= tooltipRect.height + gap ? 'bottom' : 'top';
+      }
+
+      setResolvedPlacement(finalPlacement);
+
+      const newStyle: React.CSSProperties = {
+        position: 'fixed',
+        zIndex: 10000,
+        opacity: 1,
+        visibility: 'visible',
+        pointerEvents: 'auto',
+      };
+
+      // Calcula posição baseada no placement final
+      switch (finalPlacement) {
+        case 'right':
+          newStyle.top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+          newStyle.left = triggerRect.right + gap;
+          break;
+        case 'left':
+          newStyle.top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+          newStyle.left = triggerRect.left - tooltipRect.width - gap;
+          break;
+        case 'top':
+          newStyle.top = triggerRect.top - tooltipRect.height - gap;
+          newStyle.left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+          break;
+        case 'bottom':
+        default:
+          newStyle.top = triggerRect.bottom + gap;
+          newStyle.left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+      }
+
+      // Ajuste para não sair da viewport horizontalmente
+      if (newStyle.left! < 0) {
+        newStyle.left = 0;
+      } else if (newStyle.left! + tooltipRect.width > viewportWidth) {
+        newStyle.left = viewportWidth - tooltipRect.width;
+      }
+
+      // Ajuste para não sair da viewport verticalmente
+      if (newStyle.top! < 0) {
+        newStyle.top = 0;
+      } else if (newStyle.top! + tooltipRect.height > viewportHeight) {
+        newStyle.top = viewportHeight - tooltipRect.height;
+      }
+
+      setTooltipStyle(newStyle);
+      console.log('Calculated position:', newStyle);
+    };
+
+    console.log('Tooltip isVisible:', isVisible, 'tooltipStyle:', tooltipStyle);
+
+    // Usa requestAnimationFrame para garantir que o tooltip foi renderizado
+    requestAnimationFrame(updatePosition);
+
+    window.addEventListener('resize', updatePosition);
+    window.addEventListener('scroll', updatePosition, true);
+
+    return () => {
+      window.removeEventListener('resize', updatePosition);
+      window.removeEventListener('scroll', updatePosition, true);
+    };
+  }, [isVisible, placement]);
+
+  const handleMouseEnter = () => {
+    if (disabled) return;
+    console.log('Tooltip mouse enter');
+    
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      console.log('Tooltip setting visible');
+      setIsVisible(true);
+    }, delay);
+  };
+
+  const handleMouseLeave = () => {
+    console.log('Tooltip mouse leave');
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      console.log('Tooltip setting invisible');
+      setIsVisible(false);
+    }, 150); // Delay menor para esconder
+  };
+
+  const handleClick = () => {
+    // Ocultar tooltip imediatamente quando clicar
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setIsVisible(false);
+  };
+
+  return (
+    <>
+      <div
+        ref={triggerRef}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        onClick={handleClick}
+        style={{ display: 'inline-block' }}
+      >
+        {children}
+      </div>
+      {isVisible && !disabled &&
+        ReactDOM.createPortal(
+          <div
+            ref={tooltipRef}
+            className={`tooltip tooltip--${resolvedPlacement}`}
+            style={{
+              ...tooltipStyle,
+              // Start with opacity 0 and visibility hidden to prevent initial flash
+              opacity: tooltipStyle.top !== undefined ? 1 : 0,
+              visibility: tooltipStyle.top !== undefined ? 'visible' : 'hidden',
+            }}
+            onMouseEnter={() => {
+              console.log('Tooltip mouse enter on tooltip');
+              if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+              }
+            }}
+            onMouseLeave={handleMouseLeave}
+          >
+            <div className="tooltip__content">
+              {content}
+            </div>
+          </div>,
+          document.body
+        )
+      }
+    </>
+  );
+};

package/src/contexts/NavbarTooltipContext.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+
+interface NavbarTooltipContextType {
+  hasOpenPopover: boolean;
+  setHasOpenPopover: (open: boolean) => void;
+  openPopover: (id: string) => void;
+  closePopover: (id: string) => void;
+  activePopoverId: string | null;
+}
+
+const NavbarTooltipContext = React.createContext<NavbarTooltipContextType | undefined>(undefined);
+
+export const NavbarTooltipProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [hasOpenPopover, setHasOpenPopover] = React.useState(false);
+  const [activePopoverId, setActivePopoverId] = React.useState<string | null>(null);
+
+  const openPopover = React.useCallback((id: string) => {
+    setActivePopoverId(id);
+    setHasOpenPopover(true);
+  }, []);
+
+  const closePopover = React.useCallback((id: string) => {
+    if (activePopoverId === id) {
+      setActivePopoverId(null);
+      setHasOpenPopover(false);
+    }
+  }, [activePopoverId]);
+
+  return (
+    <NavbarTooltipContext.Provider value={{ 
+      hasOpenPopover, 
+      setHasOpenPopover, 
+      openPopover, 
+      closePopover, 
+      activePopoverId 
+    }}>
+      {children}
+    </NavbarTooltipContext.Provider>
+  );
+};
+
+export const useNavbarTooltip = () => {
+  const context = React.useContext(NavbarTooltipContext);
+  if (!context) {
+    throw new Error('useNavbarTooltip must be used within a NavbarTooltipProvider');
+  }
+  return context;
+};

package/src/contexts/index.ts

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

package/src/foundations/motion.md

@@ -0,0 +1,136 @@
+# Motion & Animation
+
+O sistema de motion do Hellboy Design System define padrões consistentes para transições, animações e interações, garantindo uma experiência fluida e acessível.
+
+## Princípios
+
+### 1. Propósito
+- **Funcional**: Animações devem ter propósito claro e melhorar a usabilidade
+- **Consistente**: Padrões uniformes em todos os componentes
+- **Acessível**: Respeito às preferências do usuário (prefers-reduced-motion)
+
+### 2. Performance
+- **GPU-accelerated**: Uso de transform e opacity para animações suaves
+- **Otimizado**: Durações apropriadas para evitar distração
+
+## Tokens de Motion
+
+### Durações
+```css
+--motion-duration-fast: 0.15s   /* Interações rápidas (hover, feedback) */
+--motion-duration-base: 0.2s    /* Interações padrão */
+--motion-duration-slow: 0.3s    /* Transições maiores */
+--motion-duration-slower: 0.5s  /* Animações de entrada/saída */
+```
+
+### Funções de Easing
+```css
+--motion-easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1)    /* Padrão */
+--motion-easing-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1)  /* Entrada */
+--motion-easing-accelerate: cubic-bezier(0.4, 0.0, 1, 1)    /* Saída */
+--motion-easing-sharp: cubic-bezier(0.4, 0.0, 0.6, 1)       /* Ênfase */
+```
+
+### Transições Combinadas
+```css
+--motion-transition-fast: var(--motion-duration-fast) var(--motion-easing-standard)
+--motion-transition-base: var(--motion-duration-base) var(--motion-easing-standard)
+--motion-transition-slow: var(--motion-duration-slow) var(--motion-easing-standard)
+```
+
+### Transições Específicas
+```css
+--motion-transition-color: color var(--motion-transition-base)
+--motion-transition-background: background-color var(--motion-transition-base)
+--motion-transition-transform: transform var(--motion-transition-base)
+--motion-transition-opacity: opacity var(--motion-transition-base)
+```
+
+## Padrões de Uso
+
+### Estados Interativos
+- **Hover**: Use `--motion-transition-fast` para feedback imediato
+- **Active/Pressed**: Use `--motion-transition-fast` com transform scale
+- **Focus**: Use `--motion-transition-base` para indicadores visuais
+
+### Entrada e Saída
+- **Fade In/Out**: Use `--motion-transition-fade-in` / `--motion-transition-fade-out`
+- **Slide**: Use animações específicas por direção (slideInRight, slideOutLeft, etc.)
+- **Scale**: Use `--motion-keyframes-scale-in` para elementos emergentes
+
+### Componentes
+- **Buttons**: Transições suaves em hover/active states
+- **Form Controls**: Feedback visual consistente em focus/interaction
+- **Navigation**: Transições fluidas entre estados
+- **Overlays/Dialogs**: Animações de entrada/saída apropriadas
+
+## Acessibilidade
+
+### Reduced Motion
+O sistema automaticamente respeita a preferência `prefers-reduced-motion: reduce`, reduzindo durações para 0.01ms quando ativada.
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --motion-duration-fast: 0.01s;
+    --motion-duration-base: 0.01s;
+    --motion-duration-slow: 0.01s;
+    --motion-duration-slower: 0.01s;
+  }
+}
+```
+
+### Boas Práticas
+- Evite animações que causem enjoo (vertigo)
+- Mantenha durações entre 0.15s - 0.5s
+- Use easing functions apropriadas para o contexto
+- Teste em diferentes dispositivos e velocidades
+
+## Exemplos de Implementação
+
+### Button Hover
+```css
+.btn {
+  transition: var(--motion-transition-background), var(--motion-transition-transform);
+}
+
+.btn:hover {
+  background-color: var(--color-primary-hover);
+  transform: translateY(-1px);
+}
+```
+
+### Modal Entrance
+```css
+.modal[data-enter] {
+  animation: var(--motion-keyframes-scale-in);
+}
+
+.modal[data-leave] {
+  animation: var(--motion-keyframes-scale-out);
+}
+```
+
+### Drawer Slide
+```css
+.drawer--right[data-enter] {
+  animation: var(--motion-keyframes-slide-in-right);
+}
+
+.drawer--right[data-leave] {
+  animation: var(--motion-keyframes-slide-out-right);
+}
+```
+
+## Ferramentas de Desenvolvimento
+
+### Testando Motion
+- Use `prefers-reduced-motion: reduce` no DevTools
+- Teste em dispositivos móveis
+- Verifique performance com Chrome DevTools
+- Considere usuários com sensibilidade a motion
+
+### Debugging
+- Adicione `animation-play-state: paused` para inspeção
+- Use `animation-fill-mode: forwards` para estados finais
+- Monitore performance com `will-change` property

package/src/index.ts

@@ -0,0 +1,40 @@
+/**
+ * Hellboy Design System
+ * Core package with foundational components and tokens
+ */
+
+// Styles
+import './style/styles.css';
+
+// Contexts
+export * from './contexts';
+
+// Components
+export * from './components';
+
+// Direct exports for new components
+export { Popover } from './components/popover/popover';
+export { Tooltip } from './components/tooltip/tooltip';
+export { ThemeControl } from './components/theme-control/theme-control';
+export { Drawer } from './components/drawer/drawer';
+export { Table, TableHead, TableBody, TableRow, TableCell, TableContainer } from './components/table/Table';
+export { PageIndex } from './components/page-index/PageIndex';
+// Individual input components for tree-shaking
+export { InputText } from './components/input/InputText';
+export { InputEmail } from './components/input/InputEmail';
+export { InputPassword } from './components/input/InputPassword';
+export { InputSearch } from './components/input/InputSearch';
+export { InputTel } from './components/input/InputTel';
+export { InputUrl } from './components/input/InputUrl';
+export { InputNumber } from './components/input/InputNumber';
+export { InputDate } from './components/input/InputDate';
+export { InputTime } from './components/input/InputTime';
+export { InputDateTime } from './components/input/InputDateTime';
+export { List, ListItem } from './components/list/List';
+export { Select } from './components/select/Select';
+
+// Theme utilities
+export * from './utils/theme';
+
+// User preferences utilities
+export * from './utils/user-preferences';