@hellboy/ds 0.1.2

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

@@ -0,0 +1,322 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Slider } from '../slider';
+import '../../style/components/color-control/color-control.css';
+
+interface ColorHue {
+  primary: number;
+  secondary: number;
+  accent: number;
+  success: number;
+  warning: number;
+  error: number;
+  info: number;
+}
+
+interface ColorSaturation {
+  primary: number;
+  secondary: number;
+  accent: number;
+  success: number;
+  warning: number;
+  error: number;
+  info: number;
+}
+
+interface ColorLightness {
+  primary: number;
+  secondary: number;
+  accent: number;
+  success: number;
+  warning: number;
+  error: number;
+  info: number;
+}
+
+interface ColorConfig {
+  hues: ColorHue;
+  saturations: ColorSaturation;
+  lightnesses: ColorLightness;
+}
+
+// Function to get CSS variable value as number
+const getCSSVariable = (variable: string): number => {
+  if (typeof window === 'undefined') return 0;
+  const value = getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+  return value ? parseInt(value, 10) : 0;
+};
+
+// Load colors from CSS variables (generated from theme.json)
+const loadColorsFromCSS = (): ColorConfig => {
+  return {
+    hues: {
+      primary: getCSSVariable('--primary-hue'),
+      secondary: getCSSVariable('--secondary-hue'),
+      accent: getCSSVariable('--accent-hue'),
+      success: getCSSVariable('--success-hue'),
+      warning: getCSSVariable('--warning-hue'),
+      error: getCSSVariable('--error-hue'),
+      info: getCSSVariable('--info-hue'),
+    },
+    saturations: {
+      primary: getCSSVariable('--primary-saturation'),
+      secondary: getCSSVariable('--secondary-saturation'),
+      accent: getCSSVariable('--accent-saturation'),
+      success: getCSSVariable('--success-saturation'),
+      warning: getCSSVariable('--warning-saturation'),
+      error: getCSSVariable('--error-saturation'),
+      info: getCSSVariable('--info-saturation'),
+    },
+    lightnesses: {
+      primary: getCSSVariable('--primary-lightness'),
+      secondary: getCSSVariable('--secondary-lightness'),
+      accent: getCSSVariable('--accent-lightness'),
+      success: getCSSVariable('--success-lightness'),
+      warning: getCSSVariable('--warning-lightness'),
+      error: getCSSVariable('--error-lightness'),
+      info: getCSSVariable('--info-lightness'),
+    },
+  };
+};
+
+export const ColorControl: React.FC = () => {
+  const [colors, setColors] = useState<ColorConfig>(() => {
+    // Load saved colors from localStorage, fallback to CSS variables from theme.json
+    const saved = localStorage.getItem('color-config');
+    return saved ? JSON.parse(saved) : loadColorsFromCSS();
+  });
+
+  const [pendingColors, setPendingColors] = useState<ColorConfig>(colors);
+
+  // Initialize CSS on mount
+  useEffect(() => {
+    const root = document.documentElement;
+    // Set hues
+    root.style.setProperty('--hue-primary', colors.hues.primary.toString());
+    root.style.setProperty('--hue-secondary', colors.hues.secondary.toString());
+    root.style.setProperty('--hue-accent', colors.hues.accent.toString());
+    root.style.setProperty('--hue-success', colors.hues.success.toString());
+    root.style.setProperty('--hue-warning', colors.hues.warning.toString());
+    root.style.setProperty('--hue-error', colors.hues.error.toString());
+    root.style.setProperty('--hue-info', colors.hues.info.toString());
+    
+    // Set saturations
+    root.style.setProperty('--saturation-primary', `${colors.saturations.primary}%`);
+    root.style.setProperty('--saturation-secondary', `${colors.saturations.secondary}%`);
+    root.style.setProperty('--saturation-accent', `${colors.saturations.accent}%`);
+    root.style.setProperty('--saturation-success', `${colors.saturations.success}%`);
+    root.style.setProperty('--saturation-warning', `${colors.saturations.warning}%`);
+    root.style.setProperty('--saturation-error', `${colors.saturations.error}%`);
+    root.style.setProperty('--saturation-info', `${colors.saturations.info}%`);
+    
+    // Set lightnesses
+    root.style.setProperty('--lightness-primary', `${colors.lightnesses.primary}%`);
+    root.style.setProperty('--lightness-secondary', `${colors.lightnesses.secondary}%`);
+    root.style.setProperty('--lightness-accent', `${colors.lightnesses.accent}%`);
+    root.style.setProperty('--lightness-success', `${colors.lightnesses.success}%`);
+    root.style.setProperty('--lightness-warning', `${colors.lightnesses.warning}%`);
+    root.style.setProperty('--lightness-error', `${colors.lightnesses.error}%`);
+    root.style.setProperty('--lightness-info', `${colors.lightnesses.info}%`);
+  }, []);
+
+  const commitColorChange = useCallback((color: keyof ColorHue, property: 'hue' | 'saturation' | 'lightness', value: number) => {
+    setColors(prev => {
+      const newColors = {
+        ...prev,
+        [property === 'hue' ? 'hues' : property === 'saturation' ? 'saturations' : 'lightnesses']: {
+          ...prev[property === 'hue' ? 'hues' : property === 'saturation' ? 'saturations' : 'lightnesses'],
+          [color]: value
+        }
+      };
+      
+      // Update CSS and localStorage immediately after drag ends
+      const root = document.documentElement;
+      const cssVar = property === 'hue' ? `--hue-${color}` : `--${property}-${color}`;
+      const cssValue = property === 'hue' ? value.toString() : `${value}%`;
+      root.style.setProperty(cssVar, cssValue);
+      localStorage.setItem('color-config', JSON.stringify(newColors));
+      
+      return newColors;
+    });
+  }, []);
+
+  const resetToDefaults = useCallback(() => {
+    const cssColors = loadColorsFromCSS();
+    setColors(cssColors);
+    setPendingColors(cssColors);
+  }, []);
+
+  const renderColorControls = (colorName: keyof ColorHue) => {
+    const hue = pendingColors.hues[colorName];
+    const saturation = pendingColors.saturations[colorName];
+    const lightness = pendingColors.lightnesses[colorName];
+    
+    return (
+      <div key={colorName} className="color-control__color-group">
+        <h4 className="color-control__color-title">{colorName.charAt(0).toUpperCase() + colorName.slice(1)}</h4>
+        
+        <div className="color-control__controls-row">
+          <div className="color-control__control">
+            <label className="color-control__label">Hue</label>
+            <Slider
+              label=""
+              value={hue}
+              min={0}
+              max={360}
+              step={1}
+              onChange={(v) => setPendingColors(prev => ({
+                ...prev,
+                hues: { ...prev.hues, [colorName]: v }
+              }))}
+              onChangeEnd={(v) => {
+                setPendingColors(prev => ({
+                  ...prev,
+                  hues: { ...prev.hues, [colorName]: v }
+                }));
+                commitColorChange(colorName, 'hue', v);
+              }}
+              type="hue"
+              showValue={false}
+            />
+          </div>
+          
+          <div className="color-control__control">
+            <label className="color-control__label">Saturation</label>
+            <Slider
+              label=""
+              value={saturation}
+              min={0}
+              max={100}
+              step={1}
+              onChange={(v) => setPendingColors(prev => ({
+                ...prev,
+                saturations: { ...prev.saturations, [colorName]: v }
+              }))}
+              onChangeEnd={(v) => {
+                setPendingColors(prev => ({
+                  ...prev,
+                  saturations: { ...prev.saturations, [colorName]: v }
+                }));
+                commitColorChange(colorName, 'saturation', v);
+              }}
+              type="saturation"
+              baseHue={hue}
+              showValue={false}
+            />
+          </div>
+          
+          <div className="color-control__control">
+            <label className="color-control__label">Lightness</label>
+            <Slider
+              label=""
+              value={lightness}
+              min={0}
+              max={100}
+              step={1}
+              onChange={(v) => setPendingColors(prev => ({
+                ...prev,
+                lightnesses: { ...prev.lightnesses, [colorName]: v }
+              }))}
+              onChangeEnd={(v) => {
+                setPendingColors(prev => ({
+                  ...prev,
+                  lightnesses: { ...prev.lightnesses, [colorName]: v }
+                }));
+                commitColorChange(colorName, 'lightness', v);
+              }}
+              type="lightness"
+              baseHue={hue}
+              baseSaturation={saturation}
+              showValue={false}
+            />
+          </div>
+          
+          <div
+            className="color-control__preview"
+            style={{
+              backgroundColor: `hsl(${hue}, ${saturation}%, ${lightness}%)`,
+              border: '2px solid var(--color-neutral-300)'
+            }}
+          />
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="color-control">
+      <div className="color-control__header">
+        <h3 className="color-control__title">Paleta de Cores</h3>
+        <p className="color-control__description">
+          Ajuste o matiz, saturação e luminosidade das cores. As mudanças são aplicadas instantaneamente.
+        </p>
+      </div>
+
+      <div className="color-control__sliders">
+        {renderColorControls('primary')}
+        {renderColorControls('secondary')}
+        {renderColorControls('accent')}
+        {renderColorControls('success')}
+        {renderColorControls('warning')}
+        {renderColorControls('error')}
+        {renderColorControls('info')}
+      </div>
+
+      <div className="color-control__actions">
+        <button
+          onClick={resetToDefaults}
+          className="color-control__reset-btn"
+        >
+          Restaurar Padrões
+        </button>
+      </div>
+
+      <div className="color-control__preview-section">
+        <h4 className="color-control__preview-title">Prévia das Cores</h4>
+        <div className="color-control__color-grid">
+          <div
+            className="color-control__color-sample"
+            style={{ backgroundColor: `hsl(${pendingColors.hues.primary}, ${pendingColors.saturations.primary}%, ${pendingColors.lightnesses.primary}%)` }}
+          >
+            Primary
+          </div>
+          <div
+            className="color-control__color-sample"
+            style={{ backgroundColor: `hsl(${pendingColors.hues.secondary}, ${pendingColors.saturations.secondary}%, ${pendingColors.lightnesses.secondary}%)` }}
+          >
+            Secondary
+          </div>
+          <div
+            className="color-control__color-sample"
+            style={{ backgroundColor: `hsl(${pendingColors.hues.accent}, ${pendingColors.saturations.accent}%, ${pendingColors.lightnesses.accent}%)` }}
+          >
+            Accent
+          </div>
+          <div
+            className="color-control__color-sample"
+            style={{ backgroundColor: `hsl(${pendingColors.hues.success}, ${pendingColors.saturations.success}%, ${pendingColors.lightnesses.success}%)` }}
+          >
+            Success
+          </div>
+          <div
+            className="color-control__color-sample"
+            style={{ backgroundColor: `hsl(${pendingColors.hues.warning}, ${pendingColors.saturations.warning}%, ${pendingColors.lightnesses.warning}%)` }}
+          >
+            Warning
+          </div>
+          <div
+            className="color-control__color-sample"
+            style={{ backgroundColor: `hsl(${pendingColors.hues.error}, ${pendingColors.saturations.error}%, ${pendingColors.lightnesses.error}%)` }}
+          >
+            Error
+          </div>
+          <div
+            className="color-control__color-sample"
+            style={{ backgroundColor: `hsl(${pendingColors.hues.info}, ${pendingColors.saturations.info}%, ${pendingColors.lightnesses.info}%)` }}
+          >
+            Info
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

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

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

package/src/components/drag-handle/DragHandle.tsx

@@ -0,0 +1,78 @@
+import React, { useState, useRef, useCallback } from 'react';
+import '../../style/components/drag-handle/drag-handle.css';
+
+export interface DragHandleProps {
+  onResize: (delta: number) => void;
+  onResizeEnd?: () => void;
+  orientation?: 'vertical' | 'horizontal';
+  className?: string;
+}
+
+export const DragHandle: React.FC<DragHandleProps> = ({
+  onResize,
+  onResizeEnd,
+  orientation = 'vertical',
+  className = '',
+}) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const dragHandleRef = useRef<HTMLDivElement>(null);
+  const startPosRef = useRef<number>(0);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    setIsDragging(true);
+    startPosRef.current = orientation === 'vertical' ? e.clientX : e.clientY;
+    e.preventDefault();
+  }, [orientation]);
+
+  const handleMouseMove = useCallback((e: MouseEvent) => {
+    if (!isDragging) return;
+
+    const currentPos = orientation === 'vertical' ? e.clientX : e.clientY;
+    const delta = currentPos - startPosRef.current;
+    onResize(delta);
+    startPosRef.current = currentPos;
+  }, [isDragging, onResize, orientation]);
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+    onResizeEnd?.();
+  }, [onResizeEnd]);
+
+  React.useEffect(() => {
+    if (isDragging) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      document.body.style.cursor = orientation === 'vertical' ? 'col-resize' : 'row-resize';
+      document.body.style.userSelect = 'none';
+    } else {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    }
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+  }, [isDragging, handleMouseMove, handleMouseUp, orientation]);
+
+  const classes = [
+    'drag-handle',
+    `drag-handle--${orientation}`,
+    isDragging && 'drag-handle--dragging',
+    className,
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div
+      ref={dragHandleRef}
+      className={classes}
+      onMouseDown={handleMouseDown}
+    >
+      <div className="drag-handle__indicator" />
+    </div>
+  );
+};

