@hellboy/ds 0.1.3 → 0.2.7

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

@@ -1,322 +0,0 @@
-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

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

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

@@ -1,78 +0,0 @@
-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

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

package/src/components/drawer/drawer.tsx

@@ -1,82 +0,0 @@
-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

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

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

@@ -1,52 +0,0 @@
-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

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

package/src/components/footer/footer.tsx

@@ -1,28 +0,0 @@
-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

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

package/src/components/grid/Grid.tsx

@@ -1,53 +0,0 @@
-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

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

package/src/components/header/header.tsx

@@ -1,57 +0,0 @@
-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>
-  );
-};