@proyecto-viviana/solid-stately 0.2.7 → 0.3.0

package/src/color/createColorSliderState.d.ts

@@ -2,66 +2,68 @@
  * ColorSlider state management.
  * Based on @react-stately/color useColorSliderState.
  */
-import { type Accessor } from 'solid-js';
-import type { Color, ColorChannel } from './types';
+import { type Accessor } from "solid-js";
+import type { Color, ColorChannel } from "./types";
 export interface ColorSliderStateOptions {
-    /** 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;
-    /** The color channel this slider controls. */
-    channel: ColorChannel;
-    /** Whether the slider is disabled. */
-    isDisabled?: boolean;
-    /** The locale for formatting. */
-    locale?: string;
+  /** 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;
+  /** The color channel this slider controls. */
+  channel: ColorChannel;
+  /** Whether the slider is disabled. */
+  isDisabled?: boolean;
+  /** The locale for formatting. */
+  locale?: string;
 }
 export interface ColorSliderState {
-    /** The current color value. */
-    readonly value: Color;
-    /** Whether the slider is being dragged. */
-    readonly isDragging: boolean;
-    /** The color channel being controlled. */
-    readonly channel: ColorChannel;
-    /** The step value for the channel. */
-    readonly step: number;
-    /** The page step value for the channel. */
-    readonly pageSize: number;
-    /** The minimum value for the channel. */
-    readonly minValue: number;
-    /** The maximum value for the channel. */
-    readonly maxValue: number;
-    /** Whether the slider is disabled. */
-    readonly isDisabled: boolean;
-    /** Get the current channel value. */
-    getThumbValue(): number;
-    /** Get the minimum percent. */
-    getThumbMinValue(): number;
-    /** Get the maximum percent. */
-    getThumbMaxValue(): number;
-    /** Get the thumb value as a percentage. */
-    getThumbPercent(): number;
-    /** Set the channel value. */
-    setThumbValue(value: number): void;
-    /** Set the thumb value from a percentage (0-1). */
-    setThumbPercent(percent: number): void;
-    /** Increment the channel value. */
-    incrementThumb(stepSize?: number): void;
-    /** Decrement the channel value. */
-    decrementThumb(stepSize?: number): void;
-    /** Set the dragging state. */
-    setDragging(isDragging: boolean): void;
-    /** Get the display color (with alpha = 1). */
-    getDisplayColor(): Color;
-    /** Get the formatted value label. */
-    getThumbValueLabel(): string;
+  /** The current color value. */
+  readonly value: Color;
+  /** Whether the slider is being dragged. */
+  readonly isDragging: boolean;
+  /** The color channel being controlled. */
+  readonly channel: ColorChannel;
+  /** The step value for the channel. */
+  readonly step: number;
+  /** The page step value for the channel. */
+  readonly pageSize: number;
+  /** The minimum value for the channel. */
+  readonly minValue: number;
+  /** The maximum value for the channel. */
+  readonly maxValue: number;
+  /** Whether the slider is disabled. */
+  readonly isDisabled: boolean;
+  /** Get the current channel value. */
+  getThumbValue(): number;
+  /** Get the minimum percent. */
+  getThumbMinValue(): number;
+  /** Get the maximum percent. */
+  getThumbMaxValue(): number;
+  /** Get the thumb value as a percentage. */
+  getThumbPercent(): number;
+  /** Set the channel value. */
+  setThumbValue(value: number): void;
+  /** Set the thumb value from a percentage (0-1). */
+  setThumbPercent(percent: number): void;
+  /** Increment the channel value. */
+  incrementThumb(stepSize?: number): void;
+  /** Decrement the channel value. */
+  decrementThumb(stepSize?: number): void;
+  /** Set the dragging state. */
+  setDragging(isDragging: boolean): void;
+  /** Get the display color (with alpha = 1). */
+  getDisplayColor(): Color;
+  /** Get the formatted value label. */
+  getThumbValueLabel(): string;
 }
 /**
  * Creates state for a color slider.
  */
