@proyecto-viviana/solidaria 0.0.1 → 0.0.2

package/src/checkbox/createCheckboxGroupItem.ts

@@ -0,0 +1,117 @@
+/**
+ * Checkbox group item hook for Solidaria
+ *
+ * Provides the behavior and accessibility implementation for a checkbox component
+ * contained within a checkbox group.
+ *
+ * This is a 1:1 port of @react-aria/checkbox's useCheckboxGroupItem hook.
+ */
+
+import { JSX } from 'solid-js';
+import { createCheckbox, type AriaCheckboxProps, type CheckboxAria } from './createCheckbox';
+import { type ToggleState, type CheckboxGroupState } from '@proyecto-viviana/solid-stately';
+import { checkboxGroupData } from './createCheckboxGroup';
+import { type MaybeAccessor, access } from '../utils/reactivity';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface AriaCheckboxGroupItemProps extends Omit<AriaCheckboxProps, 'isSelected' | 'defaultSelected'> {
+  /** The value of the checkbox. */
+  value: string;
+}
+
+// ============================================
+// IMPLEMENTATION
+// ============================================
+
+/**
+ * Provides the behavior and accessibility implementation for a checkbox component
+ * contained within a checkbox group.
+ *
+ * @param props - Props for the checkbox.
+ * @param state - State for the checkbox group, as returned by `createCheckboxGroupState`.
+ * @param inputRef - A ref accessor for the HTML input element.
+ */
+export function createCheckboxGroupItem(
+  props: MaybeAccessor<AriaCheckboxGroupItemProps>,
+  state: CheckboxGroupState,
+  inputRef: () => HTMLInputElement | null
+): CheckboxAria {
+  const getProps = () => access(props);
+
+  // Create toggle state that syncs with the group state
+  const toggleState: ToggleState = {
+    isSelected: () => state.isSelected(getProps().value),
+    defaultSelected: state.defaultValue.includes(getProps().value),
+    setSelected(isSelected: boolean) {
+      const value = getProps().value;
+      if (isSelected) {
+        state.addValue(value);
+      } else {
+        state.removeValue(value);
+      }
+      getProps().onChange?.(isSelected);
+    },
+    toggle() {
+      state.toggleValue(getProps().value);
+    },
+  };
+
+  // Get group data
+  const getGroupData = () => checkboxGroupData.get(state);
+
+  // Build checkbox props
+  const checkboxProps = (): AriaCheckboxProps => {
+    const p = getProps();
+    const groupData = getGroupData();
+
+    return {
+      ...p,
+      isReadOnly: p.isReadOnly ?? state.isReadOnly,
+      isDisabled: p.isDisabled ?? state.isDisabled,
+      name: p.name ?? groupData?.name,
+      form: p.form ?? groupData?.form,
+      isRequired: p.isRequired ?? state.isRequired(),
+      validationBehavior: p.validationBehavior ?? groupData?.validationBehavior ?? 'aria',
+    };
+  };
+
+  // Use the checkbox hook
+  const result = createCheckbox(checkboxProps, toggleState, inputRef);
+
+  // Add group-level aria-describedby
+  return {
+    ...result,
+    get inputProps() {
+      const baseInputProps = result.inputProps;
+      const groupData = getGroupData();
+
+      const describedByIds: string[] = [];
+
+      // Add props aria-describedby
+      const propsDescribedBy = getProps()['aria-describedby'];
+      if (propsDescribedBy) {
+        describedByIds.push(propsDescribedBy);
+      }
+
+      // Add error message ID if group is invalid
+      if (state.isInvalid && groupData?.errorMessageId) {
+        describedByIds.push(groupData.errorMessageId);
+      }
+
+      // Add description ID
+      if (groupData?.descriptionId) {
+        describedByIds.push(groupData.descriptionId);
+      }
+
+      const ariaDescribedBy = describedByIds.length > 0 ? describedByIds.join(' ') : undefined;
+
+      return {
+        ...baseInputProps,
+        'aria-describedby': ariaDescribedBy,
+      } as JSX.InputHTMLAttributes<HTMLInputElement>;
+    },
+  };
+}

package/src/checkbox/createCheckboxGroupState.ts

