@proyecto-viviana/solid-stately 0.2.3 → 0.2.7

package/src/color/createColorWheelState.ts

@@ -1,211 +1,211 @@
-/**
- * ColorWheel state management.
- * Based on @react-stately/color useColorWheelState.
- */
-
-import { createSignal, createMemo, type Accessor } from 'solid-js';
-import type { Color, ColorChannel } from './types';
-import { normalizeColor } from './Color';
-
-export interface ColorWheelStateOptions {
-  /** The current color value (controlled). */
-  value?: Color | string;
-  /** The default color value (uncontrolled). */
-  defaultValue?: Color | string;
-  /** Handler called when the color changes. */
-  onChange?: (color: Color) => void;
-  /** Handler called when dragging ends. */
-  onChangeEnd?: (color: Color) => void;
-  /** Whether the wheel is disabled. */
-  isDisabled?: boolean;
-}
-
-export interface ColorWheelState {
-  /** The current color value. */
-  readonly value: Color;
-  /** Whether the wheel is being dragged. */
-  readonly isDragging: boolean;
-  /** Whether the wheel is disabled. */
-  readonly isDisabled: boolean;
-  /** Step value for hue changes. */
-  readonly step: number;
-  /** Page step value for hue changes. */
-  readonly pageStep: number;
-
-  /** Get the current hue value (0-360). */
-  getHue(): number;
-  /** Set the hue value. */
-  setHue(value: number): void;
-  /** Set hue from an angle in radians. */
-  setHueFromAngle(angle: number): void;
-  /** Get the thumb angle in radians (0 = right, increases counterclockwise). */
-  getThumbAngle(): number;
-  /** Increment hue value. */
-  increment(stepSize?: number): void;
-  /** Decrement hue value. */
-  decrement(stepSize?: number): void;
-  /** Set the dragging state. */
-  setDragging(isDragging: boolean): void;
-  /** Get the display color (with full saturation/brightness for wheel). */
-  getDisplayColor(): Color;
-}
-
-/**
- * Creates state for a color wheel (circular hue picker).
- */
-export function createColorWheelState(
-  options: Accessor<ColorWheelStateOptions>
-): ColorWheelState {
-  const getOptions = () => options();
-
-  // Internal value state
-  const [internalValue, setInternalValue] = createSignal<Color | null>(null);
-  const [isDragging, setIsDragging] = createSignal(false);
-
-  // Initialize internal value
-  const initValue = () => {
-    const opts = getOptions();
-    if (opts.defaultValue) {
-      return normalizeColor(opts.defaultValue);
-    }
-    return null;
-  };
-
-  // Set initial value
-  if (internalValue() === null) {
-    const init = initValue();
-    if (init) {
-      setInternalValue(init);
-    }
-  }
-
-  // Controlled vs uncontrolled value
-  const value = createMemo(() => {
-    const opts = getOptions();
-    if (opts.value !== undefined) {
-      return normalizeColor(opts.value);
-    }
-    return internalValue() ?? normalizeColor('#ff0000');
-  });
-
-  const isDisabled = createMemo(() => getOptions().isDisabled ?? false);
-
-  // Hue step and page step
-  const hueRange = createMemo(() => value().getChannelRange('hue'));
-  const step = createMemo(() => hueRange().step);
-  const pageStep = createMemo(() => hueRange().pageSize);
-
-  // Update value
-  const updateValue = (newColor: Color) => {
-    const opts = getOptions();
-
-    // Controlled mode
-    if (opts.value !== undefined) {
-      opts.onChange?.(newColor);
-      return;
-    }
-
-    // Uncontrolled mode
-    setInternalValue(newColor);
-    opts.onChange?.(newColor);
-  };
-
-  // Get hue value (0-360)
-  const getHue = () => value().getChannelValue('hue');
-
-  // Set hue value
-  const setHue = (newValue: number) => {
-    // Wrap hue to 0-360 range
-    let hue = newValue % 360;
-    if (hue < 0) hue += 360;
-
-    // Round to step
-    const range = hueRange();
-    const rounded = Math.round(hue / range.step) * range.step;
-
-    const newColor = value().withChannelValue('hue', rounded);
-    updateValue(newColor);
-  };
-
-  // Set hue from angle (radians, 0 = right, counterclockwise)
-  const setHueFromAngle = (angle: number) => {
-    // Convert angle to degrees (0-360)
-    // angle 0 = right (3 o'clock) = hue 0
-    // angle increases counterclockwise
-    let degrees = (angle * 180) / Math.PI;
-    degrees = 360 - degrees; // Convert to clockwise
-    if (degrees < 0) degrees += 360;
-    if (degrees >= 360) degrees -= 360;
-
-    setHue(degrees);
-  };
-
-  // Get thumb angle in radians
-  const getThumbAngle = () => {
-    const hue = getHue();
-    // Convert hue to angle (radians)
-    // hue 0 = angle 0 (right)
-    // hue increases clockwise, angle increases counterclockwise
-    const degrees = 360 - hue;
-    return (degrees * Math.PI) / 180;
-  };
-
-  // Increment hue
-  const increment = (stepSize?: number) => {
-    const s = stepSize ?? step();
-    setHue(getHue() + s);
-  };
-
-  // Decrement hue
-  const decrement = (stepSize?: number) => {
-    const s = stepSize ?? step();
-    setHue(getHue() - s);
-  };
-
-  // Set dragging state
-  const setDraggingState = (dragging: boolean) => {
-    const wasDragging = isDragging();
-    setIsDragging(dragging);
-
-    // Call onChangeEnd when dragging ends
-    if (wasDragging && !dragging) {
-      getOptions().onChangeEnd?.(value());
-    }
-  };
-
-  // Get display color (full saturation and brightness for wheel preview)
-  const getDisplayColor = () => {
-    // For display, we want the color at full saturation and brightness
-    // to show the pure hue on the wheel
-    return value()
-      .withChannelValue('saturation', 100)
-      .withChannelValue('brightness', 100)
-      .withChannelValue('alpha', 1);
-  };
-
-  return {
-    get value() {
-      return value();
-    },
-    get isDragging() {
-      return isDragging();
-    },
-    get isDisabled() {
-      return isDisabled();
-    },
-    get step() {
-      return step();
-    },
-    get pageStep() {
-      return pageStep();
-    },
-    getHue,
-    setHue,
-    setHueFromAngle,
-    getThumbAngle,
-    increment,
-    decrement,
-    setDragging: setDraggingState,
-    getDisplayColor,
-  };
-}
+/**
+ * ColorWheel state management.
+ * Based on @react-stately/color useColorWheelState.
+ */
+
+import { createSignal, createMemo, type Accessor } from 'solid-js';
+import type { Color, ColorChannel } from './types';
+import { normalizeColor } from './Color';
+
+export interface ColorWheelStateOptions {
+  /** The current color value (controlled). */
+  value?: Color | string;
+  /** The default color value (uncontrolled). */
+  defaultValue?: Color | string;
+  /** Handler called when the color changes. */
+  onChange?: (color: Color) => void;
+  /** Handler called when dragging ends. */
+  onChangeEnd?: (color: Color) => void;
+  /** Whether the wheel is disabled. */
+  isDisabled?: boolean;
+}
+
+export interface ColorWheelState {
+  /** The current color value. */
+  readonly value: Color;
+  /** Whether the wheel is being dragged. */
+  readonly isDragging: boolean;
+  /** Whether the wheel is disabled. */
+  readonly isDisabled: boolean;
+  /** Step value for hue changes. */
+  readonly step: number;
+  /** Page step value for hue changes. */
+  readonly pageStep: number;
+
+  /** Get the current hue value (0-360). */
+  getHue(): number;
+  /** Set the hue value. */
+  setHue(value: number): void;
+  /** Set hue from an angle in radians. */
+  setHueFromAngle(angle: number): void;
+  /** Get the thumb angle in radians (0 = right, increases counterclockwise). */
+  getThumbAngle(): number;
+  /** Increment hue value. */
+  increment(stepSize?: number): void;
+  /** Decrement hue value. */
+  decrement(stepSize?: number): void;
+  /** Set the dragging state. */
+  setDragging(isDragging: boolean): void;
+  /** Get the display color (with full saturation/brightness for wheel). */
+  getDisplayColor(): Color;
+}
+
+/**
+ * Creates state for a color wheel (circular hue picker).
+ */
+export function createColorWheelState(
+  options: Accessor<ColorWheelStateOptions>
+): ColorWheelState {
+  const getOptions = () => options();
+
+  // Internal value state
+  const [internalValue, setInternalValue] = createSignal<Color | null>(null);
+  const [isDragging, setIsDragging] = createSignal(false);
+
+  // Initialize internal value
+  const initValue = () => {
+    const opts = getOptions();
+    if (opts.defaultValue) {
+      return normalizeColor(opts.defaultValue);
+    }
+    return null;
+  };
+
+  // Set initial value
+  if (internalValue() === null) {
+    const init = initValue();
+    if (init) {
+      setInternalValue(init);
+    }
+  }
+
+  // Controlled vs uncontrolled value
+  const value = createMemo(() => {
+    const opts = getOptions();
+    if (opts.value !== undefined) {
+      return normalizeColor(opts.value);
+    }
+    return internalValue() ?? normalizeColor('#ff0000');
+  });
+
+  const isDisabled = createMemo(() => getOptions().isDisabled ?? false);
+
+  // Hue step and page step
+  const hueRange = createMemo(() => value().getChannelRange('hue'));
+  const step = createMemo(() => hueRange().step);
+  const pageStep = createMemo(() => hueRange().pageSize);
+
+  // Update value
+  const updateValue = (newColor: Color) => {
+    const opts = getOptions();
+
+    // Controlled mode
+    if (opts.value !== undefined) {
+      opts.onChange?.(newColor);
+      return;
+    }
+
+    // Uncontrolled mode
+    setInternalValue(newColor);
+    opts.onChange?.(newColor);
+  };
+
+  // Get hue value (0-360)
+  const getHue = () => value().getChannelValue('hue');
+
+  // Set hue value
+  const setHue = (newValue: number) => {
+    // Wrap hue to 0-360 range
+    let hue = newValue % 360;
+    if (hue < 0) hue += 360;
+
+    // Round to step
+    const range = hueRange();
+    const rounded = Math.round(hue / range.step) * range.step;
+
+    const newColor = value().withChannelValue('hue', rounded);
+    updateValue(newColor);
+  };
+
+  // Set hue from angle (radians, 0 = right, counterclockwise)
+  const setHueFromAngle = (angle: number) => {
+    // Convert angle to degrees (0-360)
+    // angle 0 = right (3 o'clock) = hue 0
+    // angle increases counterclockwise
+    let degrees = (angle * 180) / Math.PI;
+    degrees = 360 - degrees; // Convert to clockwise
+    if (degrees < 0) degrees += 360;
+    if (degrees >= 360) degrees -= 360;
+
+    setHue(degrees);
+  };
+
+  // Get thumb angle in radians
+  const getThumbAngle = () => {
+    const hue = getHue();
+    // Convert hue to angle (radians)
+    // hue 0 = angle 0 (right)
+    // hue increases clockwise, angle increases counterclockwise
+    const degrees = 360 - hue;
+    return (degrees * Math.PI) / 180;
+  };
+
+  // Increment hue
+  const increment = (stepSize?: number) => {
+    const s = stepSize ?? step();
+    setHue(getHue() + s);
+  };
+
+  // Decrement hue
+  const decrement = (stepSize?: number) => {
+    const s = stepSize ?? step();
+    setHue(getHue() - s);
+  };
+
+  // Set dragging state
+  const setDraggingState = (dragging: boolean) => {
+    const wasDragging = isDragging();
+    setIsDragging(dragging);
+
+    // Call onChangeEnd when dragging ends
+    if (wasDragging && !dragging) {
+      getOptions().onChangeEnd?.(value());
+    }
+  };
+
+  // Get display color (full saturation and brightness for wheel preview)
+  const getDisplayColor = () => {
+    // For display, we want the color at full saturation and brightness
+    // to show the pure hue on the wheel
+    return value()
+      .withChannelValue('saturation', 100)
+      .withChannelValue('brightness', 100)
+      .withChannelValue('alpha', 1);
+  };
+
+  return {
+    get value() {
+      return value();
+    },
+    get isDragging() {
+      return isDragging();
+    },
+    get isDisabled() {
+      return isDisabled();
+    },
+    get step() {
+      return step();
+    },
+    get pageStep() {
+      return pageStep();
+    },
+    getHue,
+    setHue,
+    setHueFromAngle,
+    getThumbAngle,
+    increment,
+    decrement,
+    setDragging: setDraggingState,
+    getDisplayColor,
+  };
+}