-export declare function createColorSliderState(options: Accessor<ColorSliderStateOptions>): ColorSliderState;
-//# sourceMappingURL=createColorSliderState.d.ts.map
+export declare function createColorSliderState(
+  options: Accessor<ColorSliderStateOptions>,
+): ColorSliderState;
+//# sourceMappingURL=createColorSliderState.d.ts.map

package/src/color/createColorSliderState.ts

@@ -3,9 +3,11 @@
  * Based on @react-stately/color useColorSliderState.
  */
 
-import { createSignal, createMemo, type Accessor } from 'solid-js';
-import type { Color, ColorChannel } from './types';
-import { normalizeColor } from './Color';
+import { createSignal, createMemo, type Accessor } from "solid-js";
+import type { Color, ColorChannel, ColorSpace } from "./types";
+import { normalizeColor } from "./Color";
+
+export type ColorSliderOrientation = "horizontal" | "vertical";
 
 export interface ColorSliderStateOptions {
   /** The current color value (controlled). */
@@ -18,6 +20,10 @@ export interface ColorSliderStateOptions {
   onChangeEnd?: (color: Color) => void;
   /** The color channel this slider controls. */
   channel: ColorChannel;
+  /** The color space to use for channel values. */
+  colorSpace?: ColorSpace;
+  /** The slider orientation. */
+  orientation?: ColorSliderOrientation;
   /** Whether the slider is disabled. */
   isDisabled?: boolean;
   /** The locale for formatting. */
@@ -31,6 +37,8 @@ export interface ColorSliderState {
   readonly isDragging: boolean;
   /** The color channel being controlled. */
   readonly channel: ColorChannel;
+  /** The slider orientation. */
+  readonly orientation: ColorSliderOrientation;
   /** The step value for the channel. */
   readonly step: number;
   /** The page step value for the channel. */
@@ -70,10 +78,16 @@ export interface ColorSliderState {
  * Creates state for a color slider.
  */
 export function createColorSliderState(
-  options: Accessor<ColorSliderStateOptions>
+  options: Accessor<ColorSliderStateOptions>,
 ): ColorSliderState {
   const getOptions = () => options();
 
+  const normalizeValue = (value: Color | string) => {
+    const color = normalizeColor(value);
+    const colorSpace = getOptions().colorSpace;
+    return colorSpace ? color.toFormat(colorSpace) : color;
+  };
+
   // Internal value state
   const [internalValue, setInternalValue] = createSignal<Color | null>(null);
   const [isDragging, setIsDragging] = createSignal(false);
@@ -82,7 +96,7 @@ export function createColorSliderState(
   const initValue = () => {
     const opts = getOptions();
     if (opts.defaultValue) {
-      return normalizeColor(opts.defaultValue);
+      return normalizeValue(opts.defaultValue);
     }
     return null;
   };
@@ -99,14 +113,18 @@ export function createColorSliderState(
   const value = createMemo(() => {
     const opts = getOptions();
     if (opts.value !== undefined) {
-      return normalizeColor(opts.value);
+      return normalizeValue(opts.value);
     }
-    return internalValue() ?? normalizeColor('#ff0000');
+    const fallback = internalValue() ?? normalizeValue("#ff0000");
+    return opts.colorSpace ? fallback.toFormat(opts.colorSpace) : fallback;
   });
 
   const channel = createMemo(() => getOptions().channel);
+  const orientation = createMemo<ColorSliderOrientation>(
+    () => getOptions().orientation ?? "horizontal",
+  );
   const isDisabled = createMemo(() => getOptions().isDisabled ?? false);
-  const locale = createMemo(() => getOptions().locale ?? 'en-US');
+  const locale = createMemo(() => getOptions().locale ?? "en-US");
 
   // Get channel range
   const channelRange = createMemo(() => value().getChannelRange(channel()));
@@ -119,16 +137,17 @@ export function createColorSliderState(
   // Update value
   const updateValue = (newColor: Color) => {
     const opts = getOptions();
+    const nextColor = opts.colorSpace ? newColor.toFormat(opts.colorSpace) : newColor;
 
     // Controlled mode
     if (opts.value !== undefined) {
-      opts.onChange?.(newColor);
+      opts.onChange?.(nextColor);
       return;
     }
 
     // Uncontrolled mode
-    setInternalValue(newColor);
-    opts.onChange?.(newColor);
+    setInternalValue(nextColor);
+    opts.onChange?.(nextColor);
   };
 
   // Get thumb value
@@ -150,8 +169,14 @@ export function createColorSliderState(
 
   // Set thumb value
   const setThumbValue = (newValue: number) => {
-    const clamped = Math.max(minValue(), Math.min(maxValue(), newValue));
-    const rounded = Math.round(clamped / step()) * step();
+    const min = minValue();
+    const max = maxValue();
+    const stepValue = step();
+    const clamped = Math.max(min, Math.min(max, newValue));
+    const precision = `${stepValue}`.split(".")[1]?.length ?? 0;
+    const rounded = Number(
+      (Math.round((clamped - min) / stepValue) * stepValue + min).toFixed(precision),
+    );
     const newColor = value().withChannelValue(channel(), rounded);
     updateValue(newColor);
   };
@@ -190,7 +215,10 @@ export function createColorSliderState(
   // Get display color (alpha = 1)
   const getDisplayColor = () => {
     const v = value();
-    return v.withChannelValue('alpha', 1);
+    if (channel() === "hue") {
+      return normalizeColor(`hsl(${v.getChannelValue("hue")}, 100%, 50%)`);
+    }
+    return v.withChannelValue("alpha", 1);
   };
 
   // Get formatted value label
@@ -211,6 +239,9 @@ export function createColorSliderState(
     get channel() {
       return channel();
     },
+    get orientation() {
+      return orientation();
+    },
     get step() {
       return step();
     },

package/src/color/createColorWheelState.d.ts

@@ -2,50 +2,52 @@
  * ColorWheel state management.
  * Based on @react-stately/color useColorWheelState.
  */
-import { type Accessor } from 'solid-js';
-import type { Color } from './types';
+import { type Accessor } from "solid-js";
+import type { Color } from "./types";
 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;
+  /** 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;
+  /** 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 declare function createColorWheelState(options: Accessor<ColorWheelStateOptions>): ColorWheelState;
-//# sourceMappingURL=createColorWheelState.d.ts.map
+export declare function createColorWheelState(
+  options: Accessor<ColorWheelStateOptions>,
+): ColorWheelState;
+//# sourceMappingURL=createColorWheelState.d.ts.map

package/src/color/createColorWheelState.ts

@@ -3,9 +3,9 @@
  * Based on @react-stately/color useColorWheelState.
  */
 
-import { createSignal, createMemo, type Accessor } from 'solid-js';
-import type { Color, ColorChannel } from './types';
-import { normalizeColor } from './Color';
+import { createSignal, createMemo, type Accessor } from "solid-js";
+import type { Color } from "./types";
+import { createHSLColor, normalizeColor } from "./Color";
 
 export interface ColorWheelStateOptions {
   /** The current color value (controlled). */
@@ -23,6 +23,8 @@ export interface ColorWheelStateOptions {
 export interface ColorWheelState {
   /** The current color value. */
   readonly value: Color;
+  /** The initial color value. */
+  readonly defaultValue: Color;
   /** Whether the wheel is being dragged. */
   readonly isDragging: boolean;
   /** Whether the wheel is disabled. */
@@ -34,12 +36,18 @@ export interface ColorWheelState {
 
   /** Get the current hue value (0-360). */
   getHue(): number;
+  /** Set the full color value. */
+  setValue(value: Color | string): void;
   /** Set the hue value. */
   setHue(value: number): void;
   /** Set hue from an angle in radians. */
   setHueFromAngle(angle: number): void;
+  /** Set hue from a point relative to the wheel center. */
+  setHueFromPoint(x: number, y: number, radius: number): void;
   /** Get the thumb angle in radians (0 = right, increases counterclockwise). */
   getThumbAngle(): number;
+  /** Get the thumb position relative to the wheel center. */
+  getThumbPosition(radius: number): { x: number; y: number };
   /** Increment hue value. */
   increment(stepSize?: number): void;
   /** Decrement hue value. */
@@ -53,113 +61,137 @@ export interface ColorWheelState {
 /**
  * Creates state for a color wheel (circular hue picker).
  */
-export function createColorWheelState(
-  options: Accessor<ColorWheelStateOptions>
-): ColorWheelState {
+export function createColorWheelState(options: Accessor<ColorWheelStateOptions>): ColorWheelState {
   const getOptions = () => options();
+  const defaultColor = createHSLColor(0, 100, 50);
 
-  // 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;
+  const normalizeWheelValue = (color: Color | string) => {
+    const value = normalizeColor(color);
+    return value.toFormat(value.getColorSpace() === "hsb" ? "hsb" : "hsl");
   };
 
-  // Set initial value
-  if (internalValue() === null) {
-    const init = initValue();
-    if (init) {
-      setInternalValue(init);
-    }
-  }
+  const initialValue = normalizeWheelValue(getOptions().defaultValue ?? defaultColor);
+  const [internalValue, setInternalValue] = createSignal<Color>(initialValue);
+  const [isDragging, setIsDragging] = createSignal(false);
+  let valueRef = initialValue;
 
   // Controlled vs uncontrolled value
   const value = createMemo(() => {
     const opts = getOptions();
-    if (opts.value !== undefined) {
-      return normalizeColor(opts.value);
-    }
-    return internalValue() ?? normalizeColor('#ff0000');
+    const nextValue = opts.value !== undefined ? normalizeWheelValue(opts.value) : internalValue();
+    valueRef = nextValue;
+    return nextValue;
   });
 
   const isDisabled = createMemo(() => getOptions().isDisabled ?? false);
 
   // Hue step and page step
-  const hueRange = createMemo(() => value().getChannelRange('hue'));
+  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();
+    const nextColor = normalizeWheelValue(newColor);
+    valueRef = nextColor;
 
     // Controlled mode
     if (opts.value !== undefined) {
-      opts.onChange?.(newColor);
+      opts.onChange?.(nextColor);
       return;
     }
 
     // Uncontrolled mode
-    setInternalValue(newColor);
-    opts.onChange?.(newColor);
+    setInternalValue(nextColor);
+    opts.onChange?.(nextColor);
   };
 
   // Get hue value (0-360)
-  const getHue = () => value().getChannelValue('hue');
+  const getHue = () => value().getChannelValue("hue");
+
+  const setValue = (newValue: Color | string) => {
+    updateValue(normalizeWheelValue(newValue));
+  };
+
+  const roundToStep = (num: number, stepValue: number) => {
+    const rounded = Math.round(num / stepValue) * stepValue;
+    const precision = `${stepValue}`.split(".")[1]?.length ?? 0;
+    return Number(rounded.toFixed(precision));
+  };
+
+  const roundDown = (num: number) => {
+    const rounded = Math.floor(num);
+    return rounded === num ? num - 1 : rounded;
+  };
+
+  const mod = (n: number, m: number) => ((n % m) + m) % m;
+
+  const radToDeg = (rad: number) => (rad * 180) / Math.PI;
+  const degToRad = (deg: number) => (deg * Math.PI) / 180;
+
+  const cartesianToAngle = (x: number, y: number, radius: number) => {
+    const clampedX = Math.max(-radius, Math.min(radius, x));
+    const clampedY = Math.max(-radius, Math.min(radius, y));
+    return mod(radToDeg(Math.atan2(clampedY, clampedX)), 360);
+  };
+
+  const angleToCartesian = (angle: number, radius: number) => ({
+    x: radius * Math.cos(degToRad(angle)),
+    y: radius * Math.sin(degToRad(angle)),
+  });
 
   // 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 currentHue = getHue();
     const range = hueRange();
-    const rounded = Math.round(hue / range.step) * range.step;
+    const hue = newValue > range.maxValue ? range.minValue : newValue;
+    const rounded = roundToStep(mod(hue, range.maxValue), range.step);
+    if (rounded === currentHue) return;
 
-    const newColor = value().withChannelValue('hue', rounded);
+    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(mod(360 - radToDeg(angle), 360));
+  };
 
-    setHue(degrees);
+  const setHueFromPoint = (x: number, y: number, radius: number) => {
+    setHue(cartesianToAngle(x, y, radius));
   };
 
   // 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;
+    return degToRad(360 - getHue());
+  };
+
+  const getThumbPosition = (radius: number) => {
+    return angleToCartesian(getHue(), radius);
   };
 
   // Increment hue
   const increment = (stepSize?: number) => {
-    const s = stepSize ?? step();
-    setHue(getHue() + s);
+    const range = hueRange();
+    const s = Math.max(stepSize ?? range.step, range.step);
+    const nextValue = getHue() + s;
+    if (nextValue >= range.maxValue) {
+      setHue(range.minValue);
+      return;
+    }
+    setHue(roundToStep(mod(nextValue, range.maxValue), s));
   };
 
   // Decrement hue
   const decrement = (stepSize?: number) => {
-    const s = stepSize ?? step();
-    setHue(getHue() - s);
+    const range = hueRange();
+    const s = Math.max(stepSize ?? range.step, range.step);
+    if (getHue() === range.minValue) {
+      setHue(roundDown(range.maxValue / s) * s);
+      return;
+    }
+    setHue(roundToStep(mod(getHue() - s, range.maxValue), s));
   };
 
   // Set dragging state
@@ -169,24 +201,26 @@ export function createColorWheelState(
 
     // Call onChangeEnd when dragging ends
     if (wasDragging && !dragging) {
-      getOptions().onChangeEnd?.(value());
+      getOptions().onChangeEnd?.(valueRef);
     }
   };
 
   // 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);
+      .toFormat("hsl")
+      .withChannelValue("saturation", 100)
+      .withChannelValue("lightness", 50)
+      .withChannelValue("alpha", 1);
   };
 
   return {
     get value() {
       return value();
     },
+    get defaultValue() {
+      return initialValue;
+    },
     get isDragging() {
       return isDragging();
     },
@@ -200,9 +234,12 @@ export function createColorWheelState(
       return pageStep();
     },
     getHue,
+    setValue,
     setHue,
     setHueFromAngle,
+    setHueFromPoint,
     getThumbAngle,
+    getThumbPosition,
     increment,
     decrement,
     setDragging: setDraggingState,

package/src/color/getColorChannels.ts

@@ -4,12 +4,12 @@
  * Returns the three channels for a given color space.
  */
 
-import type { ColorChannel, ColorSpace } from './types';
+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'],
+  rgb: ["red", "green", "blue"],
+  hsl: ["hue", "saturation", "lightness"],
+  hsb: ["hue", "saturation", "brightness"],
 };
 
 /**
@@ -25,7 +25,9 @@ const COLOR_SPACE_CHANNELS: Record<ColorSpace, [ColorChannel, ColorChannel, Colo
  * getColorChannels('hsb') // ['hue', 'saturation', 'brightness']
  * ```
  */
-export function getColorChannels(colorSpace: ColorSpace): [ColorChannel, ColorChannel, ColorChannel] {
+export function getColorChannels(
+  colorSpace: ColorSpace,
+): [ColorChannel, ColorChannel, ColorChannel] {
   const channels = COLOR_SPACE_CHANNELS[colorSpace];
   if (!channels) {
     throw new Error(`Unknown color space: ${colorSpace}`);