@proyecto-viviana/solid-stately 0.2.7 → 0.4.0

package/src/disclosure/createDisclosureState.d.ts

@@ -2,63 +2,67 @@
  * Disclosure state management for SolidJS
  * Based on @react-stately/disclosure useDisclosureState and useDisclosureGroupState
  */
-import { type Accessor } from 'solid-js';
-import { type MaybeAccessor } from '../utils';
+import { type Accessor } from "solid-js";
+import { type MaybeAccessor } from "../utils";
 export interface DisclosureStateProps {
-    /** Whether the disclosure is expanded (controlled). */
-    isExpanded?: boolean;
-    /** Whether the disclosure is expanded by default (uncontrolled). */
-    defaultExpanded?: boolean;
-    /** Handler that is called when the disclosure expanded state changes. */
-    onExpandedChange?: (isExpanded: boolean) => void;
+  /** Whether the disclosure is expanded (controlled). */
+  isExpanded?: boolean;
+  /** Whether the disclosure is expanded by default (uncontrolled). */
+  defaultExpanded?: boolean;
+  /** Handler that is called when the disclosure expanded state changes. */
+  onExpandedChange?: (isExpanded: boolean) => void;
 }
 export interface DisclosureState {
-    /** Whether the disclosure is currently expanded. */
-    readonly isExpanded: Accessor<boolean>;
-    /** Sets whether the disclosure is expanded. */
-    setExpanded(isExpanded: boolean): void;
-    /** Expand the disclosure. */
-    expand(): void;
-    /** Collapse the disclosure. */
-    collapse(): void;
-    /** Toggles the disclosure's visibility. */
-    toggle(): void;
+  /** Whether the disclosure is currently expanded. */
+  readonly isExpanded: Accessor<boolean>;
+  /** Sets whether the disclosure is expanded. */
+  setExpanded(isExpanded: boolean): void;
+  /** Expand the disclosure. */
+  expand(): void;
+  /** Collapse the disclosure. */
+  collapse(): void;
+  /** Toggles the disclosure's visibility. */
+  toggle(): void;
 }
 /**
  * Manages state for a disclosure widget. Tracks whether the disclosure is expanded,
  * and provides methods to toggle this state.
  */
-export declare function createDisclosureState(props?: MaybeAccessor<DisclosureStateProps>): DisclosureState;
+export declare function createDisclosureState(
+  props?: MaybeAccessor<DisclosureStateProps>,
+): DisclosureState;
 export type Key = string | number;
 export interface DisclosureGroupStateProps {
-    /** Whether multiple items can be expanded at the same time. */
-    allowsMultipleExpanded?: boolean;
-    /** Whether all items are disabled. */
-    isDisabled?: boolean;
-    /** The currently expanded keys in the group (controlled). */
-    expandedKeys?: Iterable<Key>;
-    /** The initial expanded keys in the group (uncontrolled). */
-    defaultExpandedKeys?: Iterable<Key>;
-    /** Handler that is called when items are expanded or collapsed. */
-    onExpandedChange?: (keys: Set<Key>) => void;
+  /** Whether multiple items can be expanded at the same time. */
+  allowsMultipleExpanded?: boolean;
+  /** Whether all items are disabled. */
+  isDisabled?: boolean;
+  /** The currently expanded keys in the group (controlled). */
+  expandedKeys?: Iterable<Key>;
+  /** The initial expanded keys in the group (uncontrolled). */
+  defaultExpandedKeys?: Iterable<Key>;
+  /** Handler that is called when items are expanded or collapsed. */
+  onExpandedChange?: (keys: Set<Key>) => void;
 }
 export interface DisclosureGroupState {
-    /** Whether multiple items can be expanded at the same time. */
-    readonly allowsMultipleExpanded: boolean;
-    /** Whether all items are disabled. */
-    readonly isDisabled: boolean;
-    /** A set of keys for items that are expanded. */
-    readonly expandedKeys: Accessor<Set<Key>>;
-    /** Toggles the expanded state for an item by its key. */
-    toggleKey(key: Key): void;
-    /** Replaces the set of expanded keys. */
-    setExpandedKeys(keys: Set<Key>): void;
-    /** Check if a specific key is expanded. */
-    isExpanded(key: Key): boolean;
+  /** Whether multiple items can be expanded at the same time. */
+  readonly allowsMultipleExpanded: boolean;
+  /** Whether all items are disabled. */
+  readonly isDisabled: boolean;
+  /** A set of keys for items that are expanded. */
+  readonly expandedKeys: Accessor<Set<Key>>;
+  /** Toggles the expanded state for an item by its key. */
+  toggleKey(key: Key): void;
+  /** Replaces the set of expanded keys. */
+  setExpandedKeys(keys: Set<Key>): void;
+  /** Check if a specific key is expanded. */
+  isExpanded(key: Key): boolean;
 }
 /**
  * Manages state for a group of disclosures, e.g. an accordion.
  * It supports both single and multiple expanded items.
  */
