@proyecto-viviana/solid-stately 0.0.5 → 0.1.0

package/src/color/createColorWheelState.ts

@@ -0,0 +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,
+  };
+}

package/src/color/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Color state management exports.
+ */
+export type { Color, ColorFormat, ColorSpace, ColorChannel, ColorChannelRange, ColorAxes, } from './types';
+export { parseColor, normalizeColor, createRGBColor, createHSLColor, createHSBColor, } from './Color';
+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';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,YAAY,EACV,KAAK,EACL,WAAW,EACX,UAAU,EACV,YAAY,EACZ,iBAAiB,EACjB,SAAS,GACV,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,GACf,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,sBAAsB,EACtB,KAAK,uBAAuB,EAC5B,KAAK,gBAAgB,GACtB,MAAM,0BAA0B,CAAC;AAElC,OAAO,EACL,oBAAoB,EACpB,KAAK,qBAAqB,EAC1B,KAAK,cAAc,GACpB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EACL,qBAAqB,EACrB,KAAK,sBAAsB,EAC3B,KAAK,eAAe,GACrB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACL,qBAAqB,EACrB,KAAK,sBAAsB,EAC3B,KAAK,eAAe,GACrB,MAAM,yBAAyB,CAAC"}

package/src/color/index.ts

@@ -0,0 +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';

package/src/color/types.d.ts

@@ -0,0 +1,106 @@
+/**
+ * Color types for color picker components.
+ * Based on @react-stately/color.
+ */
+/**
+ * Supported color formats.
+ */
+export type ColorFormat = 'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsb' | 'hsba';
+/**
+ * Color spaces.
+ */
+export type ColorSpace = 'rgb' | 'hsl' | 'hsb';
+/**
+ * Color channels.
+ */
+export type ColorChannel = 'hue' | 'saturation' | 'brightness' | 'lightness' | 'red' | 'green' | 'blue' | 'alpha';
+/**
+ * Range for a color channel.
+ */
+export interface ColorChannelRange {
+    /** Minimum value. */
+    minValue: number;
+    /** Maximum value. */
+    maxValue: number;
+    /** Step for keyboard increment. */
+    step: number;
+    /** Page step for larger increments. */
+    pageSize: number;
+}
+/**
+ * Color axes for a color space.
+ */
+export interface ColorAxes {
+    /** X-axis channel. */
+    xChannel: ColorChannel;
+    /** Y-axis channel. */
+    yChannel: ColorChannel;
+    /** Z-axis channel (the one not on x or y). */
+    zChannel: ColorChannel;
+}
+/**
+ * Color interface representing a color value.
+ */
+export interface Color {
+    /** Convert to a different format. */
+    toFormat(format: ColorFormat): Color;
+    /** Convert to a CSS string. */
+    toString(format?: ColorFormat | 'css'): string;
+    /** Clone this color. */
+    clone(): Color;
+    /** Get the hex value as an integer. */
+    toHexInt(): number;
+    /** Get the value of a specific channel. */
+    getChannelValue(channel: ColorChannel): number;
+    /** Create a new color with a channel value changed. */
+    withChannelValue(channel: ColorChannel, value: number): Color;
+    /** Get the range for a channel. */
+    getChannelRange(channel: ColorChannel): ColorChannelRange;
+    /** Get the localized name of a channel. */
+    getChannelName(channel: ColorChannel, locale: string): string;
+    /** Get the format options for a channel. */
+    getChannelFormatOptions(channel: ColorChannel): Intl.NumberFormatOptions;
+    /** Format the value of a channel. */
+    formatChannelValue(channel: ColorChannel, locale: string): string;
+    /** Get the color space. */
+    getColorSpace(): ColorSpace;
+    /** Get the axes for a color space. */
+    getColorSpaceAxes(xyChannels?: {
+        xChannel?: ColorChannel;
+        yChannel?: ColorChannel;
+    }): ColorAxes;
+    /** Get all channels for this color space. */
+    getColorChannels(): [ColorChannel, ColorChannel, ColorChannel];
+    /** Get a human-readable color name. */
+    getColorName(locale: string): string;
+    /** Get the hue name (e.g., "red", "blue"). */
+    getHueName(locale: string): string;
+}
+/**
+ * RGB color value.
+ */
+export interface RGBColor {
+    red: number;
+    green: number;
+    blue: number;
+    alpha: number;
+}
+/**
+ * HSL color value.
+ */
+export interface HSLColor {
+    hue: number;
+    saturation: number;
+    lightness: number;
+    alpha: number;
+}
+/**
+ * HSB color value.
+ */
+export interface HSBColor {
+    hue: number;
+    saturation: number;
+    brightness: number;
+    alpha: number;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"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"}

package/src/color/types.ts

