@hellboy/ds 0.1.3 → 0.2.7

package/src/components/section/section.tsx

@@ -1,66 +0,0 @@
-import React, { ReactNode, useMemo } from 'react';
-
-export type SectionSize = 'sm' | 'md' | 'lg';
-
-export interface SectionProps {
-  /**
-   * Section title
-   */
-  title?: ReactNode;
-
-  /**
-   * Section content
-   */
-  children: ReactNode;
-
-  /**
-   * Section size/padding
-   * @default 'md'
-   */
-  size?: SectionSize;
-
-  /**
-   * Custom class name
-   */
-  className?: string;
-}
-
-/**
- * Section component for content areas
- * Provides consistent spacing and styling for content sections
- */
-export const Section: React.FC<SectionProps> = ({ title, children, size = 'md', className }) => {
-  const sectionClasses = [
-    'section',
-    size !== 'md' && `section--${size}`,
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  // Generate ID from title for page index navigation
-  const sectionId = 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]);
-
-  const titleText = typeof title === 'string' ? title : undefined;
-
-  return (
-    <section
-      className={sectionClasses}
-      id={sectionId}
-      data-section-title={titleText}
-    >
-      {title && <h2 className="section__title">{title}</h2>}
-      <div className="section__content">{children}</div>
-    </section>
-  );
-};

package/src/components/select/Select.tsx

