@proyecto-viviana/solid-stately 0.2.4 → 0.3.0

package/src/slider/createSliderState.ts

@@ -1,211 +1,233 @@
-/**
- * Creates state for a slider component.
- * Based on @react-stately/slider useSliderState.
- */
-
-import { type Accessor, createSignal, createMemo } from 'solid-js';
-import { access, type MaybeAccessor } from '../utils';
-
-export type SliderOrientation = 'horizontal' | 'vertical';
-
-export interface SliderStateProps {
-  /** The current value (controlled). */
-  value?: number;
-  /** The default value (uncontrolled). */
-  defaultValue?: number;
-  /** Handler called when the value changes. */
-  onChange?: (value: number) => void;
-  /** Handler called when the user stops dragging. */
-  onChangeEnd?: (value: number) => void;
-  /** The minimum value. */
-  minValue?: number;
-  /** The maximum value. */
-  maxValue?: number;
-  /** The step value. */
-  step?: number;
-  /** The orientation of the slider. */
-  orientation?: SliderOrientation;
-  /** Whether the slider is disabled. */
-  isDisabled?: boolean;
-  /** The locale for number formatting. */
-  locale?: string;
-  /** Number format options. */
-  formatOptions?: Intl.NumberFormatOptions;
-}
-
-export interface SliderState {
-  /** The current value. */
-  value: Accessor<number>;
-  /** Sets the value. */
-  setValue: (value: number) => void;
-  /** Sets the value by percent (0-1). */
-  setValuePercent: (percent: number) => void;
-  /** Gets the value as a percent (0-1). */
-  getValuePercent: Accessor<number>;
-  /** Gets the formatted value string. */
-  getFormattedValue: Accessor<string>;
-  /** Whether the thumb is being dragged. */
-  isDragging: Accessor<boolean>;
-  /** Sets the dragging state. */
-  setDragging: (dragging: boolean) => void;
-  /** Whether the slider is focused. */
-  isFocused: Accessor<boolean>;
-  /** Sets the focused state. */
-  setFocused: (focused: boolean) => void;
-  /** Increments the value by step. */
-  increment: (stepMultiplier?: number) => void;
-  /** Decrements the value by step. */
-  decrement: (stepMultiplier?: number) => void;
-  /** The minimum value. */
-  minValue: number;
-  /** The maximum value. */
-  maxValue: number;
-  /** The step value. */
-  step: number;
-  /** The page step (larger step for Page Up/Down). */
-  pageStep: number;
-  /** The orientation. */
-  orientation: SliderOrientation;
-  /** Whether the slider is disabled. */
-  isDisabled: boolean;
-}
-
-const DEFAULT_MIN = 0;
-const DEFAULT_MAX = 100;
-const DEFAULT_STEP = 1;
-
-/**
- * Clamps a value between min and max.
- */
-function clamp(value: number, min: number, max: number): number {
-  return Math.min(Math.max(value, min), max);
-}
-
-/**
- * Snaps a value to the nearest step.
- */
-function snapToStep(value: number, min: number, max: number, step: number): number {
-  const snapped = Math.round((value - min) / step) * step + min;
-  // Handle floating point precision issues
-  const decimalPlaces = (step.toString().split('.')[1] || '').length;
-  const rounded = parseFloat(snapped.toFixed(decimalPlaces));
-  return clamp(rounded, min, max);
-}
-
-/**
- * Provides state management for a slider component.
- */
-export function createSliderState(
-  props: MaybeAccessor<SliderStateProps>
-): SliderState {
-  const getProps = () => access(props);
-
-  // Get static values with defaults
-  const minValue = getProps().minValue ?? DEFAULT_MIN;
-  const maxValue = getProps().maxValue ?? DEFAULT_MAX;
-  const step = getProps().step ?? DEFAULT_STEP;
-  const orientation = getProps().orientation ?? 'horizontal';
-  const isDisabled = getProps().isDisabled ?? false;
-
-  // Calculate page step (10% of range, snapped to step)
-  const pageStep = Math.max(step, snapToStep((maxValue - minValue) / 10, 0, maxValue - minValue, step));
-
-  // Controlled vs uncontrolled
-  const isControlled = () => getProps().value !== undefined;
-
-  // Internal signal for uncontrolled mode
-  const [internalValue, setInternalValue] = createSignal(
-    snapToStep(getProps().defaultValue ?? minValue, minValue, maxValue, step)
-  );
-
-  // Dragging and focus state
-  const [isDragging, setIsDragging] = createSignal(false);
-  const [isFocused, setIsFocused] = createSignal(false);
-
-  // Current value accessor
-  const value = createMemo(() => {
-    const p = getProps();
-    const rawValue = isControlled() ? (p.value ?? minValue) : internalValue();
-    return snapToStep(rawValue, minValue, maxValue, step);
-  });
-
-  // Value as percent (0-1)
-  const getValuePercent = createMemo(() => {
-    return (value() - minValue) / (maxValue - minValue);
-  });
-
-  // Formatted value
-  const getFormattedValue = createMemo(() => {
-    const p = getProps();
-    const formatter = new Intl.NumberFormat(p.locale, p.formatOptions);
-    return formatter.format(value());
-  });
-
-  // Set value function
-  const setValue = (newValue: number) => {
-    if (isDisabled) return;
-
-    const p = getProps();
-    const snappedValue = snapToStep(newValue, minValue, maxValue, step);
-
-    if (!isControlled()) {
-      setInternalValue(snappedValue);
-    }
-
-    p.onChange?.(snappedValue);
-  };
-
-  // Set value by percent
-  const setValuePercent = (percent: number) => {
-    const clampedPercent = clamp(percent, 0, 1);
-    const newValue = clampedPercent * (maxValue - minValue) + minValue;
-    setValue(newValue);
-  };
-
-  // Dragging state management
-  const setDragging = (dragging: boolean) => {
-    const wasDragging = isDragging();
-    setIsDragging(dragging);
-
-    // Call onChangeEnd when dragging stops
-    if (wasDragging && !dragging) {
-      getProps().onChangeEnd?.(value());
-    }
-  };
-
-  // Increment/decrement
-  const increment = (stepMultiplier = 1) => {
-    if (isDisabled) return;
-    setValue(value() + step * stepMultiplier);
-  };
-
-  const decrement = (stepMultiplier = 1) => {
-    if (isDisabled) return;
-    setValue(value() - step * stepMultiplier);
-  };
-
-  // Set focused state
-  const setFocused = (focused: boolean) => {
-    setIsFocused(focused);
-  };
-
-  return {
-    value,
-    setValue,
-    setValuePercent,
-    getValuePercent,
-    getFormattedValue,
-    isDragging,
-    setDragging,
-    isFocused,
-    setFocused,
-    increment,
-    decrement,
-    minValue,
-    maxValue,
-    step,
-    pageStep,
-    orientation,
-    isDisabled,
-  };
-}
+/**
+ * Creates state for a slider component.
+ * Based on @react-stately/slider useSliderState.
+ */
+
+import { type Accessor, createSignal, createMemo } from "solid-js";
+import { access, type MaybeAccessor } from "../utils";
+
+export type SliderOrientation = "horizontal" | "vertical";
+
+export interface SliderStateProps {
+  /** The current value (controlled). */
+  value?: number;
+  /** The default value (uncontrolled). */
+  defaultValue?: number;
+  /** Handler called when the value changes. */
+  onChange?: (value: number) => void;
+  /** Handler called when the user stops dragging. */
+  onChangeEnd?: (value: number) => void;
+  /** The minimum value. */
+  minValue?: number;
+  /** The maximum value. */
+  maxValue?: number;
+  /** The step value. */
+  step?: number;
+  /** The orientation of the slider. */
+  orientation?: SliderOrientation;
+  /** Whether the slider is disabled. */
+  isDisabled?: boolean;
+  /** The locale for number formatting. */
+  locale?: string;
+  /** Number format options. */
+  formatOptions?: Intl.NumberFormatOptions;
+}
+
+export interface SliderState {
+  /** The current value. */
+  value: Accessor<number>;
+  /** Sets the value. */
+  setValue: (value: number) => void;
+  /** Sets the value by percent (0-1). */
+  setValuePercent: (percent: number) => void;
+  /** Gets the value as a percent (0-1). */
+  getValuePercent: Accessor<number>;
+  /** Gets the formatted value string. */
+  getFormattedValue: Accessor<string>;
+  /** Whether the thumb is being dragged. */
+  isDragging: Accessor<boolean>;
+  /** Sets the dragging state. */
+  setDragging: (dragging: boolean) => void;
+  /** Whether the slider is focused. */
+  isFocused: Accessor<boolean>;
+  /** Sets the focused state. */
+  setFocused: (focused: boolean) => void;
+  /** Increments the value by step. */
+  increment: (stepMultiplier?: number) => void;
+  /** Decrements the value by step. */
+  decrement: (stepMultiplier?: number) => void;
+  /** The minimum value. */
+  minValue: number;
+  /** The maximum value. */
+  maxValue: number;
+  /** The step value. */
+  step: number;
+  /** The page step (larger step for Page Up/Down). */
+  pageStep: number;
+  /** The orientation. */
+  orientation: SliderOrientation;
+  /** Whether the slider is disabled. */
+  isDisabled: boolean;
+}
+
+const DEFAULT_MIN = 0;
+const DEFAULT_MAX = 100;
+const DEFAULT_STEP = 1;
+
+/**
+ * Clamps a value between min and max.
+ */
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+/**
+ * Snaps a value to the nearest step.
+ */
+function snapToStep(value: number, min: number, max: number, step: number): number {
+  const snapped = Math.round((value - min) / step) * step + min;
+  // Handle floating point precision issues
+  const decimalPlaces = (step.toString().split(".")[1] || "").length;
+  const rounded = parseFloat(snapped.toFixed(decimalPlaces));
+  return clamp(rounded, min, max);
+}
+
+/**
+ * Provides state management for a slider component.
+ */
+export function createSliderState(props: MaybeAccessor<SliderStateProps>): SliderState {
+  const getProps = () => access(props);
+
+  const initialProps = getProps();
+  const initialMinValue = initialProps.minValue ?? DEFAULT_MIN;
+  const initialMaxValue = initialProps.maxValue ?? DEFAULT_MAX;
+  const initialStep = initialProps.step ?? DEFAULT_STEP;
+
+  const minValue = createMemo(() => getProps().minValue ?? DEFAULT_MIN);
+  const maxValue = createMemo(() => getProps().maxValue ?? DEFAULT_MAX);
+  const step = createMemo(() => getProps().step ?? DEFAULT_STEP);
+  const orientation = createMemo(() => getProps().orientation ?? "horizontal");
+  const isDisabled = createMemo(() => getProps().isDisabled ?? false);
+  const pageStep = createMemo(() =>
+    Math.max(
+      step(),
+      snapToStep((maxValue() - minValue()) / 10, 0, maxValue() - minValue(), step()),
+    ),
+  );
+
+  // Controlled vs uncontrolled
+  const isControlled = () => getProps().value !== undefined;
+
+  // Internal signal for uncontrolled mode
+  const [internalValue, setInternalValue] = createSignal(
+    snapToStep(
+      initialProps.defaultValue ?? initialMinValue,
+      initialMinValue,
+      initialMaxValue,
+      initialStep,
+    ),
+  );
+
+  // Dragging and focus state
+  const [isDragging, setIsDragging] = createSignal(false);
+  const [isFocused, setIsFocused] = createSignal(false);
+
+  // Current value accessor
+  const value = createMemo(() => {
+    const p = getProps();
+    const rawValue = isControlled() ? (p.value ?? minValue()) : internalValue();
+    return snapToStep(rawValue, minValue(), maxValue(), step());
+  });
+
+  // Value as percent (0-1)
+  const getValuePercent = createMemo(() => {
+    return (value() - minValue()) / (maxValue() - minValue());
+  });
+
+  // Formatted value
+  const getFormattedValue = createMemo(() => {
+    const p = getProps();
+    const formatter = new Intl.NumberFormat(p.locale, p.formatOptions);
+    return formatter.format(value());
+  });
+
+  // Set value function
+  const setValue = (newValue: number) => {
+    if (isDisabled()) return;
+
+    const p = getProps();
+    const snappedValue = snapToStep(newValue, minValue(), maxValue(), step());
+
+    if (!isControlled()) {
+      setInternalValue(snappedValue);
+    }
+
+    p.onChange?.(snappedValue);
+  };
+
+  // Set value by percent
+  const setValuePercent = (percent: number) => {
+    const clampedPercent = clamp(percent, 0, 1);
+    const newValue = clampedPercent * (maxValue() - minValue()) + minValue();
+    setValue(newValue);
+  };
+
+  // Dragging state management
+  const setDragging = (dragging: boolean) => {
+    const wasDragging = isDragging();
+    setIsDragging(dragging);
+
+    // Call onChangeEnd when dragging stops
+    if (wasDragging && !dragging) {
+      getProps().onChangeEnd?.(value());
+    }
+  };
+
+  // Increment/decrement
+  const increment = (stepMultiplier = 1) => {
+    if (isDisabled()) return;
+    setValue(value() + step() * stepMultiplier);
+  };
+
+  const decrement = (stepMultiplier = 1) => {
+    if (isDisabled()) return;
+    setValue(value() - step() * stepMultiplier);
+  };
+
+  // Set focused state
+  const setFocused = (focused: boolean) => {
+    setIsFocused(focused);
+  };
+
+  return {
+    value,
+    setValue,
+    setValuePercent,
+    getValuePercent,
+    getFormattedValue,
+    isDragging,
+    setDragging,
+    isFocused,
+    setFocused,
+    increment,
+    decrement,
+    get minValue() {
+      return minValue();
+    },
+    get maxValue() {
+      return maxValue();
+    },
+    get step() {
+      return step();
+    },
+    get pageStep() {
+      return pageStep();
+    },
+    get orientation() {
+      return orientation();
+    },
+    get isDisabled() {
+      return isDisabled();
+    },
+  };
+}