@@ -0,0 +1,127 @@
+/**
+ * Color types for color picker components.
+ * Based on @react-stately/color.
+ */
+
+/**
+ * Supported color formats.
+ */
+export type ColorFormat =
+  | 'hex'
+  | 'hexa'
+  | 'rgb'
+  | 'rgba'
+  | 'hsl'
+  | 'hsla'
+  | 'hsb'
+  | 'hsba';
+
+/**
+ * Color spaces.
+ */
+export type ColorSpace = 'rgb' | 'hsl' | 'hsb';
+
+/**
+ * Color channels.
+ */
+export type ColorChannel =
+  | 'hue'
+  | 'saturation'
+  | 'brightness'
+  | 'lightness'
+  | 'red'
+  | 'green'
+  | 'blue'
+  | 'alpha';
+
+/**
+ * Range for a color channel.
+ */
+export interface ColorChannelRange {
+  /** Minimum value. */
+  minValue: number;
+  /** Maximum value. */
+  maxValue: number;
+  /** Step for keyboard increment. */
+  step: number;
+  /** Page step for larger increments. */
+  pageSize: number;
+}
+
+/**
+ * Color axes for a color space.
+ */
+export interface ColorAxes {
+  /** X-axis channel. */
+  xChannel: ColorChannel;
+  /** Y-axis channel. */
+  yChannel: ColorChannel;
+  /** Z-axis channel (the one not on x or y). */
+  zChannel: ColorChannel;
+}
+
+/**
+ * Color interface representing a color value.
+ */
+export interface Color {
+  /** Convert to a different format. */
+  toFormat(format: ColorFormat): Color;
+  /** Convert to a CSS string. */
+  toString(format?: ColorFormat | 'css'): string;
+  /** Clone this color. */
+  clone(): Color;
+  /** Get the hex value as an integer. */
+  toHexInt(): number;
+  /** Get the value of a specific channel. */
+  getChannelValue(channel: ColorChannel): number;
+  /** Create a new color with a channel value changed. */
+  withChannelValue(channel: ColorChannel, value: number): Color;
+  /** Get the range for a channel. */
+  getChannelRange(channel: ColorChannel): ColorChannelRange;
+  /** Get the localized name of a channel. */
+  getChannelName(channel: ColorChannel, locale: string): string;
+  /** Get the format options for a channel. */
+  getChannelFormatOptions(channel: ColorChannel): Intl.NumberFormatOptions;
+  /** Format the value of a channel. */
+  formatChannelValue(channel: ColorChannel, locale: string): string;
+  /** Get the color space. */
+  getColorSpace(): ColorSpace;
+  /** Get the axes for a color space. */
+  getColorSpaceAxes(xyChannels?: { xChannel?: ColorChannel; yChannel?: ColorChannel }): ColorAxes;
+  /** Get all channels for this color space. */
+  getColorChannels(): [ColorChannel, ColorChannel, ColorChannel];
+  /** Get a human-readable color name. */
+  getColorName(locale: string): string;
+  /** Get the hue name (e.g., "red", "blue"). */
+  getHueName(locale: string): string;
+}
+
+/**
+ * RGB color value.
+ */
+export interface RGBColor {
+  red: number;
+  green: number;
+  blue: number;
+  alpha: number;
+}
+
+/**
+ * HSL color value.
+ */
+export interface HSLColor {
+  hue: number;
+  saturation: number;
+  lightness: number;
+  alpha: number;
+}
+
+/**
+ * HSB color value.
+ */
+export interface HSBColor {
+  hue: number;
+  saturation: number;
+  brightness: number;
+  alpha: number;
+}

package/src/combobox/createComboBoxState.d.ts

