@proyecto-viviana/solidaria 0.2.5 → 0.3.0

package/src/radio/createRadioGroupState.ts

@@ -7,13 +7,9 @@
  * 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/reactivity';
-import { createId } from '../ssr';
-
-// ============================================
-// TYPES
-// ============================================
+import { createSignal, Accessor, untrack } from "solid-js";
+import { type MaybeAccessor, access } from "../utils/reactivity";
+import { createId } from "../ssr";
 
 export interface RadioGroupProps {
   /** The current selected value (controlled). */
@@ -37,7 +33,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. */
@@ -78,10 +74,6 @@ export interface RadioGroupState {
   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
@@ -92,31 +84,23 @@ 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
   // 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
+  // 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
+    initialProps.defaultValue ?? null,
   );
   const [lastFocusedValue, setLastFocusedValueInternal] = createSignal<string | null>(null);
 
@@ -125,26 +109,20 @@ export function createRadioGroupState(
   // 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) {
@@ -167,7 +145,6 @@ export function createRadioGroupState(
     }
   }
 
-  // Set last focused value
   function setLastFocusedValue(value: string | null): void {
     setLastFocusedValueInternal(value);
   }
@@ -193,7 +170,6 @@ export function createRadioGroupState(
     },
   };
 
-  // Store syncVersion in internal WeakMap (not part of public API)
   // This maintains API parity with React-Aria while supporting SolidJS's reactivity needs
   radioGroupSyncVersion.set(state, syncVersion);
 

package/src/radio/index.ts

@@ -1,10 +1,9 @@
-// Re-export state from solid-stately
 export {
   createRadioGroupState,
   radioGroupSyncVersion,
   type RadioGroupProps,
   type RadioGroupState,
-} from '@proyecto-viviana/solid-stately';
+} from "@proyecto-viviana/solid-stately";
 
 // ARIA hooks (solidaria-specific)
 // Radio Group
@@ -13,11 +12,7 @@ export {
   radioGroupData,
   type AriaRadioGroupProps,
   type RadioGroupAria,
-} from './createRadioGroup';
+} from "./createRadioGroup";
 
 // Radio
-export {
-  createRadio,
-  type AriaRadioProps,
-  type RadioAria,
-} from './createRadio';
+export { createRadio, type AriaRadioProps, type RadioAria } from "./createRadio";

package/src/searchfield/createSearchField.ts

