@proyecto-viviana/solid-stately 0.2.7 → 0.3.0

package/src/color/createColorAreaState.d.ts

@@ -2,75 +2,77 @@
  * ColorArea state management.
  * Based on @react-stately/color useColorAreaState.
  */
-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 ColorAreaStateOptions {
-    /** 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 for the X axis. */
-    xChannel?: ColorChannel;
-    /** The color channel for the Y axis. */
-    yChannel?: ColorChannel;
-    /** Whether the area 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;
+  /** The color channel for the X axis. */
+  xChannel?: ColorChannel;
+  /** The color channel for the Y axis. */
+  yChannel?: ColorChannel;
+  /** Whether the area is disabled. */
+  isDisabled?: boolean;
 }
 export interface ColorAreaState {
-    /** The current color value. */
-    readonly value: Color;
-    /** The X axis channel. */
-    readonly xChannel: ColorChannel;
-    /** The Y axis channel. */
-    readonly yChannel: ColorChannel;
-    /** The Z axis channel (the third channel). */
-    readonly zChannel: ColorChannel;
-    /** Whether the area is being dragged. */
-    readonly isDragging: boolean;
-    /** Whether the area is disabled. */
-    readonly isDisabled: boolean;
-    /** Step for X channel. */
-    readonly xChannelStep: number;
-    /** Step for Y channel. */
-    readonly yChannelStep: number;
-    /** Page step for X channel. */
-    readonly xChannelPageStep: number;
-    /** Page step for Y channel. */
-    readonly yChannelPageStep: number;
-    /** Get the X channel value. */
-    getXValue(): number;
-    /** Get the Y channel value. */
-    getYValue(): number;
-    /** Set the X channel value. */
-    setXValue(value: number): void;
-    /** Set the Y channel value. */
-    setYValue(value: number): void;
-    /** Set color from a point (0-1, 0-1). */
-    setColorFromPoint(x: number, y: number): void;
-    /** Get the thumb position as percentages. */
-    getThumbPosition(): {
-        x: number;
-        y: number;
-    };
-    /** Increment X value. */
-    incrementX(stepSize?: number): void;
-    /** Decrement X value. */
-    decrementX(stepSize?: number): void;
-    /** Increment Y value. */
-    incrementY(stepSize?: number): void;
-    /** Decrement Y value. */
-    decrementY(stepSize?: number): void;
-    /** Set the dragging state. */
-    setDragging(isDragging: boolean): void;
-    /** Get the display color (with alpha = 1). */
-    getDisplayColor(): Color;
+  /** The current color value. */
+  readonly value: Color;
+  /** The X axis channel. */
+  readonly xChannel: ColorChannel;
+  /** The Y axis channel. */
+  readonly yChannel: ColorChannel;
+  /** The Z axis channel (the third channel). */
+  readonly zChannel: ColorChannel;
+  /** Whether the area is being dragged. */
+  readonly isDragging: boolean;
+  /** Whether the area is disabled. */
+  readonly isDisabled: boolean;
+  /** Step for X channel. */
+  readonly xChannelStep: number;
+  /** Step for Y channel. */
+  readonly yChannelStep: number;
+  /** Page step for X channel. */
+  readonly xChannelPageStep: number;
+  /** Page step for Y channel. */
+  readonly yChannelPageStep: number;
+  /** Get the X channel value. */
+  getXValue(): number;
+  /** Get the Y channel value. */
+  getYValue(): number;
+  /** Set the X channel value. */
+  setXValue(value: number): void;
+  /** Set the Y channel value. */
+  setYValue(value: number): void;
+  /** Set color from a point (0-1, 0-1). */
+  setColorFromPoint(x: number, y: number): void;
+  /** Get the thumb position as percentages. */
+  getThumbPosition(): {
+    x: number;
+    y: number;
+  };
+  /** Increment X value. */
+  incrementX(stepSize?: number): void;
+  /** Decrement X value. */
+  decrementX(stepSize?: number): void;
+  /** Increment Y value. */
+  incrementY(stepSize?: number): void;
+  /** Decrement Y value. */
+  decrementY(stepSize?: number): void;
+  /** Set the dragging state. */
+  setDragging(isDragging: boolean): void;
+  /** Get the display color (with alpha = 1). */
+  getDisplayColor(): Color;
 }
 /**
  * Creates state for a color area (2D color picker).
  */
-export declare function createColorAreaState(options: Accessor<ColorAreaStateOptions>): ColorAreaState;
-//# sourceMappingURL=createColorAreaState.d.ts.map
+export declare function createColorAreaState(
+  options: Accessor<ColorAreaStateOptions>,
+): ColorAreaState;
+//# sourceMappingURL=createColorAreaState.d.ts.map

package/src/color/createColorAreaState.ts

@@ -3,9 +3,9 @@
  * Based on @react-stately/color useColorAreaState.
  */
 
