@proyecto-viviana/solid-stately 0.2.4 → 0.3.0

package/src/numberfield/index.d.ts

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

package/src/numberfield/index.ts

@@ -1,5 +1,5 @@
-export {
-  createNumberFieldState,
-  type NumberFieldStateProps,
-  type NumberFieldState,
-} from './createNumberFieldState';
+export {
+  createNumberFieldState,
+  type NumberFieldStateProps,
+  type NumberFieldState,
+} from "./createNumberFieldState";

package/src/overlays/createOverlayTriggerState.d.ts

@@ -2,31 +2,33 @@
  * Manages state for an overlay trigger.
  * Based on @react-stately/overlays useOverlayTriggerState.
  */
-import { type Accessor } from 'solid-js';
-import { type MaybeAccessor } from '../utils';
+import { type Accessor } from "solid-js";
+import { type MaybeAccessor } from "../utils";
 export interface OverlayTriggerProps {
-    /** Whether the overlay is open by default (uncontrolled). */
-    defaultOpen?: boolean;
-    /** Whether the overlay is open (controlled). */
-    isOpen?: boolean;
-    /** Handler that is called when the overlay's open state changes. */
-    onOpenChange?: (isOpen: boolean) => void;
+  /** Whether the overlay is open by default (uncontrolled). */
+  defaultOpen?: boolean;
+  /** Whether the overlay is open (controlled). */
+  isOpen?: boolean;
+  /** Handler that is called when the overlay's open state changes. */
+  onOpenChange?: (isOpen: boolean) => void;
 }
 export interface OverlayTriggerState {
-    /** Whether the overlay is currently open. */
-    readonly isOpen: Accessor<boolean>;
-    /** Sets whether the overlay is open. */
-    setOpen(isOpen: boolean): void;
-    /** Opens the overlay. */
-    open(): void;
-    /** Closes the overlay. */
-    close(): void;
-    /** Toggles the overlay's visibility. */
-    toggle(): void;
+  /** Whether the overlay is currently open. */
+  readonly isOpen: Accessor<boolean>;
+  /** Sets whether the overlay is open. */
+  setOpen(isOpen: boolean): void;
+  /** Opens the overlay. */
+  open(): void;
+  /** Closes the overlay. */
+  close(): void;
+  /** Toggles the overlay's visibility. */
+  toggle(): void;
 }
 /**
  * Manages state for an overlay trigger. Tracks whether the overlay is open, and provides
  * methods to toggle this state.
  */
-export declare function createOverlayTriggerState(props?: MaybeAccessor<OverlayTriggerProps>): OverlayTriggerState;
-//# sourceMappingURL=createOverlayTriggerState.d.ts.map
+export declare function createOverlayTriggerState(
+  props?: MaybeAccessor<OverlayTriggerProps>,
+): OverlayTriggerState;
+//# sourceMappingURL=createOverlayTriggerState.d.ts.map

package/src/overlays/createOverlayTriggerState.ts

