@proyecto-viviana/solid-stately 0.2.4 → 0.2.7

package/src/slider/createSliderState.ts

@@ -1,211 +1,211 @@
-/**
- * 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);
+
+  // 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,
+  };
+}

package/src/slider/index.ts

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

package/src/tabs/createTabListState.ts

@@ -3,11 +3,12 @@
  * Based on @react-stately/tabs.
  */
 
-import { createSignal, type Accessor } from 'solid-js';
+import { createComputed, createMemo, createSignal, type Accessor } from 'solid-js';
 import { access, type MaybeAccessor } from '../utils';
 import { ListCollection } from '../collections/ListCollection';
 import type {
   Collection,
+  CollectionItemLike,
   CollectionNode,
   Key,
   FocusStrategy,
@@ -81,22 +82,23 @@ export function createTabListState<T = unknown>(
   const getProps = () => access(props);
 
   // Build collection from items
-  const collection: Accessor<Collection<T>> = () => {
+  const collection: Accessor<Collection<T>> = createMemo(() => {
     const p = getProps();
     const items = p.items ?? [];
 
     const nodes: CollectionNode<T>[] = items.map((item, index) => {
-      const key = p.getKey?.(item) ?? (item as any).key ?? (item as any).id ?? index;
+      const o = item as CollectionItemLike;
+      const key = p.getKey?.(item) ?? o.key ?? o.id ?? index;
       const textValue =
-        p.getTextValue?.(item) ?? (item as any).textValue ?? (item as any).label ?? String(item);
-      const isDisabled = p.getDisabled?.(item) ?? (item as any).isDisabled ?? false;
+        p.getTextValue?.(item) ?? o.textValue ?? o.label ?? String(item);
+      const isDisabled = p.getDisabled?.(item) ?? o.isDisabled ?? false;
 
       return {
         type: 'item' as const,
         key,
         value: item,
         textValue,
-        rendered: null as any,
+        rendered: null!,
         level: 0,
         index,
         parentKey: null,
@@ -107,10 +109,10 @@ export function createTabListState<T = unknown>(
     });
 
     return new ListCollection(nodes);
-  };
+  });
 
-  // Compute disabled keys
-  const disabledKeys: Accessor<Set<Key>> = () => {
+  // Compute disabled keys (memoized to avoid rebuilding Set per access)
+  const disabledKeys: Accessor<Set<Key>> = createMemo(() => {
     const p = getProps();
     const result = new Set<Key>(p.disabledKeys ?? []);
 
@@ -122,7 +124,7 @@ export function createTabListState<T = unknown>(
     }
 
     return result;
-  };
+  });
 
   // Check if a key is disabled
   const isKeyDisabled = (key: Key): boolean => {
@@ -177,6 +179,7 @@ export function createTabListState<T = unknown>(
   const setSelectedKey = (key: Key) => {
     // Don't select disabled keys
     if (isKeyDisabled(key)) return;
+    if (selectedKey() === key) return;
 
     const p = getProps();
     // For uncontrolled mode, update internal state
@@ -216,11 +219,34 @@ export function createTabListState<T = unknown>(
     setChildFocusStrategy(childStrategy ?? null);
 
     // In automatic mode, selecting follows focus
-    if (keyboardActivation() === 'automatic' && key !== null && !isKeyDisabled(key)) {
+    if (
+      keyboardActivation() === 'automatic' &&
+      key !== null &&
+      key !== selectedKey() &&
+      !isKeyDisabled(key)
+    ) {
       setSelectedKey(key);
     }
   };
 
+  // Keep uncontrolled selection valid as items/disabled keys change.
+  createComputed(() => {
+    const p = getProps();
+    if (p.selectedKey !== undefined) return;
+
+    const coll = collection();
+    const current = selectedKeyInternal();
+    const currentExists = current !== null && coll.getItem(current) !== null;
+    const currentEnabled = current !== null && !isKeyDisabled(current);
+
+    if (currentExists && currentEnabled) return;
+
+    const nextKey = findFirstNonDisabledKey();
+    if (nextKey !== current) {
+      setSelectedKeyInternal(nextKey);
+    }
+  });
+
   return {
     collection,
     selectedKey,

package/src/toast/createToastState.d.ts

@@ -42,8 +42,13 @@ export interface ToastState<T> {
     visibleToasts: Accessor<QueuedToast<T>[]>;
     /** Adds a toast to the queue. */
     add: (content: T, options?: ToastOptions) => string;
-    /** Closes a toast by key. */
+    /** Closes a toast by key. Starts exit animation if hasExitAnimation is enabled. */
     close: (key: string) => void;
+    /**
+     * Removes a toast after exit animation completes.
+     * Call this from the component layer when the CSS exit animation finishes.
+     */
+    remove: (key: string) => void;
     /** Pauses all toast timers. */
     pauseAll: () => void;
     /** Resumes all toast timers. */

package/src/toast/createToastState.ts

@@ -52,8 +52,14 @@ export interface ToastState<T> {
   visibleToasts: Accessor<QueuedToast<T>[]>;
   /** Adds a toast to the queue. */
   add: (content: T, options?: ToastOptions) => string;
-  /** Closes a toast by key. */
+  /** Closes a toast by key. Starts exit animation if hasExitAnimation is enabled. */
   close: (key: string) => void;
+  /**
+   * Removes a toast after exit animation completes.
+   * Call this from the component layer when the CSS exit animation finishes.
+   * If hasExitAnimation is false, close() removes immediately and this is not needed.
+   */
+  remove: (key: string) => void;
   /** Pauses all toast timers. */
   pauseAll: () => void;
   /** Resumes all toast timers. */
@@ -296,6 +302,7 @@ export function createToastState<T>(props: ToastStateProps<T>): ToastState<T> {
     visibleToasts,
     add: (content, options) => props.queue.add(content, options),
     close: (key) => props.queue.close(key),
+    remove: (key) => props.queue.remove(key),
     pauseAll: () => props.queue.pauseAll(),
     resumeAll: () => props.queue.resumeAll(),
   };