@proyecto-viviana/solid-stately 0.2.4 → 0.3.0

package/src/checkbox/createCheckboxGroupState.d.ts

@@ -6,66 +6,68 @@
  *
  * This is a 1:1 port of @react-stately/checkbox's useCheckboxGroupState.
  */
-import { Accessor } from 'solid-js';
-import { type MaybeAccessor } from '../utils';
+import { Accessor } from "solid-js";
+import { type MaybeAccessor } from "../utils";
 export interface CheckboxGroupProps {
-    /** The current selected values (controlled). */
-    value?: string[];
-    /** The default selected values (uncontrolled). */
-    defaultValue?: string[];
-    /** Handler that is called when the value changes. */
-    onChange?: (value: string[]) => void;
-    /** Whether the checkbox group is disabled. */
-    isDisabled?: boolean;
-    /** Whether the checkbox group is read only. */
-    isReadOnly?: boolean;
-    /** Whether the checkbox group is required. */
-    isRequired?: boolean;
-    /** Whether the checkbox group is invalid. */
-    isInvalid?: boolean;
-    /** The name of the checkbox group, used when submitting an HTML form. */
-    name?: string;
-    /** The form to associate the checkbox group with. */
-    form?: string;
-    /** The label for the checkbox group. */
-    label?: string;
-    /** Handler that is called when the checkbox group receives focus. */
-    onFocus?: (e: FocusEvent) => void;
-    /** Handler that is called when the checkbox group loses focus. */
-    onBlur?: (e: FocusEvent) => void;
-    /** Handler that is called when the checkbox group's focus status changes. */
-    onFocusChange?: (isFocused: boolean) => void;
+  /** The current selected values (controlled). */
+  value?: string[];
+  /** The default selected values (uncontrolled). */
+  defaultValue?: string[];
+  /** Handler that is called when the value changes. */
+  onChange?: (value: string[]) => void;
+  /** Whether the checkbox group is disabled. */
+  isDisabled?: boolean;
+  /** Whether the checkbox group is read only. */
+  isReadOnly?: boolean;
+  /** Whether the checkbox group is required. */
+  isRequired?: boolean;
+  /** Whether the checkbox group is invalid. */
+  isInvalid?: boolean;
+  /** The name of the checkbox group, used when submitting an HTML form. */
+  name?: string;
+  /** The form to associate the checkbox group with. */
+  form?: string;
+  /** The label for the checkbox group. */
+  label?: string;
+  /** Handler that is called when the checkbox group receives focus. */
+  onFocus?: (e: FocusEvent) => void;
+  /** Handler that is called when the checkbox group loses focus. */
+  onBlur?: (e: FocusEvent) => void;
+  /** Handler that is called when the checkbox group's focus status changes. */
+  onFocusChange?: (isFocused: boolean) => void;
 }
 export interface CheckboxGroupState {
-    /** Current selected values. */
-    readonly value: Accessor<readonly string[]>;
-    /** Default selected values. */
-    readonly defaultValue: readonly string[];
-    /** Whether the checkbox group is disabled. */
-    readonly isDisabled: boolean;
-    /** Whether the checkbox group is read only. */
-    readonly isReadOnly: boolean;
-    /** Whether the checkbox group is invalid. */
-    readonly isInvalid: boolean;
-    /**
-     * Whether the checkboxes in the group are required.
-     * This changes to false once at least one item is selected.
-     */
-    readonly isRequired: Accessor<boolean>;
-    /** Returns whether the given value is selected. */
-    isSelected(value: string): boolean;
-    /** Sets the selected values. */
-    setValue(value: string[]): void;
-    /** Adds a value to the set of selected values. */
-    addValue(value: string): void;
-    /** Removes a value from the set of selected values. */
-    removeValue(value: string): void;
-    /** Toggles a value in the set of selected values. */
-    toggleValue(value: string): void;
+  /** Current selected values. */
+  readonly value: Accessor<readonly string[]>;
+  /** Default selected values. */
+  readonly defaultValue: readonly string[];
+  /** Whether the checkbox group is disabled. */
+  readonly isDisabled: boolean;
+  /** Whether the checkbox group is read only. */
+  readonly isReadOnly: boolean;
+  /** Whether the checkbox group is invalid. */
+  readonly isInvalid: boolean;
+  /**
+   * Whether the checkboxes in the group are required.
+   * This changes to false once at least one item is selected.
+   */
+  readonly isRequired: Accessor<boolean>;
+  /** Returns whether the given value is selected. */
+  isSelected(value: string): boolean;
+  /** Sets the selected values. */
+  setValue(value: string[]): void;
+  /** Adds a value to the set of selected values. */
+  addValue(value: string): void;
+  /** Removes a value from the set of selected values. */
+  removeValue(value: string): void;
+  /** Toggles a value in the set of selected values. */
+  toggleValue(value: string): void;
 }
 /**
  * Provides state management for a checkbox group component.
  * Provides a name for the group, and manages selection and focus state.
  */