@@ -0,0 +1,193 @@
+/**
+ * Checkbox group state for Solidaria
+ *
+ * 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/reactivity';
+
+// ============================================
+// 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,13 @@
+export { createCheckbox } from './createCheckbox';
+export type { AriaCheckboxProps, CheckboxAria } from './createCheckbox';
+
+// Re-export state from solid-stately
+export { createCheckboxGroupState } from '@proyecto-viviana/solid-stately';
+export type { CheckboxGroupProps, CheckboxGroupState } from '@proyecto-viviana/solid-stately';
+
+// ARIA hooks (solidaria-specific)
+export { createCheckboxGroup, checkboxGroupData } from './createCheckboxGroup';
+export type { AriaCheckboxGroupProps, CheckboxGroupAria } from './createCheckboxGroup';
+
+export { createCheckboxGroupItem } from './createCheckboxGroupItem';
+export type { AriaCheckboxGroupItemProps } from './createCheckboxGroupItem';

package/src/index.ts

@@ -0,0 +1,128 @@
+// Button
+export {
+  createButton,
+  createToggleButton,
+  type AriaButtonProps,
+  type ButtonAria,
+  type AriaToggleButtonProps,
+  type ToggleButtonAria,
+} from './button';
+
+// Checkbox
+export {
+  createCheckbox,
+  createCheckboxGroup,
+  createCheckboxGroupItem,
+  createCheckboxGroupState,
+  checkboxGroupData,
+  type AriaCheckboxProps,
+  type CheckboxAria,
+  type AriaCheckboxGroupProps,
+  type CheckboxGroupAria,
+  type AriaCheckboxGroupItemProps,
+  type CheckboxGroupProps,
+  type CheckboxGroupState,
+} from './checkbox';
+
+// Radio
+export {
+  createRadio,
+  createRadioGroup,
+  createRadioGroupState,
+  radioGroupData,
+  type AriaRadioProps,
+  type RadioAria,
+  type AriaRadioGroupProps,
+  type RadioGroupAria,
+  type RadioGroupProps,
+  type RadioGroupState,
+} from './radio';
+
+// Interactions
+export {
+  createPress,
+  createFocusable,
+  createFocusRing,
+  createHover,
+  type CreatePressProps,
+  type PressResult,
+  type PressEvent,
+  type CreateFocusableProps,
+  type FocusableResult,
+  type FocusRingProps,
+  type FocusRingResult,
+  type CreateHoverProps,
+  type HoverResult,
+  type HoverEvent,
+  type HoverEvents,
+} from './interactions';
+
+// Label
+export {
+  createLabel,
+  createField,
+  createLabels,
+  type LabelAriaProps,
+  type LabelAria,
+  type AriaLabelingProps,
+  type LabelableProps,
+  type DOMProps,
+  type AriaFieldProps,
+  type FieldAria,
+  type HelpTextProps,
+  type ValidationResult,
+  type Validation,
+} from './label';
+
+// SSR
+export { createIsSSR, createId, canUseDOM } from './ssr';
+
+// Toggle
+export {
+  createToggle,
+  createToggleState,
+  type AriaToggleProps,
+  type ToggleAria,
+  type ToggleStateOptions,
+  type ToggleState,
+} from './toggle';
+
+// Switch
+export {
+  createSwitch,
+  type AriaSwitchProps,
+  type SwitchAria,
+} from './switch';
+
+// Link
+export {
+  createLink,
+  type AriaLinkProps,
+  type LinkAria,
+} from './link';
+
+// TextField
+export {
+  createTextField,
+  type AriaTextFieldProps,
+  type TextFieldAria,
+} from './textfield';
+
+// ProgressBar
+export {
+  createProgressBar,
+  type AriaProgressBarProps,
+  type ProgressBarAria,
+} from './progress';
+
+// Separator
+export {
+  createSeparator,
+  type AriaSeparatorProps,
+  type SeparatorAria,
+  type Orientation,
+} from './separator';
+
+// Utils
+export { mergeProps, filterDOMProps, type FilterDOMPropsOptions } from './utils';
+export { access, isAccessor, type MaybeAccessor, type MaybeAccessorValue } from './utils';

package/src/interactions/FocusableProvider.tsx

@@ -0,0 +1,44 @@
+/**
+ * FocusableProvider - Provides DOM props to the nearest focusable child.
+ *
+ * This is a 1-1 port of React-Aria's FocusableProvider adapted for SolidJS.
+ */
+
+import { JSX, ParentComponent } from 'solid-js';
+import { FocusableContext, FocusableContextValue, FocusableProviderProps } from './createFocusable';
+
+/**
+ * Provides DOM props to the nearest focusable child.
+ * Used to pass focus-related props through component boundaries.
+ *
+ * @example
+ * ```tsx
+ * import { FocusableProvider } from 'solidaria';
+ *
+ * function MyComponent() {
+ *   return (
+ *     <FocusableProvider onFocus={() => console.log('focused!')}>
+ *       <NestedFocusableComponent />
+ *     </FocusableProvider>
+ *   );
+ * }
+ * ```
+ */
+export const FocusableProvider: ParentComponent<
+  FocusableProviderProps & JSX.HTMLAttributes<HTMLElement>
+> = (props) => {
+  const { children, ...otherProps } = props;
+
+  const context: FocusableContextValue = {
+    ...otherProps,
+    ref: (_el: HTMLElement) => {
+      // Store ref if needed by parent
+    },
+  };
+
+  return (
+    <FocusableContext.Provider value={context}>
+      {children}
+    </FocusableContext.Provider>
+  );
+};

