@proyecto-viviana/solidaria 0.0.1 → 0.0.2

package/src/radio/createRadio.ts

@@ -0,0 +1,286 @@
+/**
+ * Radio hook for Solidaria
+ *
+ * Provides the behavior and accessibility implementation for an individual
+ * radio button in a radio group.
+ *
+ * This is a 1:1 port of @react-aria/radio's useRadio hook.
+ */
+
+import { JSX, Accessor, createEffect } from 'solid-js';
+import { createPress } from '../interactions/createPress';
+import { createFocusable } from '../interactions/createFocusable';
+import { mergeProps } from '../utils/mergeProps';
+import { filterDOMProps } from '../utils/filterDOMProps';
+import { type MaybeAccessor, access } from '../utils/reactivity';
+import { type RadioGroupState, radioGroupSyncVersion } from '@proyecto-viviana/solid-stately';
+import { radioGroupData } from './createRadioGroup';
+import { type PressEvent } from '../interactions/PressEvent';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface AriaRadioProps {
+  /** The value of the radio button, used when submitting an HTML form. */
+  value: string;
+  /** Whether the radio button is disabled. */
+  isDisabled?: boolean;
+  /** The label for the radio button. */
+  children?: JSX.Element;
+  /** Defines a string value that labels the current element. */
+  'aria-label'?: string;
+  /** Identifies the element (or elements) that labels the current element. */
+  'aria-labelledby'?: string;
+  /** Identifies the element (or elements) that describes the object. */
+  'aria-describedby'?: string;
+  /** Handler that is called when the press is released over the target. */
+  onPress?: (e: PressEvent) => void;
+  /** Handler that is called when a press interaction starts. */
+  onPressStart?: (e: PressEvent) => void;
+  /** Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. */
+  onPressEnd?: (e: PressEvent) => void;
+  /** Handler that is called when the press state changes. */
+  onPressChange?: (isPressed: boolean) => void;
+  /** Handler that is called when a press is released over the target, regardless of whether it started on the target or not. */
+  onPressUp?: (e: PressEvent) => void;
+  /** Handler that is called when the element is clicked. */
+  onClick?: (e: MouseEvent) => void;
+  /** Handler that is called when the element receives focus. */
+  onFocus?: (e: FocusEvent) => void;
+  /** Handler that is called when the element loses focus. */
+  onBlur?: (e: FocusEvent) => void;
+  /** Handler that is called when the element's focus status changes. */
+  onFocusChange?: (isFocused: boolean) => void;
+  /** Handler that is called when a key is pressed. */
+  onKeyDown?: (e: KeyboardEvent) => void;
+  /** Handler that is called when a key is released. */
+  onKeyUp?: (e: KeyboardEvent) => void;
+  /** Whether to autofocus the element. */
+  autoFocus?: boolean;
+}
+
+export interface RadioAria {
+  /** Props for the label wrapper element. */
+  labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
+  /** Props for the input element. */
+  inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
+  /** Whether the radio is disabled. */
+  isDisabled: boolean;
+  /** Whether the radio is currently selected. */
+  isSelected: Accessor<boolean>;
+  /** Whether the radio is in a pressed state. */
+  isPressed: Accessor<boolean>;
+}
+
+// ============================================
+// IMPLEMENTATION
+// ============================================
+
+/**
+ * Provides the behavior and accessibility implementation for an individual
+ * radio button in a radio group.
+ */
+export function createRadio(
+  props: MaybeAccessor<AriaRadioProps>,
+  state: RadioGroupState,
+  ref: () => HTMLInputElement | null
+): RadioAria {
+  const getProps = () => access(props);
+
+  const isDisabled = () => getProps().isDisabled || state.isDisabled;
+  const value = () => getProps().value;
+  const isSelected: Accessor<boolean> = () => {
+    const selected = state.selectedValue();
+    const v = value();
+    return selected === v;
+  };
+
+  // Warn if no accessible label
+  createEffect(() => {
+    const p = getProps();
+    const hasChildren = p.children != null;
+    const hasAriaLabel = p['aria-label'] != null || p['aria-labelledby'] != null;
+    if (!hasChildren && !hasAriaLabel && process.env.NODE_ENV !== 'production') {
+      console.warn('If you do not provide children, you must specify an aria-label for accessibility');
+    }
+  });
+
+  // SolidJS-specific: Sync DOM checked state whenever selection changes
+  // This handles:
+  // 1. Initial render with controlled value
+  // 2. Controlled mode where parent doesn't update value after click
+  // 3. Native radio group behavior (clicking one unchecks others)
+  //
+  // Unlike React's VDOM reconciliation that re-applies all props on every render,
+  // SolidJS only updates when signals change. Native radio behavior can change
+  // the DOM checked state without our knowledge, so we need to actively sync.
+  //
+  // We track `syncVersion` to ensure this effect runs on EVERY selection attempt,
+  // even in controlled mode where isSelected() may not change.
+  createEffect(() => {
+    const inputEl = ref();
+    if (!inputEl) return;
+
+    // Track syncVersion to trigger on any selection attempt
+    // This is crucial for controlled mode where isSelected() may not change
+    // syncVersion is stored in an internal WeakMap to maintain API parity with React-Aria
+    const syncVersion = radioGroupSyncVersion.get(state);
+    syncVersion?.();
+
+    // Read the reactive state to establish tracking and get current value
+    const shouldBeChecked = isSelected();
+
+    // Sync the DOM checked state immediately
+    if (inputEl.checked !== shouldBeChecked) {
+      inputEl.checked = shouldBeChecked;
+    }
+  });
+
+  // Handle input change
+  // SolidJS-specific: Unlike React, the input's `checked` state can get out of sync
+  // with our reactive state. This happens because:
+  // 1. A readonly `<input type="radio" />` is always "checkable" in the browser
+  // 2. Even controlled inputs (`<input checked={isChecked} />`) will change their
+  //    internal `checked` state when clicked, regardless of what the signal says
+  //
+  // To prevent this, we force the input's `checked` DOM property to match our state
+  // after processing the change. This is the pattern used by Kobalte and other
+  // SolidJS component libraries.
+  const onChange: JSX.EventHandler<HTMLInputElement, Event> = (e) => {
+    e.stopPropagation();
+
+    const target = e.target as HTMLInputElement;
+
+    // Guard against disabled state - JSDOM's fireEvent may bypass disabled check
+    if (isDisabled()) {
+      target.checked = isSelected();
+      return;
+    }
+
+    state.setSelectedValue(value());
+
+    // Focus the input when clicked
+    // In real browsers this happens automatically, but JSDOM/fireEvent doesn't trigger it
+    target.focus();
+
+    // Force the DOM checked state to match our reactive state
+    // This handles controlled mode where the parent might not update the value
+    target.checked = isSelected();
+  };
+
+  // Handle press state for keyboard interactions and cases where labelProps is not used.
+  const { pressProps, isPressed } = createPress({
+    get onPressStart() { return getProps().onPressStart; },
+    get onPressEnd() { return getProps().onPressEnd; },
+    get onPressChange() { return getProps().onPressChange; },
+    get onPress() { return getProps().onPress; },
+    get onPressUp() { return getProps().onPressUp; },
+    get isDisabled() { return isDisabled(); },
+  });
+
+  // Handle press state on the label.
+  const { pressProps: labelPressProps, isPressed: isLabelPressed } = createPress({
+    get onPressStart() { return getProps().onPressStart; },
+    get onPressEnd() { return getProps().onPressEnd; },
+    get onPressChange() { return getProps().onPressChange; },
+    get onPressUp() { return getProps().onPressUp; },
+    onPress(e: PressEvent) {
+      getProps().onPress?.(e);
+      state.setSelectedValue(value());
+      ref()?.focus();
+    },
+    get isDisabled() { return isDisabled(); },
+  });
+
+  // Handle focusable
+  const { focusableProps } = createFocusable({
+    get isDisabled() { return isDisabled(); },
+    get autoFocus() { return getProps().autoFocus; },
+    onFocus(e: FocusEvent) {
+      getProps().onFocus?.(e);
+      state.setLastFocusedValue(value());
+    },
+    get onBlur() { return getProps().onBlur; },
+    get onFocusChange() { return getProps().onFocusChange; },
+    get onKeyDown() { return getProps().onKeyDown; },
+    get onKeyUp() { return getProps().onKeyUp; },
+  }, ref as unknown as (el: HTMLElement) => void);
+
+  // Combine press and focusable props for input
+  const interactions = mergeProps(pressProps, focusableProps);
+
+  // Filter DOM props
+  const domProps = () => filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true });
+
+  // Calculate tabIndex based on selection and focus state
+  const getTabIndex = (): number | undefined => {
+    if (isDisabled()) {
+      return undefined;
+    }
+
+    const selected = state.selectedValue();
+    const lastFocused = state.lastFocusedValue();
+    const currentValue = value();
+
+    if (selected != null) {
+      // If there's a selection, only the selected radio is focusable
+      if (selected === currentValue) {
+        return 0;
+      }
+      return -1;
+    } else {
+      // If no selection, the last focused or first radio is focusable
+      if (lastFocused === currentValue || lastFocused == null) {
+        return 0;
+      }
+      return -1;
+    }
+  };
+
+  // Get group data
+  const getGroupData = () => radioGroupData.get(state);
+
+  // Combined pressed state
+  const combinedIsPressed: Accessor<boolean> = () => isPressed() || isLabelPressed();
+
+  return {
+    labelProps: mergeProps(labelPressProps, {
+      onClick: (e: MouseEvent) => e.preventDefault(),
+      onMouseDown: (e: MouseEvent) => e.preventDefault(),
+    }),
+    get inputProps() {
+      const p = getProps();
+      const groupData = getGroupData();
+
+      // Build aria-describedby
+      const describedByIds: string[] = [];
+      if (p['aria-describedby']) {
+        describedByIds.push(p['aria-describedby']);
+      }
+      if (state.isInvalid && groupData?.errorMessageId) {
+        describedByIds.push(groupData.errorMessageId);
+      }
+      if (groupData?.descriptionId) {
+        describedByIds.push(groupData.descriptionId);
+      }
+      const ariaDescribedBy = describedByIds.length > 0 ? describedByIds.join(' ') : undefined;
+
+      return mergeProps(domProps(), interactions, {
+        type: 'radio' as const,
+        name: groupData?.name,
+        form: groupData?.form,
+        tabIndex: getTabIndex(),
+        disabled: isDisabled(),
+        required: state.isRequired && groupData?.validationBehavior === 'native',
+        checked: isSelected(),
+        value: value(),
+        onChange,
+        'aria-describedby': ariaDescribedBy,
+      }) as JSX.InputHTMLAttributes<HTMLInputElement>;
+    },
+    isDisabled: isDisabled(),
+    isSelected,
+    isPressed: combinedIsPressed,
+  };
+}