@@ -1,186 +1,269 @@
-/**
- * Provides the behavior and accessibility implementation for a search field.
- * A search field allows a user to enter and clear a search query.
- * Based on @react-aria/searchfield useSearchField.
- */
-
-import { type JSX } from 'solid-js';
-import { createTextField, type AriaTextFieldProps, type TextFieldAria } from '../textfield';
-import { mergeProps } from '../utils';
-import { type MaybeAccessor, access } from '../utils/reactivity';
-import type { SearchFieldState } from '@proyecto-viviana/solid-stately';
-
-export interface AriaSearchFieldProps extends Omit<AriaTextFieldProps, 'type'> {
-  /** Handler that is called when the user submits the search (pressing Enter). */
-  onSubmit?: (value: string) => void;
-  /** Handler that is called when the clear button is pressed or Escape clears the field. */
-  onClear?: () => void;
-}
-
-export interface SearchFieldAria extends Omit<TextFieldAria, 'inputProps'> {
-  /** Props for the input element. */
-  inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
-  /** Props for the clear button. */
-  clearButtonProps: {
-    'aria-label': string;
-    tabIndex: number;
-    disabled?: boolean;
-    onMouseDown: (e: MouseEvent) => void;
-    onClick: () => void;
-  };
-}
-
-/**
- * Provides the behavior and accessibility implementation for a search field.
- */
-export function createSearchField(
-  props: MaybeAccessor<AriaSearchFieldProps>,
-  state: SearchFieldState,
-  inputRef?: () => HTMLInputElement | null
-): SearchFieldAria {
-  const getProps = () => access(props);
-
-  // Use createTextField for the base implementation
-  const textFieldAria = createTextField({
-    get value() {
-      return state.value();
-    },
-    get isDisabled() {
-      return getProps().isDisabled;
-    },
-    get isReadOnly() {
-      return getProps().isReadOnly;
-    },
-    get isRequired() {
-      return getProps().isRequired;
-    },
-    get isInvalid() {
-      return getProps().isInvalid;
-    },
-    get label() {
-      return getProps().label;
-    },
-    get 'aria-label'() {
-      return getProps()['aria-label'];
-    },
-    get 'aria-labelledby'() {
-      return getProps()['aria-labelledby'];
-    },
-    get 'aria-describedby'() {
-      return getProps()['aria-describedby'];
-    },
-    get description() {
-      return getProps().description;
-    },
-    get errorMessage() {
-      return getProps().errorMessage;
-    },
-    get placeholder() {
-      return getProps().placeholder;
-    },
-    get name() {
-      return getProps().name;
-    },
-    get autoFocus() {
-      return getProps().autoFocus;
-    },
-    get autoComplete() {
-      return getProps().autoComplete;
-    },
-    get maxLength() {
-      return getProps().maxLength;
-    },
-    get minLength() {
-      return getProps().minLength;
-    },
-    get pattern() {
-      return getProps().pattern;
-    },
-    type: 'search',
-    onChange: (value: string) => {
-      state.setValue(value);
-      getProps().onChange?.(value);
-    },
-  });
-
-  // Handle keyboard events for search field
-  const onKeyDown: JSX.EventHandler<HTMLInputElement, KeyboardEvent> = (e) => {
-    const p = getProps();
-
-    if (p.isDisabled || p.isReadOnly) {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-      }
-      return;
-    }
-
-    if (e.key === 'Enter' && p.onSubmit) {
-      e.preventDefault();
-      p.onSubmit(state.value());
-    }
-
-    if (e.key === 'Escape') {
-      const currentValue = state.value();
-      const inputValue = inputRef?.()?.value ?? '';
-
-      // Only clear if there's a value
-      if (currentValue !== '' || inputValue !== '') {
-        e.preventDefault();
-        e.stopPropagation();
-        state.setValue('');
-        p.onClear?.();
-      }
-    }
-  };
-
-  // Handle clear button click
-  const onClearButtonClick = () => {
-    const p = getProps();
-    state.setValue('');
-    p.onClear?.();
-    // Focus the input after clearing
-    inputRef?.()?.focus();
-  };
-
-  // Prevent focus from leaving input on mobile when clicking clear button
-  const onClearButtonMouseDown = (e: MouseEvent) => {
-    e.preventDefault();
-  };
-
-  return {
-    get labelProps() {
-      return textFieldAria.labelProps;
-    },
-    get inputProps() {
-      return mergeProps(
-        textFieldAria.inputProps as Record<string, unknown>,
-        {
-          onKeyDown,
-          // Clear defaultValue since it's handled by state
-          defaultValue: undefined,
-        } as Record<string, unknown>
-      ) as JSX.InputHTMLAttributes<HTMLInputElement>;
-    },
-    get clearButtonProps() {
-      const p = getProps();
-      const isDisabled = p.isDisabled || p.isReadOnly;
-
-      return {
-        'aria-label': 'Clear search',
-        tabIndex: -1, // Exclude from tab order
-        disabled: isDisabled,
-        onMouseDown: onClearButtonMouseDown,
-        onClick: onClearButtonClick,
-      };
-    },
-    get descriptionProps() {
-      return textFieldAria.descriptionProps;
-    },
-    get errorMessageProps() {
-      return textFieldAria.errorMessageProps;
-    },
-    get isInvalid() {
-      return textFieldAria.isInvalid;
-    },
-  };
-}
+/**
+ * Provides the behavior and accessibility implementation for a search field.
+ * A search field allows a user to enter and clear a search query.
+ * Based on @react-aria/searchfield useSearchField.
+ */
+
+import { type JSX } from "solid-js";
+import { createTextField, type AriaTextFieldProps, type TextFieldAria } from "../textfield";
+import { mergeProps } from "../utils";
+import { type MaybeAccessor, access } from "../utils/reactivity";
+import type { SearchFieldState } from "@proyecto-viviana/solid-stately";
+
+export interface AriaSearchFieldProps extends AriaTextFieldProps {
+  /** Handler that is called when the user submits the search (pressing Enter). */
+  onSubmit?: (value: string) => void;
+  /** Handler that is called when the clear button is pressed or Escape clears the field. */
+  onClear?: () => void;
+}
+
+export interface SearchFieldAria extends Omit<TextFieldAria, "inputProps"> {
+  /** Props for the input element. */
+  inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
+  /** Props for the clear button. */
+  clearButtonProps: {
+    "aria-label": string;
+    tabIndex: number;
+    disabled?: boolean;
+    onMouseDown: (e: MouseEvent) => void;
+    onClick: () => void;
+  };
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a search field.
+ */
+export function createSearchField(
+  props: MaybeAccessor<AriaSearchFieldProps>,
+  state: SearchFieldState,
+  inputRef?: () => HTMLInputElement | null,
+): SearchFieldAria {
+  const getProps = () => access(props);
+
+  const setValue = (value: string) => {
+    if (state.value() === value) {
+      return;
+    }
+
+    state.setValue(value);
+    getProps().onChange?.(value);
+  };
+
+  // Use createTextField for the base implementation
+  const textFieldAria = createTextField({
+    get value() {
+      return state.value();
+    },
+    get isDisabled() {
+      return getProps().isDisabled;
+    },
+    get isReadOnly() {
+      return getProps().isReadOnly;
+    },
+    get isRequired() {
+      return getProps().isRequired;
+    },
+    get isInvalid() {
+      return getProps().isInvalid;
+    },
+    get label() {
+      return getProps().label;
+    },
+    get "aria-label"() {
+      return getProps()["aria-label"];
+    },
+    get "aria-labelledby"() {
+      return getProps()["aria-labelledby"];
+    },
+    get "aria-describedby"() {
+      return getProps()["aria-describedby"];
+    },
+    get description() {
+      return getProps().description;
+    },
+    get errorMessage() {
+      return getProps().errorMessage;
+    },
+    get placeholder() {
+      return getProps().placeholder;
+    },
+    get name() {
+      return getProps().name;
+    },
+    get form() {
+      return getProps().form;
+    },
+    get validationBehavior() {
+      return getProps().validationBehavior ?? "native";
+    },
+    get type() {
+      return getProps().type ?? "search";
+    },
+    get autoFocus() {
+      return getProps().autoFocus;
+    },
+    get excludeFromTabOrder() {
+      return getProps().excludeFromTabOrder;
+    },
+    get autoComplete() {
+      return getProps().autoComplete;
+    },
+    get inputMode() {
+      return getProps().inputMode;
+    },
+    get enterKeyHint() {
+      return getProps().enterKeyHint;
+    },
+    get autoCorrect() {
+      return getProps().autoCorrect;
+    },
+    get autoCapitalize() {
+      return getProps().autoCapitalize;
+    },
+    get spellCheck() {
+      return getProps().spellCheck;
+    },
+    get maxLength() {
+      return getProps().maxLength;
+    },
+    get minLength() {
+      return getProps().minLength;
+    },
+    get pattern() {
+      return getProps().pattern;
+    },
+    get onFocus() {
+      return getProps().onFocus;
+    },
+    get onBlur() {
+      return getProps().onBlur;
+    },
+    get onFocusChange() {
+      return getProps().onFocusChange;
+    },
+    get onKeyDown() {
+      return getProps().onKeyDown;
+    },
+    get onKeyUp() {
+      return getProps().onKeyUp;
+    },
+    get onCopy() {
+      return getProps().onCopy;
+    },
+    get onCut() {
+      return getProps().onCut;
+    },
+    get onPaste() {
+      return getProps().onPaste;
+    },
+    get onCompositionStart() {
+      return getProps().onCompositionStart;
+    },
+    get onCompositionEnd() {
+      return getProps().onCompositionEnd;
+    },
+    get onCompositionUpdate() {
+      return getProps().onCompositionUpdate;
+    },
+    get onSelect() {
+      return getProps().onSelect;
+    },
+    get onBeforeInput() {
+      return getProps().onBeforeInput;
+    },
+    get onInput() {
+      return getProps().onInput;
+    },
+    onChange: setValue,
+  });
+
+  // Handle keyboard events for search field
+  const onKeyDown: JSX.EventHandler<HTMLInputElement, KeyboardEvent> = (e) => {
+    const p = getProps();
+
+    if (p.isDisabled || p.isReadOnly) {
+      if (e.key === "Enter") {
+        e.preventDefault();
+      }
+      return;
+    }
+
+    if (e.key === "Enter" && p.onSubmit) {
+      e.preventDefault();
+      p.onSubmit(state.value());
+    }
+
+    if (e.key === "Escape") {
+      const currentValue = state.value();
+      const inputValue = inputRef?.()?.value ?? "";
+
+      // Only clear if there's a value
+      if (currentValue !== "" || inputValue !== "") {
+        e.preventDefault();
+        e.stopPropagation();
+        const input = inputRef?.();
+        if (input) {
+          input.value = "";
+        }
+        setValue("");
+        p.onClear?.();
+      }
+    }
+  };
+
+  // Handle clear button click
+  const onClearButtonClick = () => {
+    const p = getProps();
+    if (p.isDisabled || p.isReadOnly) return;
+    const input = inputRef?.();
+    if (input) {
+      input.value = "";
+    }
+    setValue("");
+    p.onClear?.();
+    // Focus the input after clearing
+    inputRef?.()?.focus();
+  };
+
+  // Prevent focus from leaving input on mobile when clicking clear button
+  const onClearButtonMouseDown = (e: MouseEvent) => {
+    e.preventDefault();
+  };
+
+  return {
+    get labelProps() {
+      return textFieldAria.labelProps;
+    },
+    get inputProps() {
+      return mergeProps(
+        {
+          onKeyDown,
+          // Clear defaultValue since it's handled by state
+          defaultValue: undefined,
+        } as Record<string, unknown>,
+        textFieldAria.inputProps as Record<string, unknown>,
+      ) as JSX.InputHTMLAttributes<HTMLInputElement>;
+    },
+    get clearButtonProps() {
+      const p = getProps();
+      const isDisabled = p.isDisabled || p.isReadOnly;
+
+      return {
+        "aria-label": "Clear search",
+        tabIndex: -1, // Exclude from tab order
+        disabled: isDisabled,
+        onMouseDown: onClearButtonMouseDown,
+        onClick: onClearButtonClick,
+      };
+    },
+    get descriptionProps() {
+      return textFieldAria.descriptionProps;
+    },
+    get errorMessageProps() {
+      return textFieldAria.errorMessageProps;
+    },
+    get isInvalid() {
+      return textFieldAria.isInvalid;
+    },
+  };
+}

package/src/searchfield/index.ts

@@ -1,2 +1,2 @@
-export { createSearchField } from './createSearchField';
-export type { AriaSearchFieldProps, SearchFieldAria } from './createSearchField';
+export { createSearchField } from "./createSearchField";
+export type { AriaSearchFieldProps, SearchFieldAria } from "./createSearchField";