package/src/slider/index.d.ts

@@ -1,3 +1,3 @@
-export { createSliderState } from './createSliderState';
-export type { SliderState, SliderStateProps, SliderOrientation, } from './createSliderState';
-//# sourceMappingURL=index.d.ts.map
+export { createSliderState } from "./createSliderState";
+export type { SliderState, SliderStateProps, SliderOrientation } from "./createSliderState";
+//# sourceMappingURL=index.d.ts.map

package/src/slider/index.ts

@@ -1,6 +1,2 @@
-export { createSliderState } from './createSliderState';
-export type {
-  SliderState,
-  SliderStateProps,
-  SliderOrientation,
-} from './createSliderState';
+export { createSliderState } from "./createSliderState";
+export type { SliderState, SliderStateProps, SliderOrientation } from "./createSliderState";

package/src/ssr/index.d.ts

@@ -25,4 +25,4 @@ export declare function createId(defaultId?: string): string;
  * This is useful for code that needs to run only in the browser.
  */
 export declare const canUseDOM: boolean;
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/src/ssr/index.ts

@@ -5,8 +5,8 @@
  * These utilities provide a consistent API matching React-Stately's patterns.
  */
 
-import { createUniqueId } from 'solid-js';
-import { isServer as _isServer } from 'solid-js/web';
+import { createUniqueId } from "solid-js";
+import { isServer as _isServer } from "solid-js/web";
 
 /**
  * Re-export isServer from solid-js/web for convenience.

package/src/steplist/createStepListState.ts

@@ -0,0 +1,191 @@
+/**
+ * State management for step list components.
+ * Tracks selected step, completion status, and selectability.
+ */
+
+import { createMemo, createSignal, type Accessor } from "solid-js";
+import type { Key } from "../collections/types";
+
+export interface StepListStateProps {
+  /** The currently selected step key (controlled). */
+  selectedKey?: Key;
+  /** The default selected step key (uncontrolled). */
+  defaultSelectedKey?: Key;
+  /** Called when the selected step changes. */
+  onSelectionChange?: (key: Key) => void;
+  /** The last completed step key (controlled). */
+  lastCompletedStep?: Key;
+  /** The default last completed step key (uncontrolled). */
+  defaultLastCompletedStep?: Key;
+  /** Called when last completed step changes. */
+  onLastCompletedStepChange?: (key: Key | null) => void;
+  /** Whether all steps are disabled. */
+  isDisabled?: boolean;
+  /** Whether all steps are read-only. */
+  isReadOnly?: boolean;
+  /** Keys of individually disabled steps. */
+  disabledKeys?: Iterable<Key>;
+  /** The step items. */
+  items: Array<{ key: Key; [key: string]: any }>;
+}
+
+export interface StepListState {
+  readonly selectedKey: Accessor<Key | null>;
+  readonly lastCompletedStep: Accessor<Key | null>;
+  readonly items: Accessor<Array<{ key: Key }>>;
+  setSelectedKey(key: Key): void;
+  setLastCompletedStep(key: Key): void;
+  isCompleted(key: Key): boolean;
+  isSelectable(key: Key): boolean;
+  isDisabled: Accessor<boolean>;
+  isReadOnly: Accessor<boolean>;
+}
+
+/**
+ * Creates state for a step list component.
+ */
+export function createStepListState(props: StepListStateProps): StepListState {
+  const items = () => props.items;
+
+  // Build an index map: Key -> index
+  const indexMap = createMemo(() => {
+    const map = new Map<Key, number>();
+    const currentItems = items();
+    for (let i = 0; i < currentItems.length; i++) {
+      map.set(currentItems[i].key, i);
+    }
+    return map;
+  });
+
+  // Disabled keys set
+  const disabledKeysSet = createMemo(() => new Set<Key>(props.disabledKeys ?? []));
+
+  const isDisabled: Accessor<boolean> = () => props.isDisabled ?? false;
+  const isReadOnly: Accessor<boolean> = () => props.isReadOnly ?? false;
+
+  // Last completed step signal (uncontrolled)
+  const [lastCompletedStepInternal, setLastCompletedStepInternal] = createSignal<Key | null>(
+    props.defaultLastCompletedStep ?? null,
+  );
+
+  const lastCompletedStep: Accessor<Key | null> = () => {
+    if (props.lastCompletedStep !== undefined) {
+      return props.lastCompletedStep;
+    }
+    return lastCompletedStepInternal();
+  };
+
+  const setLastCompletedStep = (key: Key) => {
+    const currentIndex = indexMap().get(key);
+    const prevIndex = lastCompletedStep() !== null ? indexMap().get(lastCompletedStep()!) : -1;
+
+    // Only advance completion, never go back
+    if (
+      currentIndex !== undefined &&
+      (prevIndex === undefined || currentIndex > (prevIndex ?? -1))
+    ) {
+      if (props.lastCompletedStep === undefined) {
+        setLastCompletedStepInternal(key);
+      }
+      props.onLastCompletedStepChange?.(key);
+    }
+  };
+
+  const isCompleted = (key: Key): boolean => {
+    const completed = lastCompletedStep();
+    if (completed === null) return false;
+    const keyIndex = indexMap().get(key);
+    const completedIndex = indexMap().get(completed);
+    if (keyIndex === undefined || completedIndex === undefined) return false;
+    return keyIndex <= completedIndex;
+  };
+
+  const isStepDisabled = (key: Key): boolean => {
+    if (isDisabled()) return true;
+    return disabledKeysSet().has(key);
+  };
+
+  const isSelectable = (key: Key): boolean => {
+    if (isDisabled() || isReadOnly() || isStepDisabled(key)) return false;
+    // Completed steps are always selectable
+    if (isCompleted(key)) return true;
+    // First step is always selectable
+    const keyIndex = indexMap().get(key);
+    if (keyIndex === 0) return true;
+    // A step is selectable if the previous step is completed OR is the currently selected step
+    const currentItems = items();
+    if (keyIndex !== undefined && keyIndex > 0) {
+      const prevKey = currentItems[keyIndex - 1].key;
+      if (isCompleted(prevKey)) return true;
+      // Allow advancing to the step immediately after the selected step
+      if (prevKey === selectedKey()) return true;
+    }
+    return false;
+  };
+
+  // Find the first selectable non-completed step
+  const findDefaultSelectedKey = (): Key | null => {
+    const currentItems = items();
+    for (const item of currentItems) {
+      if (!isCompleted(item.key) && !isStepDisabled(item.key)) {
+        return item.key;
+      }
+    }
+    // All completed - select first non-disabled
+    for (const item of currentItems) {
+      if (!isStepDisabled(item.key)) {
+        return item.key;
+      }
+    }
+    return currentItems.length > 0 ? currentItems[0].key : null;
+  };
+
+  // Selected key signal (uncontrolled)
+  const [selectedKeyInternal, setSelectedKeyInternal] = createSignal<Key | null>(
+    props.defaultSelectedKey ?? findDefaultSelectedKey(),
+  );
+
+  const selectedKey: Accessor<Key | null> = () => {
+    if (props.selectedKey !== undefined) {
+      return props.selectedKey;
+    }
+    return selectedKeyInternal();
+  };
+
+  const setSelectedKey = (key: Key) => {
+    if (isReadOnly() || isDisabled()) return;
+    if (!isSelectable(key)) return;
+
+    // Mark previous selected step as completed if advancing
+    const currentSelected = selectedKey();
+    if (currentSelected !== null) {
+      const currentIndex = indexMap().get(currentSelected);
+      const newIndex = indexMap().get(key);
+      if (
+        currentIndex !== undefined &&
+        newIndex !== undefined &&
+        newIndex > currentIndex &&
+        !isCompleted(currentSelected)
+      ) {
+        setLastCompletedStep(currentSelected);
+      }
+    }
+
+    if (props.selectedKey === undefined) {
+      setSelectedKeyInternal(key);
+    }
+    props.onSelectionChange?.(key);
+  };
+
+  return {
+    selectedKey,
+    lastCompletedStep,
+    items,
+    setSelectedKey,
+    setLastCompletedStep,
+    isCompleted,
+    isSelectable,
+    isDisabled,
+    isReadOnly,
+  };
+}