package/src/components/drag-handle/index.ts

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

package/src/components/drawer/drawer.tsx

@@ -0,0 +1,82 @@
+import * as React from "react";
+import { Dialog, DialogProps, DialogHeading, useDialogStore } from "@ariakit/react";
+import "../../style/components/drawer/drawer.css";
+
+export type DrawerPlacement = "top" | "bottom" | "left" | "right";
+
+export interface DrawerProps extends Omit<DialogProps, "children"> {
+  children: React.ReactNode;
+  title?: string;
+  placement?: DrawerPlacement;
+  size?: string | number;
+  store: ReturnType<typeof useDialogStore>;
+}
+
+export const Drawer: React.FC<DrawerProps> = ({
+  children,
+  title,
+  placement = "right",
+  size = "400px",
+  store,
+  ...props
+}) => {
+  const sizeValue = typeof size === "number" ? `${size}px` : size;
+
+  const getDrawerStyles = (): React.CSSProperties => {
+    const baseStyles: React.CSSProperties = {
+      zIndex: 1000,
+    };
+
+    switch (placement) {
+      case "top":
+        return {
+          ...baseStyles,
+          height: sizeValue,
+        };
+      case "bottom":
+        return {
+          ...baseStyles,
+          height: sizeValue,
+        };
+      case "left":
+        return {
+          ...baseStyles,
+          width: sizeValue,
+        };
+      case "right":
+      default:
+        return {
+          ...baseStyles,
+          width: sizeValue,
+        };
+    }
+  };
+
+  return (
+    <Dialog
+      store={store}
+      {...props}
+      className={`drawer drawer--${placement}`}
+      style={getDrawerStyles()}
+      backdrop={<div className="drawer__backdrop" />}
+    >
+      <div className="drawer__content">
+        {title && (
+          <div className="drawer__header">
+            <DialogHeading className="drawer__title">{title}</DialogHeading>
+            <button
+              className="drawer__close"
+              onClick={store.hide}
+              aria-label="Close drawer"
+            >
+              ✕
+            </button>
+          </div>
+        )}
+        <div className="drawer__body">
+          {children}
+        </div>
+      </div>
+    </Dialog>
+  );
+};