package/src/radio/createRadioGroup.ts

@@ -0,0 +1,189 @@
+/**
+ * Radio group hook for Solidaria
+ *
+ * Provides the behavior and accessibility implementation for a radio group component.
+ * Radio groups allow users to select a single item from a list of mutually exclusive options.
+ *
+ * This is a 1:1 port of @react-aria/radio's useRadioGroup hook.
+ */
+
+import { JSX } from 'solid-js';
+import { createField } from '../label/createField';
+import { createFocusWithin } from '../interactions/createFocusWithin';
+import { mergeProps } from '../utils/mergeProps';
+import { filterDOMProps } from '../utils/filterDOMProps';
+import { createId } from '../ssr';
+import { type MaybeAccessor, access } from '../utils/reactivity';
+import { type RadioGroupState } from '@proyecto-viviana/solid-stately';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface AriaRadioGroupProps {
+  /** The content to display as the label. */
+  label?: JSX.Element;
+  /** A description for the radio group. Provides additional context. */
+  description?: JSX.Element;
+  /** An error message for the radio group. */
+  errorMessage?: JSX.Element | ((validation: { isInvalid: boolean; validationErrors: string[] }) => JSX.Element);
+  /** 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 axis the Radio Button(s) should align with. Defaults to 'vertical'. */
+  orientation?: 'horizontal' | 'vertical';
+  /** The name of the radio group, used when submitting an HTML form. */
+  name?: string;
+  /** The form to associate the radio group with. */
+  form?: string;
+  /** Validation behavior for the radio group. */
+  validationBehavior?: 'aria' | 'native';
+  /** 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;
+  /** Defines a string value that labels the current element. */
+  'aria-label'?: string;
+  /** Identifies the element (or elements) that labels the current element. */
+  'aria-labelledby'?: string;
+  /** Identifies the element (or elements) that describes the object. */
+  'aria-describedby'?: string;
+  /** Identifies the element (or elements) that provide an error message for the object. */
+  'aria-errormessage'?: string;
+  /** The element's unique identifier. */
+  id?: string;
+}
+
+export interface RadioGroupAria {
+  /** Props for the radio group wrapper element. */
+  radioGroupProps: JSX.HTMLAttributes<HTMLDivElement>;
+  /** Props for the radio group's visible label (if any). */
+  labelProps: JSX.HTMLAttributes<HTMLElement>;
+  /** Props for the radio group description element, if any. */
+  descriptionProps: JSX.HTMLAttributes<HTMLElement>;
+  /** Props for the radio group error message element, if any. */
+  errorMessageProps: JSX.HTMLAttributes<HTMLElement>;
+  /** Whether the radio group is invalid. */
+  isInvalid: boolean;
+  /** Validation errors, if any. */
+  validationErrors: string[];
+  /** Validation details, if any. */
+  validationDetails: Record<string, boolean>;
+}
+
+// WeakMap to share data between radio group and radio items
+interface RadioGroupData {
+  name: string;
+  form: string | undefined;
+  descriptionId: string | undefined;
+  errorMessageId: string | undefined;
+  validationBehavior: 'aria' | 'native';
+}
+
+export const radioGroupData: WeakMap<RadioGroupState, RadioGroupData> = new WeakMap();
+
+// ============================================
+// IMPLEMENTATION
+// ============================================
+
+/**
+ * Provides the behavior and accessibility implementation for a radio group component.
+ * Radio groups allow users to select a single item from a list of mutually exclusive options.
+ */
+export function createRadioGroup(
+  props: MaybeAccessor<AriaRadioGroupProps>,
+  state: RadioGroupState
+): RadioGroupAria {
+  const getProps = () => access(props);
+
+  const orientation = () => getProps().orientation ?? 'vertical';
+  const isReadOnly = () => getProps().isReadOnly ?? false;
+  const isRequired = () => getProps().isRequired ?? false;
+  const isDisabled = () => getProps().isDisabled ?? false;
+  const validationBehavior = () => getProps().validationBehavior ?? 'aria';
+
+  // Use field for label, description, error message
+  const { labelProps, fieldProps, descriptionProps, errorMessageProps } = createField({
+    get label() { return getProps().label; },
+    get description() { return getProps().description; },
+    get errorMessage() { return getProps().errorMessage; },
+    get isInvalid() { return state.isInvalid; },
+    // Radio group is not an HTML input element so it
+    // shouldn't be labeled by a <label> element.
+    labelElementType: 'span',
+  });
+
+  // Handle focus within - reset focusable radio when group loses focus and no selection
+  const { focusWithinProps } = createFocusWithin({
+    onBlurWithin(e: FocusEvent) {
+      getProps().onBlur?.(e);
+      if (!state.selectedValue()) {
+        state.setLastFocusedValue(null);
+      }
+    },
+    onFocusWithin: (e: FocusEvent) => getProps().onFocus?.(e),
+    onFocusWithinChange: (isFocused: boolean) => getProps().onFocusChange?.(isFocused),
+  });
+
+  // Filter DOM props
+  const domProps = () => filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true });
+
+  // Generate group name
+  const groupName = getProps().name ?? createId();
+
+  // Store data for radio items to access
+  radioGroupData.set(state, {
+    name: groupName,
+    form: getProps().form,
+    descriptionId: descriptionProps.id,
+    errorMessageId: errorMessageProps.id,
+    validationBehavior: validationBehavior(),
+  });
+
+  // Keyboard navigation handler for arrow keys
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const onKeyDown = (_e: KeyboardEvent) => {
+    // For now, we rely on native radio behavior
+    // The complex tree walker implementation can be added later if needed
+    // Most browsers handle arrow key navigation natively for radio groups
+  };
+
+  return {
+    get radioGroupProps() {
+      return mergeProps(
+        domProps(),
+        focusWithinProps as unknown as Record<string, unknown>,
+        {
+          role: 'radiogroup',
+          onKeyDown,
+          'aria-invalid': state.isInvalid || undefined,
+          'aria-errormessage': getProps()['aria-errormessage'],
+          'aria-readonly': isReadOnly() || undefined,
+          'aria-required': isRequired() || undefined,
+          'aria-disabled': isDisabled() || undefined,
+          'aria-orientation': orientation(),
+          ...fieldProps,
+        }
+      ) as JSX.HTMLAttributes<HTMLDivElement>;
+    },
+    labelProps: labelProps as JSX.HTMLAttributes<HTMLElement>,
+    descriptionProps,
+    errorMessageProps,
+    get isInvalid() {
+      return state.isInvalid;
+    },
+    get validationErrors() {
+      return []; // Simplified - full validation can be added later
+    },
+    get validationDetails() {
+      return {}; // Simplified - full validation can be added later
+    },
+  };
+}

package/src/radio/createRadioGroupState.ts

@@ -0,0 +1,201 @@
+/**
+ * Radio group state for Solidaria
+ *
+ * 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/reactivity';
+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-Aria.
+ * @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-Aria while supporting SolidJS's reactivity needs
+  radioGroupSyncVersion.set(state, syncVersion);
+
+  return state;
+}

package/src/radio/index.ts

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