package/src/color/getColorChannels.ts

@@ -0,0 +1,34 @@
+/**
+ * getColorChannels - Standalone function to get color channels for a color space.
+ *
+ * Returns the three channels for a given color space.
+ */
+
+import type { ColorChannel, ColorSpace } from './types';
+
+const COLOR_SPACE_CHANNELS: Record<ColorSpace, [ColorChannel, ColorChannel, ColorChannel]> = {
+  rgb: ['red', 'green', 'blue'],
+  hsl: ['hue', 'saturation', 'lightness'],
+  hsb: ['hue', 'saturation', 'brightness'],
+};
+
+/**
+ * Returns the color channels for a given color space.
+ *
+ * @param colorSpace - The color space to get channels for.
+ * @returns A tuple of three color channels.
+ *
+ * @example
+ * ```ts
+ * getColorChannels('rgb') // ['red', 'green', 'blue']
+ * getColorChannels('hsl') // ['hue', 'saturation', 'lightness']
+ * getColorChannels('hsb') // ['hue', 'saturation', 'brightness']
+ * ```
+ */
+export function getColorChannels(colorSpace: ColorSpace): [ColorChannel, ColorChannel, ColorChannel] {
+  const channels = COLOR_SPACE_CHANNELS[colorSpace];
+  if (!channels) {
+    throw new Error(`Unknown color space: ${colorSpace}`);
+  }
+  return channels;
+}

