@proyecto-viviana/solidaria 0.2.2 → 0.2.4

package/src/color/createColorWheel.ts

@@ -0,0 +1,208 @@
+/**
+ * createColorWheel hook.
+ *
+ * Provides ARIA attributes and keyboard/pointer handling for a circular hue selector.
+ */
+
+import { createMemo, type Accessor } from 'solid-js';
+import type { ColorWheelState } from '@proyecto-viviana/solid-stately';
+import { createId } from '../ssr';
+import type { AriaColorWheelOptions, ColorWheelAria } from './types';
+
+/**
+ * Creates ARIA props for a color wheel.
+ */
+export function createColorWheel(
+  props: Accessor<AriaColorWheelOptions>,
+  state: Accessor<ColorWheelState>,
+  wheelRef: Accessor<HTMLDivElement | null>
+): ColorWheelAria {
+  const getProps = () => props();
+  const getState = () => state();
+
+  // Generate IDs
+  const inputId = createId();
+
+  // Calculate angle from pointer position
+  const getAngleFromEvent = (e: MouseEvent | PointerEvent) => {
+    const wheel = wheelRef();
+    if (!wheel) return null;
+
+    const rect = wheel.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+
+    const dx = e.clientX - centerX;
+    const dy = e.clientY - centerY;
+
+    return Math.atan2(-dy, dx); // Negative dy because Y is inverted in screen coords
+  };
+
+  // Handle pointer down
+  const onPointerDown = (e: PointerEvent) => {
+    if (getProps().isDisabled || getState().isDisabled) return;
+
+    const angle = getAngleFromEvent(e);
+    if (angle === null) return;
+
+    getState().setHueFromAngle(angle);
+    getState().setDragging(true);
+
+    (e.target as HTMLElement).setPointerCapture?.(e.pointerId);
+  };
+
+  // Handle pointer move
+  const onPointerMove = (e: PointerEvent) => {
+    if (!getState().isDragging) return;
+
+    const angle = getAngleFromEvent(e);
+    if (angle === null) return;
+
+    getState().setHueFromAngle(angle);
+  };
+
+  // Handle pointer up
+  const onPointerUp = (e: PointerEvent) => {
+    if (getState().isDragging) {
+      getState().setDragging(false);
+      (e.target as HTMLElement).releasePointerCapture?.(e.pointerId);
+    }
+  };
+
+  // Handle keyboard
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (getProps().isDisabled || getState().isDisabled) return;
+
+    const s = getState();
+    let handled = true;
+
+    switch (e.key) {
+      case 'ArrowRight':
+      case 'ArrowUp':
+        s.increment();
+        break;
+      case 'ArrowLeft':
+      case 'ArrowDown':
+        s.decrement();
+        break;
+      case 'PageUp':
+        s.increment(s.pageStep);
+        break;
+      case 'PageDown':
+        s.decrement(s.pageStep);
+        break;
+      case 'Home':
+        s.setHue(0);
+        break;
+      case 'End':
+        s.setHue(359);
+        break;
+      default:
+        handled = false;
+    }
+
+    if (handled) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+
+  // Track props (the wheel container)
+  const trackProps = createMemo(() => {
+    const s = getState();
+    const p = getProps();
+
+    return {
+      role: 'presentation' as const,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      style: {
+        position: 'relative' as const,
+        'touch-action': 'none',
+      },
+      'data-disabled': s.isDisabled || p.isDisabled || undefined,
+    };
+  });
+
+  // Thumb props
+  const thumbProps = createMemo(() => {
+    const s = getState();
+    const p = getProps();
+    const angle = s.getThumbAngle();
+
+    // Calculate thumb position on the wheel edge
+    // Assumes wheel is circular and thumb is at the outer edge
+    // Angle 0 = right (3 o'clock)
+    const thumbX = Math.cos(angle);
+    const thumbY = -Math.sin(angle); // Negative because CSS Y is inverted
+
+    return {
+      role: 'presentation' as const,
+      style: {
+        position: 'absolute' as const,
+        // Position relative to center, scaled to radius
+        // These will be overridden by the component with actual radius
+        left: `calc(50% + ${thumbX * 50}%)`,
+        top: `calc(50% + ${thumbY * 50}%)`,
+        transform: 'translate(-50%, -50%)',
+        'touch-action': 'none',
+      },
+      'data-dragging': s.isDragging || undefined,
+      'data-disabled': s.isDisabled || p.isDisabled || undefined,
+    };
+  });
+
+  // Input props (hidden, for accessibility)
+  const inputProps = createMemo(() => {
+    const s = getState();
+    const p = getProps();
+
+    return {
+      type: 'range',
+      id: inputId,
+      min: 0,
+      max: 360,
+      step: s.step,
+      value: s.getHue(),
+      disabled: s.isDisabled || p.isDisabled,
+      'aria-label': p['aria-label'] ?? 'Hue',
+      'aria-labelledby': p['aria-labelledby'],
+      'aria-describedby': p['aria-describedby'],
+      'aria-valuetext': `${s.getHue()}°`,
+      onKeyDown,
+      onChange: (e: Event) => {
+        const target = e.target as HTMLInputElement;
+        s.setHue(parseFloat(target.value));
+      },
+      onBlur: () => {
+        if (s.isDragging) {
+          s.setDragging(false);
+        }
+      },
+      style: {
+        position: 'absolute' as const,
+        width: '1px',
+        height: '1px',
+        padding: '0',
+        margin: '-1px',
+        overflow: 'hidden',
+        clip: 'rect(0, 0, 0, 0)',
+        'white-space': 'nowrap',
+        border: '0',
+      },
+    };
+  });
+
+  return {
+    get trackProps() {
+      return trackProps();
+    },
+    get thumbProps() {
+      return thumbProps();
+    },
+    get inputProps() {
+      return inputProps();
+    },
+  };
+}

