@proyecto-viviana/solid-stately 0.2.7 → 0.4.0

package/src/numberfield/createNumberFieldState.ts

@@ -3,8 +3,8 @@
  * Based on @react-stately/numberfield useNumberFieldState.
  */
 
-import { createSignal, createMemo, type Accessor } from 'solid-js';
-import { access, type MaybeAccessor } from '../utils';
+import { createSignal, createMemo, type Accessor } from "solid-js";
+import { access, type MaybeAccessor } from "../utils";
 
 export interface NumberFieldStateProps {
   /** The current value (controlled). */
@@ -65,15 +65,11 @@ export interface NumberFieldState {
 /**
  * Handles decimal operations to avoid floating point errors.
  */
-function handleDecimalOperation(
-  operator: '+' | '-',
-  value1: number,
-  value2: number
-): number {
+function handleDecimalOperation(operator: "+" | "-", value1: number, value2: number): number {
   // Find the number of decimal places
   const getDecimals = (n: number) => {
     const str = String(n);
-    const idx = str.indexOf('.');
+    const idx = str.indexOf(".");
     return idx === -1 ? 0 : str.length - idx - 1;
   };
 
@@ -83,7 +79,7 @@ function handleDecimalOperation(
   const int1 = Math.round(value1 * multiplier);
   const int2 = Math.round(value2 * multiplier);
 
-  const result = operator === '+' ? int1 + int2 : int1 - int2;
+  const result = operator === "+" ? int1 + int2 : int1 - int2;
   return result / multiplier;
 }
 
@@ -104,7 +100,7 @@ function snapToStep(value: number, step: number, min?: number): number {
   const base = min ?? 0;
   const diff = value - base;
   const steps = Math.round(diff / step);
-  return handleDecimalOperation('+', base, steps * step);
+  return handleDecimalOperation("+", base, steps * step);
 }
 
 function isValidStep(step: number | undefined): step is number {
@@ -115,12 +111,12 @@ function isValidStep(step: number | undefined): step is number {
  * Creates state for a number field.
  */
 export function createNumberFieldState(
-  props: MaybeAccessor<NumberFieldStateProps>
+  props: MaybeAccessor<NumberFieldStateProps>,
 ): NumberFieldState {
   const getProps = () => access(props);
 
   // Get locale and formatter
-  const locale = () => getProps().locale ?? 'en-US';
+  const locale = () => getProps().locale ?? "en-US";
   const formatOptions = () => getProps().formatOptions ?? {};
 
   // Create number formatter
@@ -130,7 +126,7 @@ export function createNumberFieldState(
 
   // Create number parser (simplified - real implementation would be more robust)
   const parseNumber = (value: string): number => {
-    if (!value || value === '' || value === '-') return NaN;
+    if (!value || value === "" || value === "-") return NaN;
 
     // Handle locale-specific decimal separators
     const opts = formatOptions();
@@ -139,17 +135,17 @@ export function createNumberFieldState(
 
     // Normalize the input
     let normalized = value;
-    if (decimalSeparator !== '.') {
-      normalized = normalized.replace(decimalSeparator, '.');
+    if (decimalSeparator !== ".") {
+      normalized = normalized.replace(decimalSeparator, ".");
     }
 
     // Remove grouping separators and currency symbols
-    normalized = normalized.replace(/[^\d.\-]/g, '');
+    normalized = normalized.replace(/[^\d.-]/g, "");
 
     const parsed = parseFloat(normalized);
     if (isNaN(parsed)) return parsed;
 
-    if (opts.style === 'percent') {
+    if (opts.style === "percent") {
       return parsed / 100;
     }
 
@@ -158,7 +154,7 @@ export function createNumberFieldState(
 
   // Format a number to string
   const formatNumber = (value: number): string => {
-    if (isNaN(value)) return '';
+    if (isNaN(value)) return "";
     return formatter().format(value);
   };
 
@@ -169,12 +165,12 @@ export function createNumberFieldState(
     const p = getProps();
     if (hasCustomStep()) return p.step as number;
     // Default step for percent is 0.01
-    if (p.formatOptions?.style === 'percent') return 0.01;
+    if (p.formatOptions?.style === "percent") return 0.01;
     return 1;
   });
 
   // Internal signals
-  const [inputValue, setInputValueInternal] = createSignal<string>('');
+  const [inputValue, setInputValueInternal] = createSignal<string>("");
   const [numberValue, setNumberValue] = createSignal<number>(NaN);
 
   const applyConstraints = (value: number): number => {
@@ -242,7 +238,7 @@ export function createNumberFieldState(
 
   // Validate partial input
   const validate = (value: string): boolean => {
-    if (value === '' || value === '-') return true;
+    if (value === "" || value === "-") return true;
 
     // Allow partial decimal input like "1."
     const opts = formatOptions();
@@ -251,7 +247,7 @@ export function createNumberFieldState(
 
     // Check if it's a valid partial number
     const pattern = new RegExp(
-      `^-?\\d*${decimalSeparator === '.' ? '\\.' : decimalSeparator}?\\d*$`
+      `^-?\\d*${decimalSeparator === "." ? "\\." : decimalSeparator}?\\d*$`,
     );
     return pattern.test(value);
   };
@@ -266,14 +262,13 @@ export function createNumberFieldState(
   // Commit the current input value
   const commit = () => {
     ensureInitialized();
-    syncControlledValue();
     const p = getProps();
     const input = inputValue();
 
-    if (input === '' || input === '-') {
+    if (input === "" || input === "-") {
       // Clear value
       setNumberValue(NaN);
-      setInputValueInternal(p.value === undefined ? '' : formatNumber(actualNumberValue()));
+      setInputValueInternal(p.value === undefined ? "" : formatNumber(actualNumberValue()));
       p.onChange?.(NaN);
       return;
     }
@@ -308,7 +303,7 @@ export function createNumberFieldState(
     if (p.maxValue == null) return true;
     return (
       snapToStep(current, step(), p.minValue) > current ||
-      handleDecimalOperation('+', current, step()) <= p.maxValue
+      handleDecimalOperation("+", current, step()) <= p.maxValue
     );
   });
 
@@ -324,11 +319,11 @@ export function createNumberFieldState(
     if (p.minValue == null) return true;
     return (
       snapToStep(current, step(), p.minValue) < current ||
-      handleDecimalOperation('-', current, step()) >= p.minValue
+      handleDecimalOperation("-", current, step()) >= p.minValue
     );
   });
 
-  const safeNextStep = (operation: '+' | '-', minOrMaxValue: number = 0): number => {
+  const safeNextStep = (operation: "+" | "-", minOrMaxValue: number = 0): number => {
     const p = getProps();
     const parsed = parsedInputValue();
 
@@ -338,7 +333,7 @@ export function createNumberFieldState(
     }
 
     const snapped = snapToStep(parsed, step(), p.minValue);
-    if ((operation === '+' && snapped > parsed) || (operation === '-' && snapped < parsed)) {
+    if ((operation === "+" && snapped > parsed) || (operation === "-" && snapped < parsed)) {
       return clamp(snapped, p.minValue, p.maxValue);
     }
 
@@ -353,7 +348,7 @@ export function createNumberFieldState(
     const p = getProps();
     if (p.isDisabled || p.isReadOnly) return;
 
-    const current = safeNextStep('+', p.minValue);
+    const current = safeNextStep("+", p.minValue);
     setNumberValue(current);
     setInputValueInternal(formatNumber(current));
     p.onChange?.(current);
@@ -366,7 +361,7 @@ export function createNumberFieldState(
     const p = getProps();
     if (p.isDisabled || p.isReadOnly) return;
 
-    const current = safeNextStep('-', p.maxValue);
+    const current = safeNextStep("-", p.maxValue);
     setNumberValue(current);
     setInputValueInternal(formatNumber(current));
     p.onChange?.(current);

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

@@ -2,4 +2,4 @@ export {
   createNumberFieldState,
   type NumberFieldStateProps,
   type NumberFieldState,
-} from './createNumberFieldState';
+} 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

@@ -3,8 +3,8 @@
  * Based on @react-stately/overlays useOverlayTriggerState.
  */
 
-import { createSignal, type Accessor } from 'solid-js';
-import { access, type MaybeAccessor } from '../utils';
+import { createSignal, type Accessor } from "solid-js";
+import { access, type MaybeAccessor } from "../utils";
 
 export interface OverlayTriggerProps {
   /** Whether the overlay is open by default (uncontrolled). */
@@ -33,11 +33,10 @@ export interface OverlayTriggerState {
  * methods to toggle this state.
  */
 export function createOverlayTriggerState(
-  props: MaybeAccessor<OverlayTriggerProps> = {}
+  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> = () => {

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

@@ -2,4 +2,4 @@ export {
   createOverlayTriggerState,
   type OverlayTriggerProps,
   type OverlayTriggerState,
-} from './createOverlayTriggerState';
+} 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,19 +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';
+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';
-
-// ============================================
-// TYPES
-// ============================================
+} from "../form";
 
 export interface RadioGroupProps {
   /** The current selected value (controlled). */
@@ -43,7 +39,7 @@ 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. */
@@ -51,14 +47,21 @@ export interface RadioGroupProps {
   /** Handler that is called when the radio group's focus status changes. */
   onFocusChange?: (isFocused: boolean) => void;
   /** Backward-compatible controlled validation state. */
-  validationState?: 'valid' | 'invalid';
+  validationState?: "valid" | "invalid";
   /** Custom validation function. */
   validate?: ValidationFunction<string | null>;
   /** Validation behavior for the radio group. */
-  validationBehavior?: 'aria' | 'native';
+  validationBehavior?: "aria" | "native";
 }
 
-export interface RadioGroupState extends Pick<FormValidationState, 'realtimeValidation' | 'displayValidation' | 'updateValidation' | 'resetValidation' | 'commitValidation'> {
+export interface RadioGroupState extends Pick<
+  FormValidationState,
+  | "realtimeValidation"
+  | "displayValidation"
+  | "updateValidation"
+  | "resetValidation"
+  | "commitValidation"
+> {
   /** The name for the group, used for native form submission. */
   readonly name: string;
 
@@ -93,10 +96,6 @@ export interface RadioGroupState extends Pick<FormValidationState, 'realtimeVali
   readonly displayValidation: Accessor<ValidationResult>;
 }
 
-// ============================================
-// INTERNAL: SolidJS-specific sync mechanism
-// ============================================
-
 /**
  * Internal WeakMap to store sync version accessors for each radio group state.
  * This is used by createRadio to trigger DOM sync when native radio behavior
@@ -107,17 +106,11 @@ export interface RadioGroupState extends Pick<FormValidationState, 'realtimeVali
  */
 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
@@ -131,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);
 
@@ -140,16 +133,21 @@ 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();
   };
@@ -168,7 +166,7 @@ export function createRadioGroupState(
       return getProps().validate;
     },
     get validationBehavior() {
-      return getProps().validationBehavior ?? 'aria';
+      return getProps().validationBehavior ?? "native";
     },
     get name() {
       return getProps().name;

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