@proyecto-viviana/solid-stately 0.2.7 → 0.3.0

package/src/textfield/createTextFieldState.d.ts

@@ -6,25 +6,27 @@
  * This is a port of @react-stately/utils's useControlledState pattern
  * as used by @react-aria/textfield.
  */
-import { Accessor } from 'solid-js';
-import { type MaybeAccessor } from '../utils';
+import { Accessor } from "solid-js";
+import { type MaybeAccessor } from "../utils";
 export interface TextFieldStateOptions {
-    /** The current value (controlled). */
-    value?: string;
-    /** The default value (uncontrolled). */
-    defaultValue?: string;
-    /** Handler that is called when the value changes. */
-    onChange?: (value: string) => void;
+  /** The current value (controlled). */
+  value?: string;
+  /** The default value (uncontrolled). */
+  defaultValue?: string;
+  /** Handler that is called when the value changes. */
+  onChange?: (value: string) => void;
 }
 export interface TextFieldState {
-    /** The current value of the text field. */
-    readonly value: Accessor<string>;
-    /** Sets the value of the text field. */
-    setValue(value: string): void;
+  /** The current value of the text field. */
+  readonly value: Accessor<string>;
+  /** Sets the value of the text field. */
+  setValue(value: string): void;
 }
 /**
  * Provides state management for text input components.
  * Supports both controlled and uncontrolled modes.
  */
-export declare function createTextFieldState(props?: MaybeAccessor<TextFieldStateOptions>): TextFieldState;
-//# sourceMappingURL=createTextFieldState.d.ts.map
+export declare function createTextFieldState(
+  props?: MaybeAccessor<TextFieldStateOptions>,
+): TextFieldState;
+//# sourceMappingURL=createTextFieldState.d.ts.map

package/src/textfield/createTextFieldState.ts

@@ -7,12 +7,8 @@
  * as used by @react-aria/textfield.
  */
 