@@ -0,0 +1,125 @@
+/**
+ * State management for ComboBox components.
+ * Based on @react-stately/combobox useComboBoxState.
+ *
+ * ComboBox combines a text input with a dropdown list, allowing users to
+ * either type to filter options or select from a list.
+ */
+import { type Accessor } from 'solid-js';
+import { type MaybeAccessor } from '../utils';
+import type { Key, CollectionNode, Collection, FocusStrategy } from '../collections/types';
+export type MenuTriggerAction = 'focus' | 'input' | 'manual';
+export type { FocusStrategy } from '../collections/types';
+export type FilterFn = (textValue: string, inputValue: string) => boolean;
+export interface ComboBoxStateProps<T = unknown> {
+    /** The items to display in the combobox dropdown. */
+    items: T[];
+    /** Default items when uncontrolled. */
+    defaultItems?: T[];
+    /** Function to get the key for an item. */
+    getKey?: (item: T) => Key;
+    /** Function to get the text value for an item. */
+    getTextValue?: (item: T) => string;
+    /** Function to check if an item is disabled. */
+    getDisabled?: (item: T) => boolean;
+    /** Keys of disabled items. */
+    disabledKeys?: Iterable<Key>;
+    /** The currently selected key (controlled). */
+    selectedKey?: Key | null;
+    /** The default selected key (uncontrolled). */
+    defaultSelectedKey?: Key | null;
+    /** Handler called when the selection changes. */
+    onSelectionChange?: (key: Key | null) => void;
+    /** The current input value (controlled). */
+    inputValue?: string;
+    /** The default input value (uncontrolled). */
+    defaultInputValue?: string;
+    /** Handler called when the input value changes. */
+    onInputChange?: (value: string) => void;
+    /** Whether the combobox is open (controlled). */
+    isOpen?: boolean;
+    /** Whether the combobox is open by default (uncontrolled). */
+    defaultOpen?: boolean;
+    /** Handler called when the open state changes. */
+    onOpenChange?: (isOpen: boolean, trigger?: MenuTriggerAction) => void;
+    /** Whether the combobox is disabled. */
+    isDisabled?: boolean;
+    /** Whether the combobox is read-only. */
+    isReadOnly?: boolean;
+    /** Whether the combobox is required. */
+    isRequired?: boolean;
+    /** The filter function to use when filtering items. */
+    defaultFilter?: FilterFn;
+    /** Whether to allow the menu to open when there are no items. */
+    allowsEmptyCollection?: boolean;
+    /** Whether to allow custom values that don't match any option. */
+    allowsCustomValue?: boolean;
+    /** What triggers the menu to open. */
+    menuTrigger?: MenuTriggerAction;
+    /** Whether to close the menu on blur. */
+    shouldCloseOnBlur?: boolean;
+}
+export interface ComboBoxState<T = unknown> {
+    /** The collection of items (may be filtered). */
+    readonly collection: Accessor<Collection<T>>;
+    /** Whether the combobox dropdown is open. */
+    readonly isOpen: Accessor<boolean>;
+    /** Open the combobox dropdown. */
+    open(focusStrategy?: FocusStrategy | null, trigger?: MenuTriggerAction): void;
+    /** Close the combobox dropdown. */
+    close(): void;
+    /** Toggle the combobox dropdown. */
+    toggle(focusStrategy?: FocusStrategy | null, trigger?: MenuTriggerAction): void;
+    /** The currently selected key. */
+    readonly selectedKey: Accessor<Key | null>;
+    /** The default selected key. */
+    readonly defaultSelectedKey: Key | null;
+    /** The currently selected item. */
+    readonly selectedItem: Accessor<CollectionNode<T> | null>;
+    /** Set the selected key. */
+    setSelectedKey(key: Key | null): void;
+    /** The current input value. */
+    readonly inputValue: Accessor<string>;
+    /** The default input value. */
+    readonly defaultInputValue: string;
+    /** Set the input value. */
+    setInputValue(value: string): void;
+    /** The currently focused key in the list. */
+    readonly focusedKey: Accessor<Key | null>;
+    /** Set the focused key. */
+    setFocusedKey(key: Key | null): void;
+    /** Whether the combobox input has focus. */
+    readonly isFocused: Accessor<boolean>;
+    /** Set whether the combobox has focus. */
+    setFocused(isFocused: boolean): void;
+    /** The focus strategy to use when opening. */
+    readonly focusStrategy: Accessor<FocusStrategy | null>;
+    /** Commit the current selection (select focused item or custom value). */
+    commit(): void;
+    /** Revert input to the selected item's text and close menu. */
+    revert(): void;
+    /** Whether a specific key is disabled. */
+    isKeyDisabled(key: Key): boolean;
+    /** Select a key and close the menu (for ListState compatibility). */
+    select(key: Key): void;
+    /** The selection mode (always 'single' for combobox). */
+    readonly selectionMode: Accessor<'single'>;
+    /** Check if a key is selected. */
+    isSelected(key: Key): boolean;
+    /** Whether the combobox is disabled. */
+    readonly isDisabled: boolean;
+    /** Whether the combobox is read-only. */
+    readonly isReadOnly: boolean;
+    /** Whether the combobox is required. */
+    readonly isRequired: boolean;
+}
+/**
+ * Default filter function that does case-insensitive "contains" matching.
+ */
+export declare const defaultContainsFilter: FilterFn;
+/**
+ * Creates state for a combobox component.
+ * Combines list state with input value management and filtering.
+ */
+export declare function createComboBoxState<T = unknown>(props: MaybeAccessor<ComboBoxStateProps<T>>): ComboBoxState<T>;
+//# sourceMappingURL=createComboBoxState.d.ts.map

package/src/combobox/createComboBoxState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createComboBoxState.d.ts","sourceRoot":"","sources":["createComboBoxState.ts"],"names":[],"mappings":"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"}