@proyecto-viviana/solid-stately 0.0.5 → 0.1.0

package/src/color/createColorAreaState.d.ts

@@ -0,0 +1,76 @@
+/**
+ * ColorArea state management.
+ * Based on @react-stately/color useColorAreaState.
+ */
+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;
+}
+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;
+}
+/**
+ * Creates state for a color area (2D color picker).
+ */
+export declare function createColorAreaState(options: Accessor<ColorAreaStateOptions>): ColorAreaState;
+//# sourceMappingURL=createColorAreaState.d.ts.map

package/src/color/createColorAreaState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createColorAreaState.d.ts","sourceRoot":"","sources":["createColorAreaState.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAA4B,KAAK,QAAQ,EAAE,MAAM,UAAU,CAAC;AACnE,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAa,MAAM,SAAS,CAAC;AAG9D,MAAM,WAAW,qBAAqB;IACpC,4CAA4C;IAC5C,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACvB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAC9B,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,yCAAyC;IACzC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACrC,wCAAwC;IACxC,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,cAAc;IAC7B,+BAA+B;IAC/B,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC;IACtB,0BAA0B;IAC1B,QAAQ,CAAC,QAAQ,EAAE,YAAY,CAAC;IAChC,0BAA0B;IAC1B,QAAQ,CAAC,QAAQ,EAAE,YAAY,CAAC;IAChC,8CAA8C;IAC9C,QAAQ,CAAC,QAAQ,EAAE,YAAY,CAAC;IAChC,yCAAyC;IACzC,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,oCAAoC;IACpC,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,0BAA0B;IAC1B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,0BAA0B;IAC1B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,+BAA+B;IAC/B,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAClC,+BAA+B;IAC/B,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAElC,+BAA+B;IAC/B,SAAS,IAAI,MAAM,CAAC;IACpB,+BAA+B;IAC/B,SAAS,IAAI,MAAM,CAAC;IACpB,+BAA+B;IAC/B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,+BAA+B;IAC/B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,yCAAyC;IACzC,iBAAiB,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9C,6CAA6C;IAC7C,gBAAgB,IAAI;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,yBAAyB;IACzB,UAAU,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,yBAAyB;IACzB,UAAU,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,yBAAyB;IACzB,UAAU,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,yBAAyB;IACzB,UAAU,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,8BAA8B;IAC9B,WAAW,CAAC,UAAU,EAAE,OAAO,GAAG,IAAI,CAAC;IACvC,8CAA8C;IAC9C,eAAe,IAAI,KAAK,CAAC;CAC1B;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,QAAQ,CAAC,qBAAqB,CAAC,GACvC,cAAc,CAqNhB"}

package/src/color/createColorAreaState.ts