@@ -1,67 +1,66 @@
-/**
- * Manages state for an overlay trigger.
- * Based on @react-stately/overlays useOverlayTriggerState.
- */
-
-import { createSignal, type Accessor } from 'solid-js';
-import { access, type MaybeAccessor } from '../utils';
-
-export interface OverlayTriggerProps {
-  /** Whether the overlay is open by default (uncontrolled). */
-  defaultOpen?: boolean;
-  /** Whether the overlay is open (controlled). */
-  isOpen?: boolean;
-  /** Handler that is called when the overlay's open state changes. */
-  onOpenChange?: (isOpen: boolean) => void;
-}
-
-export interface OverlayTriggerState {
-  /** Whether the overlay is currently open. */
-  readonly isOpen: Accessor<boolean>;
-  /** Sets whether the overlay is open. */
-  setOpen(isOpen: boolean): void;
-  /** Opens the overlay. */
-  open(): void;
-  /** Closes the overlay. */
-  close(): void;
-  /** Toggles the overlay's visibility. */
-  toggle(): void;
-}
-
-/**
- * Manages state for an overlay trigger. Tracks whether the overlay is open, and provides
- * methods to toggle this state.
- */
-export function createOverlayTriggerState(
-  props: MaybeAccessor<OverlayTriggerProps> = {}
-): OverlayTriggerState {
-  const propsAccessor = () => access(props);
-
-  // Use controlled state if isOpen is provided, otherwise use internal state
-  const [internalOpen, setInternalOpen] = createSignal(propsAccessor().defaultOpen ?? false);
-
-  const isOpen: Accessor<boolean> = () => {
-    const p = propsAccessor();
-    return p.isOpen !== undefined ? p.isOpen : internalOpen();
-  };
-
-  const setOpen = (open: boolean) => {
-    const p = propsAccessor();
-    if (p.isOpen === undefined) {
-      setInternalOpen(open);
-    }
-    p.onOpenChange?.(open);
-  };
-
-  const open = () => setOpen(true);
-  const close = () => setOpen(false);
-  const toggle = () => setOpen(!isOpen());
-
-  return {
-    isOpen,
-    setOpen,
-    open,
-    close,
-    toggle,
-  };
-}
+/**
+ * Manages state for an overlay trigger.
+ * Based on @react-stately/overlays useOverlayTriggerState.
+ */
+
+import { createSignal, type Accessor } from "solid-js";
+import { access, type MaybeAccessor } from "../utils";
+
+export interface OverlayTriggerProps {
+  /** Whether the overlay is open by default (uncontrolled). */
+  defaultOpen?: boolean;
+  /** Whether the overlay is open (controlled). */
+  isOpen?: boolean;
+  /** Handler that is called when the overlay's open state changes. */
+  onOpenChange?: (isOpen: boolean) => void;
+}
+
+export interface OverlayTriggerState {
+  /** Whether the overlay is currently open. */
+  readonly isOpen: Accessor<boolean>;
+  /** Sets whether the overlay is open. */
+  setOpen(isOpen: boolean): void;
+  /** Opens the overlay. */
+  open(): void;
+  /** Closes the overlay. */
+  close(): void;
+  /** Toggles the overlay's visibility. */
+  toggle(): void;
+}
+
+/**
+ * Manages state for an overlay trigger. Tracks whether the overlay is open, and provides
+ * methods to toggle this state.
+ */
+export function createOverlayTriggerState(
+  props: MaybeAccessor<OverlayTriggerProps> = {},
+): OverlayTriggerState {
+  const propsAccessor = () => access(props);
+
+  const [internalOpen, setInternalOpen] = createSignal(propsAccessor().defaultOpen ?? false);
+
+  const isOpen: Accessor<boolean> = () => {
+    const p = propsAccessor();
+    return p.isOpen !== undefined ? p.isOpen : internalOpen();
+  };
+
+  const setOpen = (open: boolean) => {
+    const p = propsAccessor();
+    if (p.isOpen === undefined) {
+      setInternalOpen(open);
+    }
+    p.onOpenChange?.(open);
+  };
+
+  const open = () => setOpen(true);
+  const close = () => setOpen(false);
+  const toggle = () => setOpen(!isOpen());
+
+  return {
+    isOpen,
+    setOpen,
+    open,
+    close,
+    toggle,
+  };
+}

package/src/overlays/index.d.ts

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

package/src/overlays/index.ts

@@ -1,5 +1,5 @@
-export {
-  createOverlayTriggerState,
-  type OverlayTriggerProps,
-  type OverlayTriggerState,
-} from './createOverlayTriggerState';
+export {
+  createOverlayTriggerState,
+  type OverlayTriggerProps,
+  type OverlayTriggerState,
+} from "./createOverlayTriggerState";

package/src/radio/createRadioGroupState.d.ts

@@ -6,59 +6,59 @@
  *
  * This is a 1:1 port of @react-stately/radio's useRadioGroupState.
  */