package/src/color/index.ts

@@ -1,47 +1,47 @@
-/**
- * Color state management exports.
- */
-
-// Types
-export type {
-  Color,
-  ColorFormat,
-  ColorSpace,
-  ColorChannel,
-  ColorChannelRange,
-  ColorAxes,
-} from './types';
-
-// Color class and utilities
-export {
-  parseColor,
-  normalizeColor,
-  createRGBColor,
-  createHSLColor,
-  createHSBColor,
-} from './Color';
-
-// State hooks
-export {
-  createColorSliderState,
-  type ColorSliderStateOptions,
-  type ColorSliderState,
-} from './createColorSliderState';
-
-export {
-  createColorAreaState,
-  type ColorAreaStateOptions,
-  type ColorAreaState,
-} from './createColorAreaState';
-
-export {
-  createColorWheelState,
-  type ColorWheelStateOptions,
-  type ColorWheelState,
-} from './createColorWheelState';
-
-export {
-  createColorFieldState,
-  type ColorFieldStateOptions,
-  type ColorFieldState,
-} from './createColorFieldState';
+/**
+ * Color state management exports.
+ */
+
+// Types
+export type {
+  Color,
+  ColorFormat,
+  ColorSpace,
+  ColorChannel,
+  ColorChannelRange,
+  ColorAxes,
+} from './types';
+
+// Color class and utilities
+export {
+  parseColor,
+  normalizeColor,
+  createRGBColor,
+  createHSLColor,
+  createHSBColor,
+} from './Color';
+
+// State hooks
+export {
+  createColorSliderState,
+  type ColorSliderStateOptions,
+  type ColorSliderState,
+} from './createColorSliderState';
+
+export {
+  createColorAreaState,
+  type ColorAreaStateOptions,
+  type ColorAreaState,
+} from './createColorAreaState';
+
+export {
+  createColorWheelState,
+  type ColorWheelStateOptions,
+  type ColorWheelState,
+} from './createColorWheelState';
+
+export {
+  createColorFieldState,
+  type ColorFieldStateOptions,
+  type ColorFieldState,
+} from './createColorFieldState';