@@ -1,212 +0,0 @@
-import * as React from 'react';
-import { Icon } from '../icons/icons';
-import { Popover } from '../popover/popover';
-import { List, ListItem } from '../list/List';
-import '../../style/components/select/select.css';
-
-export interface SelectOption {
-  value: string;
-  label: string;
-  icon?: string;
-  disabled?: boolean;
-}
-
-export interface SelectProps {
-  /**
-   * Select options
-   */
-  options: SelectOption[];
-
-  /**
-   * Current value
-   */
-  value?: string;
-
-  /**
-   * Change handler
-   */
-  onChange?: (value: string) => void;
-
-  /**
-   * Label text
-   */
-  label?: string;
-
-  /**
-   * Placeholder when no value selected
-   */
-  placeholder?: string;
-
-  /**
-   * Helper text shown below the select
-   */
-  helperText?: string;
-
-  /**
-   * Error message - when present, select is in error state
-   */
-  error?: string;
-
-  /**
-   * Whether the select is disabled
-   */
-  disabled?: boolean;
-
-  /**
-   * Full width select
-   * @default false
-   */
-  fullWidth?: boolean;
-
-  /**
-   * Size variant
-   * @default 'md'
-   */
-  size?: 'sm' | 'md' | 'lg';
-
-  /**
-   * Custom class name
-   */
-  className?: string;
-
-  /**
-   * ID for accessibility
-   */
-  id?: string;
-}
-
-export const Select: React.FC<SelectProps> = ({
-  options,
-  value,
-  onChange,
-  label,
-  placeholder = 'Select an option',
-  helperText,
-  error,
-  disabled = false,
-  fullWidth = false,
-  size = 'md',
-  className = '',
-  id,
-}) => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const selectId = id || `select-${React.useId()}`;
-
-  const selectedOption = options.find((opt) => opt.value === value);
-
-  const handleSelect = (optionValue: string) => {
-    onChange?.(optionValue);
-    setIsOpen(false);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (disabled) return;
-
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      setIsOpen(!isOpen);
-    } else if (e.key === 'Escape') {
-      setIsOpen(false);
-    } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-      e.preventDefault();
-      if (!isOpen) {
-        setIsOpen(true);
-      }
-    }
-  };
-
-  const containerClasses = [
-    'select-container',
-    fullWidth && 'select-container--full-width',
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  const triggerClasses = [
-    'select__trigger',
-    `select__trigger--${size}`,
-    error && 'select__trigger--error',
-    disabled && 'select__trigger--disabled',
-    isOpen && 'select__trigger--open',
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  return (
-    <div className={containerClasses}>
-      {label && (
-        <label htmlFor={selectId} className="select__label">
-          {label}
-        </label>
-      )}
-      <Popover
-        trigger={
-          <button
-            id={selectId}
-            type="button"
-            className={triggerClasses}
-            onClick={() => !disabled && setIsOpen(!isOpen)}
-            onKeyDown={handleKeyDown}
-            disabled={disabled}
-            aria-haspopup="listbox"
-            aria-expanded={isOpen}
-            aria-labelledby={label ? `${selectId}-label` : undefined}
-            aria-describedby={
-              error ? `${selectId}-error` : helperText ? `${selectId}-helper` : undefined
-            }
-            aria-invalid={error ? 'true' : 'false'}
-          >
-            <span className="select__trigger-content">
-              {selectedOption?.icon && (
-                <Icon
-                  name={selectedOption.icon}
-                  size={size === 'sm' ? 16 : size === 'lg' ? 24 : 20}
-                />
-              )}
-              <span className="select__trigger-text">
-                {selectedOption ? selectedOption.label : placeholder}
-              </span>
-            </span>
-            <Icon
-              name="chevron-down"
-              size={size === 'sm' ? 16 : size === 'lg' ? 24 : 20}
-              className="select__trigger-icon"
-            />
-          </button>
-        }
-        isOpen={isOpen}
-        onToggle={() => !disabled && setIsOpen(!isOpen)}
-        placement="bottom"
-      >
-        <div className="select__dropdown" role="listbox">
-          <List>
-            {options.map((option) => (
-              <ListItem
-                key={option.value}
-                icon={option.icon}
-                selected={option.value === value}
-                disabled={option.disabled}
-                onClick={() => !option.disabled && handleSelect(option.value)}
-                role="option"
-                aria-selected={option.value === value}
-              >
-                {option.label}
-              </ListItem>
-            ))}
-          </List>
-        </div>
-      </Popover>
-      {error && (
-        <p id={`${selectId}-error`} className="select__message select__message--error">
-          {error}
-        </p>
-      )}
-      {helperText && !error && (
-        <p id={`${selectId}-helper`} className="select__message">
-          {helperText}
-        </p>
-      )}
-    </div>
-  );
-};

package/src/components/select/index.ts

@@ -1 +0,0 @@
-export { Select, type SelectProps, type SelectOption } from './Select';

package/src/components/slider/Slider.tsx

@@ -1,267 +0,0 @@
-import React, { useState, useCallback, useRef } from 'react';
-import { Icon } from '../icons/icons';
-import '../../style/components/slider/slider.css';
-
-export interface SliderProps {
-  /**
-   * Minimum value
-   * @default 0
-   */
-  min?: number;
-  /**
-   * Maximum value
-   * @default 100
-   */
-  max?: number;
-  /**
-   * Current value
-   */
-  value: number;
-  /**
-   * Step increment
-   * @default 1
-   */
-  step?: number;
-  /**
-   * Callback when value changes
-   */
-  onChange: (value: number) => void;
-  /**
-   * Callback when drag starts
-   */
-  onDragStart?: () => void;
-  /**
-   * Callback when drag ends (value committed)
-   */
-  onChangeEnd?: (value: number) => void;
-  /**
-   * Label for the slider
-   */
-  label?: string;
-  /**
-   * Show value display
-   * @default true
-   */
-  showValue?: boolean;
-  /**
-   * Custom class name
-   */
-  className?: string;
-  /**
-   * Disabled state
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Slider type for different backgrounds
-   * @default 'default'
-   */
-  type?: 'default' | 'hue' | 'saturation' | 'lightness';
-  /**
-   * Base color for saturation/lightness gradients (hsl values)
-   */
-  baseHue?: number;
-  /**
-   * Base saturation for lightness gradient (0-100)
-   */
-  baseSaturation?: number;
-}
-
-export const Slider: React.FC<SliderProps> = ({
-  min = 0,
-  max = 100,
-  value,
-  step = 1,
-  onChange,
-  onDragStart,
-  onChangeEnd,
-  label,
-  showValue = true,
-  className = '',
-  disabled = false,
-  type = 'default',
-  baseHue = 0,
-  baseSaturation = 70,
-}) => {
-  const [isDragging, setIsDragging] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const valueRef = useRef(value);
-
-  // Keep value ref in sync
-  React.useEffect(() => {
-    valueRef.current = value;
-  }, [value]);
-
-  const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = parseFloat(event.target.value);
-    onChange(newValue);
-  }, [onChange]);
-
-  const getValueFromPosition = useCallback((clientX: number) => {
-    if (!containerRef.current) return value;
-    const rect = containerRef.current.getBoundingClientRect();
-    const percentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
-    const rawValue = min + percentage * (max - min);
-    const steppedValue = Math.round(rawValue / step) * step;
-    return Math.max(min, Math.min(max, steppedValue));
-  }, [min, max, step, value]);
-
-  const handleMouseDown = useCallback((event: React.MouseEvent) => {
-    if (disabled) return;
-    event.preventDefault();
-    setIsDragging(true);
-    onDragStart?.();
-    const newValue = getValueFromPosition(event.clientX);
-    onChange(newValue);
-  }, [disabled, onDragStart, getValueFromPosition, onChange]);
-
-  const handleMouseMove = useCallback((event: MouseEvent) => {
-    if (!isDragging) return;
-    event.preventDefault();
-    const newValue = getValueFromPosition(event.clientX);
-    onChange(newValue);
-  }, [isDragging, getValueFromPosition, onChange]);
-
-  const handleMouseUp = useCallback(() => {
-    if (!isDragging) return;
-    setIsDragging(false);
-    onChangeEnd?.(valueRef.current);
-  }, [isDragging, onChangeEnd]);
-
-  // Add global mouse listeners for dragging
-  React.useEffect(() => {
-    if (!isDragging) return;
-
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('mouseup', handleMouseUp);
-
-    return () => {
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
-    };
-  }, [isDragging, handleMouseMove, handleMouseUp]);
-
-  // Handle touch events
-  const handleTouchStart = useCallback((event: React.TouchEvent) => {
-    if (disabled) return;
-    event.preventDefault();
-    setIsDragging(true);
-    onDragStart?.();
-    const touch = event.touches[0];
-    const newValue = getValueFromPosition(touch.clientX);
-    onChange(newValue);
-  }, [disabled, onDragStart, getValueFromPosition, onChange]);
-
-  const handleTouchMove = useCallback((event: TouchEvent) => {
-    if (!isDragging) return;
-    event.preventDefault();
-    const touch = event.touches[0];
-    const newValue = getValueFromPosition(touch.clientX);
-    onChange(newValue);
-  }, [isDragging, getValueFromPosition, onChange]);
-
-  const handleTouchEnd = useCallback(() => {
-    if (!isDragging) return;
-    setIsDragging(false);
-    onChangeEnd?.(valueRef.current);
-  }, [isDragging, onChangeEnd]);
-
-  React.useEffect(() => {
-    if (!isDragging) return;
-
-    document.addEventListener('touchmove', handleTouchMove);
-    document.addEventListener('touchend', handleTouchEnd);
-
-    return () => {
-      document.removeEventListener('touchmove', handleTouchMove);
-      document.removeEventListener('touchend', handleTouchEnd);
-    };
-  }, [isDragging, handleTouchMove, handleTouchEnd]);
-
-  const sliderClasses = [
-    'slider',
-    `slider--${type}`,
-    isDragging && 'slider--dragging',
-    disabled && 'slider--disabled',
-    className
-  ].filter(Boolean).join(' ');
-
-  // Generate background based on type
-  const getBackground = () => {
-    switch (type) {
-      case 'hue':
-        return 'linear-gradient(to right, hsl(0, 70%, 50%), hsl(60, 70%, 50%), hsl(120, 70%, 50%), hsl(180, 70%, 50%), hsl(240, 70%, 50%), hsl(300, 70%, 50%), hsl(360, 70%, 50%))';
-      case 'saturation':
-        return `linear-gradient(to right, hsl(${baseHue}, 0%, 50%), hsl(${baseHue}, 100%, 50%))`;
-      case 'lightness':
-        return `linear-gradient(to right, hsl(${baseHue}, ${baseSaturation}%, 0%), hsl(${baseHue}, ${baseSaturation}%, 50%), hsl(${baseHue}, ${baseSaturation}%, 100%))`;
-      default:
-        return 'var(--color-action-primary)';
-    }
-  };
-
-  const inputStyle = { background: getBackground() };
-
-  // Generate step marks
-  const stepMarks = step > 1 ? Array.from({ length: Math.floor((max - min) / step) + 1 }, (_, i) => min + i * step) : [];
-
-  // Calculate thumb position as percentage
-  const thumbPosition = ((value - min) / (max - min)) * 100;
-
-  return (
-    <div className={sliderClasses}>
-      {(label || showValue) && (
-        <div className="slider__header">
-          {label && <label className="slider__label">{label}</label>}
-          {showValue && (
-            <span className="slider__value">{value}</span>
-          )}
-        </div>
-      )}
-
-      <div className="slider__container" ref={containerRef} onMouseDown={handleMouseDown} onTouchStart={handleTouchStart}>
-        <input
-          ref={inputRef}
-          type="range"
-          min={min}
-          max={max}
-          step={step}
-          value={value}
-          onChange={handleChange}
-          className="slider__input"
-          style={inputStyle}
-          disabled={disabled}
-          readOnly
-        />
-        
-        {/* Custom thumb with icon */}
-        <div 
-          className="slider__thumb"
-          style={{
-            left: `${thumbPosition}%`,
-            transform: 'translateX(-50%)',
-          }}
-        >
-          <div className="slider__thumb-icon">
-            <Icon name="arrow-down" size={16} />
-          </div>
-        </div>
-
-        {stepMarks.length > 0 && (
-          <div className="slider__marks">
-            {stepMarks.map((mark) => (
-              <div
-                key={mark}
-                className="slider__mark"
-                style={{
-                  left: `${((mark - min) / (max - min)) * 100}%`,
-                }}
-              />
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};

package/src/components/slider/index.ts

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

package/src/components/switch/index.ts

@@ -1 +0,0 @@
-export { Switch, type SwitchProps, type SwitchSize } from './switch';

package/src/components/switch/switch.tsx

@@ -1,99 +0,0 @@
-import React from 'react';
-import { Icon } from '../icons';
-import '../../style/components/switch/switch.css';
-
-export type SwitchSize = 'sm' | 'md' | 'lg';
-
-export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
-  /**
-   * Size of the switch
-   * @default 'md'
-   */
-  size?: SwitchSize;
-
-  /**
-   * Label text for the switch
-   */
-  label?: React.ReactNode;
-
-  /**
-   * Icon to display when switch is ON
-   */
-  onIcon?: string;
-
-  /**
-   * Icon to display when switch is OFF
-   */
-  offIcon?: string;
-
-  /**
-   * Error message to display below the switch
-   */
-  error?: string;
-
-  /**
-   * Helper text to display below the switch
-   */
-  helperText?: string;
-}
-
-export const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
-  (
-    {
-      size = 'md',
-      label,
-      onIcon,
-      offIcon,
-      error,
-      helperText,
-      disabled = false,
-      className,
-      checked,
-      ...props
-    },
-    ref
-  ) => {
-    const switchClasses = [
-      'switch',
-      `switch--${size}`,
-      checked && 'switch--checked',
-      disabled && 'switch--disabled',
-      error && 'switch--error',
-      className,
-    ]
-      .filter(Boolean)
-      .join(' ');
-
-    return (
-      <div className="switch__wrapper">
-        <label className="switch__label">
-          <input
-            type="checkbox"
-            ref={ref}
-            checked={checked}
-            disabled={disabled}
-            className="switch__input"
-            {...props}
-          />
-          <span className={switchClasses}>
-            <span className="switch__track">
-              <span className="switch__thumb">
-                {onIcon && <Icon name={onIcon} size={16} className="switch__icon switch__icon--on" />}
-                {offIcon && <Icon name={offIcon} size={16} className="switch__icon switch__icon--off" />}
-              </span>
-            </span>
-          </span>
-          {label && <span className="switch__text">{label}</span>}
-        </label>
-        {(error || helperText) && (
-          <div className="switch__message">
-            {error && <span className="switch__error-text">{error}</span>}
-            {helperText && !error && <span className="switch__helper-text">{helperText}</span>}
-          </div>
-        )}
-      </div>
-    );
-  }
-);
-
-Switch.displayName = 'Switch';