-import { Accessor } from 'solid-js';
-import { type MaybeAccessor } from '../utils';
+import { Accessor } from "solid-js";
+import { type MaybeAccessor } from "../utils";
 export interface RadioGroupProps {
-    /** The current selected value (controlled). */
-    value?: string | null;
-    /** The default selected value (uncontrolled). */
-    defaultValue?: string | null;
-    /** Handler that is called when the value changes. */
-    onChange?: (value: string) => void;
-    /** Whether the radio group is disabled. */
-    isDisabled?: boolean;
-    /** Whether the radio group is read only. */
-    isReadOnly?: boolean;
-    /** Whether the radio group is required. */
-    isRequired?: boolean;
-    /** Whether the radio group is invalid. */
-    isInvalid?: boolean;
-    /** The name of the radio group, used when submitting an HTML form. */
-    name?: string;
-    /** The form to associate the radio group with. */
-    form?: string;
-    /** The label for the radio group. */
-    label?: string;
-    /** Orientation of the radio group. */
-    orientation?: 'horizontal' | 'vertical';
-    /** Handler that is called when the radio group receives focus. */
-    onFocus?: (e: FocusEvent) => void;
-    /** Handler that is called when the radio group loses focus. */
-    onBlur?: (e: FocusEvent) => void;
-    /** Handler that is called when the radio group's focus status changes. */
-    onFocusChange?: (isFocused: boolean) => void;
+  /** The current selected value (controlled). */
+  value?: string | null;
+  /** The default selected value (uncontrolled). */
+  defaultValue?: string | null;
+  /** Handler that is called when the value changes. */
+  onChange?: (value: string) => void;
+  /** Whether the radio group is disabled. */
+  isDisabled?: boolean;
+  /** Whether the radio group is read only. */
+  isReadOnly?: boolean;
+  /** Whether the radio group is required. */
+  isRequired?: boolean;
+  /** Whether the radio group is invalid. */
+  isInvalid?: boolean;
+  /** The name of the radio group, used when submitting an HTML form. */
+  name?: string;
+  /** The form to associate the radio group with. */
+  form?: string;
+  /** The label for the radio group. */
+  label?: string;
+  /** Orientation of the radio group. */
+  orientation?: "horizontal" | "vertical";
+  /** Handler that is called when the radio group receives focus. */
+  onFocus?: (e: FocusEvent) => void;
+  /** Handler that is called when the radio group loses focus. */
+  onBlur?: (e: FocusEvent) => void;
+  /** Handler that is called when the radio group's focus status changes. */
+  onFocusChange?: (isFocused: boolean) => void;
 }
 export interface RadioGroupState {
-    /** The name for the group, used for native form submission. */
-    readonly name: string;
-    /** Whether the radio group is disabled. */
-    readonly isDisabled: boolean;
-    /** Whether the radio group is read only. */
-    readonly isReadOnly: boolean;
-    /** Whether the radio group is required. */
-    readonly isRequired: boolean;
-    /** Whether the radio group is invalid. */
-    readonly isInvalid: boolean;
-    /** The currently selected value. */
-    readonly selectedValue: Accessor<string | null>;
-    /** The default selected value. */
-    readonly defaultSelectedValue: string | null;
-    /** Sets the selected value. */
-    setSelectedValue(value: string | null): void;
-    /** The value of the last focused radio. */
-    readonly lastFocusedValue: Accessor<string | null>;
-    /** Sets the last focused value. */
-    setLastFocusedValue(value: string | null): void;
+  /** The name for the group, used for native form submission. */
+  readonly name: string;
+  /** Whether the radio group is disabled. */
+  readonly isDisabled: boolean;
+  /** Whether the radio group is read only. */
+  readonly isReadOnly: boolean;
+  /** Whether the radio group is required. */
+  readonly isRequired: boolean;
+  /** Whether the radio group is invalid. */
+  readonly isInvalid: boolean;
+  /** The currently selected value. */
+  readonly selectedValue: Accessor<string | null>;
+  /** The default selected value. */
+  readonly defaultSelectedValue: string | null;
+  /** Sets the selected value. */
+  setSelectedValue(value: string | null): void;
+  /** The value of the last focused radio. */
+  readonly lastFocusedValue: Accessor<string | null>;
+  /** Sets the last focused value. */
+  setLastFocusedValue(value: string | null): void;
 }
 /**
  * Internal WeakMap to store sync version accessors for each radio group state.
@@ -73,5 +73,7 @@ export declare const radioGroupSyncVersion: WeakMap<RadioGroupState, Accessor<nu
  * Provides state management for a radio group component.
  * Provides a name for the group, and manages selection and focus state.
  */
