@proyecto-viviana/solid-stately 0.1.5 → 0.2.0

package/src/color/createColorAreaState.d.ts

@@ -1,76 +0,0 @@
-/**
- * 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

@@ -1 +0,0 @@
-{"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

@@ -1,293 +0,0 @@
-/**
- * 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

@@ -1,55 +0,0 @@
-/**
- * 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

@@ -1 +0,0 @@
-{"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"}