@proyecto-viviana/solid-stately 0.2.3 → 0.2.7

package/dist/menu/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Menu compatibility surface.
+ *
+ * Exposes React Stately-like menu hook names while using existing
+ * Solid menu state primitives.
+ */
+export { createMenuState, createMenuTriggerState, type MenuStateProps, type MenuState, type MenuTriggerStateProps, type MenuTriggerState, } from '../collections/createMenuState';
+export { createMenuTriggerState as useMenuTriggerState, } from '../collections/createMenuState';

package/dist/radio/createRadioGroupState.d.ts

@@ -8,6 +8,7 @@
  */
 import { Accessor } from 'solid-js';
 import { type MaybeAccessor } from '../utils';
+import { type FormValidationState, type ValidationFunction, type ValidationResult } from '../form';
 export interface RadioGroupProps {
     /** The current selected value (controlled). */
     value?: string | null;
@@ -37,8 +38,14 @@ export interface RadioGroupProps {
     onBlur?: (e: FocusEvent) => void;
     /** Handler that is called when the radio group's focus status changes. */
     onFocusChange?: (isFocused: boolean) => void;
+    /** Backward-compatible controlled validation state. */
+    validationState?: 'valid' | 'invalid';
+    /** Custom validation function. */
+    validate?: ValidationFunction<string | null>;
+    /** Validation behavior for the radio group. */
+    validationBehavior?: 'aria' | 'native';
 }
-export interface RadioGroupState {
+export interface RadioGroupState extends Pick<FormValidationState, 'realtimeValidation' | 'displayValidation' | 'updateValidation' | 'resetValidation' | 'commitValidation'> {
     /** The name for the group, used for native form submission. */
     readonly name: string;
     /** Whether the radio group is disabled. */
@@ -59,6 +66,8 @@ export interface RadioGroupState {
     readonly lastFocusedValue: Accessor<string | null>;
     /** Sets the last focused value. */
     setLastFocusedValue(value: string | null): void;
+    /** Current display validation result for the group. */
+    readonly displayValidation: Accessor<ValidationResult>;
 }
 /**
  * Internal WeakMap to store sync version accessors for each radio group state.

package/dist/select/createSelectState.d.ts

@@ -5,6 +5,7 @@
 import { type Accessor } from 'solid-js';
 import { type MaybeAccessor } from '../utils';
 import type { Key, CollectionNode, Collection } from '../collections/types';
+import type { SelectionMode, Selection } from '../collections/types';
 export interface SelectStateProps<T = unknown> {
     /** The items to display in the select. */
     items: T[];
@@ -20,8 +21,16 @@ export interface SelectStateProps<T = unknown> {
     selectedKey?: Key | null;
     /** The default selected key (uncontrolled). */
     defaultSelectedKey?: Key | null;
+    /** The selected keys (controlled, for multiple selection mode). */
+    selectedKeys?: 'all' | Iterable<Key>;
+    /** Default selected keys (uncontrolled, for multiple selection mode). */
+    defaultSelectedKeys?: 'all' | Iterable<Key>;
     /** Handler called when the selection changes. */
     onSelectionChange?: (key: Key | null) => void;
+    /** Handler called when selected keys change. */
+    onSelectionChangeKeys?: (keys: Selection) => void;
+    /** Selection mode for the select. */
+    selectionMode?: Extract<SelectionMode, 'single' | 'multiple'>;
     /** Whether the select is open (controlled). */
     isOpen?: boolean;
     /** Whether the select is open by default (uncontrolled). */
@@ -46,10 +55,16 @@ export interface SelectState<T = unknown> {
     toggle(): void;
     /** The currently selected key. */
     readonly selectedKey: Accessor<Key | null>;
+    /** The selected keys. */
+    readonly selectedKeys: Accessor<Selection>;
     /** The currently selected item. */
     readonly selectedItem: Accessor<CollectionNode<T> | null>;
+    /** The currently selected items. */
+    readonly selectedItems: Accessor<CollectionNode<T>[]>;
     /** Set the selected key. */
     setSelectedKey(key: Key | null): void;
+    /** Set selected keys. */
+    setSelectedKeys(keys: Iterable<Key>): void;
     /** The currently focused key. */
     readonly focusedKey: Accessor<Key | null>;
     /** Set the focused key. */
@@ -64,6 +79,8 @@ export interface SelectState<T = unknown> {
     readonly isDisabled: boolean;
     /** Whether the select is required. */
     readonly isRequired: boolean;
+    /** The selection mode. */
+    readonly selectionMode: Accessor<'single' | 'multiple'>;
 }
 /**
  * Creates state for a select component.

package/dist/selection/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Selection compatibility surface.
+ *
+ * Provides a React Stately-like module entrypoint for selection state while
+ * delegating to the existing Solid collection selection primitives.
+ */
+export { createSelectionState, type SelectionStateProps, type SelectionState, } from '../collections/createSelectionState';
+export type { Key, Selection, SelectionMode, SelectionBehavior, DisabledBehavior, FocusStrategy, } from '../collections/types';
+export type MultipleSelectionStateProps = import('../collections/createSelectionState').SelectionStateProps;
+export type MultipleSelectionState = import('../collections/createSelectionState').SelectionState;
+export { createSelectionState as useMultipleSelectionState, } from '../collections/createSelectionState';

package/dist/toast/createToastState.d.ts

@@ -42,8 +42,14 @@ 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;
     /** Pauses all toast timers. */
     pauseAll: () => void;
     /** Resumes all toast timers. */

package/dist/toggle/createToggleGroupState.d.ts

@@ -0,0 +1,45 @@
+/**
+ * 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 type { Key } from '../collections';
+import { type MaybeAccessor } 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;
+}
+/**
+ * Manages state for a group of toggle buttons.
+ */
+export declare function createToggleGroupState(props?: MaybeAccessor<ToggleGroupProps>): ToggleGroupState;

package/dist/toggle/index.d.ts

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

package/dist/tree/TreeCollection.d.ts

@@ -13,8 +13,9 @@ import type { TreeCollection as ITreeCollection, TreeNode, TreeItemData } from '
  */
 export declare class TreeCollection<T> implements ITreeCollection<T> {
     private keyMap;
-    private visibleKeys;
-    private _rows;
+    private visibleRows;
+    private firstKey;
+    private lastKey;
     constructor(items: TreeItemData<T>[], expandedKeys: Set<Key>);
     private buildCollection;
     get size(): number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proyecto-viviana/solid-stately",
-  "version": "0.2.3",
+  "version": "0.2.7",
   "description": "A 1-1 SolidJS port of React Stately - headless state management for UI components",
   "type": "module",
   "main": "./dist/index.js",
@@ -20,9 +20,9 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && rm -f tsconfig.build.tsbuildinfo && tsc -p tsconfig.build.json",
     "dev": "tsup --watch",
-    "prepublishOnly": "echo 'Use deno task release from root'"
+    "prepublishOnly": "echo 'Use the root Changesets npm release workflow'"
   },
   "peerDependencies": {
     "solid-js": "^1.9.0"
@@ -31,7 +31,7 @@
     "@internationalized/date": "^3.8.0"
   },
   "devDependencies": {
-    "solid-js": "^1.9.10"
+    "solid-js": "^1.9.11"
   },
   "keywords": [
     "solid",
@@ -44,7 +44,8 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/proyecto-viviana/proyecto-viviana"
+    "url": "git+https://github.com/proyecto-viviana/proyecto-viviana.git",
+    "directory": "packages/solid-stately"
   },
   "publishConfig": {
     "access": "public"

package/src/autocomplete/createAutocompleteState.ts

@@ -5,6 +5,7 @@
  */
 
 import { createSignal, type Accessor } from 'solid-js'
+import { access, type MaybeAccessor } from '../utils'
 
 // ============================================
 // TYPES
@@ -55,30 +56,28 @@ export interface AutocompleteStateOptions {
  * ```
  */
 export function createAutocompleteState(
-  props: AutocompleteStateOptions = {}
+  props: MaybeAccessor<AutocompleteStateOptions> = {}
 ): AutocompleteState {
-  const {
-    inputValue: controlledInputValue,
-    defaultInputValue = '',
-    onInputChange,
-  } = props
+  const getProps = () => access(props)
 
   // Track focused node ID for aria-activedescendant
   const [focusedNodeId, setFocusedNodeId] = createSignal<string | null>(null)
 
   // Handle controlled vs uncontrolled input value
-  const isControlled = controlledInputValue !== undefined
-  const [uncontrolledValue, setUncontrolledValue] = createSignal(defaultInputValue)
+  const isControlled = () => getProps().inputValue !== undefined
+  const [uncontrolledValue, setUncontrolledValue] = createSignal(getProps().defaultInputValue ?? '')
 
   const inputValue: Accessor<string> = () => {
-    return isControlled ? controlledInputValue : uncontrolledValue()
+    const p = getProps()
+    return isControlled() ? (p.inputValue ?? '') : uncontrolledValue()
   }
 
   const setInputValue = (value: string) => {
-    if (!isControlled) {
+    const p = getProps()
+    if (!isControlled()) {
       setUncontrolledValue(value)
     }
-    onInputChange?.(value)
+    p.onInputChange?.(value)
   }
 
   return {

package/src/calendar/createDateFieldState.ts

@@ -364,11 +364,34 @@ export function createDateFieldState<T extends DateValue = CalendarDate>(
 
   // Confirm placeholder value
   const confirmPlaceholder = () => {
+    if (isDisabled() || isReadOnly()) return;
+
+    const minValue = access(props.minValue);
+    const maxValue = access(props.maxValue);
+    const constrain = (candidate: DateValue): DateValue => {
+      if (minValue && candidate.compare(minValue) < 0) {
+        return minValue;
+      }
+      if (maxValue && candidate.compare(maxValue) > 0) {
+        return maxValue;
+      }
+      return candidate;
+    };
+
     const parts = placeholderDate();
     if (Object.keys(parts).length > 0) {
       const dv = dateValue();
       if (dv) {
-        setValue(dv as T);
+        setValue(constrain(dv) as T);
+      }
+      return;
+    }
+
+    const current = value();
+    if (current) {
+      const constrained = constrain(current);
+      if (constrained.compare(current) !== 0) {
+        setValue(constrained as T);
       }
     }
   };

package/src/checkbox/createCheckboxGroupState.ts

@@ -9,6 +9,12 @@
 
 import { createSignal, Accessor } from 'solid-js';
 import { type MaybeAccessor, access } from '../utils';
+import {
+  createFormValidationState,
+  type FormValidationState,
+  type ValidationFunction,
+  type ValidationResult,
+} from '../form';
 
 // ============================================
 // TYPES
@@ -41,9 +47,15 @@ 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,6 +81,9 @@ export interface CheckboxGroupState {
   removeValue(value: string): void;
   /** Toggles a value in the set of selected values. */
   toggleValue(value: string): void;
+
+  /** Current display validation result for the group. */
+  readonly displayValidation: Accessor<ValidationResult>;
 }
 
 // ============================================
@@ -106,10 +121,26 @@ export function createCheckboxGroupState(
     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 ?? 'aria';
+    },
+    get name() {
+      return getProps().name;
+    },
+  });
 
   // Set value
   function setValue(newValue: string[]): void {
@@ -181,7 +212,7 @@ export function createCheckboxGroupState(
       return getProps().isReadOnly ?? false;
     },
     get isInvalid() {
-      return isInvalid();
+      return validation.displayValidation().isInvalid;
     },
     isRequired,
     isSelected,
@@ -189,5 +220,10 @@ export function createCheckboxGroupState(
     addValue,
     removeValue,
     toggleValue,
+    realtimeValidation: validation.realtimeValidation,
+    displayValidation: validation.displayValidation,
+    updateValidation: validation.updateValidation,
+    resetValidation: validation.resetValidation,
+    commitValidation: validation.commitValidation,
   };
 }