-export declare function createDisclosureGroupState(props?: MaybeAccessor<DisclosureGroupStateProps>): DisclosureGroupState;
-//# sourceMappingURL=createDisclosureState.d.ts.map
+export declare function createDisclosureGroupState(
+  props?: MaybeAccessor<DisclosureGroupStateProps>,
+): DisclosureGroupState;
+//# sourceMappingURL=createDisclosureState.d.ts.map

package/src/disclosure/createDisclosureState.ts

@@ -3,12 +3,8 @@
  * Based on @react-stately/disclosure useDisclosureState and useDisclosureGroupState
  */
 
-import { createSignal, createEffect, createMemo, type Accessor } from 'solid-js';
-import { access, type MaybeAccessor } from '../utils';
-
-// ============================================
-// SINGLE DISCLOSURE STATE
-// ============================================
+import { createSignal, createEffect, createMemo, type Accessor } from "solid-js";
+import { access, type MaybeAccessor } from "../utils";
 
 export interface DisclosureStateProps {
   /** Whether the disclosure is expanded (controlled). */
@@ -37,16 +33,14 @@ export interface DisclosureState {
  * and provides methods to toggle this state.
  */
 export function createDisclosureState(
-  props: MaybeAccessor<DisclosureStateProps> = {}
+  props: MaybeAccessor<DisclosureStateProps> = {},
 ): DisclosureState {
   const propsAccessor = () => access(props);
 
-  // Internal state for uncontrolled mode
   const [internalExpanded, setInternalExpanded] = createSignal(
-    propsAccessor().defaultExpanded ?? false
+    propsAccessor().defaultExpanded ?? false,
   );
 
-  // Determine if expanded (controlled vs uncontrolled)
   const isExpanded: Accessor<boolean> = () => {
     const p = propsAccessor();
     return p.isExpanded !== undefined ? p.isExpanded : internalExpanded();
@@ -73,10 +67,6 @@ export function createDisclosureState(
   };
 }
 
-// ============================================
-// DISCLOSURE GROUP STATE (Accordion)
-// ============================================
-
 export type Key = string | number;
 
 export interface DisclosureGroupStateProps {
@@ -112,16 +102,14 @@ export interface DisclosureGroupState {
  * It supports both single and multiple expanded items.
  */
 export function createDisclosureGroupState(
-  props: MaybeAccessor<DisclosureGroupStateProps> = {}
+  props: MaybeAccessor<DisclosureGroupStateProps> = {},
 ): DisclosureGroupState {
   const propsAccessor = () => access(props);
 
-  // Internal state for uncontrolled mode
   const [internalKeys, setInternalKeys] = createSignal<Set<Key>>(
-    new Set(propsAccessor().defaultExpandedKeys ?? [])
+    new Set(propsAccessor().defaultExpandedKeys ?? []),
   );
 
-  // Determine expanded keys (controlled vs uncontrolled, memoized)
   const expandedKeys: Accessor<Set<Key>> = createMemo(() => {
     const p = propsAccessor();
     return p.expandedKeys !== undefined ? new Set(p.expandedKeys) : internalKeys();
@@ -135,8 +123,7 @@ export function createDisclosureGroupState(
     p.onExpandedChange?.(keys);
   };
 
-  // Ensure only one item is expanded if allowsMultipleExpanded is false
-  // Note: We use untrack to prevent infinite loops when calling setExpandedKeys
+  // Ensure only one item is expanded if allowsMultipleExpanded is false.
   createEffect(() => {
     const p = propsAccessor();
     const allowsMultiple = p.allowsMultipleExpanded ?? false;
@@ -167,7 +154,6 @@ export function createDisclosureGroupState(
         newKeys.add(key);
       }
     } else {
-      // Single selection: toggle off if already expanded, otherwise select only this one
       newKeys = new Set(currentKeys.has(key) ? [] : [key]);
     }
 

package/src/disclosure/index.d.ts

@@ -1,2 +1,10 @@
-export { createDisclosureState, createDisclosureGroupState, type DisclosureStateProps, type DisclosureState, type DisclosureGroupStateProps, type DisclosureGroupState, type Key, } from './createDisclosureState';
-//# sourceMappingURL=index.d.ts.map
+export {
+  createDisclosureState,
+  createDisclosureGroupState,
+  type DisclosureStateProps,
+  type DisclosureState,
+  type DisclosureGroupStateProps,
+  type DisclosureGroupState,
+  type Key,
+} from "./createDisclosureState";
+//# sourceMappingURL=index.d.ts.map

package/src/disclosure/index.ts

@@ -6,4 +6,4 @@ export {
   type DisclosureGroupStateProps,
   type DisclosureGroupState,
   type Key,
-} from './createDisclosureState';
+} from "./createDisclosureState";

package/src/dnd/createDragState.d.ts

@@ -3,51 +3,60 @@
  *
  * Provides reactive state for drag operations.
  */
-import { type Accessor } from 'solid-js';
-import type { DragItem, DragStartEvent, DragMoveEvent, DragEndEvent, DropOperation, DragPreviewRenderer } from './types';
+import { type Accessor } from "solid-js";
+import type {
+  DragItem,
+  DragStartEvent,
+  DragMoveEvent,
+  DragEndEvent,
+  DropOperation,
+  DragPreviewRenderer,
+} from "./types";
 export interface DragStateOptions {
-    /** A function that returns the items being dragged. */
-    getItems: () => DragItem[];
-    /** Function that returns the allowed drop operations. */
-    getAllowedDropOperations?: () => DropOperation[];
-    /** Handler that is called when a drag operation is started. */
-    onDragStart?: (e: DragStartEvent) => void;
-    /** Handler that is called when the drag is moved. */
-    onDragMove?: (e: DragMoveEvent) => void;
-    /** Handler that is called when the drag operation ends. */
-    onDragEnd?: (e: DragEndEvent) => void;
-    /** Whether the drag operation is disabled. */
-    isDisabled?: boolean;
-    /** Whether there is a separate drag button affordance. */
-    hasDragButton?: boolean;
-    /** Preview renderer function ref. */
-    preview?: {
-        current: DragPreviewRenderer | null;
-    };
+  /** A function that returns the items being dragged. */
+  getItems: () => DragItem[];
+  /** Function that returns the allowed drop operations. */
+  getAllowedDropOperations?: () => DropOperation[];
+  /** Handler that is called when a drag operation is started. */
+  onDragStart?: (e: DragStartEvent) => void;
+  /** Handler that is called when the drag is moved. */
+  onDragMove?: (e: DragMoveEvent) => void;
+  /** Handler that is called when the drag operation ends. */
+  onDragEnd?: (e: DragEndEvent) => void;
+  /** Whether the drag operation is disabled. */
+  isDisabled?: boolean;
+  /** Whether there is a separate drag button affordance. */
+  hasDragButton?: boolean;
+  /** Preview renderer function ref. */
+  preview?: {
+    current: DragPreviewRenderer | null;
+  };
 }
 export interface DragState {
-    /** Whether an element is currently being dragged. */
-    readonly isDragging: boolean;
-    /** Whether drag is disabled. */
-    readonly isDisabled: boolean;
-    /** Start a drag operation. */
-    startDrag(x: number, y: number): void;
-    /** Update drag position. */
-    moveDrag(x: number, y: number): void;
-    /** End a drag operation. */
-    endDrag(x: number, y: number, dropOperation: DropOperation): void;
-    /** Cancel a drag operation. */
-    cancelDrag(): void;
-    /** Get the items being dragged. */
-    getItems(): DragItem[];
-    /** Get allowed drop operations. */
-    getAllowedDropOperations(): DropOperation[];
-    /** Whether there is a drag button. */
-    readonly hasDragButton: boolean;
-    /** Preview renderer. */
-    readonly preview: {
+  /** Whether an element is currently being dragged. */
+  readonly isDragging: boolean;
+  /** Whether drag is disabled. */
+  readonly isDisabled: boolean;
+  /** Start a drag operation. */
+  startDrag(x: number, y: number): void;
+  /** Update drag position. */
+  moveDrag(x: number, y: number): void;
+  /** End a drag operation. */
+  endDrag(x: number, y: number, dropOperation: DropOperation): void;
+  /** Cancel a drag operation. */
+  cancelDrag(): void;
+  /** Get the items being dragged. */
+  getItems(): DragItem[];
+  /** Get allowed drop operations. */
+  getAllowedDropOperations(): DropOperation[];
+  /** Whether there is a drag button. */
+  readonly hasDragButton: boolean;
+  /** Preview renderer. */
+  readonly preview:
+    | {
         current: DragPreviewRenderer | null;
-    } | undefined;
+      }
+    | undefined;
 }
 /**
  * Creates drag state for managing drag operations.
@@ -56,4 +65,4 @@ export interface DragState {
  * @returns Drag state object
  */
 export declare function createDragState(props: Accessor<DragStateOptions>): DragState;
-//# sourceMappingURL=createDragState.d.ts.map
+//# sourceMappingURL=createDragState.d.ts.map

package/src/dnd/createDragState.ts

@@ -4,7 +4,7 @@
  * Provides reactive state for drag operations.
  */
 
-import { createSignal, createMemo, type Accessor } from 'solid-js';
+import { createSignal, createMemo, type Accessor } from "solid-js";
 import type {
   DragItem,
   DragStartEvent,
@@ -12,7 +12,7 @@ import type {
   DragEndEvent,
   DropOperation,
   DragPreviewRenderer,
-} from './types';
+} from "./types";
 
 export interface DragStateOptions {
   /** A function that returns the items being dragged. */
@@ -62,9 +62,7 @@ export interface DragState {
  * @param props - Accessor returning drag state options
  * @returns Drag state object
  */
-export function createDragState(
-  props: Accessor<DragStateOptions>
-): DragState {
+export function createDragState(props: Accessor<DragStateOptions>): DragState {
   const getProps = createMemo(() => props());
 
   const [isDragging, setIsDragging] = createSignal(false);
@@ -75,9 +73,9 @@ export function createDragState(
 
     setIsDragging(true);
 
-    if (typeof p.onDragStart === 'function') {
+    if (typeof p.onDragStart === "function") {
       p.onDragStart({
-        type: 'dragstart',
+        type: "dragstart",
         x,
         y,
       });
@@ -88,9 +86,9 @@ export function createDragState(
     const p = getProps();
     if (!isDragging() || p.isDisabled) return;
 
-    if (typeof p.onDragMove === 'function') {
+    if (typeof p.onDragMove === "function") {
       p.onDragMove({
-        type: 'dragmove',
+        type: "dragmove",
         x,
         y,
       });
@@ -103,9 +101,9 @@ export function createDragState(
 
     setIsDragging(false);
 
-    if (typeof p.onDragEnd === 'function') {
+    if (typeof p.onDragEnd === "function") {
       p.onDragEnd({
-        type: 'dragend',
+        type: "dragend",
         x,
         y,
         dropOperation,
@@ -114,7 +112,7 @@ export function createDragState(
   };
 
   const cancelDrag = () => {
-    endDrag(0, 0, 'cancel');
+    endDrag(0, 0, "cancel");
   };
 
   const getItems = () => {
@@ -124,10 +122,10 @@ export function createDragState(
 
   const getAllowedDropOperations = (): DropOperation[] => {
     const p = getProps();
-    if (typeof p.getAllowedDropOperations === 'function') {
+    if (typeof p.getAllowedDropOperations === "function") {
       return p.getAllowedDropOperations();
     }
-    return ['move', 'copy', 'link'];
+    return ["move", "copy", "link"];
   };
 
   return {

package/src/dnd/createDraggableCollectionState.d.ts

@@ -3,49 +3,58 @@
  *
  * Provides reactive state for dragging items from a collection.
  */
-import { type Accessor } from 'solid-js';
-import type { DragItem, DraggableCollectionStartEvent, DraggableCollectionMoveEvent, DraggableCollectionEndEvent, DropOperation, DragPreviewRenderer } from './types';
+import { type Accessor } from "solid-js";
+import type {
+  DragItem,
+  DraggableCollectionStartEvent,
+  DraggableCollectionMoveEvent,
+  DraggableCollectionEndEvent,
+  DropOperation,
+  DragPreviewRenderer,
+} from "./types";
 export interface DraggableCollectionStateOptions<T = object> {
-    /** A function that returns the items being dragged. */
-    getItems: (keys: Set<string | number>) => DragItem[];
-    /** Function that returns the allowed drop operations. */
-    getAllowedDropOperations?: () => DropOperation[];
-    /** Handler that is called when a drag operation is started. */
-    onDragStart?: (e: DraggableCollectionStartEvent) => void;
-    /** Handler that is called when the drag is moved. */
-    onDragMove?: (e: DraggableCollectionMoveEvent) => void;
-    /** Handler that is called when the drag operation ends. */
-    onDragEnd?: (e: DraggableCollectionEndEvent) => void;
-    /** Whether the drag operation is disabled. */
-    isDisabled?: boolean;
-    /** Preview renderer function ref. */
-    preview?: {
-        current: DragPreviewRenderer | null;
-    };
+  /** A function that returns the items being dragged. */
+  getItems: (keys: Set<string | number>) => DragItem[];
+  /** Function that returns the allowed drop operations. */
+  getAllowedDropOperations?: () => DropOperation[];
+  /** Handler that is called when a drag operation is started. */
+  onDragStart?: (e: DraggableCollectionStartEvent) => void;
+  /** Handler that is called when the drag is moved. */
+  onDragMove?: (e: DraggableCollectionMoveEvent) => void;
+  /** Handler that is called when the drag operation ends. */
+  onDragEnd?: (e: DraggableCollectionEndEvent) => void;
+  /** Whether the drag operation is disabled. */
+  isDisabled?: boolean;
+  /** Preview renderer function ref. */
+  preview?: {
+    current: DragPreviewRenderer | null;
+  };
 }
 export interface DraggableCollectionState {
-    /** Whether items are currently being dragged. */
-    readonly isDragging: boolean;
-    /** The keys of the items being dragged. */
-    readonly draggingKeys: Set<string | number>;
-    /** Whether dragging is disabled. */
-    readonly isDisabled: boolean;
-    /** Start a drag operation with the given keys. */
-    startDrag(keys: Set<string | number>, x: number, y: number): void;
-    /** Update drag position. */
-    moveDrag(x: number, y: number): void;
-    /** End a drag operation. */
-    endDrag(x: number, y: number, dropOperation: DropOperation, isInternal: boolean): void;
-    /** Cancel a drag operation. */
-    cancelDrag(): void;
-    /** Get the items being dragged for the given keys. */
-    getItems(keys: Set<string | number>): DragItem[];
-    /** Get allowed drop operations. */
-    getAllowedDropOperations(): DropOperation[];
-    /** Preview renderer. */
-    readonly preview: {
+  /** Whether items are currently being dragged. */
+  readonly isDragging: boolean;
+  /** The keys of the items being dragged. */
+  readonly draggingKeys: Set<string | number>;
+  /** Whether dragging is disabled. */
+  readonly isDisabled: boolean;
+  /** Start a drag operation with the given keys. */
+  startDrag(keys: Set<string | number>, x: number, y: number): void;
+  /** Update drag position. */
+  moveDrag(x: number, y: number): void;
+  /** End a drag operation. */
+  endDrag(x: number, y: number, dropOperation: DropOperation, isInternal: boolean): void;
+  /** Cancel a drag operation. */
+  cancelDrag(): void;
+  /** Get the items being dragged for the given keys. */
+  getItems(keys: Set<string | number>): DragItem[];
+  /** Get allowed drop operations. */
+  getAllowedDropOperations(): DropOperation[];
+  /** Preview renderer. */
+  readonly preview:
+    | {
         current: DragPreviewRenderer | null;
-    } | undefined;
+      }
+    | undefined;
 }
 /**
  * Creates state for dragging items from a collection.
@@ -53,5 +62,7 @@ export interface DraggableCollectionState {
  * @param props - Accessor returning draggable collection options
  * @returns Draggable collection state object
  */
-export declare function createDraggableCollectionState<T = object>(props: Accessor<DraggableCollectionStateOptions<T>>): DraggableCollectionState;
-//# sourceMappingURL=createDraggableCollectionState.d.ts.map
+export declare function createDraggableCollectionState<T = object>(
+  props: Accessor<DraggableCollectionStateOptions<T>>,
+): DraggableCollectionState;
+//# sourceMappingURL=createDraggableCollectionState.d.ts.map

package/src/dnd/createDraggableCollectionState.ts

@@ -4,7 +4,7 @@
  * Provides reactive state for dragging items from a collection.
  */
 
-import { createSignal, createMemo, type Accessor } from 'solid-js';
+import { createSignal, createMemo, type Accessor } from "solid-js";
 import type {
   DragItem,
   DraggableCollectionStartEvent,
@@ -12,7 +12,7 @@ import type {
   DraggableCollectionEndEvent,
   DropOperation,
   DragPreviewRenderer,
-} from './types';
+} from "./types";
 
 export interface DraggableCollectionStateOptions<T = object> {
   /** A function that returns the items being dragged. */
@@ -61,14 +61,12 @@ export interface DraggableCollectionState {
  * @returns Draggable collection state object
  */
 export function createDraggableCollectionState<T = object>(
-  props: Accessor<DraggableCollectionStateOptions<T>>
+  props: Accessor<DraggableCollectionStateOptions<T>>,
 ): DraggableCollectionState {
   const getProps = createMemo(() => props());
 
   const [isDragging, setIsDragging] = createSignal(false);
-  const [draggingKeys, setDraggingKeys] = createSignal<Set<string | number>>(
-    new Set()
-  );
+  const [draggingKeys, setDraggingKeys] = createSignal<Set<string | number>>(new Set());
 
   const startDrag = (keys: Set<string | number>, x: number, y: number) => {
     const p = getProps();
@@ -77,9 +75,9 @@ export function createDraggableCollectionState<T = object>(
     setIsDragging(true);
     setDraggingKeys(keys);
 
-    if (typeof p.onDragStart === 'function') {
+    if (typeof p.onDragStart === "function") {
       p.onDragStart({
-        type: 'dragstart',
+        type: "dragstart",
         x,
         y,
         keys,
@@ -91,9 +89,9 @@ export function createDraggableCollectionState<T = object>(
     const p = getProps();
     if (!isDragging() || p.isDisabled) return;
 
-    if (typeof p.onDragMove === 'function') {
+    if (typeof p.onDragMove === "function") {
       p.onDragMove({
-        type: 'dragmove',
+        type: "dragmove",
         x,
         y,
         keys: draggingKeys(),
@@ -101,21 +99,16 @@ export function createDraggableCollectionState<T = object>(
     }
   };
 
-  const endDrag = (
-    x: number,
-    y: number,
-    dropOperation: DropOperation,
-    isInternal: boolean
-  ) => {
+  const endDrag = (x: number, y: number, dropOperation: DropOperation, isInternal: boolean) => {
     const p = getProps();
     const keys = draggingKeys();
 
     setIsDragging(false);
     setDraggingKeys(new Set<string | number>());
 
-    if (typeof p.onDragEnd === 'function') {
+    if (typeof p.onDragEnd === "function") {
       p.onDragEnd({
-        type: 'dragend',
+        type: "dragend",
         x,
         y,
         dropOperation,
@@ -126,7 +119,7 @@ export function createDraggableCollectionState<T = object>(
   };
 
   const cancelDrag = () => {
-    endDrag(0, 0, 'cancel', false);
+    endDrag(0, 0, "cancel", false);
   };
 
   const getItems = (keys: Set<string | number>) => {
@@ -136,10 +129,10 @@ export function createDraggableCollectionState<T = object>(
 
   const getAllowedDropOperations = (): DropOperation[] => {
     const p = getProps();
-    if (typeof p.getAllowedDropOperations === 'function') {
+    if (typeof p.getAllowedDropOperations === "function") {
       return p.getAllowedDropOperations();
     }
-    return ['move', 'copy', 'link'];
+    return ["move", "copy", "link"];
   };
 
   return {