@proyecto-viviana/solid-stately 0.0.1 → 0.0.3

package/src/checkbox/createCheckboxGroupState.ts

@@ -0,0 +1,193 @@
+/**
+ * Checkbox group state for Solid Stately
+ *
+ * Provides state management for a checkbox group component.
+ * Provides a name for the group, and manages selection and focus state.
+ *
+ * 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
+// ============================================
+
+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;
+}
+
+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;
+}
+
+// ============================================
+// IMPLEMENTATION
+// ============================================
+
+/**
+ * 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> = {}
+): 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;
+
+  // Get current value
+  const value: Accessor<readonly string[]> = () => {
+    const p = getProps();
+    return isControlled() ? (p.value ?? []) : 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;
+  };
+
+  // Set value
+  function setValue(newValue: string[]): void {
+    const p = getProps();
+    if (p.isReadOnly || p.isDisabled) {
+      return;
+    }
+
+    if (!isControlled()) {
+      setInternalValue(newValue);
+    }
+
+    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) {
+      return;
+    }
+
+    const current = value();
+    if (!current.includes(addVal)) {
+      setValue([...current, addVal]);
+    }
+  }
+
+  // Remove value
+  function removeValue(removeVal: string): void {
+    const p = getProps();
+    if (p.isReadOnly || p.isDisabled) {
+      return;
+    }
+
+    const current = value();
+    if (current.includes(removeVal)) {
+      setValue(current.filter((v) => v !== removeVal));
+    }
+  }
+
+  // Toggle value
+  function toggleValue(toggleVal: string): void {
+    const p = getProps();
+    if (p.isReadOnly || p.isDisabled) {
+      return;
+    }
+
+    const current = value();
+    if (current.includes(toggleVal)) {
+      setValue(current.filter((v) => v !== toggleVal));
+    } else {
+      setValue([...current, toggleVal]);
+    }
+  }
+
+  return {
+    value,
+    defaultValue: initialProps.defaultValue ?? initialValue,
+    get isDisabled() {
+      return getProps().isDisabled ?? false;
+    },
+    get isReadOnly() {
+      return getProps().isReadOnly ?? false;
+    },
+    get isInvalid() {
+      return isInvalid();
+    },
+    isRequired,
+    isSelected,
+    setValue,
+    addValue,
+    removeValue,
+    toggleValue,
+  };
+}

package/src/checkbox/index.ts

@@ -0,0 +1,5 @@
+export {
+  createCheckboxGroupState,
+  type CheckboxGroupProps,
+  type CheckboxGroupState,
+} from './createCheckboxGroupState';

package/src/index.ts

@@ -0,0 +1,34 @@
+// Toggle
+export {
+  createToggleState,
+  type ToggleStateOptions,
+  type ToggleState,
+} from './toggle';
+
+// TextField
+export {
+  createTextFieldState,
+  type TextFieldStateOptions,
+  type TextFieldState,
+} from './textfield';
+
+// Checkbox
+export {
+  createCheckboxGroupState,
+  type CheckboxGroupProps,
+  type CheckboxGroupState,
+} from './checkbox';
+
+// Radio
+export {
+  createRadioGroupState,
+  radioGroupSyncVersion,
+  type RadioGroupProps,
+  type RadioGroupState,
+} from './radio';
+
+// SSR
+export { createIsSSR, createId, canUseDOM } from './ssr';
+
+// Utils
+export { access, isAccessor, type MaybeAccessor, type MaybeAccessorValue } from './utils';

package/src/radio/createRadioGroupState.ts

@@ -0,0 +1,201 @@
+/**
+ * Radio group state for Solid Stately
+ *
+ * Provides state management for a radio group component.
+ * Provides a name for the group, and manages selection and focus state.
+ *
+ * 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
+// ============================================
+
+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;
+}
+
+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;
+}
+
+// ============================================
+// 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
+ * causes the DOM checked state to desync from our reactive state.
+ *
+ * This is kept separate from RadioGroupState to maintain API parity with React-Stately.
+ * @internal
+ */
+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 {
+  const getProps = () => access(props);
+
+  // Get initial props using untrack to avoid setting up dependencies
+  // This ensures we capture the initial defaultValue without reactivity issues
+  const initialProps = untrack(() => getProps());
+
+  // Generate name - preserved for backward compatibility
+  // React Aria now generates the name instead of stately
+  const name = initialProps.name || `radio-group-${createId()}`;
+
+  // 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
+  );
+  const [lastFocusedValue, setLastFocusedValueInternal] = createSignal<string | null>(null);
+
+  // SolidJS-specific: Version counter for triggering DOM sync across all radios
+  // This handles the case where native radio behavior causes DOM state to desync
+  // from our reactive state (e.g., clicking a radio unchecks siblings in the DOM)
+  const [syncVersion, setSyncVersion] = createSignal(0);
+
+  // Determine if controlled - must be reactive to handle dynamic props
+  const isControlled = () => getProps().value !== 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;
+    }
+    return internalValue();
+  };
+
+  // Check if invalid
+  const isInvalid = () => {
+    return getProps().isInvalid ?? false;
+  };
+
+  // Set value
+  function setSelectedValue(value: string | null): void {
+    const p = getProps();
+    if (p.isReadOnly || p.isDisabled) {
+      return;
+    }
+
+    // Always increment syncVersion to trigger DOM sync across all radios
+    // This is crucial for SolidJS because:
+    // 1. Native radio behavior unchecks siblings when one is checked
+    // 2. In controlled mode, isSelected() may not change even though DOM changed
+    // 3. We need ALL radios to re-sync their checked state after any click
+    setSyncVersion((v) => v + 1);
+
+    if (!isControlled()) {
+      setInternalValue(value);
+    }
+
+    if (value != null) {
+      p.onChange?.(value);
+    }
+  }
+
+  // Set last focused value
+  function setLastFocusedValue(value: string | null): void {
+    setLastFocusedValueInternal(value);
+  }
+
+  const state: RadioGroupState = {
+    name,
+    selectedValue,
+    defaultSelectedValue: initialProps.defaultValue ?? null,
+    setSelectedValue,
+    lastFocusedValue,
+    setLastFocusedValue,
+    get isDisabled() {
+      return getProps().isDisabled ?? false;
+    },
+    get isReadOnly() {
+      return getProps().isReadOnly ?? false;
+    },
+    get isRequired() {
+      return getProps().isRequired ?? false;
+    },
+    get isInvalid() {
+      return isInvalid();
+    },
+  };
+
+  // Store syncVersion in internal WeakMap (not part of public API)
+  // This maintains API parity with React-Stately while supporting SolidJS's reactivity needs
+  radioGroupSyncVersion.set(state, syncVersion);
+
+  return state;
+}