-import { createSignal, Accessor } from 'solid-js';
-import { type MaybeAccessor, access } from '../utils';
-
-// ============================================
-// TYPES
-// ============================================
+import { createSignal, Accessor } from "solid-js";
+import { type MaybeAccessor, access } from "../utils";
 
 export interface TextFieldStateOptions {
   /** The current value (controlled). */
@@ -30,34 +26,27 @@ export interface TextFieldState {
   setValue(value: string): void;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides state management for text input components.
  * Supports both controlled and uncontrolled modes.
  */
-export function createTextFieldState(props: MaybeAccessor<TextFieldStateOptions> = {}): TextFieldState {
+export function createTextFieldState(
+  props: MaybeAccessor<TextFieldStateOptions> = {},
+): TextFieldState {
   const getProps = () => access(props);
 
-  // Get initial value
   const initialProps = getProps();
-  const initialValue = initialProps.value ?? initialProps.defaultValue ?? '';
+  const initialValue = initialProps.value ?? initialProps.defaultValue ?? "";
 
-  // Create internal signal for uncontrolled mode
   const [internalValue, setInternalValue] = createSignal(initialValue);
 
-  // Determine if controlled
   const isControlled = () => getProps().value !== undefined;
 
-  // Get current value
   const value: Accessor<string> = () => {
     const p = getProps();
-    return isControlled() ? (p.value ?? '') : internalValue();
+    return isControlled() ? (p.value ?? "") : internalValue();
   };
 
-  // Update value
   function setValue(newValue: string): void {
     const p = getProps();
 

package/src/textfield/index.d.ts

@@ -1,2 +1,6 @@
-export { createTextFieldState, type TextFieldStateOptions, type TextFieldState, } from './createTextFieldState';
-//# sourceMappingURL=index.d.ts.map
+export {
+  createTextFieldState,
+  type TextFieldStateOptions,
+  type TextFieldState,
+} from "./createTextFieldState";
+//# sourceMappingURL=index.d.ts.map

package/src/textfield/index.ts

@@ -2,4 +2,4 @@ export {
   createTextFieldState,
   type TextFieldStateOptions,
   type TextFieldState,
-} from './createTextFieldState';
+} from "./createTextFieldState";

package/src/toast/createToastState.d.ts

@@ -2,71 +2,73 @@
  * Toast state management for SolidJS
  * Based on @react-stately/toast useToastState
  */
-import { type Accessor } from 'solid-js';
+import { type Accessor } from "solid-js";
 export interface ToastOptions {
-    /** A timeout to automatically close the toast, in milliseconds. */
-    timeout?: number;
-    /** The priority of the toast relative to other toasts. */
-    priority?: number;
-    /** Handler called when the toast is closed. */
-    onClose?: () => void;
+  /** A timeout to automatically close the toast, in milliseconds. */
+  timeout?: number;
+  /** The priority of the toast relative to other toasts. */
+  priority?: number;
+  /** Handler called when the toast is closed. */
+  onClose?: () => void;
 }
 export interface QueuedToast<T> {
-    /** The content of the toast. */
-    content: T;
-    /** A unique key for the toast. */
-    key: string;
-    /** The timer for the toast. */
-    timer: Timer | null;
-    /** Whether the toast should be animated. */
-    animation?: 'entering' | 'exiting' | 'queued';
-    /** The priority of the toast. */
-    priority: number;
-    /** Handler called when the toast is closed. */
-    onClose?: () => void;
-    /** The timeout for the toast. */
-    timeout?: number;
+  /** The content of the toast. */
+  content: T;
+  /** A unique key for the toast. */
+  key: string;
+  /** The timer for the toast. */
+  timer: Timer | null;
+  /** Whether the toast should be animated. */
+  animation?: "entering" | "exiting" | "queued";
+  /** The priority of the toast. */
+  priority: number;
+  /** Handler called when the toast is closed. */
+  onClose?: () => void;
+  /** The timeout for the toast. */
+  timeout?: number;
 }
 export interface ToastQueueOptions {
-    /** The maximum number of toasts to display at once. */
-    maxVisibleToasts?: number;
-    /** Whether toasts should stack (true) or queue (false). */
-    hasExitAnimation?: boolean;
+  /** The maximum number of toasts to display at once. */
+  maxVisibleToasts?: number;
+  /** Whether toasts should stack (true) or queue (false). */
+  hasExitAnimation?: boolean;
 }
 export interface ToastStateProps<T> {
-    /** The toast queue to use. */
-    queue: ToastQueue<T>;
+  /** The toast queue to use. */
+  queue: ToastQueue<T>;
 }
 export interface ToastState<T> {
-    /** The currently visible toasts. */
-    visibleToasts: Accessor<QueuedToast<T>[]>;
-    /** Adds a toast to the queue. */
-    add: (content: T, options?: ToastOptions) => string;
-    /** 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. */
-    resumeAll: () => void;
+  /** The currently visible toasts. */
+  visibleToasts: Accessor<QueuedToast<T>[]>;
+  /** Adds a toast to the queue. */
+  add: (content: T, options?: ToastOptions) => string;
+  /** 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;
+  /** Clears all queued and visible toasts. */
+  clear: () => void;
+  /** Pauses all toast timers. */
+  pauseAll: () => void;
+  /** Resumes all toast timers. */
+  resumeAll: () => void;
 }
 /**
  * A Timer that supports pause and resume.
  */
 export declare class Timer {
-    private timerId;
-    private startTime;
-    private remaining;
-    private callback;
-    constructor(callback: () => void, delay: number);
-    pause(): void;
-    resume(): void;
-    reset(delay: number): void;
-    cancel(): void;
+  private timerId;
+  private startTime;
+  private remaining;
+  private callback;
+  constructor(callback: () => void, delay: number);
+  pause(): void;
+  resume(): void;
+  reset(delay: number): void;
+  cancel(): void;
 }
 type SubscribeCallback<T> = (toasts: QueuedToast<T>[]) => void;
 /**
@@ -74,38 +76,42 @@ type SubscribeCallback<T> = (toasts: QueuedToast<T>[]) => void;
  * Can be created once and shared across the app (singleton pattern).
  */
 export declare class ToastQueue<T> {
-    private queue;
-    private subscriptions;
-    private maxVisibleToasts;
-    private hasExitAnimation;
-    private keyCounter;
-    constructor(options?: ToastQueueOptions);
-    /**
-     * Subscribe to queue changes.
-     */
-    subscribe(callback: SubscribeCallback<T>): () => void;
-    /**
-     * Add a toast to the queue.
-     */
-    add(content: T, options?: ToastOptions): string;
-    /**
-     * Close a toast by key.
-     */
-    close(key: string): void;
-    /**
-     * Remove a toast after exit animation completes.
-     */
-    remove(key: string): void;
-    /**
-     * Pause all toast timers.
-     */
-    pauseAll(): void;
-    /**
-     * Resume all toast timers.
-     */
-    resumeAll(): void;
-    private updateVisibility;
-    private notify;
+  private queue;
+  private subscriptions;
+  private maxVisibleToasts;
+  private hasExitAnimation;
+  private keyCounter;
+  constructor(options?: ToastQueueOptions);
+  /**
+   * Subscribe to queue changes.
+   */
+  subscribe(callback: SubscribeCallback<T>): () => void;
+  /**
+   * Add a toast to the queue.
+   */
+  add(content: T, options?: ToastOptions): string;
+  /**
+   * Close a toast by key.
+   */
+  close(key: string): void;
+  /**
+   * Remove a toast after exit animation completes.
+   */
+  remove(key: string): void;
+  /**
+   * Clear all queued and visible toasts.
+   */
+  clear(): void;
+  /**
+   * Pause all toast timers.
+   */
+  pauseAll(): void;
+  /**
+   * Resume all toast timers.
+   */
+  resumeAll(): void;
+  private updateVisibility;
+  private notify;
 }
 /**
  * Creates reactive toast state from a ToastQueue.
@@ -117,7 +123,7 @@ export declare function createToastState<T>(props: ToastStateProps<T>): ToastSta
  * Use this if you don't need a global queue.
  */
 export declare function createToastQueue<T>(options?: ToastQueueOptions): ToastState<T> & {
-    queue: ToastQueue<T>;
+  queue: ToastQueue<T>;
 };
-export {};
-//# sourceMappingURL=createToastState.d.ts.map
+
+//# sourceMappingURL=createToastState.d.ts.map

package/src/toast/createToastState.ts

@@ -3,11 +3,7 @@
  * Based on @react-stately/toast useToastState
  */
 
-import { createSignal, onCleanup, type Accessor } from 'solid-js';
-
-// ============================================
-// TYPES
-// ============================================
+import { createSignal, onCleanup, type Accessor } from "solid-js";
 
 export interface ToastOptions {
   /** A timeout to automatically close the toast, in milliseconds. */
@@ -26,7 +22,7 @@ export interface QueuedToast<T> {
   /** The timer for the toast. */
   timer: Timer | null;
   /** Whether the toast should be animated. */
-  animation?: 'entering' | 'exiting' | 'queued';
+  animation?: "entering" | "exiting" | "queued";
   /** The priority of the toast. */
   priority: number;
   /** Handler called when the toast is closed. */
@@ -60,16 +56,14 @@ export interface ToastState<T> {
    * If hasExitAnimation is false, close() removes immediately and this is not needed.
    */
   remove: (key: string) => void;
+  /** Clears all queued and visible toasts. */
+  clear: () => void;
   /** Pauses all toast timers. */
   pauseAll: () => void;
   /** Resumes all toast timers. */
   resumeAll: () => void;
 }
 
-// ============================================
-// TIMER CLASS
-// ============================================
-
 /**
  * A Timer that supports pause and resume.
  */
@@ -119,10 +113,6 @@ export class Timer {
   }
 }
 
-// ============================================
-// TOAST QUEUE CLASS
-// ============================================
-
 type SubscribeCallback<T> = (toasts: QueuedToast<T>[]) => void;
 
 /**
@@ -164,7 +154,7 @@ export class ToastQueue<T> {
       priority: options.priority ?? 0,
       onClose: options.onClose,
       timeout: options.timeout,
-      animation: 'entering',
+      animation: "entering",
     };
 
     // Find insertion point based on priority
@@ -172,7 +162,7 @@ export class ToastQueue<T> {
     let high = this.queue.length;
     while (low < high) {
       const mid = Math.floor((low + high) / 2);
-      if (toast.priority > this.queue[mid].priority) {
+      if (toast.priority >= this.queue[mid].priority) {
         high = mid;
       } else {
         low = mid + 1;
@@ -180,11 +170,7 @@ export class ToastQueue<T> {
     }
 
     // Insert at the correct position
-    this.queue = [
-      ...this.queue.slice(0, low),
-      toast,
-      ...this.queue.slice(low),
-    ];
+    this.queue = [...this.queue.slice(0, low), toast, ...this.queue.slice(low)];
 
     // Start timer for visible toasts
     this.updateVisibility();
@@ -201,11 +187,12 @@ export class ToastQueue<T> {
 
     // Cancel any existing timer
     toast.timer?.cancel();
-    toast.timer = null;
 
-    if (this.hasExitAnimation && toast.animation !== 'queued') {
+    if (this.hasExitAnimation && toast.animation !== "queued") {
       // Mark as exiting for animation
-      toast.animation = 'exiting';
+      this.queue = this.queue.map((t) =>
+        t.key === key ? { ...t, timer: null, animation: "exiting" } : t,
+      );
       this.notify();
     } else {
       // Remove immediately
@@ -227,6 +214,18 @@ export class ToastQueue<T> {
     this.updateVisibility();
   }
 
+  /**
+   * Clear all queued and visible toasts.
+   */
+  clear(): void {
+    for (const toast of this.queue) {
+      toast.timer?.cancel();
+    }
+
+    this.queue = [];
+    this.notify();
+  }
+
   /**
    * Pause all toast timers.
    */
@@ -248,24 +247,35 @@ export class ToastQueue<T> {
   private updateVisibility(): void {
     // Mark toasts as visible or queued based on maxVisibleToasts
     const visibleCount = this.queue.filter(
-      (t) => t.animation !== 'queued' && t.animation !== 'exiting'
+      (t) => t.animation !== "queued" && t.animation !== "exiting",
     ).length;
 
     let promoted = 0;
-    for (const toast of this.queue) {
-      if (toast.animation === 'queued' && visibleCount + promoted < this.maxVisibleToasts) {
-        toast.animation = 'entering';
+    this.queue = this.queue.map((toast) => {
+      let nextToast = toast;
+
+      if (nextToast.animation === "queued" && visibleCount + promoted < this.maxVisibleToasts) {
+        nextToast = { ...nextToast, animation: "entering" };
         promoted++;
       }
-      if (toast.animation === 'queued') continue;
+      if (nextToast.animation === "queued") return nextToast;
 
       // Start timer for visible toasts
-      if (toast.timeout != null && toast.timer === null && toast.animation !== 'exiting') {
-        toast.timer = new Timer(() => {
-          this.close(toast.key);
-        }, toast.timeout);
+      if (
+        nextToast.timeout != null &&
+        nextToast.timer === null &&
+        nextToast.animation !== "exiting"
+      ) {
+        nextToast = {
+          ...nextToast,
+          timer: new Timer(() => {
+            this.close(nextToast.key);
+          }, nextToast.timeout),
+        };
       }
-    }
+
+      return nextToast;
+    });
 
     this.notify();
   }
@@ -278,10 +288,6 @@ export class ToastQueue<T> {
   }
 }
 
-// ============================================
-// HOOK
-// ============================================
-
 /**
  * Creates reactive toast state from a ToastQueue.
  * Use this hook to subscribe to toast changes in your component.
@@ -303,20 +309,19 @@ export function createToastState<T>(props: ToastStateProps<T>): ToastState<T> {
     add: (content, options) => props.queue.add(content, options),
     close: (key) => props.queue.close(key),
     remove: (key) => props.queue.remove(key),
+    clear: () => props.queue.clear(),
     pauseAll: () => props.queue.pauseAll(),
     resumeAll: () => props.queue.resumeAll(),
   };
 }
 
-// ============================================
-// CONVENIENCE HOOKS
-// ============================================
-
 /**
  * Creates a new ToastQueue and returns reactive state.
  * Use this if you don't need a global queue.
  */
-export function createToastQueue<T>(options?: ToastQueueOptions): ToastState<T> & { queue: ToastQueue<T> } {
+export function createToastQueue<T>(
+  options?: ToastQueueOptions,
+): ToastState<T> & { queue: ToastQueue<T> } {
   const queue = new ToastQueue<T>(options);
   const state = createToastState({ queue });
   return { ...state, queue };

package/src/toast/index.d.ts

@@ -1,2 +1,12 @@
-export { createToastState, createToastQueue, ToastQueue, Timer, type ToastOptions, type QueuedToast, type ToastQueueOptions, type ToastStateProps, type ToastState, } from './createToastState';
-//# sourceMappingURL=index.d.ts.map
+export {
+  createToastState,
+  createToastQueue,
+  ToastQueue,
+  Timer,
+  type ToastOptions,
+  type QueuedToast,
+  type ToastQueueOptions,
+  type ToastStateProps,
+  type ToastState,
+} from "./createToastState";
+//# sourceMappingURL=index.d.ts.map

package/src/toast/index.ts

@@ -8,4 +8,4 @@ export {
   type ToastQueueOptions,
   type ToastStateProps,
   type ToastState,
-} from './createToastState';
+} from "./createToastState";

package/src/toggle/createToggleGroupState.ts

@@ -7,20 +7,16 @@
  * This is a port of @react-stately/toggle's useToggleGroupState.
  */
 
-import { createSignal } from 'solid-js';
-import type { Key } from '../collections';
-import { type MaybeAccessor, access } from '../utils';
-
-// ============================================
-// TYPES
-// ============================================
+import { createSignal } from "solid-js";
+import type { Key } from "../collections";
+import { type MaybeAccessor, access } from "../utils";
 
 export interface ToggleGroupProps {
   /**
    * Whether single or multiple selection is enabled.
    * @default 'single'
    */
-  selectionMode?: 'single' | 'multiple';
+  selectionMode?: "single" | "multiple";
   /** Whether empty selection is disallowed. */
   disallowEmptySelection?: boolean;
   /** Controlled selected keys. */
@@ -35,7 +31,7 @@ export interface ToggleGroupProps {
 
 export interface ToggleGroupState {
   /** Whether single or multiple selection is enabled. */
-  readonly selectionMode: 'single' | 'multiple';
+  readonly selectionMode: "single" | "multiple";
   /** Whether all items are disabled. */
   readonly isDisabled: boolean;
   /** Current selected keys. */
@@ -52,21 +48,17 @@ function toKeySet(keys?: Iterable<Key>): Set<Key> {
   return new Set(keys ? Array.from(keys) : []);
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Manages state for a group of toggle buttons.
  */
 export function createToggleGroupState(
-  props: MaybeAccessor<ToggleGroupProps> = {}
+  props: MaybeAccessor<ToggleGroupProps> = {},
 ): ToggleGroupState {
   const getProps = () => access(props);
 
   const initialProps = getProps();
   const [internalSelectedKeys, setInternalSelectedKeys] = createSignal<Set<Key>>(
-    toKeySet(initialProps.defaultSelectedKeys)
+    toKeySet(initialProps.defaultSelectedKeys),
   );
 
   const isControlled = () => getProps().selectedKeys !== undefined;
@@ -83,12 +75,12 @@ export function createToggleGroupState(
 
   function toggleKey(key: Key): void {
     const props = getProps();
-    const mode = props.selectionMode ?? 'single';
+    const mode = props.selectionMode ?? "single";
     const disallowEmptySelection = props.disallowEmptySelection ?? false;
     const currentKeys = selectedKeys();
 
     let nextKeys: Set<Key>;
-    if (mode === 'multiple') {
+    if (mode === "multiple") {
       nextKeys = new Set(currentKeys);
       if (nextKeys.has(key) && (!disallowEmptySelection || nextKeys.size > 1)) {
         nextKeys.delete(key);
@@ -96,9 +88,7 @@ export function createToggleGroupState(
         nextKeys.add(key);
       }
     } else {
-      nextKeys = new Set(
-        currentKeys.has(key) && !disallowEmptySelection ? [] : [key]
-      );
+      nextKeys = new Set(currentKeys.has(key) && !disallowEmptySelection ? [] : [key]);
     }
 
     setSelectedKeys(nextKeys);
@@ -112,7 +102,7 @@ export function createToggleGroupState(
 
   return {
     get selectionMode() {
-      return getProps().selectionMode ?? 'single';
+      return getProps().selectionMode ?? "single";
     },
     get isDisabled() {
       return getProps().isDisabled ?? false;