package/src/interactions/PressEvent.ts

@@ -0,0 +1,112 @@
+/**
+ * PressEvent class that matches React-Aria's PressEvent interface.
+ * Wraps native events with press-specific data.
+ */
+
+export type PointerType = 'mouse' | 'pen' | 'touch' | 'keyboard' | 'virtual';
+export type PressEventType = 'pressstart' | 'pressend' | 'pressup' | 'press';
+
+export interface IPressEvent {
+  /** The type of press event being fired. */
+  type: PressEventType;
+  /** The pointer type that triggered the press event. */
+  pointerType: PointerType;
+  /** The target element of the press event. */
+  target: Element;
+  /** Whether the shift keyboard modifier was held during the press event. */
+  shiftKey: boolean;
+  /** Whether the ctrl keyboard modifier was held during the press event. */
+  ctrlKey: boolean;
+  /** Whether the meta keyboard modifier was held during the press event. */
+  metaKey: boolean;
+  /** Whether the alt keyboard modifier was held during the press event. */
+  altKey: boolean;
+  /** X position of the press relative to the target element. */
+  x: number;
+  /** Y position of the press relative to the target element. */
+  y: number;
+  /**
+   * By default, press events stop propagation to parent elements.
+   * Call continuePropagation() to allow the event to bubble up.
+   */
+  continuePropagation(): void;
+}
+
+/**
+ * PressEvent class that provides all press event data.
+ * Based on React-Aria's PressEvent implementation.
+ */
+export class PressEvent implements IPressEvent {
+  type: PressEventType;
+  pointerType: PointerType;
+  target: Element;
+  shiftKey: boolean;
+  ctrlKey: boolean;
+  metaKey: boolean;
+  altKey: boolean;
+  x: number;
+  y: number;
+
+  #shouldStopPropagation = true;
+
+  constructor(
+    type: PressEventType,
+    pointerType: PointerType,
+    originalEvent: Event | null,
+    target: Element
+  ) {
+    this.type = type;
+    this.pointerType = pointerType;
+    this.target = target;
+
+    // Extract modifier keys from the original event
+    const e = originalEvent as MouseEvent | KeyboardEvent | null;
+    this.shiftKey = e?.shiftKey ?? false;
+    this.ctrlKey = e?.ctrlKey ?? false;
+    this.metaKey = e?.metaKey ?? false;
+    this.altKey = e?.altKey ?? false;
+
+    // Calculate position relative to target
+    this.x = 0;
+    this.y = 0;
+
+    if (originalEvent && 'clientX' in originalEvent && target) {
+      const rect = target.getBoundingClientRect();
+      this.x = (originalEvent as MouseEvent).clientX - rect.left;
+      this.y = (originalEvent as MouseEvent).clientY - rect.top;
+    } else if (target) {
+      // For keyboard events, use center of element
+      const rect = target.getBoundingClientRect();
+      this.x = rect.width / 2;
+      this.y = rect.height / 2;
+    }
+  }
+
+  /**
+   * Call this to allow the press event to propagate to parent elements.
+   * By default, press events stop propagation.
+   */
+  continuePropagation(): void {
+    this.#shouldStopPropagation = false;
+  }
+
+  /**
+   * Whether the event should stop propagation.
+   * Used internally by the press handler.
+   */
+  get shouldStopPropagation(): boolean {
+    return this.#shouldStopPropagation;
+  }
+}
+
+/**
+ * Creates a PressEvent from a native event.
+ */
+export function createPressEvent(
+  type: PressEventType,
+  pointerType: PointerType,
+  originalEvent: Event | null,
+  target: Element
+): PressEvent {
+  return new PressEvent(type, pointerType, originalEvent, target);
+}