package/src/components/drawer/index.ts

@@ -0,0 +1 @@
+export { Drawer, type DrawerProps, type DrawerPlacement } from './drawer';

package/src/components/floating-bar/floating-bar.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import '../../style/components/floating-bar/floating-bar.css';
+
+export type FloatingBarPosition = 'top' | 'bottom';
+
+export interface FloatingBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Position of the floating bar
+   * @default 'bottom'
+   */
+  position?: FloatingBarPosition;
+
+  /**
+   * Content of the floating bar
+   */
+  children: React.ReactNode;
+
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+/**
+ * FloatingBar Component
+ * A floating bar that sticks to the top or bottom within the main layout container
+ */
+export const FloatingBar: React.FC<FloatingBarProps> = ({
+  position = 'bottom',
+  children,
+  className = '',
+  ...props
+}) => {
+  const classes = [
+    'floating-bar',
+    `floating-bar--${position}`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div
+      className={classes}
+      {...props}
+    >
+      <div className="floating-bar__content">
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/components/floating-bar/index.ts

@@ -0,0 +1,2 @@
+export { FloatingBar } from './floating-bar';
+export type { FloatingBarProps, FloatingBarPosition } from './floating-bar';

package/src/components/footer/footer.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import '../../style/components/footer/footer.css';
+
+export interface FooterProps extends React.HTMLAttributes<HTMLElement> {
+  children?: React.ReactNode;
+}
+
+export const Footer: React.FC<FooterProps> = ({ className = '', children, ...props }) => {
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <footer className={`footer ${className}`.trim()} {...props}>
+      <div className="footer__container">
+        {children ? (
+          children
+        ) : (
+          <>
+            <div className="footer__bottom">
+              <p className="footer__copyright">
+                © {currentYear} <strong>HellboyDS</strong> is a design system package published on npm by user <strong>@hellboy</strong>. This project is not affiliated with any comic book, film, television, or other artistic works.
+              </p>
+            </div>
+          </>
+        )}
+      </div>
+    </footer>
+  );
+};

package/src/components/footer/index.ts

@@ -0,0 +1 @@
+export { Footer, type FooterProps } from './footer';

package/src/components/grid/Grid.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import "../../style/components/grid/grid.css";
+
+export type GridColumns = number | "auto-fit" | "auto-fill";
+
+export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Number of columns or auto-fit/auto-fill
+   * @default "auto-fit"
+   */
+  columns?: GridColumns;
+  /**
+   * Minimum width for each column (when using auto-fit/auto-fill)
+   * @default "250px"
+   */
+  minWidth?: string;
+  /**
+   * Gap between grid items
+   * @default "1rem"
+   */
+  gap?: string;
+  /**
+   * Maximum number of columns (when columns is a number)
+   */
+  maxColumns?: number;
+}
+
+export const Grid: React.FC<GridProps> = ({
+  columns = "auto-fit",
+  minWidth = "250px",
+  gap = "1rem",
+  maxColumns,
+  className = "",
+  children,
+  ...props
+}) => {
+  const gridClass = [
+    "grid",
+    typeof columns === "number" ? `grid--cols-${Math.min(columns, maxColumns || columns)}` : `grid--${columns}`,
+    className
+  ].filter(Boolean).join(" ");
+
+  const style = {
+    "--grid-min-width": minWidth,
+    "--grid-gap": gap,
+  } as React.CSSProperties;
+
+  return (
+    <div className={gridClass} style={style} {...props}>
+      {children}
+    </div>
+  );
+};