package/src/radio/index.ts

@@ -0,0 +1,6 @@
+export {
+  createRadioGroupState,
+  radioGroupSyncVersion,
+  type RadioGroupProps,
+  type RadioGroupState,
+} from './createRadioGroupState';

package/{dist/ssr/index.d.ts → src/ssr/index.ts}

@@ -4,20 +4,33 @@
  * SolidJS has built-in SSR support with `isServer` and `createUniqueId()`.
  * These utilities provide a consistent API matching React-Stately's patterns.
  */
+
+import { createUniqueId } from 'solid-js';
+import { isServer } from 'solid-js/web';
+
 /**
  * Returns whether the component is currently being server side rendered.
  * Can be used to delay browser-specific rendering until after hydration.
  */
-export declare function createIsSSR(): boolean;
+export function createIsSSR(): boolean {
+  return isServer;
+}
+
 /**
  * Generate a unique ID that is stable across server and client.
  * Uses SolidJS's built-in createUniqueId which handles SSR correctly.
  *
  * @param defaultId - Optional default ID to use instead of generating one.
  */
-export declare function createId(defaultId?: string): string;
+export function createId(defaultId?: string): string {
+  if (defaultId) {
+    return defaultId;
+  }
+  return `solid-stately-${createUniqueId()}`;
+}
+
 /**
  * Check if we can use DOM APIs.
  * This is useful for code that needs to run only in the browser.
  */
-export declare const canUseDOM: boolean;
+export const canUseDOM = !isServer;

package/src/textfield/createTextFieldState.ts

@@ -0,0 +1,75 @@
+/**
+ * TextField state for Solid Stately
+ *
+ * Provides state management for text input components.
+ *
+ * This is a port of @react-stately/utils's useControlledState pattern
+ * as used by @react-aria/textfield.
+ */
+
+import { createSignal, Accessor } from 'solid-js';
+import { type MaybeAccessor, access } from '../utils';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface TextFieldStateOptions {
+  /** 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 TextFieldState {
+  /** The current value of the text field. */
+  readonly value: Accessor<string>;
+  /** Sets the value of the text field. */
+  setValue(value: string): void;
+}
+
+// ============================================
+// IMPLEMENTATION
+// ============================================
+
+/**
+ * Provides state management for text input components.
+ * Supports both controlled and uncontrolled modes.
+ */
+export function createTextFieldState(props: MaybeAccessor<TextFieldStateOptions> = {}): TextFieldState {
+  const getProps = () => access(props);
+
+  // Get initial value
+  const initialProps = getProps();
+  const initialValue = initialProps.value ?? initialProps.defaultValue ?? '';
+
+  // Create internal signal for uncontrolled mode
+  const [internalValue, setInternalValue] = createSignal(initialValue);
+
+  // Determine if controlled
+  const isControlled = () => getProps().value !== undefined;
+
+  // Get current value
+  const value: Accessor<string> = () => {
+    const p = getProps();
+    return isControlled() ? (p.value ?? '') : internalValue();
+  };
+
+  // Update value
+  function setValue(newValue: string): void {
+    const p = getProps();
+
+    if (!isControlled()) {
+      setInternalValue(newValue);
+    }
+
+    p.onChange?.(newValue);
+  }
+
+  return {
+    value,
+    setValue,
+  };
+}

