@proyecto-viviana/solidaria 0.1.3 → 0.2.0

package/src/color/createColorField.ts

@@ -1,137 +0,0 @@
-/**
- * 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

@@ -1,197 +0,0 @@
-/**
- * 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

@@ -1,40 +0,0 @@
-/**
- * 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();
-    },
-  };
-}

package/src/color/createColorWheel.ts

@@ -1,208 +0,0 @@
-/**
- * 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

@@ -1,24 +0,0 @@
-/**
- * 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';