@proyecto-viviana/solid-stately 0.1.1 → 0.1.2

package/dist/textfield/createTextFieldState.d.ts

@@ -0,0 +1,29 @@
+/**
+ * TextField state for Solid Stately
+ *
+ * Provides state management for text input components.
+ *
+ * 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';
+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;
+}
+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;
+}
+/**
+ * Provides state management for text input components.
+ * Supports both controlled and uncontrolled modes.
+ */
+export declare function createTextFieldState(props?: MaybeAccessor<TextFieldStateOptions>): TextFieldState;

package/dist/textfield/index.d.ts

@@ -0,0 +1 @@
+export { createTextFieldState, type TextFieldStateOptions, type TextFieldState, } from './createTextFieldState';

package/dist/toast/createToastState.d.ts

@@ -0,0 +1,117 @@
+/**
+ * Toast state management for SolidJS
+ * Based on @react-stately/toast useToastState
+ */
+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;
+}
+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;
+}
+export interface ToastQueueOptions {
+    /** 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>;
+}
+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. */
+    close: (key: string) => 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;
+}
+type SubscribeCallback<T> = (toasts: QueuedToast<T>[]) => void;
+/**
+ * A queue that manages toast notifications.
+ * 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;
+}
+/**
+ * Creates reactive toast state from a ToastQueue.
+ * Use this hook to subscribe to toast changes in your component.
+ */
+export declare function createToastState<T>(props: ToastStateProps<T>): ToastState<T>;
+/**
+ * Creates a new ToastQueue and returns reactive state.
+ * Use this if you don't need a global queue.
+ */
+export declare function createToastQueue<T>(options?: ToastQueueOptions): ToastState<T> & {
+    queue: ToastQueue<T>;
+};
+export {};

package/dist/toast/index.d.ts

@@ -0,0 +1 @@
+export { createToastState, createToastQueue, ToastQueue, Timer, type ToastOptions, type QueuedToast, type ToastQueueOptions, type ToastStateProps, type ToastState, } from './createToastState';

package/dist/toggle/createToggleState.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Toggle state for Solid Stately
+ *
+ * Provides state management for toggle components like checkboxes and switches.
+ *
+ * This is a 1:1 port of @react-stately/toggle's useToggleState.
+ */
+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;
+}
+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;
+}
+/**
+ * Provides state management for toggle components like checkboxes and switches.
+ */
+export declare function createToggleState(props?: MaybeAccessor<ToggleStateOptions>): ToggleState;

package/dist/toggle/index.d.ts

@@ -0,0 +1 @@
+export { createToggleState, type ToggleStateOptions, type ToggleState, } from './createToggleState';

package/dist/tooltip/createTooltipTriggerState.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Manages state for a tooltip trigger.
+ * Based on @react-stately/tooltip useTooltipTriggerState.
+ *
+ * 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';
+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;
+}
+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;
+}
+/**
+ * Resets the global tooltip state. Useful for testing.
+ * @internal
+ */
+export declare function resetTooltipState(): void;
+/**
+ * Manages state for a tooltip trigger. 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.
+ */
+export declare function createTooltipTriggerState(props?: TooltipTriggerProps): TooltipTriggerState;

package/dist/tooltip/index.d.ts

@@ -0,0 +1 @@
+export { createTooltipTriggerState, resetTooltipState, type TooltipTriggerProps, type TooltipTriggerState, } from './createTooltipTriggerState';

package/dist/tree/TreeCollection.d.ts

@@ -0,0 +1,39 @@
+/**
+ * TreeCollection implementation.
+ * Based on @react-stately/tree/TreeCollection.
+ *
+ * A flattened view of tree nodes that respects expanded state.
+ * Only visible nodes (root + expanded children) are included in iteration.
+ */
+import type { Key } from '../collections/types';
+import type { TreeCollection as ITreeCollection, TreeNode, TreeItemData } from './types';
+/**
+ * Creates a TreeCollection from hierarchical data.
+ * The collection is flattened based on expanded keys.
+ */
+export declare class TreeCollection<T> implements ITreeCollection<T> {
+    private keyMap;
+    private visibleKeys;
+    private _rows;
+    constructor(items: TreeItemData<T>[], expandedKeys: Set<Key>);
+    private buildCollection;
+    get size(): number;
+    get rows(): TreeNode<T>[];
+    get rowCount(): number;
+    getKeys(): Iterable<Key>;
+    getItem(key: Key): TreeNode<T> | null;
+    at(index: number): TreeNode<T> | null;
+    getKeyBefore(key: Key): Key | null;
+    getKeyAfter(key: Key): Key | null;
+    getFirstKey(): Key | null;
+    getLastKey(): Key | null;
+    getChildren(key: Key): Iterable<TreeNode<T>>;
+    getTextValue(key: Key): string;
+    getParentKey(key: Key): Key | null;
+    [Symbol.iterator](): Iterator<TreeNode<T>>;
+}
+/**
+ * Factory function to create a TreeCollection.
+ * Useful for the collectionFactory pattern in TreeStateOptions.
+ */
+export declare function createTreeCollection<T>(items: TreeItemData<T>[], expandedKeys: Set<Key>): TreeCollection<T>;