package/src/textfield/index.ts

@@ -0,0 +1,5 @@
+export {
+  createTextFieldState,
+  type TextFieldStateOptions,
+  type TextFieldState,
+} from './createTextFieldState';

package/src/toggle/createToggleState.ts

@@ -0,0 +1,94 @@
+/**
+ * Toggle state for Solid Stately
+ *
+ * Provides state management for toggle components like checkboxes and switches.
+ *
+ * This is a 1:1 port of @react-stately/toggle's useToggleState.
+ */
+
+import { createSignal, Accessor } from 'solid-js';
+import { type MaybeAccessor, access } from '../utils';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface ToggleStateOptions {
+  /** Whether the element should be selected (controlled). */
+  isSelected?: boolean;
+  /** Whether the element should be selected by default (uncontrolled). */
+  defaultSelected?: boolean;
+  /** Handler that is called when the element's selection state changes. */
+  onChange?: (isSelected: boolean) => void;
+  /** Whether the element is read only. */
+  isReadOnly?: boolean;
+}
+
+export interface ToggleState {
+  /** Whether the toggle is selected. */
+  readonly isSelected: Accessor<boolean>;
+  /** Whether the toggle is selected by default. */
+  readonly defaultSelected: boolean;
+  /** Updates selection state. */
+  setSelected(isSelected: boolean): void;
+  /** Toggle the selection state. */
+  toggle(): void;
+}
+
+// ============================================
+// IMPLEMENTATION
+// ============================================
+
+/**
+ * Provides state management for toggle components like checkboxes and switches.
+ */
+export function createToggleState(props: MaybeAccessor<ToggleStateOptions> = {}): ToggleState {
+  const getProps = () => access(props);
+
+  // Get initial values
+  const initialProps = getProps();
+  const initialSelected = initialProps.isSelected ?? initialProps.defaultSelected ?? false;
+
+  // Create internal signal for uncontrolled mode
+  const [internalSelected, setInternalSelected] = createSignal(initialSelected);
+
+  // Determine if controlled
+  const isControlled = () => getProps().isSelected !== undefined;
+
+  // Get current selection state
+  const isSelected: Accessor<boolean> = () => {
+    const p = getProps();
+    return isControlled() ? (p.isSelected ?? false) : internalSelected();
+  };
+
+  // Update selection state
+  function setSelected(value: boolean): void {
+    const p = getProps();
+    if (p.isReadOnly) {
+      return;
+    }
+
+    if (!isControlled()) {
+      setInternalSelected(value);
+    }
+
+    p.onChange?.(value);
+  }
+
+  // Toggle selection state
+  function toggle(): void {
+    const p = getProps();
+    if (p.isReadOnly) {
+      return;
+    }
+
+    setSelected(!isSelected());
+  }
+
+  return {
+    isSelected,
+    defaultSelected: initialProps.defaultSelected ?? initialSelected,
+    setSelected,
+    toggle,
+  };
+}

package/src/toggle/index.ts

@@ -0,0 +1,5 @@
+export {
+  createToggleState,
+  type ToggleStateOptions,
+  type ToggleState,
+} from './createToggleState';

package/{dist/utils/reactivity.d.ts → src/utils/reactivity.ts}

@@ -3,12 +3,15 @@
  *
  * Provides type-safe utilities for working with SolidJS reactivity patterns.
  */
+
 import { Accessor } from 'solid-js';
+
 /**
  * A value that may be either a raw value or an accessor function.
  * This is a common pattern in SolidJS for props that may be reactive.
  */
 export type MaybeAccessor<T> = T | Accessor<T>;
+
 /**
  * Unwraps a MaybeAccessor to get the underlying value.
  * If the input is a function, it calls it to get the value.
@@ -16,12 +19,18 @@ export type MaybeAccessor<T> = T | Accessor<T>;
  *
  * @param value - The value or accessor to unwrap.
  */
-export declare function access<T>(value: MaybeAccessor<T>): T;
+export function access<T>(value: MaybeAccessor<T>): T {
+  return typeof value === 'function' ? (value as Accessor<T>)() : value;
+}
+
 /**
  * A value that may be undefined or an accessor that returns the value or undefined.
  */
 export type MaybeAccessorValue<T> = T | undefined | Accessor<T | undefined>;
+
 /**
  * Checks if a value is an accessor function.
  */
-export declare function isAccessor<T>(value: MaybeAccessor<T>): value is Accessor<T>;
+export function isAccessor<T>(value: MaybeAccessor<T>): value is Accessor<T> {
+  return typeof value === 'function';
+}