@proyecto-viviana/solidaria 0.2.4 → 0.2.8

package/src/color/createColorSlider.ts

@@ -1,197 +1,286 @@
-/**
- * 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();
-    },
-  };
-}
+/**
+ * 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');
+  });
+
+  const updateFromClientX = (clientX: number) => {
+    if (getProps().isDisabled || getState().isDisabled) return;
+
+    const track = trackRef();
+    if (!track) return;
+
+    const rect = track.getBoundingClientRect();
+    const percent = (clientX - rect.left) / rect.width;
+    getState().setThumbPercent(Math.max(0, Math.min(1, percent)));
+  };
+
+  const endDrag = (target: EventTarget | null, pointerId?: number) => {
+    const s = getState();
+    if (!s.isDragging) return;
+    s.setDragging(false);
+    if (pointerId == null) return;
+    (target as HTMLElement | null)?.releasePointerCapture?.(pointerId);
+  };
+
+  // Handle pointer interaction on the track
+  const onTrackPointerDown = (e: PointerEvent) => {
+    if (getProps().isDisabled || getState().isDisabled) return;
+    updateFromClientX(e.clientX);
+    getState().setDragging(true);
+    (e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId);
+    e.preventDefault();
+  };
+
+  const onTrackPointerMove = (e: PointerEvent) => {
+    if (!getState().isDragging) return;
+    updateFromClientX(e.clientX);
+  };
+
+  const onTrackPointerUp = (e: PointerEvent) => {
+    endDrag(e.currentTarget, e.pointerId);
+  };
+
+  const onTrackPointerCancel = (e: PointerEvent) => {
+    endDrag(e.currentTarget, e.pointerId);
+  };
+
+  const onTrackMouseDown = (e: MouseEvent) => {
+    if (getProps().isDisabled || getState().isDisabled) return;
+    updateFromClientX(e.clientX);
+    getState().setDragging(true);
+    e.preventDefault();
+  };
+
+  const onTrackMouseMove = (e: MouseEvent) => {
+    if (!getState().isDragging) return;
+    updateFromClientX(e.clientX);
+  };
+
+  const onTrackMouseUp = (e: MouseEvent) => {
+    endDrag(e.currentTarget);
+  };
+
+  // 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();
+    }
+  };
+
+  // Generate gradient background for the slider track
+  const generateBackground = () => {
+    const s = getState();
+    const value = s.value;
+    const channel = s.channel;
+    const to = 'right';
+
+    switch (channel) {
+      case 'hue': {
+        const stops = [0, 60, 120, 180, 240, 300, 360]
+          .map(hue => value.withChannelValue('hue', hue).toString('css'))
+          .join(', ');
+        return `linear-gradient(to ${to}, ${stops})`;
+      }
+      case 'lightness': {
+        const min = s.minValue;
+        const max = s.maxValue;
+        const start = value.withChannelValue(channel, min).toString('css');
+        const middle = value.withChannelValue(channel, (max - min) / 2).toString('css');
+        const end = value.withChannelValue(channel, max).toString('css');
+        return `linear-gradient(to ${to}, ${start}, ${middle}, ${end})`;
+      }
+      case 'saturation':
+      case 'brightness':
+      case 'red':
+      case 'green':
+      case 'blue':
+      case 'alpha': {
+        const start = value.withChannelValue(channel, s.minValue).toString('css');
+        const end = value.withChannelValue(channel, s.maxValue).toString('css');
+        return `linear-gradient(to ${to}, ${start}, ${end})`;
+      }
+      default:
+        return undefined;
+    }
+  };
+
+  // Track props
+  const trackProps = createMemo(() => {
+    const s = getState();
+    const bg = generateBackground();
+    return {
+      role: 'presentation' as const,
+      onPointerDown: onTrackPointerDown,
+      onPointerMove: onTrackPointerMove,
+      onPointerUp: onTrackPointerUp,
+      onPointerCancel: onTrackPointerCancel,
+      onMouseDown: onTrackMouseDown,
+      onMouseMove: onTrackMouseMove,
+      onMouseUp: onTrackMouseUp,
+      style: {
+        position: 'relative' as const,
+        'touch-action': 'none',
+        ...(bg ? { background: bg, 'forced-color-adjust': 'none' as const } : {}),
+      },
+      '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 +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();
-    },
-  };
-}
+/**
+ * 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();
+    },
+  };
+}