package/dist/tree/createTreeState.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Tree state management for Tree components.
+ * Based on @react-stately/tree/useTreeState.
+ *
+ * Manages expansion state, selection, and focus for hierarchical tree data.
+ */
+import { type Accessor } from 'solid-js';
+import type { TreeState, TreeStateOptions, TreeCollection } from './types';
+/**
+ * Creates state management for a tree component.
+ * Handles expansion, selection, focus management, and keyboard navigation state.
+ */
+export declare function createTreeState<T extends object, C extends TreeCollection<T> = TreeCollection<T>>(options: Accessor<TreeStateOptions<T, C>>): TreeState<T, C>;

package/dist/tree/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Tree state management exports.
+ */
+export { createTreeState } from './createTreeState';
+export { TreeCollection, createTreeCollection } from './TreeCollection';
+export type { TreeState, TreeStateOptions, TreeCollection as TreeCollectionInterface, TreeNode, TreeItemData, } from './types';

package/dist/tree/types.d.ts

@@ -0,0 +1,156 @@
+/**
+ * Tree collection types for Tree components.
+ * Based on @react-stately/tree.
+ */
+import type { Key, FocusStrategy } from '../collections/types';
+import type { GridNode, GridCollection } from '../grid/types';
+/**
+ * Represents a node in a tree collection.
+ * Extends GridNode with tree-specific properties.
+ */
+export interface TreeNode<T = unknown> extends GridNode<T> {
+    /** Whether this node has child nodes that can be expanded. */
+    hasChildNodes: boolean;
+    /** Child nodes of this tree item. */
+    childNodes: TreeNode<T>[];
+    /** The level of nesting (0 for root items). */
+    level: number;
+    /** The key of the parent node, if any. */
+    parentKey?: Key | null;
+    /** Whether this node is expandable. */
+    isExpandable?: boolean;
+    /** Whether this node is currently expanded (only meaningful if expandable). */
+    isExpanded?: boolean;
+}
+/**
+ * A collection of tree nodes with tree-specific navigation.
+ * Only includes visible nodes (respects expanded state).
+ */
+export interface TreeCollection<T = unknown> extends Omit<GridCollection<T>, 'rows' | 'columns' | 'headerRows' | 'columnCount' | 'getCell'> {
+    /** All visible rows in the tree (respects expanded state). */
+    readonly rows: TreeNode<T>[];
+    /** Number of visible rows. */
+    readonly rowCount: number;
+    /** Get all keys in the collection (visible only). */
+    getKeys(): Iterable<Key>;
+    /** Get a node by its key (any node, visible or not). */
+    getItem(key: Key): TreeNode<T> | null;
+    /** Get a node by index (visible nodes only). */
+    at(index: number): TreeNode<T> | null;
+    /** Get the key before the given key (visible nodes only). */
+    getKeyBefore(key: Key): Key | null;
+    /** Get the key after the given key (visible nodes only). */
+    getKeyAfter(key: Key): Key | null;
+    /** Get the first key in the collection. */
+    getFirstKey(): Key | null;
+    /** Get the last key in the collection. */
+    getLastKey(): Key | null;
+    /** Get the children of a node. */
+    getChildren(key: Key): Iterable<TreeNode<T>>;
+    /** Get the text value for a key. */
+    getTextValue(key: Key): string;
+    /** Get the parent key for a node. */
+    getParentKey(key: Key): Key | null;
+    /** Iterator over visible nodes. */
+    [Symbol.iterator](): Iterator<TreeNode<T>>;
+}
+/**
+ * State for a tree component.
+ * Extends grid state with expansion management.
+ */
+export interface TreeState<T, C extends TreeCollection<T> = TreeCollection<T>> {
+    /** The tree collection (only visible nodes). */
+    readonly collection: C;
+    /** Keys of disabled items. */
+    readonly disabledKeys: Set<Key>;
+    /** Keys of expanded items. */
+    readonly expandedKeys: Set<Key>;
+    /** Whether keyboard navigation is disabled. */
+    readonly isKeyboardNavigationDisabled: boolean;
+    /** Currently focused key. */
+    readonly focusedKey: Key | null;
+    /** Focus strategy for child focus. */
+    readonly childFocusStrategy: FocusStrategy | null;
+    /** Whether the tree is focused. */
+    readonly isFocused: boolean;
+    /** The selection mode. */
+    readonly selectionMode: 'none' | 'single' | 'multiple';
+    /** The currently selected keys. */
+    readonly selectedKeys: 'all' | Set<Key>;
+    /** Check if a key is selected. */
+    isSelected(key: Key): boolean;
+    /** Check if a key is disabled. */
+    isDisabled(key: Key): boolean;
+    /** Check if a key is expanded. */
+    isExpanded(key: Key): boolean;
+    /** Set the focused key. */
+    setFocusedKey(key: Key | null, childFocusStrategy?: FocusStrategy): void;
+    /** Set focused state. */
+    setFocused(isFocused: boolean): void;
+    /** Toggle selection for a key. */
+    toggleSelection(key: Key): void;
+    /** Replace selection with a key. */
+    replaceSelection(key: Key): void;
+    /** Extend selection to a key (shift-click). */
+    extendSelection(toKey: Key): void;
+    /** Select all visible items. */
+    selectAll(): void;
+    /** Clear selection. */
+    clearSelection(): void;
+    /** Toggle select all. */
+    toggleSelectAll(): void;
+    /** Toggle expansion for a key. */
+    toggleKey(key: Key): void;
+    /** Expand a key. */
+    expandKey(key: Key): void;
+    /** Collapse a key. */
+    collapseKey(key: Key): void;
+    /** Set the expanded keys. */
+    setExpandedKeys(keys: Set<Key>): void;
+    /** Set keyboard navigation disabled. */
+    setKeyboardNavigationDisabled(isDisabled: boolean): void;
+}
+/**
+ * Options for creating tree state.
+ */
+export interface TreeStateOptions<T, C extends TreeCollection<T> = TreeCollection<T>> {
+    /** The tree collection builder - receives expanded keys and returns collection. */
+    collectionFactory: (expandedKeys: Set<Key>) => C;
+    /** Keys of disabled items. */
+    disabledKeys?: Iterable<Key>;
+    /** Disabled behavior: 'selection' only or 'all' interactions. */
+    disabledBehavior?: 'selection' | 'all';
+    /** Selection mode. */
+    selectionMode?: 'none' | 'single' | 'multiple';
+    /** Selection behavior. */
+    selectionBehavior?: 'toggle' | 'replace';
+    /** Whether empty selection is disallowed. */
+    disallowEmptySelection?: boolean;
+    /** Currently selected keys (controlled). */
+    selectedKeys?: 'all' | Iterable<Key>;
+    /** Default selected keys (uncontrolled). */
+    defaultSelectedKeys?: 'all' | Iterable<Key>;
+    /** Handler for selection changes. */
+    onSelectionChange?: (keys: 'all' | Set<Key>) => void;
+    /** Currently expanded keys (controlled). */
+    expandedKeys?: Iterable<Key>;
+    /** Default expanded keys (uncontrolled). */
+    defaultExpandedKeys?: Iterable<Key>;
+    /** Handler for expansion changes. */
+    onExpandedChange?: (keys: Set<Key>) => void;
+}
+/**
+ * Item representation for building tree collections.
+ */
+export interface TreeItemData<T = unknown> {
+    /** Unique key for this item. */
+    key: Key;
+    /** The data value for this item. */
+    value: T;
+    /** Text content for accessibility and search. */
+    textValue?: string;
+    /** Child items (makes this item expandable). */
+    children?: TreeItemData<T>[];
+    /** Whether this item is disabled. */
+    isDisabled?: boolean;
+}

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export { access, isAccessor, type MaybeAccessor, type MaybeAccessorValue } from './reactivity';