@@ -0,0 +1,293 @@
+/**
+ * ColorArea state management.
+ * 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';
+
+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;
+}
+
+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;
+}
+
+/**
+ * Creates state for a color area (2D color picker).
+ */
+export function createColorAreaState(
+  options: Accessor<ColorAreaStateOptions>
+): ColorAreaState {
+  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);
+
+  // Get color axes
+  const axes = createMemo<ColorAxes>(() => {
+    const opts = getOptions();
+    return value().getColorSpaceAxes({
+      xChannel: opts.xChannel,
+      yChannel: opts.yChannel,
+    });
+  });
+
+  const xChannel = createMemo(() => axes().xChannel);
+  const yChannel = createMemo(() => axes().yChannel);
+  const zChannel = createMemo(() => axes().zChannel);
+
+  // Get channel ranges
+  const xRange = createMemo(() => value().getChannelRange(xChannel()));
+  const yRange = createMemo(() => value().getChannelRange(yChannel()));
+
+  const xChannelStep = createMemo(() => xRange().step);
+  const yChannelStep = createMemo(() => yRange().step);
+  const xChannelPageStep = createMemo(() => xRange().pageSize);
+  const yChannelPageStep = createMemo(() => yRange().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 X value
+  const getXValue = () => value().getChannelValue(xChannel());
+
+  // Get Y value
+  const getYValue = () => value().getChannelValue(yChannel());
+
+  // Set X value
+  const setXValue = (newValue: number) => {
+    const range = xRange();
+    const clamped = Math.max(range.minValue, Math.min(range.maxValue, newValue));
+    const rounded = Math.round(clamped / range.step) * range.step;
+    const newColor = value().withChannelValue(xChannel(), rounded);
+    updateValue(newColor);
+  };
+
+  // Set Y value
+  const setYValue = (newValue: number) => {
+    const range = yRange();
+    const clamped = Math.max(range.minValue, Math.min(range.maxValue, newValue));
+    const rounded = Math.round(clamped / range.step) * range.step;
+    const newColor = value().withChannelValue(yChannel(), rounded);
+    updateValue(newColor);
+  };
+
+  // Set color from point (x: 0-1, y: 0-1)
+  const setColorFromPoint = (x: number, y: number) => {
+    const xR = xRange();
+    const yR = yRange();
+
+    const xVal = xR.minValue + (xR.maxValue - xR.minValue) * x;
+    const yVal = yR.minValue + (yR.maxValue - yR.minValue) * (1 - y); // Y is inverted
+
+    const xClamped = Math.max(xR.minValue, Math.min(xR.maxValue, xVal));
+    const yClamped = Math.max(yR.minValue, Math.min(yR.maxValue, yVal));
+
+    const xRounded = Math.round(xClamped / xR.step) * xR.step;
+    const yRounded = Math.round(yClamped / yR.step) * yR.step;
+
+    const newColor = value()
+      .withChannelValue(xChannel(), xRounded)
+      .withChannelValue(yChannel(), yRounded);
+    updateValue(newColor);
+  };
+
+  // Get thumb position as percentages
+  const getThumbPosition = () => {
+    const xR = xRange();
+    const yR = yRange();
+    const xVal = getXValue();
+    const yVal = getYValue();
+
+    return {
+      x: (xVal - xR.minValue) / (xR.maxValue - xR.minValue),
+      y: 1 - (yVal - yR.minValue) / (yR.maxValue - yR.minValue), // Y is inverted
+    };
+  };
+
+  // Increment X
+  const incrementX = (stepSize?: number) => {
+    const s = stepSize ?? xChannelStep();
+    setXValue(getXValue() + s);
+  };
+
+  // Decrement X
+  const decrementX = (stepSize?: number) => {
+    const s = stepSize ?? xChannelStep();
+    setXValue(getXValue() - s);
+  };
+
+  // Increment Y
+  const incrementY = (stepSize?: number) => {
+    const s = stepSize ?? yChannelStep();
+    setYValue(getYValue() + s);
+  };
+
+  // Decrement Y
+  const decrementY = (stepSize?: number) => {
+    const s = stepSize ?? yChannelStep();
+    setYValue(getYValue() - s);
+  };
+
+  // Set dragging
+  const setDraggingState = (dragging: boolean) => {
+    const wasDragging = isDragging();
+    setIsDragging(dragging);
+
+    // Call onChangeEnd when dragging ends
+    if (wasDragging && !dragging) {
+      getOptions().onChangeEnd?.(value());
+    }
+  };
+
+  // Get display color (alpha = 1)
+  const getDisplayColor = () => {
+    return value().withChannelValue('alpha', 1);
+  };
+
+  return {
+    get value() {
+      return value();
+    },
+    get xChannel() {
+      return xChannel();
+    },
+    get yChannel() {
+      return yChannel();
+    },
+    get zChannel() {
+      return zChannel();
+    },
+    get isDragging() {
+      return isDragging();
+    },
+    get isDisabled() {
+      return isDisabled();
+    },
+    get xChannelStep() {
+      return xChannelStep();
+    },
+    get yChannelStep() {
+      return yChannelStep();
+    },
+    get xChannelPageStep() {
+      return xChannelPageStep();
+    },
+    get yChannelPageStep() {
+      return yChannelPageStep();
+    },
+    getXValue,
+    getYValue,
+    setXValue,
+    setYValue,
+    setColorFromPoint,
+    getThumbPosition,
+    incrementX,
+    decrementX,
+    incrementY,
+    decrementY,
+    setDragging: setDraggingState,
+    getDisplayColor,
+  };
+}

package/src/color/createColorFieldState.d.ts

@@ -0,0 +1,55 @@
+/**
+ * ColorField state management.
+ * Based on @react-stately/color useColorFieldState.
+ */
+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;
+}
+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;
+}
+/**
+ * Creates state for a color field (text input for color values).
+ */
+export declare function createColorFieldState(options: Accessor<ColorFieldStateOptions>): ColorFieldState;
+//# sourceMappingURL=createColorFieldState.d.ts.map

package/src/color/createColorFieldState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createColorFieldState.d.ts","sourceRoot":"","sources":["createColorFieldState.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAA4B,KAAK,QAAQ,EAAE,MAAM,UAAU,CAAC;AACnE,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGhE,MAAM,WAAW,sBAAsB;IACrC,4CAA4C;IAC5C,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,IAAI,CAAC;IAC9B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAC9B,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,2DAA2D;IAC3D,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,iDAAiD;IACjD,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IAC7B,8BAA8B;IAC9B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,oCAAoC;IACpC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,qCAAqC;IACrC,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,sCAAsC;IACtC,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,+DAA+D;IAC/D,QAAQ,CAAC,OAAO,EAAE,YAAY,GAAG,SAAS,CAAC;IAE3C,gCAAgC;IAChC,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,sCAAsC;IACtC,MAAM,IAAI,IAAI,CAAC;IACf,yCAAyC;IACzC,SAAS,IAAI,IAAI,CAAC;IAClB,yCAAyC;IACzC,SAAS,IAAI,IAAI,CAAC;IAClB,8BAA8B;IAC9B,cAAc,IAAI,IAAI,CAAC;IACvB,4BAA4B;IAC5B,cAAc,IAAI,IAAI,CAAC;IACvB,kCAAkC;IAClC,QAAQ,IAAI,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,QAAQ,CAAC,sBAAsB,CAAC,GACxC,eAAe,CAsOjB"}