@proyecto-viviana/solid-stately 0.2.4 → 0.2.7

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.ts

@@ -1,67 +1,67 @@
-/**
- * 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);
+
+  // 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,
+  };
+}

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.ts

@@ -10,6 +10,12 @@
 import { 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';
 
 // ============================================
 // TYPES
@@ -44,9 +50,15 @@ 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;
 
@@ -76,6 +88,9 @@ export interface RadioGroupState {
 
   /** Sets the last focused value. */
   setLastFocusedValue(value: string | null): void;
+
+  /** Current display validation result for the group. */
+  readonly displayValidation: Accessor<ValidationResult>;
 }
 
 // ============================================
@@ -139,10 +154,26 @@ export function createRadioGroupState(
     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 ?? 'aria';
+    },
+    get name() {
+      return getProps().name;
+    },
+  });
 
   // Set value
   function setSelectedValue(value: string | null): void {
@@ -165,6 +196,8 @@ export function createRadioGroupState(
     if (value != null) {
       p.onChange?.(value);
     }
+
+    validation.commitValidation();
   }
 
   // Set last focused value
@@ -179,6 +212,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 +227,7 @@ export function createRadioGroupState(
       return getProps().isRequired ?? false;
     },
     get isInvalid() {
-      return isInvalid();
+      return validation.displayValidation().isInvalid;
     },
   };
 

package/src/searchfield/createSearchFieldState.ts

@@ -1,62 +1,62 @@
-/**
- * Creates state for a search field component.
- * Based on @react-stately/searchfield useSearchFieldState.
- */
-
-import { type Accessor, createSignal, createMemo } from 'solid-js';
-import { access, 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;
-}
-
-export interface SearchFieldState {
-  /** 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 function createSearchFieldState(
-  props: MaybeAccessor<SearchFieldStateProps>
-): SearchFieldState {
-  const getProps = () => access(props);
-
-  // Controlled vs uncontrolled
-  const isControlled = () => getProps().value !== undefined;
-
-  // Internal signal for uncontrolled mode
-  const [internalValue, setInternalValue] = createSignal(
-    getProps().defaultValue ?? ''
-  );
-
-  // Current value accessor
-  const value = createMemo(() => {
-    const p = getProps();
-    return isControlled() ? (p.value ?? '') : internalValue();
-  });
-
-  // Set value function
-  const setValue = (newValue: string) => {
-    const p = getProps();
-
-    if (!isControlled()) {
-      setInternalValue(newValue);
-    }
-
-    p.onChange?.(newValue);
-  };
-
-  return {
-    value,
-    setValue,
-  };
-}
+/**
+ * Creates state for a search field component.
+ * Based on @react-stately/searchfield useSearchFieldState.
+ */
+
+import { type Accessor, createSignal, createMemo } from 'solid-js';
+import { access, 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;
+}
+
+export interface SearchFieldState {
+  /** 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 function createSearchFieldState(
+  props: MaybeAccessor<SearchFieldStateProps>
+): SearchFieldState {
+  const getProps = () => access(props);
+
+  // Controlled vs uncontrolled
+  const isControlled = () => getProps().value !== undefined;
+
+  // Internal signal for uncontrolled mode
+  const [internalValue, setInternalValue] = createSignal(
+    getProps().defaultValue ?? ''
+  );
+
+  // Current value accessor
+  const value = createMemo(() => {
+    const p = getProps();
+    return isControlled() ? (p.value ?? '') : internalValue();
+  });
+
+  // Set value function
+  const setValue = (newValue: string) => {
+    const p = getProps();
+
+    if (!isControlled()) {
+      setInternalValue(newValue);
+    }
+
+    p.onChange?.(newValue);
+  };
+
+  return {
+    value,
+    setValue,
+  };
+}

package/src/searchfield/index.ts

@@ -1,5 +1,5 @@
-export { createSearchFieldState } from './createSearchFieldState';
-export type {
-  SearchFieldState,
-  SearchFieldStateProps,
-} from './createSearchFieldState';
+export { createSearchFieldState } from './createSearchFieldState';
+export type {
+  SearchFieldState,
+  SearchFieldStateProps,
+} from './createSearchFieldState';