@proyecto-viviana/solid-stately 0.2.4 → 0.3.0

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. */
@@ -52,18 +48,22 @@ 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;
+  /** 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.
  */
@@ -113,10 +113,6 @@ export class Timer {
   }
 }
 
-// ============================================
-// TOAST QUEUE CLASS
-// ============================================
-
 type SubscribeCallback<T> = (toasts: QueuedToast<T>[]) => void;
 
 /**
@@ -158,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
@@ -166,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;
@@ -174,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();
@@ -195,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
@@ -221,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.
    */
@@ -242,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();
   }
@@ -272,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.
@@ -296,20 +308,20 @@ 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),
+    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

@@ -0,0 +1,117 @@
+/**
+ * Toggle group state for Solid Stately
+ *
+ * Provides state management for groups of toggle buttons with
+ * single or multiple selection.
+ *
+ * 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";
+
+export interface ToggleGroupProps {
+  /**
+   * Whether single or multiple selection is enabled.
+   * @default 'single'
+   */
+  selectionMode?: "single" | "multiple";
+  /** Whether empty selection is disallowed. */
+  disallowEmptySelection?: boolean;
+  /** Controlled selected keys. */
+  selectedKeys?: Iterable<Key>;
+  /** Uncontrolled initial selected keys. */
+  defaultSelectedKeys?: Iterable<Key>;
+  /** Called when selected keys change. */
+  onSelectionChange?: (keys: Set<Key>) => void;
+  /** Whether all items are disabled. */
+  isDisabled?: boolean;
+}
+
+export interface ToggleGroupState {
+  /** Whether single or multiple selection is enabled. */
+  readonly selectionMode: "single" | "multiple";
+  /** Whether all items are disabled. */
+  readonly isDisabled: boolean;
+  /** Current selected keys. */
+  readonly selectedKeys: Set<Key>;
+  /** Toggles selected state for a key. */
+  toggleKey(key: Key): void;
+  /** Sets selected state for a key. */
+  setSelected(key: Key, isSelected: boolean): void;
+  /** Replaces selected keys. */
+  setSelectedKeys(keys: Set<Key>): void;
+}
+
+function toKeySet(keys?: Iterable<Key>): Set<Key> {
+  return new Set(keys ? Array.from(keys) : []);
+}
+
+/**
+ * Manages state for a group of toggle buttons.
+ */
+export function createToggleGroupState(
+  props: MaybeAccessor<ToggleGroupProps> = {},
+): ToggleGroupState {
+  const getProps = () => access(props);
+
+  const initialProps = getProps();
+  const [internalSelectedKeys, setInternalSelectedKeys] = createSignal<Set<Key>>(
+    toKeySet(initialProps.defaultSelectedKeys),
+  );
+
+  const isControlled = () => getProps().selectedKeys !== undefined;
+  const selectedKeys = () =>
+    isControlled() ? toKeySet(getProps().selectedKeys) : internalSelectedKeys();
+
+  function setSelectedKeys(keys: Set<Key>): void {
+    const nextKeys = new Set(keys);
+    if (!isControlled()) {
+      setInternalSelectedKeys(nextKeys);
+    }
+    getProps().onSelectionChange?.(nextKeys);
+  }
+
+  function toggleKey(key: Key): void {
+    const props = getProps();
+    const mode = props.selectionMode ?? "single";
+    const disallowEmptySelection = props.disallowEmptySelection ?? false;
+    const currentKeys = selectedKeys();
+
+    let nextKeys: Set<Key>;
+    if (mode === "multiple") {
+      nextKeys = new Set(currentKeys);
+      if (nextKeys.has(key) && (!disallowEmptySelection || nextKeys.size > 1)) {
+        nextKeys.delete(key);
+      } else {
+        nextKeys.add(key);
+      }
+    } else {
+      nextKeys = new Set(currentKeys.has(key) && !disallowEmptySelection ? [] : [key]);
+    }
+
+    setSelectedKeys(nextKeys);
+  }
+
+  function setSelected(key: Key, isSelected: boolean): void {
+    if (isSelected !== selectedKeys().has(key)) {
+      toggleKey(key);
+    }
+  }
+
+  return {
+    get selectionMode() {
+      return getProps().selectionMode ?? "single";
+    },
+    get isDisabled() {
+      return getProps().isDisabled ?? false;
+    },
+    get selectedKeys() {
+      return new Set(selectedKeys());
+    },
+    toggleKey,
+    setSelected,
+    setSelectedKeys,
+  };
+}

package/src/toggle/createToggleState.d.ts

@@ -5,30 +5,30 @@
  *
  * This is a 1:1 port of @react-stately/toggle's useToggleState.
  */
