@proyecto-viviana/solid-stately 0.2.7 → 0.3.0

package/src/slider/createSliderState.ts

@@ -3,10 +3,10 @@
  * Based on @react-stately/slider useSliderState.
  */
 
-import { type Accessor, createSignal, createMemo } from 'solid-js';
-import { access, type MaybeAccessor } from '../utils';
+import { type Accessor, createSignal, createMemo } from "solid-js";
+import { access, type MaybeAccessor } from "../utils";
 
-export type SliderOrientation = 'horizontal' | 'vertical';
+export type SliderOrientation = "horizontal" | "vertical";
 
 export interface SliderStateProps {
   /** The current value (controlled). */
@@ -87,7 +87,7 @@ function clamp(value: number, min: number, max: number): number {
 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 decimalPlaces = (step.toString().split(".")[1] || "").length;
   const rounded = parseFloat(snapped.toFixed(decimalPlaces));
   return clamp(rounded, min, max);
 }
@@ -95,27 +95,37 @@ function snapToStep(value: number, min: number, max: number, step: number): numb
 /**
  * Provides state management for a slider component.
  */
-export function createSliderState(
-  props: MaybeAccessor<SliderStateProps>
-): SliderState {
+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));
+  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(getProps().defaultValue ?? minValue, minValue, maxValue, step)
+    snapToStep(
+      initialProps.defaultValue ?? initialMinValue,
+      initialMinValue,
+      initialMaxValue,
+      initialStep,
+    ),
   );
 
   // Dragging and focus state
@@ -125,13 +135,13 @@ export function createSliderState(
   // Current value accessor
   const value = createMemo(() => {
     const p = getProps();
-    const rawValue = isControlled() ? (p.value ?? minValue) : internalValue();
-    return snapToStep(rawValue, minValue, maxValue, step);
+    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);
+    return (value() - minValue()) / (maxValue() - minValue());
   });
 
   // Formatted value
@@ -143,10 +153,10 @@ export function createSliderState(
 
   // Set value function
   const setValue = (newValue: number) => {
-    if (isDisabled) return;
+    if (isDisabled()) return;
 
     const p = getProps();
-    const snappedValue = snapToStep(newValue, minValue, maxValue, step);
+    const snappedValue = snapToStep(newValue, minValue(), maxValue(), step());
 
     if (!isControlled()) {
       setInternalValue(snappedValue);
@@ -158,7 +168,7 @@ export function createSliderState(
   // Set value by percent
   const setValuePercent = (percent: number) => {
     const clampedPercent = clamp(percent, 0, 1);
-    const newValue = clampedPercent * (maxValue - minValue) + minValue;
+    const newValue = clampedPercent * (maxValue() - minValue()) + minValue();
     setValue(newValue);
   };
 
@@ -175,13 +185,13 @@ export function createSliderState(
 
   // Increment/decrement
   const increment = (stepMultiplier = 1) => {
-    if (isDisabled) return;
-    setValue(value() + step * stepMultiplier);
+    if (isDisabled()) return;
+    setValue(value() + step() * stepMultiplier);
   };
 
   const decrement = (stepMultiplier = 1) => {
-    if (isDisabled) return;
-    setValue(value() - step * stepMultiplier);
+    if (isDisabled()) return;
+    setValue(value() - step() * stepMultiplier);
   };
 
   // Set focused state
@@ -201,11 +211,23 @@ export function createSliderState(
     setFocused,
     increment,
     decrement,
-    minValue,
-    maxValue,
-    step,
-    pageStep,
-    orientation,
-    isDisabled,
+    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,
+  };
+}

package/src/steplist/index.ts

@@ -0,0 +1,5 @@
+export {
+  createStepListState,
+  type StepListStateProps,
+  type StepListState,
+} from "./createStepListState";

package/src/table/TableCollection.d.ts

@@ -2,51 +2,53 @@
  * TableCollection - A collection class for table data.
  * Based on @react-stately/table/TableCollection.
  */
-import type { Key } from '../collections/types';
-import type { GridNode } from '../grid/types';
-import type { TableCollection as ITableCollection, TableCollectionOptions } from './types';
+import type { Key } from "../collections/types";
+import type { GridNode } from "../grid/types";
+import type { TableCollection as ITableCollection, TableCollectionOptions } from "./types";
 /**
  * Creates a table collection from column and row definitions.
  */
 export declare class TableCollection<T = unknown> implements ITableCollection<T> {
-    private _columns;
-    private _rows;
-    private _headerRows;
-    private _body;
-    private _head;
-    private _keyMap;
-    private _rowHeaderColumnKeys;
-    private _size;
-    constructor(options: TableCollectionOptions<T>);
-    private buildColumns;
-    private buildColumnNode;
-    private getDefaultRowHeaderColumnKeys;
-    private buildHeaderRows;
-    private buildRows;
-    private isRowDefinition;
-    get size(): number;
-    get rows(): GridNode<T>[];
-    get columns(): GridNode<T>[];
-    get headerRows(): GridNode<T>[];
-    get head(): GridNode<T> | undefined;
-    get body(): GridNode<T>;
-    get rowCount(): number;
-    get columnCount(): number;
-    get rowHeaderColumnKeys(): Set<Key>;
-    getKeys(): Iterable<Key>;
-    getItem(key: Key): GridNode<T> | null;
-    at(index: number): GridNode<T> | null;
-    getChildren(key: Key): Iterable<GridNode<T>>;
-    getTextValue(key: Key): string;
-    getCell(rowKey: Key, columnKey: Key): GridNode<T> | null;
-    getFirstKey(): Key | null;
-    getLastKey(): Key | null;
-    getKeyBefore(key: Key): Key | null;
-    getKeyAfter(key: Key): Key | null;
-    [Symbol.iterator](): Iterator<GridNode<T>>;
+  private _columns;
+  private _rows;
+  private _headerRows;
+  private _body;
+  private _head;
+  private _keyMap;
+  private _rowHeaderColumnKeys;
+  private _size;
+  constructor(options: TableCollectionOptions<T>);
+  private buildColumns;
+  private buildColumnNode;
+  private getDefaultRowHeaderColumnKeys;
+  private buildHeaderRows;
+  private buildRows;
+  private isRowDefinition;
+  get size(): number;
+  get rows(): GridNode<T>[];
+  get columns(): GridNode<T>[];
+  get headerRows(): GridNode<T>[];
+  get head(): GridNode<T> | undefined;
+  get body(): GridNode<T>;
+  get rowCount(): number;
+  get columnCount(): number;
+  get rowHeaderColumnKeys(): Set<Key>;
+  getKeys(): Iterable<Key>;
+  getItem(key: Key): GridNode<T> | null;
+  at(index: number): GridNode<T> | null;
+  getChildren(key: Key): Iterable<GridNode<T>>;
+  getTextValue(key: Key): string;
+  getCell(rowKey: Key, columnKey: Key): GridNode<T> | null;
+  getFirstKey(): Key | null;
+  getLastKey(): Key | null;
+  getKeyBefore(key: Key): Key | null;
+  getKeyAfter(key: Key): Key | null;
+  [Symbol.iterator](): Iterator<GridNode<T>>;
 }
 /**
  * Creates a table collection from options.
  */
-export declare function createTableCollection<T>(options: TableCollectionOptions<T>): TableCollection<T>;
-//# sourceMappingURL=TableCollection.d.ts.map
+export declare function createTableCollection<T>(
+  options: TableCollectionOptions<T>,
+): TableCollection<T>;
+//# sourceMappingURL=TableCollection.d.ts.map