@hellboy/ds 0.1.2

package/src/components/section/section.tsx

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

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

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

package/src/components/slider/Slider.tsx

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

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

package/src/components/switch/index.ts

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

package/src/components/switch/switch.tsx

@@ -0,0 +1,99 @@
+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';