-import { createSignal, createMemo, type Accessor } from 'solid-js';
-import type { Color, ColorChannel, ColorAxes } from './types';
-import { normalizeColor } from './Color';
+import { createSignal, createMemo, type Accessor } from "solid-js";
+import type { Color, ColorChannel, ColorAxes, ColorSpace } from "./types";
+import { normalizeColor } from "./Color";
 
 export interface ColorAreaStateOptions {
   /** The current color value (controlled). */
@@ -20,6 +20,8 @@ export interface ColorAreaStateOptions {
   xChannel?: ColorChannel;
   /** The color channel for the Y axis. */
   yChannel?: ColorChannel;
+  /** The color space to use for the color area. */
+  colorSpace?: ColorSpace;
   /** Whether the area is disabled. */
   isDisabled?: boolean;
 }
@@ -75,11 +77,15 @@ export interface ColorAreaState {
 /**
  * Creates state for a color area (2D color picker).
  */
-export function createColorAreaState(
-  options: Accessor<ColorAreaStateOptions>
-): ColorAreaState {
+export function createColorAreaState(options: Accessor<ColorAreaStateOptions>): ColorAreaState {
   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);
@@ -88,7 +94,7 @@ export function createColorAreaState(
   const initValue = () => {
     const opts = getOptions();
     if (opts.defaultValue) {
-      return normalizeColor(opts.defaultValue);
+      return normalizeValue(opts.defaultValue);
     }
     return null;
   };
@@ -105,9 +111,10 @@ export function createColorAreaState(
   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 isDisabled = createMemo(() => getOptions().isDisabled ?? false);
@@ -137,16 +144,17 @@ export function createColorAreaState(
   // 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 X value
@@ -243,7 +251,7 @@ export function createColorAreaState(
 
   // Get display color (alpha = 1)
   const getDisplayColor = () => {
-    return value().withChannelValue('alpha', 1);
+    return value().withChannelValue("alpha", 1);
   };
 
   return {

package/src/color/createColorFieldState.d.ts

@@ -2,54 +2,56 @@
  * ColorField state management.
  * Based on @react-stately/color useColorFieldState.
  */
-import { type Accessor } from 'solid-js';
-import type { Color, ColorChannel, ColorFormat } from './types';
+import { type Accessor } from "solid-js";
+import type { Color, ColorChannel, ColorFormat } from "./types";
 export interface ColorFieldStateOptions {
-    /** The current color value (controlled). */
-    value?: Color | string | null;
-    /** The default color value (uncontrolled). */
-    defaultValue?: Color | string;
-    /** Handler called when the color changes. */
-    onChange?: (color: Color | null) => void;
-    /** The color channel to edit (for single channel mode). */
-    channel?: ColorChannel;
-    /** The color format for parsing/displaying. */
-    colorFormat?: ColorFormat;
-    /** Whether the field is disabled. */
-    isDisabled?: boolean;
-    /** Whether the field is read-only. */
-    isReadOnly?: boolean;
+  /** The current color value (controlled). */
+  value?: Color | string | null;
+  /** The default color value (uncontrolled). */
+  defaultValue?: Color | string;
+  /** Handler called when the color changes. */
+  onChange?: (color: Color | null) => void;
+  /** The color channel to edit (for single channel mode). */
+  channel?: ColorChannel;
+  /** The color format for parsing/displaying. */
+  colorFormat?: ColorFormat;
+  /** Whether the field is disabled. */
+  isDisabled?: boolean;
+  /** Whether the field is read-only. */
+  isReadOnly?: boolean;
 }
 export interface ColorFieldState {
-    /** The current color value (null if invalid). */
-    readonly value: Color | null;
-    /** The current input text. */
-    readonly inputValue: string;
-    /** Whether the input is invalid. */
-    readonly isInvalid: boolean;
-    /** Whether the field is disabled. */
-    readonly isDisabled: boolean;
-    /** Whether the field is read-only. */
-    readonly isReadOnly: boolean;
-    /** The color channel being edited (if single channel mode). */
-    readonly channel: ColorChannel | undefined;
-    /** Set the input text value. */
-    setInputValue(value: string): void;
-    /** Commit the current input value. */
-    commit(): void;
-    /** Increment the color channel value. */
-    increment(): void;
-    /** Decrement the color channel value. */
-    decrement(): void;
-    /** Increment by page size. */
-    incrementToMax(): void;
-    /** Decrement to minimum. */
-    decrementToMin(): void;
-    /** Validate the current input. */
-    validate(): boolean;
+  /** The current color value (null if invalid). */
+  readonly value: Color | null;
+  /** The current input text. */
+  readonly inputValue: string;
+  /** Whether the input is invalid. */
+  readonly isInvalid: boolean;
+  /** Whether the field is disabled. */
+  readonly isDisabled: boolean;
+  /** Whether the field is read-only. */
+  readonly isReadOnly: boolean;
+  /** The color channel being edited (if single channel mode). */
+  readonly channel: ColorChannel | undefined;
+  /** Set the input text value. */
+  setInputValue(value: string): void;
+  /** Commit the current input value. */
+  commit(): void;
+  /** Increment the color channel value. */
+  increment(): void;
+  /** Decrement the color channel value. */
+  decrement(): void;
+  /** Increment by page size. */
+  incrementToMax(): void;
+  /** Decrement to minimum. */
+  decrementToMin(): void;
+  /** Validate the current input. */
+  validate(): boolean;
 }
 /**
  * Creates state for a color field (text input for color values).
  */
-export declare function createColorFieldState(options: Accessor<ColorFieldStateOptions>): ColorFieldState;
-//# sourceMappingURL=createColorFieldState.d.ts.map
+export declare function createColorFieldState(
+  options: Accessor<ColorFieldStateOptions>,
+): ColorFieldState;
+//# sourceMappingURL=createColorFieldState.d.ts.map