package/dist/utils/reactivity.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Reactivity utilities for Solid Stately
+ *
+ * Provides type-safe utilities for working with SolidJS reactivity patterns.
+ */
+import { Accessor } from 'solid-js';
+/**
+ * A value that may be either a raw value or an accessor function.
+ * This is a common pattern in SolidJS for props that may be reactive.
+ */
+export type MaybeAccessor<T> = T | Accessor<T>;
+/**
+ * Unwraps a MaybeAccessor to get the underlying value.
+ * If the input is a function, it calls it to get the value.
+ * Otherwise, it returns the value directly.
+ *
+ * @param value - The value or accessor to unwrap.
+ */
+export declare function access<T>(value: MaybeAccessor<T>): T;
+/**
+ * A value that may be undefined or an accessor that returns the value or undefined.
+ */
+export type MaybeAccessorValue<T> = T | undefined | Accessor<T | undefined>;
+/**
+ * Checks if a value is an accessor function.
+ */
+export declare function isAccessor<T>(value: MaybeAccessor<T>): value is Accessor<T>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proyecto-viviana/solid-stately",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "A 1-1 SolidJS port of React Stately - headless state management for UI components",
   "type": "module",
   "main": "./dist/index.js",
@@ -20,9 +20,8 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "prepublishOnly": "bun run build"
+    "build": "deno run -A ../../scripts/build.ts solid-stately",
+    "prepublishOnly": "deno run -A ../../scripts/build.ts solid-stately"
   },
   "peerDependencies": {
     "solid-js": "^1.9.0"