-import { Accessor } from 'solid-js';
-import { type MaybeAccessor } from '../utils';
+import { Accessor } from "solid-js";
+import { type MaybeAccessor } from "../utils";
 export interface ToggleStateOptions {
-    /** Whether the element should be selected (controlled). */
-    isSelected?: boolean;
-    /** Whether the element should be selected by default (uncontrolled). */
-    defaultSelected?: boolean;
-    /** Handler that is called when the element's selection state changes. */
-    onChange?: (isSelected: boolean) => void;
-    /** Whether the element is read only. */
-    isReadOnly?: boolean;
+  /** Whether the element should be selected (controlled). */
+  isSelected?: boolean;
+  /** Whether the element should be selected by default (uncontrolled). */
+  defaultSelected?: boolean;
+  /** Handler that is called when the element's selection state changes. */
+  onChange?: (isSelected: boolean) => void;
+  /** Whether the element is read only. */
+  isReadOnly?: boolean;
 }
 export interface ToggleState {
-    /** Whether the toggle is selected. */
-    readonly isSelected: Accessor<boolean>;
-    /** Whether the toggle is selected by default. */
-    readonly defaultSelected: boolean;
-    /** Updates selection state. */
-    setSelected(isSelected: boolean): void;
-    /** Toggle the selection state. */
-    toggle(): void;
+  /** Whether the toggle is selected. */
+  readonly isSelected: Accessor<boolean>;
+  /** Whether the toggle is selected by default. */
+  readonly defaultSelected: boolean;
+  /** Updates selection state. */
+  setSelected(isSelected: boolean): void;
+  /** Toggle the selection state. */
+  toggle(): void;
 }
 /**
  * Provides state management for toggle components like checkboxes and switches.
  */
 export declare function createToggleState(props?: MaybeAccessor<ToggleStateOptions>): ToggleState;
-//# sourceMappingURL=createToggleState.d.ts.map
+//# sourceMappingURL=createToggleState.d.ts.map

package/src/toggle/createToggleState.ts

@@ -6,12 +6,8 @@
  * This is a 1:1 port of @react-stately/toggle's useToggleState.
  */
 
-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 ToggleStateOptions {
   /** Whether the element should be selected (controlled). */
@@ -35,33 +31,24 @@ export interface ToggleState {
   toggle(): void;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides state management for toggle components like checkboxes and switches.
  */
 export function createToggleState(props: MaybeAccessor<ToggleStateOptions> = {}): ToggleState {
   const getProps = () => access(props);
 
-  // Get initial values
   const initialProps = getProps();
   const initialSelected = initialProps.isSelected ?? initialProps.defaultSelected ?? false;
 
-  // Create internal signal for uncontrolled mode
   const [internalSelected, setInternalSelected] = createSignal(initialSelected);
 
-  // Determine if controlled
   const isControlled = () => getProps().isSelected !== undefined;
 
-  // Get current selection state
   const isSelected: Accessor<boolean> = () => {
     const p = getProps();
     return isControlled() ? (p.isSelected ?? false) : internalSelected();
   };
 
-  // Update selection state
   function setSelected(value: boolean): void {
     const p = getProps();
     if (p.isReadOnly) {
@@ -75,7 +62,6 @@ export function createToggleState(props: MaybeAccessor<ToggleStateOptions> = {})
     p.onChange?.(value);
   }
 
-  // Toggle selection state
   function toggle(): void {
     const p = getProps();
     if (p.isReadOnly) {

package/src/toggle/index.d.ts

@@ -1,2 +1,2 @@
-export { createToggleState, type ToggleStateOptions, type ToggleState, } from './createToggleState';
-//# sourceMappingURL=index.d.ts.map
+export { createToggleState, type ToggleStateOptions, type ToggleState } from "./createToggleState";
+//# sourceMappingURL=index.d.ts.map

package/src/toggle/index.ts

@@ -1,5 +1,7 @@
+export { createToggleState, type ToggleStateOptions, type ToggleState } from "./createToggleState";
+
 export {
-  createToggleState,
-  type ToggleStateOptions,
-  type ToggleState,
-} from './createToggleState';
+  createToggleGroupState,
+  type ToggleGroupProps,
+  type ToggleGroupState,
+} from "./createToggleGroupState";

package/src/tooltip/createTooltipTriggerState.d.ts

@@ -5,25 +5,25 @@
  * Tracks whether the tooltip is open, and provides methods to toggle this state.
  * Ensures only one tooltip is open at a time and controls the delay for showing a tooltip.
  */
-import { type Accessor } from 'solid-js';
-import { type OverlayTriggerProps } from '../overlays';
+import { type Accessor } from "solid-js";
+import { type OverlayTriggerProps } from "../overlays";
 export interface TooltipTriggerProps extends OverlayTriggerProps {
-    /** The delay time in milliseconds for the tooltip to show up. */
-    delay?: number;
-    /** The delay time in milliseconds for the tooltip to close. */
-    closeDelay?: number;
+  /** The delay time in milliseconds for the tooltip to show up. */
+  delay?: number;
+  /** The delay time in milliseconds for the tooltip to close. */
+  closeDelay?: number;
 }
 export interface TooltipTriggerState {
-    /** Whether the tooltip is currently showing. */
-    readonly isOpen: Accessor<boolean>;
-    /**
-     * Shows the tooltip. By default, the tooltip becomes visible after a delay
-     * depending on a global warmup timer. The `immediate` option shows the
-     * tooltip immediately instead.
-     */
-    open(immediate?: boolean): void;
-    /** Hides the tooltip. */
-    close(immediate?: boolean): void;
+  /** Whether the tooltip is currently showing. */
+  readonly isOpen: Accessor<boolean>;
+  /**
+   * Shows the tooltip. By default, the tooltip becomes visible after a delay
+   * depending on a global warmup timer. The `immediate` option shows the
+   * tooltip immediately instead.
+   */
+  open(immediate?: boolean): void;
+  /** Hides the tooltip. */
+  close(immediate?: boolean): void;
 }
 /**
  * Resets the global tooltip state. Useful for testing.
@@ -36,4 +36,4 @@ export declare function resetTooltipState(): void;
  * the delay for showing a tooltip.
  */
 export declare function createTooltipTriggerState(props?: TooltipTriggerProps): TooltipTriggerState;
-//# sourceMappingURL=createTooltipTriggerState.d.ts.map
+//# sourceMappingURL=createTooltipTriggerState.d.ts.map