package/src/color/index.ts

@@ -0,0 +1,24 @@
+/**
+ * Color ARIA hooks exports.
+ */
+
+// Types
+export type {
+  AriaColorSliderOptions,
+  ColorSliderAria,
+  AriaColorAreaOptions,
+  ColorAreaAria,
+  AriaColorWheelOptions,
+  ColorWheelAria,
+  AriaColorFieldOptions,
+  ColorFieldAria,
+  AriaColorSwatchOptions,
+  ColorSwatchAria,
+} from './types';
+
+// Hooks
+export { createColorSlider } from './createColorSlider';
+export { createColorArea } from './createColorArea';
+export { createColorWheel } from './createColorWheel';
+export { createColorField } from './createColorField';
+export { createColorSwatch } from './createColorSwatch';

package/src/color/types.ts

@@ -0,0 +1,116 @@
+/**
+ * Color ARIA types.
+ */
+
+import type { JSX } from 'solid-js';
+import type { ColorChannel, Color } from '@proyecto-viviana/solid-stately';
+
+export interface AriaColorSliderOptions {
+  /** The channel this slider controls. */
+  channel: ColorChannel;
+  /** Accessible label for the slider. */
+  'aria-label'?: string;
+  /** ID of element that labels the slider. */
+  'aria-labelledby'?: string;
+  /** ID of element that describes the slider. */
+  'aria-describedby'?: string;
+  /** Whether the slider is disabled. */
+  isDisabled?: boolean;
+  /** Localized channel name. */
+  channelName?: string;
+}
+
+export interface ColorSliderAria {
+  /** Props for the slider track element. */
+  trackProps: JSX.HTMLAttributes<HTMLDivElement>;
+  /** Props for the thumb/handle element. */
+  thumbProps: JSX.HTMLAttributes<HTMLDivElement>;
+  /** Props for the hidden input element. */
+  inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
+  /** Props for the output element showing the value. */
+  outputProps: JSX.HTMLAttributes<HTMLOutputElement>;
+  /** Props for the label element. */
+  labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
+}
+
+export interface AriaColorAreaOptions {
+  /** The X channel. */
+  xChannel?: ColorChannel;
+  /** The Y channel. */
+  yChannel?: ColorChannel;
+  /** Accessible label for the area. */
+  'aria-label'?: string;
+  /** ID of element that labels the area. */
+  'aria-labelledby'?: string;
+  /** ID of element that describes the area. */
+  'aria-describedby'?: string;
+  /** Whether the area is disabled. */
+  isDisabled?: boolean;
+}
+
+export interface ColorAreaAria {
+  /** Props for the color area container. */
+  colorAreaProps: JSX.HTMLAttributes<HTMLDivElement>;
+  /** Props for the gradient element. */
+  gradientProps: JSX.HTMLAttributes<HTMLDivElement>;
+  /** Props for the thumb element. */
+  thumbProps: JSX.HTMLAttributes<HTMLDivElement>;
+  /** Props for the hidden X input element. */
+  xInputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
+  /** Props for the hidden Y input element. */
+  yInputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
+}
+
+export interface AriaColorWheelOptions {
+  /** Accessible label for the wheel. */
+  'aria-label'?: string;
+  /** ID of element that labels the wheel. */
+  'aria-labelledby'?: string;
+  /** ID of element that describes the wheel. */
+  'aria-describedby'?: string;
+  /** Whether the wheel is disabled. */
+  isDisabled?: boolean;
+}
+
+export interface ColorWheelAria {
+  /** Props for the wheel track element. */
+  trackProps: JSX.HTMLAttributes<HTMLDivElement>;
+  /** Props for the thumb element. */
+  thumbProps: JSX.HTMLAttributes<HTMLDivElement>;
+  /** Props for the hidden input element. */
+  inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
+}
+
+export interface AriaColorFieldOptions {
+  /** Accessible label for the field. */
+  'aria-label'?: string;
+  /** ID of element that labels the field. */
+  'aria-labelledby'?: string;
+  /** ID of element that describes the field. */
+  'aria-describedby'?: string;
+  /** Whether the field is disabled. */
+  isDisabled?: boolean;
+  /** Whether the field is read-only. */
+  isReadOnly?: boolean;
+  /** The color channel being edited (for single channel mode). */
+  channel?: ColorChannel;
+}
+
+export interface ColorFieldAria {
+  /** Props for the label element. */
+  labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
+  /** Props for the input element. */
+  inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
+}
+
+export interface AriaColorSwatchOptions {
+  /** The color to display. */
+  color: Color | string;
+  /** Accessible label for the swatch. */
+  'aria-label'?: string;
+}
+
+export interface ColorSwatchAria {
+  /** Props for the swatch element. */
+  swatchProps: JSX.HTMLAttributes<HTMLDivElement>;
+}