-export declare function createCheckboxGroupState(props?: MaybeAccessor<CheckboxGroupProps>): CheckboxGroupState;
-//# sourceMappingURL=createCheckboxGroupState.d.ts.map
+export declare function createCheckboxGroupState(
+  props?: MaybeAccessor<CheckboxGroupProps>,
+): CheckboxGroupState;
+//# sourceMappingURL=createCheckboxGroupState.d.ts.map

package/src/checkbox/createCheckboxGroupState.ts

@@ -7,12 +7,14 @@
  * This is a 1:1 port of @react-stately/checkbox's useCheckboxGroupState.
  */
 
-import { createSignal, Accessor } from 'solid-js';
-import { type MaybeAccessor, access } from '../utils';
-
-// ============================================
-// TYPES
-// ============================================
+import { createMemo, createSignal, Accessor } from "solid-js";
+import { type MaybeAccessor, access } from "../utils";
+import {
+  createFormValidationState,
+  type FormValidationState,
+  type ValidationFunction,
+  type ValidationResult,
+} from "../form";
 
 export interface CheckboxGroupProps {
   /** The current selected values (controlled). */
@@ -41,9 +43,22 @@ export interface CheckboxGroupProps {
   onBlur?: (e: FocusEvent) => void;
   /** Handler that is called when the checkbox group's focus status changes. */
   onFocusChange?: (isFocused: boolean) => void;
+  /** Backward-compatible controlled validation state. */
+  validationState?: "valid" | "invalid";
+  /** Custom validation function. */
+  validate?: ValidationFunction<readonly string[]>;
+  /** Validation behavior for the checkbox group. */
+  validationBehavior?: "aria" | "native";
 }
 
-export interface CheckboxGroupState {
+export interface CheckboxGroupState extends Pick<
+  FormValidationState,
+  | "realtimeValidation"
+  | "displayValidation"
+  | "updateValidation"
+  | "resetValidation"
+  | "commitValidation"
+> {
   /** Current selected values. */
   readonly value: Accessor<readonly string[]>;
   /** Default selected values. */
@@ -69,49 +84,60 @@ export interface CheckboxGroupState {
   removeValue(value: string): void;
   /** Toggles a value in the set of selected values. */
   toggleValue(value: string): void;
-}
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
+  /** Current display validation result for the group. */
+  readonly displayValidation: Accessor<ValidationResult>;
+}
 
 /**
  * Provides state management for a checkbox group component.
  * Provides a name for the group, and manages selection and focus state.
  */
 export function createCheckboxGroupState(
-  props: MaybeAccessor<CheckboxGroupProps> = {}
+  props: MaybeAccessor<CheckboxGroupProps> = {},
 ): CheckboxGroupState {
   const getProps = () => access(props);
 
-  // Get initial values
   const initialProps = getProps();
   const initialValue = initialProps.value ?? initialProps.defaultValue ?? [];
 
-  // Create internal signal for uncontrolled mode
   const [internalValue, setInternalValue] = createSignal<readonly string[]>(initialValue);
 
-  // Determine if controlled
-  const isControlled = () => getProps().value !== undefined;
+  const controlledValue = createMemo<readonly string[] | undefined>(() => getProps().value);
+
+  const isControlled = () => controlledValue() !== undefined;
 
-  // Get current value
   const value: Accessor<readonly string[]> = () => {
-    const p = getProps();
-    return isControlled() ? (p.value ?? []) : internalValue();
+    const controlled = controlledValue();
+    return controlled !== undefined ? controlled : internalValue();
   };
 
-  // Check if required (true if isRequired and no items selected)
   const isRequired: Accessor<boolean> = () => {
     const p = getProps();
     return !!p.isRequired && value().length === 0;
   };
 
-  // Check if invalid
-  const isInvalid = () => {
-    return getProps().isInvalid ?? false;
-  };
+  const validation = createFormValidationState<readonly string[]>({
+    get value() {
+      return value();
+    },
+    get isInvalid() {
+      return getProps().isInvalid;
+    },
+    get validationState() {
+      return getProps().validationState;
+    },
+    get validate() {
+      return getProps().validate;
+    },
+    get validationBehavior() {
+      return getProps().validationBehavior ?? "native";
+    },
+    get name() {
+      return getProps().name;
+    },
+  });
 
-  // Set value
   function setValue(newValue: string[]): void {
     const p = getProps();
     if (p.isReadOnly || p.isDisabled) {
@@ -125,12 +151,10 @@ export function createCheckboxGroupState(
     p.onChange?.(newValue);
   }
 
-  // Check if value is selected
   function isSelected(checkValue: string): boolean {
     return value().includes(checkValue);
   }
 
-  // Add value
   function addValue(addVal: string): void {
     const p = getProps();
     if (p.isReadOnly || p.isDisabled) {
@@ -143,7 +167,6 @@ export function createCheckboxGroupState(
     }
   }
 
-  // Remove value
   function removeValue(removeVal: string): void {
     const p = getProps();
     if (p.isReadOnly || p.isDisabled) {
@@ -156,7 +179,6 @@ export function createCheckboxGroupState(
     }
   }
 
-  // Toggle value
   function toggleValue(toggleVal: string): void {
     const p = getProps();
     if (p.isReadOnly || p.isDisabled) {
@@ -181,7 +203,7 @@ export function createCheckboxGroupState(
       return getProps().isReadOnly ?? false;
     },
     get isInvalid() {
-      return isInvalid();
+      return validation.displayValidation().isInvalid;
     },
     isRequired,
     isSelected,
@@ -189,5 +211,10 @@ export function createCheckboxGroupState(
     addValue,
     removeValue,
     toggleValue,
+    realtimeValidation: validation.realtimeValidation,
+    displayValidation: validation.displayValidation,
+    updateValidation: validation.updateValidation,
+    resetValidation: validation.resetValidation,
+    commitValidation: validation.commitValidation,
   };
 }

package/src/checkbox/index.d.ts

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

package/src/checkbox/index.ts

@@ -2,4 +2,4 @@ export {
   createCheckboxGroupState,
   type CheckboxGroupProps,
   type CheckboxGroupState,
-} from './createCheckboxGroupState';
+} from "./createCheckboxGroupState";

package/src/collections/ListCollection.d.ts

@@ -2,36 +2,39 @@
  * A simple list collection implementation.
  * Provides a Collection interface over an array of nodes.
  */
-import type { Collection, CollectionNode, Key } from './types';
+import type { Collection, CollectionNode, Key } from "./types";
 /**
  * A basic implementation of Collection for list-based components.
  */
 export declare class ListCollection<T = unknown> implements Collection<T> {
-    private nodes;
-    private keyMap;
-    constructor(nodes: CollectionNode<T>[]);
-    get size(): number;
-    [Symbol.iterator](): Iterator<CollectionNode<T>>;
-    getKeys(): Iterable<Key>;
-    getItem(key: Key): CollectionNode<T> | null;
-    at(index: number): CollectionNode<T> | null;
-    getKeyBefore(key: Key): Key | null;
-    getKeyAfter(key: Key): Key | null;
-    getFirstKey(): Key | null;
-    getLastKey(): Key | null;
-    getChildren(key: Key): Iterable<CollectionNode<T>>;
-    getTextValue(key: Key): string;
-    /**
-     * Get all items (excluding sections, including items within sections).
-     */
-    private getAllItems;
+  private nodes;
+  private keyMap;
+  constructor(nodes: CollectionNode<T>[]);
+  get size(): number;
+  [Symbol.iterator](): Iterator<CollectionNode<T>>;
+  getKeys(): Iterable<Key>;
+  getItem(key: Key): CollectionNode<T> | null;
+  at(index: number): CollectionNode<T> | null;
+  getKeyBefore(key: Key): Key | null;
+  getKeyAfter(key: Key): Key | null;
+  getFirstKey(): Key | null;
+  getLastKey(): Key | null;
+  getChildren(key: Key): Iterable<CollectionNode<T>>;
+  getTextValue(key: Key): string;
+  /**
+   * Get all items (excluding sections, including items within sections).
+   */
+  private getAllItems;
 }
 /**
  * Create a collection from an array of items.
  */
-export declare function createListCollection<T>(items: T[], options?: {
+export declare function createListCollection<T>(
+  items: T[],
+  options?: {
     getKey?: (item: T, index: number) => Key;
     getTextValue?: (item: T) => string;
     getDisabled?: (item: T) => boolean;
-}): ListCollection<T>;
-//# sourceMappingURL=ListCollection.d.ts.map
+  },
+): ListCollection<T>;
+//# sourceMappingURL=ListCollection.d.ts.map

package/src/collections/ListCollection.ts

@@ -1,146 +1,152 @@
-/**
- * A simple list collection implementation.
- * Provides a Collection interface over an array of nodes.
- */
-
-import type { Collection, CollectionNode, Key } from './types';
-
-/**
- * A basic implementation of Collection for list-based components.
- */
-export class ListCollection<T = unknown> implements Collection<T> {
-  private nodes: CollectionNode<T>[];
-  private keyMap: Map<Key, CollectionNode<T>>;
-
-  constructor(nodes: CollectionNode<T>[]) {
-    this.nodes = nodes;
-    this.keyMap = new Map();
-
-    // Build key map for O(1) lookups
-    const addToMap = (node: CollectionNode<T>) => {
-      this.keyMap.set(node.key, node);
-      if (node.childNodes) {
-        for (const child of node.childNodes) {
-          addToMap(child);
-        }
-      }
-    };
-
-    for (const node of nodes) {
-      addToMap(node);
-    }
-  }
-
-  get size(): number {
-    return this.keyMap.size;
-  }
-
-  *[Symbol.iterator](): Iterator<CollectionNode<T>> {
-    yield* this.nodes;
-  }
-
-  *getKeys(): Iterable<Key> {
-    for (const node of this.keyMap.values()) {
-      yield node.key;
-    }
-  }
-
-  getItem(key: Key): CollectionNode<T> | null {
-    return this.keyMap.get(key) ?? null;
-  }
-
-  at(index: number): CollectionNode<T> | null {
-    // Flatten all items for indexing
-    const items = this.getAllItems();
-    return items[index] ?? null;
-  }
-
-  getKeyBefore(key: Key): Key | null {
-    const items = this.getAllItems();
-    const index = items.findIndex((item) => item.key === key);
-    if (index <= 0) return null;
-    return items[index - 1].key;
-  }
-
-  getKeyAfter(key: Key): Key | null {
-    const items = this.getAllItems();
-    const index = items.findIndex((item) => item.key === key);
-    if (index < 0 || index >= items.length - 1) return null;
-    return items[index + 1].key;
-  }
-
-  getFirstKey(): Key | null {
-    const items = this.getAllItems();
-    return items[0]?.key ?? null;
-  }
-
-  getLastKey(): Key | null {
-    const items = this.getAllItems();
-    return items[items.length - 1]?.key ?? null;
-  }
-
-  *getChildren(key: Key): Iterable<CollectionNode<T>> {
-    const node = this.getItem(key);
-    if (node?.childNodes) {
-      yield* node.childNodes;
-    }
-  }
-
-  getTextValue(key: Key): string {
-    return this.getItem(key)?.textValue ?? '';
-  }
-
-  /**
-   * Get all items (excluding sections, including items within sections).
-   */
-  private getAllItems(): CollectionNode<T>[] {
-    const items: CollectionNode<T>[] = [];
-
-    const addItems = (nodes: CollectionNode<T>[]) => {
-      for (const node of nodes) {
-        if (node.type === 'item') {
-          items.push(node);
-        } else if (node.type === 'section' && node.childNodes) {
-          addItems(node.childNodes);
-        }
-      }
-    };
-
-    addItems(this.nodes);
-    return items;
-  }
-}
-
-/**
- * Create a collection from an array of items.
- */
-export function createListCollection<T>(
-  items: T[],
-  options: {
-    getKey?: (item: T, index: number) => Key;
-    getTextValue?: (item: T) => string;
-    getDisabled?: (item: T) => boolean;
-  } = {}
-): ListCollection<T> {
-  const {
-    getKey = (item: T, index: number) => (item as any).key ?? (item as any).id ?? index,
-    getTextValue = (item: T) => (item as any).textValue ?? (item as any).label ?? String(item),
-    getDisabled = (item: T) => (item as any).isDisabled ?? false,
-  } = options;
-
-  const nodes: CollectionNode<T>[] = items.map((item, index) => ({
-    type: 'item' as const,
-    key: getKey(item, index),
-    value: item,
-    textValue: getTextValue(item),
-    rendered: null as any, // Will be set by component
-    level: 0,
-    index,
-    parentKey: null,
-    hasChildNodes: false,
-    childNodes: [],
-    isDisabled: getDisabled(item),
-  }));
-
-  return new ListCollection(nodes);
-}
+/**
+ * A simple list collection implementation.
+ * Provides a Collection interface over an array of nodes.
+ */
+
+import type { Collection, CollectionItemLike, CollectionNode, Key } from "./types";
+
+/**
+ * A basic implementation of Collection for list-based components.
+ */
+export class ListCollection<T = unknown> implements Collection<T> {
+  private nodes: CollectionNode<T>[];
+  private keyMap: Map<Key, CollectionNode<T>>;
+
+  constructor(nodes: CollectionNode<T>[]) {
+    this.nodes = nodes;
+    this.keyMap = new Map();
+
+    // Build key map for O(1) lookups
+    const addToMap = (node: CollectionNode<T>) => {
+      this.keyMap.set(node.key, node);
+      if (node.childNodes) {
+        for (const child of node.childNodes) {
+          addToMap(child);
+        }
+      }
+    };
+
+    for (const node of nodes) {
+      addToMap(node);
+    }
+  }
+
+  get size(): number {
+    return this.keyMap.size;
+  }
+
+  *[Symbol.iterator](): Iterator<CollectionNode<T>> {
+    yield* this.nodes;
+  }
+
+  *getKeys(): Iterable<Key> {
+    for (const node of this.keyMap.values()) {
+      yield node.key;
+    }
+  }
+
+  getItem(key: Key): CollectionNode<T> | null {
+    return this.keyMap.get(key) ?? null;
+  }
+
+  at(index: number): CollectionNode<T> | null {
+    // Flatten all items for indexing
+    const items = this.getAllItems();
+    return items[index] ?? null;
+  }
+
+  getKeyBefore(key: Key): Key | null {
+    const items = this.getAllItems();
+    const index = items.findIndex((item) => item.key === key);
+    if (index <= 0) return null;
+    return items[index - 1].key;
+  }
+
+  getKeyAfter(key: Key): Key | null {
+    const items = this.getAllItems();
+    const index = items.findIndex((item) => item.key === key);
+    if (index < 0 || index >= items.length - 1) return null;
+    return items[index + 1].key;
+  }
+
+  getFirstKey(): Key | null {
+    const items = this.getAllItems();
+    return items[0]?.key ?? null;
+  }
+
+  getLastKey(): Key | null {
+    const items = this.getAllItems();
+    return items[items.length - 1]?.key ?? null;
+  }
+
+  *getChildren(key: Key): Iterable<CollectionNode<T>> {
+    const node = this.getItem(key);
+    if (node?.childNodes) {
+      yield* node.childNodes;
+    }
+  }
+
+  getTextValue(key: Key): string {
+    return this.getItem(key)?.textValue ?? "";
+  }
+
+  /**
+   * Get all items (excluding sections, including items within sections).
+   */
+  private getAllItems(): CollectionNode<T>[] {
+    const items: CollectionNode<T>[] = [];
+
+    const addItems = (nodes: CollectionNode<T>[]) => {
+      for (const node of nodes) {
+        if (node.type === "item") {
+          items.push(node);
+        } else if (node.type === "section" && node.childNodes) {
+          addItems(node.childNodes);
+        }
+      }
+    };
+
+    addItems(this.nodes);
+    return items;
+  }
+}
+
+/**
+ * Create a collection from an array of items.
+ */
+export function createListCollection<T>(
+  items: T[],
+  options: {
+    getKey?: (item: T, index: number) => Key;
+    getTextValue?: (item: T) => string;
+    getDisabled?: (item: T) => boolean;
+  } = {},
+): ListCollection<T> {
+  const {
+    getKey = (item: T, index: number) => {
+      const o = item as CollectionItemLike;
+      return o.key ?? o.id ?? index;
+    },
+    getTextValue = (item: T) => {
+      const o = item as CollectionItemLike;
+      return o.textValue ?? o.label ?? String(item);
+    },
+    getDisabled = (item: T) => (item as CollectionItemLike).isDisabled ?? false,
+  } = options;
+
+  const nodes: CollectionNode<T>[] = items.map((item, index) => ({
+    type: "item" as const,
+    key: getKey(item, index),
+    value: item,
+    textValue: getTextValue(item),
+    rendered: null!, // Will be set by component
+    level: 0,
+    index,
+    parentKey: null,
+    hasChildNodes: false,
+    childNodes: [],
+    isDisabled: getDisabled(item),
+  }));
+
+  return new ListCollection(nodes);
+}