-export declare function createRadioGroupState(props?: MaybeAccessor<RadioGroupProps>): RadioGroupState;
-//# sourceMappingURL=createRadioGroupState.d.ts.map
+export declare function createRadioGroupState(
+  props?: MaybeAccessor<RadioGroupProps>,
+): RadioGroupState;
+//# sourceMappingURL=createRadioGroupState.d.ts.map

package/src/radio/createRadioGroupState.ts

@@ -7,13 +7,15 @@
  * This is a 1:1 port of @react-stately/radio's useRadioGroupState.
  */
 
-import { createSignal, Accessor, untrack } from 'solid-js';
-import { type MaybeAccessor, access } from '../utils';
-import { createId } from '../ssr';
-
-// ============================================
-// TYPES
-// ============================================
+import { createMemo, createSignal, Accessor, untrack } from "solid-js";
+import { type MaybeAccessor, access } from "../utils";
+import { createId } from "../ssr";
+import {
+  createFormValidationState,
+  type FormValidationState,
+  type ValidationFunction,
+  type ValidationResult,
+} from "../form";
 
 export interface RadioGroupProps {
   /** The current selected value (controlled). */
@@ -37,16 +39,29 @@ export interface RadioGroupProps {
   /** The label for the radio group. */
   label?: string;
   /** Orientation of the radio group. */
-  orientation?: 'horizontal' | 'vertical';
+  orientation?: "horizontal" | "vertical";
   /** Handler that is called when the radio group receives focus. */
   onFocus?: (e: FocusEvent) => void;
   /** Handler that is called when the radio group loses focus. */
   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;
 
@@ -76,11 +91,10 @@ export interface RadioGroupState {
 
   /** Sets the last focused value. */
   setLastFocusedValue(value: string | null): void;
-}
 
-// ============================================
-// INTERNAL: SolidJS-specific sync mechanism
-// ============================================
+  /** Current display validation result for the group. */
+  readonly displayValidation: Accessor<ValidationResult>;
+}
 
 /**
  * Internal WeakMap to store sync version accessors for each radio group state.
@@ -92,17 +106,11 @@ export interface RadioGroupState {
  */
 export const radioGroupSyncVersion: WeakMap<RadioGroupState, Accessor<number>> = new WeakMap();
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides state management for a radio group component.
  * Provides a name for the group, and manages selection and focus state.
  */
-export function createRadioGroupState(
-  props: MaybeAccessor<RadioGroupProps> = {}
-): RadioGroupState {
+export function createRadioGroupState(props: MaybeAccessor<RadioGroupProps> = {}): RadioGroupState {
   const getProps = () => access(props);
 
   // Get initial props using untrack to avoid setting up dependencies
@@ -116,7 +124,7 @@ export function createRadioGroupState(
   // Create internal signal for uncontrolled mode
   // Initialize with defaultValue only (not value, which is for controlled mode)
   const [internalValue, setInternalValue] = createSignal<string | null>(
-    initialProps.defaultValue ?? null
+    initialProps.defaultValue ?? null,
   );
   const [lastFocusedValue, setLastFocusedValueInternal] = createSignal<string | null>(null);
 
@@ -125,24 +133,45 @@ export function createRadioGroupState(
   // from our reactive state (e.g., clicking a radio unchecks siblings in the DOM)
   const [syncVersion, setSyncVersion] = createSignal(0);
 
+  const controlledValue = createMemo<string | null | undefined>(() => {
+    const value = getProps().value;
+    return value === undefined ? undefined : (value ?? null);
+  });
+
   // Determine if controlled - must be reactive to handle dynamic props
-  const isControlled = () => getProps().value !== undefined;
+  const isControlled = () => controlledValue() !== undefined;
 
   // Get current value - reactive for both controlled and uncontrolled modes
   const selectedValue: Accessor<string | null> = () => {
-    const p = getProps();
     // In controlled mode, always read from props.value reactively
     // In uncontrolled mode, read from internal signal
-    if (p.value !== undefined) {
-      return p.value ?? null;
+    const value = controlledValue();
+    if (value !== undefined) {
+      return value;
     }
     return internalValue();
   };
 
-  // Check if invalid
-  const isInvalid = () => {
-    return getProps().isInvalid ?? false;
-  };
+  const validation = createFormValidationState<string | null>({
+    get value() {
+      return selectedValue();
+    },
+    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 setSelectedValue(value: string | null): void {
@@ -165,6 +194,8 @@ export function createRadioGroupState(
     if (value != null) {
       p.onChange?.(value);
     }
+
+    validation.commitValidation();
   }
 
   // Set last focused value
@@ -179,6 +210,11 @@ export function createRadioGroupState(
     setSelectedValue,
     lastFocusedValue,
     setLastFocusedValue,
+    realtimeValidation: validation.realtimeValidation,
+    displayValidation: validation.displayValidation,
+    updateValidation: validation.updateValidation,
+    resetValidation: validation.resetValidation,
+    commitValidation: validation.commitValidation,
     get isDisabled() {
       return getProps().isDisabled ?? false;
     },
@@ -189,7 +225,7 @@ export function createRadioGroupState(
       return getProps().isRequired ?? false;
     },
     get isInvalid() {
-      return isInvalid();
+      return validation.displayValidation().isInvalid;
     },
   };
 

package/src/radio/index.d.ts

@@ -1,2 +1,7 @@
-export { createRadioGroupState, radioGroupSyncVersion, type RadioGroupProps, type RadioGroupState, } from './createRadioGroupState';
-//# sourceMappingURL=index.d.ts.map
+export {
+  createRadioGroupState,
+  radioGroupSyncVersion,
+  type RadioGroupProps,
+  type RadioGroupState,
+} from "./createRadioGroupState";
+//# sourceMappingURL=index.d.ts.map

package/src/radio/index.ts

@@ -3,4 +3,4 @@ export {
   radioGroupSyncVersion,
   type RadioGroupProps,
   type RadioGroupState,
-} from './createRadioGroupState';
+} from "./createRadioGroupState";

package/src/searchfield/createSearchFieldState.d.ts

@@ -2,24 +2,26 @@
  * Creates state for a search field component.
  * Based on @react-stately/searchfield useSearchFieldState.
  */
-import { type Accessor } from 'solid-js';
-import { type MaybeAccessor } from '../utils';
+import { type Accessor } from "solid-js";
+import { type MaybeAccessor } from "../utils";
 export interface SearchFieldStateProps {
-    /** The current value (controlled). */
-    value?: string;
-    /** The default value (uncontrolled). */
-    defaultValue?: string;
-    /** Handler that is called when the value changes. */
-    onChange?: (value: string) => void;
+  /** 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 SearchFieldState {
-    /** The current value of the search field. */
-    value: Accessor<string>;
-    /** Sets the value of the search field. */
-    setValue: (value: string) => void;
+  /** The current value of the search field. */
+  value: Accessor<string>;
+  /** Sets the value of the search field. */
+  setValue: (value: string) => void;
 }
 /**
  * Provides state management for a search field.
  */
-export declare function createSearchFieldState(props: MaybeAccessor<SearchFieldStateProps>): SearchFieldState;
-//# sourceMappingURL=createSearchFieldState.d.ts.map
+export declare function createSearchFieldState(
+  props: MaybeAccessor<SearchFieldStateProps>,
+): SearchFieldState;
+//# sourceMappingURL=createSearchFieldState.d.ts.map