@proyecto-viviana/solidaria 0.2.2 → 0.2.4

package/src/color/createColorArea.ts

@@ -0,0 +1,314 @@
+/**
+ * createColorArea hook.
+ *
+ * Provides ARIA attributes and keyboard/pointer handling for a 2D color area.
+ */
+
+import { createMemo, type Accessor } from 'solid-js';
+import type { ColorAreaState } from '@proyecto-viviana/solid-stately';
+import { createId } from '../ssr';
+import type { AriaColorAreaOptions, ColorAreaAria } from './types';
+
+/**
+ * Creates ARIA props for a color area.
+ */
+export function createColorArea(
+  props: Accessor<AriaColorAreaOptions>,
+  state: Accessor<ColorAreaState>,
+  areaRef: Accessor<HTMLDivElement | null>
+): ColorAreaAria {
+  const getProps = () => props();
+  const getState = () => state();
+
+  // Generate IDs
+  const xInputId = createId();
+  const yInputId = createId();
+
+  // Calculate position from pointer event
+  const getPositionFromEvent = (e: MouseEvent | PointerEvent) => {
+    const area = areaRef();
+    if (!area) return null;
+
+    const rect = area.getBoundingClientRect();
+    const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
+
+    return { x, y };
+  };
+
+  // Handle pointer down
+  const onPointerDown = (e: PointerEvent) => {
+    if (getProps().isDisabled || getState().isDisabled) return;
+
+    const pos = getPositionFromEvent(e);
+    if (!pos) return;
+
+    getState().setColorFromPoint(pos.x, pos.y);
+    getState().setDragging(true);
+
+    // Capture pointer for dragging
+    (e.target as HTMLElement).setPointerCapture?.(e.pointerId);
+  };
+
+  // Handle pointer move
+  const onPointerMove = (e: PointerEvent) => {
+    if (!getState().isDragging) return;
+
+    const pos = getPositionFromEvent(e);
+    if (!pos) return;
+
+    getState().setColorFromPoint(pos.x, pos.y);
+  };
+
+  // Handle pointer up
+  const onPointerUp = (e: PointerEvent) => {
+    if (getState().isDragging) {
+      getState().setDragging(false);
+      (e.target as HTMLElement).releasePointerCapture?.(e.pointerId);
+    }
+  };
+
+  // Handle keyboard for X axis
+  const onKeyDownX = (e: KeyboardEvent) => {
+    if (getProps().isDisabled || getState().isDisabled) return;
+
+    const s = getState();
+    let handled = true;
+
+    switch (e.key) {
+      case 'ArrowRight':
+        s.incrementX();
+        break;
+      case 'ArrowLeft':
+        s.decrementX();
+        break;
+      case 'ArrowUp':
+        s.incrementY();
+        break;
+      case 'ArrowDown':
+        s.decrementY();
+        break;
+      case 'PageUp':
+        s.incrementY(s.yChannelPageStep);
+        break;
+      case 'PageDown':
+        s.decrementY(s.yChannelPageStep);
+        break;
+      case 'Home':
+        if (e.ctrlKey) {
+          s.setXValue(0);
+          s.setYValue(100);
+        } else {
+          s.setXValue(0);
+        }
+        break;
+      case 'End':
+        if (e.ctrlKey) {
+          s.setXValue(100);
+          s.setYValue(0);
+        } else {
+          s.setXValue(100);
+        }
+        break;
+      default:
+        handled = false;
+    }
+
+    if (handled) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+
+  // Handle keyboard for Y axis
+  const onKeyDownY = (e: KeyboardEvent) => {
+    if (getProps().isDisabled || getState().isDisabled) return;
+
+    const s = getState();
+    let handled = true;
+
+    switch (e.key) {
+      case 'ArrowUp':
+        s.incrementY();
+        break;
+      case 'ArrowDown':
+        s.decrementY();
+        break;
+      case 'ArrowRight':
+        s.incrementX();
+        break;
+      case 'ArrowLeft':
+        s.decrementX();
+        break;
+      case 'PageUp':
+        s.incrementY(s.yChannelPageStep);
+        break;
+      case 'PageDown':
+        s.decrementY(s.yChannelPageStep);
+        break;
+      case 'Home':
+        s.setYValue(100);
+        break;
+      case 'End':
+        s.setYValue(0);
+        break;
+      default:
+        handled = false;
+    }
+
+    if (handled) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+
+  // Color area props
+  const colorAreaProps = createMemo(() => {
+    const s = getState();
+    const p = getProps();
+
+    return {
+      role: 'group' as const,
+      'aria-label': p['aria-label'],
+      'aria-labelledby': p['aria-labelledby'],
+      'aria-describedby': p['aria-describedby'],
+      'aria-disabled': s.isDisabled || p.isDisabled || undefined,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      style: {
+        position: 'relative' as const,
+        'touch-action': 'none',
+      },
+      'data-disabled': s.isDisabled || p.isDisabled || undefined,
+    };
+  });
+
+  // Gradient props (the visual area)
+  const gradientProps = createMemo(() => {
+    return {
+      role: 'presentation' as const,
+      style: {
+        width: '100%',
+        height: '100%',
+      },
+    };
+  });
+
+  // Thumb props
+  const thumbProps = createMemo(() => {
+    const s = getState();
+    const p = getProps();
+    const pos = s.getThumbPosition();
+
+    return {
+      role: 'presentation' as const,
+      style: {
+        position: 'absolute' as const,
+        left: `${pos.x * 100}%`,
+        top: `${pos.y * 100}%`,
+        transform: 'translate(-50%, -50%)',
+        'touch-action': 'none',
+      },
+      'data-dragging': s.isDragging || undefined,
+      'data-disabled': s.isDisabled || p.isDisabled || undefined,
+    };
+  });
+
+  // X input props (hidden, for accessibility)
+  const xInputProps = createMemo(() => {
+    const s = getState();
+    const p = getProps();
+    const xRange = s.value.getChannelRange(s.xChannel);
+    const xName = s.value.getChannelName(s.xChannel, 'en-US');
+
+    return {
+      type: 'range',
+      id: xInputId,
+      'aria-label': `${xName}`,
+      'aria-valuetext': `${xName}: ${s.getXValue()}`,
+      min: xRange.minValue,
+      max: xRange.maxValue,
+      step: xRange.step,
+      value: s.getXValue(),
+      disabled: s.isDisabled || p.isDisabled,
+      onKeyDown: onKeyDownX,
+      onChange: (e: Event) => {
+        const target = e.target as HTMLInputElement;
+        s.setXValue(parseFloat(target.value));
+      },
+      onBlur: () => {
+        if (s.isDragging) {
+          s.setDragging(false);
+        }
+      },
+      tabIndex: 0,
+      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',
+      },
+    };
+  });
+
+  // Y input props (hidden, for accessibility)
+  const yInputProps = createMemo(() => {
+    const s = getState();
+    const p = getProps();
+    const yRange = s.value.getChannelRange(s.yChannel);
+    const yName = s.value.getChannelName(s.yChannel, 'en-US');
+
+    return {
+      type: 'range',
+      id: yInputId,
+      'aria-label': `${yName}`,
+      'aria-valuetext': `${yName}: ${s.getYValue()}`,
+      min: yRange.minValue,
+      max: yRange.maxValue,
+      step: yRange.step,
+      value: s.getYValue(),
+      disabled: s.isDisabled || p.isDisabled,
+      onKeyDown: onKeyDownY,
+      onChange: (e: Event) => {
+        const target = e.target as HTMLInputElement;
+        s.setYValue(parseFloat(target.value));
+      },
+      tabIndex: -1, // Only first input is in tab order
+      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 colorAreaProps() {
+      return colorAreaProps();
+    },
+    get gradientProps() {
+      return gradientProps();
+    },
+    get thumbProps() {
+      return thumbProps();
+    },
+    get xInputProps() {
+      return xInputProps();
+    },
+    get yInputProps() {
+      return yInputProps();
+    },
+  };
+}

package/src/color/createColorField.ts

@@ -0,0 +1,137 @@
+/**
+ * createColorField hook.
+ *
+ * Provides ARIA attributes and keyboard handling for a color input field.
+ */
+
+import { createMemo, type Accessor } from 'solid-js';
+import type { ColorFieldState } from '@proyecto-viviana/solid-stately';
+import { createId } from '../ssr';
+import type { AriaColorFieldOptions, ColorFieldAria } from './types';
+
+/**
+ * Creates ARIA props for a color field.
+ */
+export function createColorField(
+  props: Accessor<AriaColorFieldOptions>,
+  state: Accessor<ColorFieldState>,
+  _inputRef: Accessor<HTMLInputElement | null>
+): ColorFieldAria {
+  const getProps = () => props();
+  const getState = () => state();
+
+  // Generate IDs
+  const inputId = createId();
+  const labelId = createId();
+
+  // Handle keyboard
+  const onKeyDown = (e: KeyboardEvent) => {
+    const s = getState();
+    const p = getProps();
+
+    if (p.isDisabled || s.isDisabled || p.isReadOnly || s.isReadOnly) return;
+
+    // Only handle special keys for channel mode
+    if (!s.channel) return;
+
+    let handled = true;
+
+    switch (e.key) {
+      case 'ArrowUp':
+        s.increment();
+        break;
+      case 'ArrowDown':
+        s.decrement();
+        break;
+      case 'PageUp':
+        s.incrementToMax();
+        break;
+      case 'PageDown':
+        s.decrementToMin();
+        break;
+      case 'Home':
+        if (e.ctrlKey) {
+          s.decrementToMin();
+        } else {
+          handled = false;
+        }
+        break;
+      case 'End':
+        if (e.ctrlKey) {
+          s.incrementToMax();
+        } else {
+          handled = false;
+        }
+        break;
+      default:
+        handled = false;
+    }
+
+    if (handled) {
+      e.preventDefault();
+    }
+  };
+
+  // Label props
+  const labelProps = createMemo(() => {
+    return {
+      id: labelId,
+      for: inputId,
+    };
+  });
+
+  // Input props
+  const inputProps = createMemo(() => {
+    const s = getState();
+    const p = getProps();
+
+    // Get channel name if in channel mode
+    const channelLabel = s.channel && s.value
+      ? s.value.getChannelName(s.channel, 'en-US')
+      : undefined;
+
+    return {
+      id: inputId,
+      type: 'text',
+      value: s.inputValue,
+      disabled: p.isDisabled || s.isDisabled,
+      readOnly: p.isReadOnly || s.isReadOnly,
+      'aria-label': p['aria-label'] ?? channelLabel,
+      'aria-labelledby': p['aria-labelledby'],
+      'aria-describedby': p['aria-describedby'],
+      'aria-invalid': s.isInvalid || undefined,
+      // For spinbutton role in channel mode
+      role: s.channel ? ('spinbutton' as const) : undefined,
+      'aria-valuenow': s.channel && s.value
+        ? s.value.getChannelValue(s.channel)
+        : undefined,
+      'aria-valuemin': s.channel && s.value
+        ? s.value.getChannelRange(s.channel).minValue
+        : undefined,
+      'aria-valuemax': s.channel && s.value
+        ? s.value.getChannelRange(s.channel).maxValue
+        : undefined,
+      onInput: (e: InputEvent) => {
+        const target = e.target as HTMLInputElement;
+        s.setInputValue(target.value);
+      },
+      onChange: () => {
+        // onChange fires on blur or enter
+        s.commit();
+      },
+      onBlur: () => {
+        s.commit();
+      },
+      onKeyDown,
+    };
+  });
+
+  return {
+    get labelProps() {
+      return labelProps();
+    },
+    get inputProps() {
+      return inputProps();
+    },
+  };
+}

package/src/color/createColorSlider.ts

@@ -0,0 +1,197 @@
+/**
+ * createColorSlider hook.
+ *
+ * Provides ARIA attributes and keyboard handling for a color slider.
+ */
+
+import { createMemo, type Accessor } from 'solid-js';
+import type { ColorSliderState } from '@proyecto-viviana/solid-stately';
+import { createId } from '../ssr';
+import type { AriaColorSliderOptions, ColorSliderAria } from './types';
+
+/**
+ * Creates ARIA props for a color slider.
+ */
+export function createColorSlider(
+  props: Accessor<AriaColorSliderOptions>,
+  state: Accessor<ColorSliderState>,
+  trackRef: Accessor<HTMLDivElement | null>
+): ColorSliderAria {
+  const getProps = () => props();
+  const getState = () => state();
+
+  // Generate IDs
+  const inputId = createId();
+  const labelId = createId();
+
+  // Get channel name for ARIA label
+  const channelName = createMemo(() => {
+    const p = getProps();
+    if (p.channelName) return p.channelName;
+    const s = getState();
+    return s.value.getChannelName(s.channel, 'en-US');
+  });
+
+  // Handle track click
+  const onTrackMouseDown = (e: MouseEvent) => {
+    if (getProps().isDisabled || getState().isDisabled) return;
+
+    const track = trackRef();
+    if (!track) return;
+
+    const rect = track.getBoundingClientRect();
+    const percent = (e.clientX - rect.left) / rect.width;
+    getState().setThumbPercent(Math.max(0, Math.min(1, percent)));
+    getState().setDragging(true);
+  };
+
+  // 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.incrementThumb();
+        break;
+      case 'ArrowLeft':
+      case 'ArrowDown':
+        s.decrementThumb();
+        break;
+      case 'PageUp':
+        s.incrementThumb(s.pageSize);
+        break;
+      case 'PageDown':
+        s.decrementThumb(s.pageSize);
+        break;
+      case 'Home':
+        s.setThumbValue(s.minValue);
+        break;
+      case 'End':
+        s.setThumbValue(s.maxValue);
+        break;
+      default:
+        handled = false;
+    }
+
+    if (handled) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+
+  // Track props
+  const trackProps = createMemo(() => {
+    const s = getState();
+    return {
+      role: 'presentation' as const,
+      onMouseDown: onTrackMouseDown,
+      style: {
+        position: 'relative' as const,
+        'touch-action': 'none',
+      },
+      'data-disabled': s.isDisabled || undefined,
+    };
+  });
+
+  // Thumb props
+  const thumbProps = createMemo(() => {
+    const s = getState();
+    const p = getProps();
+    const percent = s.getThumbPercent();
+
+    return {
+      role: 'presentation' as const,
+      style: {
+        position: 'absolute' as const,
+        left: `${percent * 100}%`,
+        top: '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: s.minValue,
+      max: s.maxValue,
+      step: s.step,
+      value: s.getThumbValue(),
+      disabled: s.isDisabled || p.isDisabled,
+      'aria-label': p['aria-label'] ?? channelName(),
+      'aria-labelledby': p['aria-labelledby'],
+      'aria-describedby': p['aria-describedby'],
+      'aria-valuetext': s.getThumbValueLabel(),
+      onKeyDown,
+      onChange: (e: Event) => {
+        const target = e.target as HTMLInputElement;
+        s.setThumbValue(parseFloat(target.value));
+      },
+      onFocus: () => {
+        // Focus handling
+      },
+      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',
+      },
+    };
+  });
+
+  // Output props
+  const outputProps = createMemo(() => {
+    return {
+      'aria-live': 'off' as const,
+      for: inputId,
+    };
+  });
+
+  // Label props
+  const labelProps = createMemo(() => {
+    return {
+      id: labelId,
+      for: inputId,
+    };
+  });
+
+  return {
+    get trackProps() {
+      return trackProps();
+    },
+    get thumbProps() {
+      return thumbProps();
+    },
+    get inputProps() {
+      return inputProps();
+    },
+    get outputProps() {
+      return outputProps();
+    },
+    get labelProps() {
+      return labelProps();
+    },
+  };
+}

package/src/color/createColorSwatch.ts

@@ -0,0 +1,40 @@
+/**
+ * createColorSwatch hook.
+ *
+ * Provides ARIA attributes for a color swatch display.
+ */
+
+import { createMemo, type Accessor } from 'solid-js';
+import { normalizeColor } from '@proyecto-viviana/solid-stately';
+import type { AriaColorSwatchOptions, ColorSwatchAria } from './types';
+
+/**
+ * Creates ARIA props for a color swatch.
+ */
+export function createColorSwatch(
+  props: Accessor<AriaColorSwatchOptions>
+): ColorSwatchAria {
+  const getProps = () => props();
+
+  // Swatch props
+  const swatchProps = createMemo(() => {
+    const p = getProps();
+    const color = normalizeColor(p.color);
+    const colorName = color.getColorName('en-US');
+
+    return {
+      role: 'img' as const,
+      'aria-label': p['aria-label'] ?? colorName,
+      'aria-roledescription': 'color swatch',
+      style: {
+        'background-color': color.toString('css'),
+      },
+    };
+  });
+
+  return {
+    get swatchProps() {
+      return swatchProps();
+    },
+  };
+}