package/src/components/grid/index.ts

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

package/src/components/header/header.tsx

@@ -0,0 +1,57 @@
+import React, { ReactNode, useMemo } from 'react';
+
+export interface HeaderProps {
+  /**
+   * Header title
+   */
+  title?: ReactNode;
+
+  /**
+   * Header subtitle/description
+   */
+  subtitle?: ReactNode;
+
+  /**
+   * Header content - overrides title/subtitle
+   */
+  children?: ReactNode;
+
+  /**
+   * Custom class name
+   */
+  className?: string;
+}
+
+/**
+ * Header component for page headers
+ * Displays title, subtitle, or custom content
+ */
+export const Header: React.FC<HeaderProps> = ({ title, subtitle, children, className }) => {
+  // Generate ID from title for page index navigation
+  const headerId = useMemo(() => {
+    if (typeof title === 'string' && title.trim()) {
+      return title
+        .toLowerCase()
+        .replace(/[^\w\s-]/g, '') // Remove special characters
+        .replace(/\s+/g, '-') // Replace spaces with hyphens
+        .replace(/-+/g, '-') // Replace multiple hyphens with single
+        .trim();
+    }
+    return undefined;
+  }, [title]);
+
+  return (
+    <header className={`header ${className || ''}`} id={headerId}>
+      <div className="header__container">
+        {children ? (
+          children
+        ) : (
+          <>
+            {title && <h1 className="header__title">{title}</h1>}
+            {subtitle && <p className="header__subtitle">{subtitle}</p>}
+          </>
+        )}
+      </div>
+    </header>
+  );
+};