@proyecto-viviana/solidaria 0.0.1 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proyecto-viviana/solidaria",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A 1-1 SolidJS port of React Aria - accessible UI primitives",
   "type": "module",
   "main": "./dist/index.js",
@@ -8,13 +8,14 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "solid": "./dist/index.js",
+      "solid": "./src/index.ts",
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "sideEffects": false,
   "scripts": {

package/src/button/createButton.ts

@@ -0,0 +1,135 @@
+import { Accessor } from 'solid-js';
+import { createPress } from '../interactions';
+import { createFocusable } from '../interactions';
+import { mergeProps, filterDOMProps } from '../utils';
+import type { AriaButtonProps, ButtonAria } from './types';
+
+function isDisabledValue(isDisabled: Accessor<boolean> | boolean | undefined): boolean {
+  if (typeof isDisabled === 'function') {
+    return isDisabled();
+  }
+  return isDisabled ?? false;
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a button component.
+ * Handles press interactions across mouse, touch, keyboard and screen readers.
+ *
+ * Based on react-aria's useButton but adapted for SolidJS.
+ *
+ * @example
+ * ```tsx
+ * import { createButton } from 'solidaria';
+ *
+ * function Button(props) {
+ *   let ref;
+ *   const { buttonProps, isPressed } = createButton(props);
+ *
+ *   return (
+ *     <button
+ *       {...buttonProps}
+ *       ref={ref}
+ *       class={isPressed() ? 'pressed' : ''}
+ *     >
+ *       {props.children}
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export function createButton(props: AriaButtonProps = {}): ButtonAria {
+  const elementType = props.elementType ?? 'button';
+
+  const { pressProps, isPressed } = createPress({
+    isDisabled: props.isDisabled,
+    onPress: props.onPress,
+    onPressStart: props.onPressStart,
+    onPressEnd: props.onPressEnd,
+    onPressUp: props.onPressUp,
+    onPressChange: props.onPressChange,
+    preventFocusOnPress: props.preventFocusOnPress,
+  });
+
+  const { focusableProps } = createFocusable({
+    isDisabled: props.isDisabled,
+    autoFocus: props.autoFocus,
+    excludeFromTabOrder: props.excludeFromTabOrder,
+  });
+
+  const isNativeButton = elementType === 'button' || elementType === 'input';
+  const isLink = elementType === 'a';
+  const disabled = isDisabledValue(props.isDisabled);
+
+  // Build base props based on element type
+  let additionalProps: Record<string, unknown> = {};
+
+  if (isNativeButton) {
+    additionalProps = {
+      type: props.type ?? 'button',
+      disabled: disabled,
+      // Form-related attributes
+      ...(props.form && { form: props.form }),
+      ...(props.formAction && { formAction: props.formAction }),
+      ...(props.formEncType && { formEncType: props.formEncType }),
+      ...(props.formMethod && { formMethod: props.formMethod }),
+      ...(props.formNoValidate && { formNoValidate: props.formNoValidate }),
+      ...(props.formTarget && { formTarget: props.formTarget }),
+      ...(props.name && { name: props.name }),
+      ...(props.value && { value: props.value }),
+    };
+  } else {
+    // Non-native buttons need role and tabIndex
+    additionalProps = {
+      role: 'button',
+      tabIndex: disabled ? undefined : 0,
+      'aria-disabled': disabled ? true : undefined,
+    };
+
+    if (isLink) {
+      additionalProps.href = props.href;
+      additionalProps.target = props.target;
+      additionalProps.rel = props.rel;
+    }
+  }
+
+  // ARIA attributes
+  const ariaProps: Record<string, unknown> = {};
+
+  if (props['aria-pressed'] !== undefined) {
+    ariaProps['aria-pressed'] = props['aria-pressed'];
+  }
+  if (props['aria-haspopup'] !== undefined) {
+    ariaProps['aria-haspopup'] = props['aria-haspopup'];
+  }
+  if (props['aria-expanded'] !== undefined) {
+    ariaProps['aria-expanded'] = props['aria-expanded'];
+  }
+  if (props['aria-label']) {
+    ariaProps['aria-label'] = props['aria-label'];
+  }
+  if (props['aria-labelledby']) {
+    ariaProps['aria-labelledby'] = props['aria-labelledby'];
+  }
+  if (props['aria-describedby']) {
+    ariaProps['aria-describedby'] = props['aria-describedby'];
+  }
+  if (props['aria-controls']) {
+    ariaProps['aria-controls'] = props['aria-controls'];
+  }
+  if (props['aria-current'] !== undefined) {
+    ariaProps['aria-current'] = props['aria-current'];
+  }
+
+  const buttonProps = mergeProps(
+    filterDOMProps(props as Record<string, unknown>, { labelable: true }),
+    additionalProps,
+    ariaProps,
+    focusableProps as Record<string, unknown>,
+    pressProps as Record<string, unknown>
+  );
+
+  return {
+    buttonProps,
+    isPressed,
+  };
+}

package/src/button/createToggleButton.ts

@@ -0,0 +1,101 @@
+import { Accessor, createSignal } from 'solid-js';
+import { createButton } from './createButton';
+import { mergeProps } from '../utils';
+import type { AriaButtonProps, ButtonAria } from './types';
+import type { PressEvent } from '../interactions';
+
+export interface AriaToggleButtonProps extends Omit<AriaButtonProps, 'aria-pressed'> {
+  /** Whether the button is selected (controlled). */
+  isSelected?: Accessor<boolean> | boolean;
+  /** Handler called when the button's selection state changes. */
+  onChange?: (isSelected: boolean) => void;
+  /** The default selected state (uncontrolled). */
+  defaultSelected?: boolean;
+}
+
+export interface ToggleButtonAria extends ButtonAria {
+  /** Whether the button is currently selected. */
+  isSelected: Accessor<boolean>;
+}
+
+function getSelectedValue(isSelected: Accessor<boolean> | boolean | undefined): boolean {
+  if (typeof isSelected === 'function') {
+    return isSelected();
+  }
+  return isSelected ?? false;
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a toggle button component.
+ * Toggle buttons allow users to toggle a selection on or off.
+ *
+ * Based on react-aria's useToggleButton but adapted for SolidJS.
+ *
+ * @example
+ * ```tsx
+ * import { createToggleButton } from 'solidaria';
+ *
+ * function ToggleButton(props) {
+ *   const { buttonProps, isPressed, isSelected } = createToggleButton(props);
+ *
+ *   return (
+ *     <button
+ *       {...buttonProps}
+ *       class={isSelected() ? 'selected' : ''}
+ *       style={{ opacity: isPressed() ? 0.8 : 1 }}
+ *     >
+ *       {props.children}
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export function createToggleButton(props: AriaToggleButtonProps = {}): ToggleButtonAria {
+  // Handle controlled vs uncontrolled state
+  const isControlled = props.isSelected !== undefined;
+  const [uncontrolledSelected, setUncontrolledSelected] = createSignal(
+    props.defaultSelected ?? false
+  );
+
+  const isSelected = (): boolean => {
+    if (isControlled) {
+      return getSelectedValue(props.isSelected);
+    }
+    return uncontrolledSelected();
+  };
+
+  const toggleSelection = () => {
+    const newValue = !isSelected();
+    if (!isControlled) {
+      setUncontrolledSelected(newValue);
+    }
+    props.onChange?.(newValue);
+  };
+
+  // Create the press handler that toggles selection
+  const onPress = (e: PressEvent) => {
+    toggleSelection();
+    props.onPress?.(e);
+  };
+
+  // Get button props with our custom press handler
+  const { buttonProps: baseButtonProps, isPressed } = createButton(
+    mergeProps(props, {
+      onPress,
+    }) as AriaButtonProps
+  );
+
+  // Create buttonProps with a getter for aria-pressed so it stays reactive
+  const buttonProps = {
+    ...baseButtonProps,
+    get 'aria-pressed'() {
+      return isSelected();
+    },
+  };
+
+  return {
+    buttonProps,
+    isPressed,
+    isSelected,
+  };
+}

package/src/button/index.ts

@@ -0,0 +1,4 @@
+export { createButton } from './createButton';
+export { createToggleButton } from './createToggleButton';
+export type { AriaButtonProps, ButtonAria } from './types';
+export type { AriaToggleButtonProps, ToggleButtonAria } from './createToggleButton';

package/src/button/types.ts

@@ -0,0 +1,67 @@
+import { Accessor } from 'solid-js';
+import { PressEvent } from '../interactions';
+
+export interface AriaButtonProps {
+  /** Whether the button is disabled. */
+  isDisabled?: Accessor<boolean> | boolean;
+  /** Handler called when the press is released over the target. */
+  onPress?: (e: PressEvent) => void;
+  /** Handler called when a press interaction starts. */
+  onPressStart?: (e: PressEvent) => void;
+  /** Handler called when a press interaction ends. */
+  onPressEnd?: (e: PressEvent) => void;
+  /** Handler called when a press is released over the target. */
+  onPressUp?: (e: PressEvent) => void;
+  /** Handler called when the press state changes. */
+  onPressChange?: (isPressed: boolean) => void;
+  /** Whether the button should not receive focus on press. */
+  preventFocusOnPress?: boolean;
+  /** Whether the element should receive focus on render. */
+  autoFocus?: boolean;
+  /** The HTML element type to use for the button. */
+  elementType?: 'button' | 'a' | 'div' | 'input' | 'span';
+  /** The URL to link to (for anchor elements). */
+  href?: string;
+  /** The target for the link (for anchor elements). */
+  target?: string;
+  /** The rel attribute for the link (for anchor elements). */
+  rel?: string;
+  /** The type attribute for button elements. */
+  type?: 'button' | 'submit' | 'reset';
+  /** Whether the button is in a pressed state (controlled). */
+  'aria-pressed'?: boolean | 'true' | 'false' | 'mixed';
+  /** Whether the button has a popup. */
+  'aria-haspopup'?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false';
+  /** Whether the popup is expanded. */
+  'aria-expanded'?: boolean | 'true' | 'false';
+  /** The accessible label for the button. */
+  'aria-label'?: string;
+  /** The id of the element that labels the button. */
+  'aria-labelledby'?: string;
+  /** The id of the element that describes the button. */
+  'aria-describedby'?: string;
+  /** Identifies the element (or elements) whose contents or presence are controlled by the button. */
+  'aria-controls'?: string;
+  /** Indicates the current "pressed" state of toggle buttons. */
+  'aria-current'?: boolean | 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false';
+  /** Additional attributes for form buttons. */
+  form?: string;
+  formAction?: string;
+  formEncType?: string;
+  formMethod?: string;
+  formNoValidate?: boolean;
+  formTarget?: string;
+  /** The name attribute for form buttons. */
+  name?: string;
+  /** The value attribute for form buttons. */
+  value?: string;
+  /** Whether to exclude the button from the tab order. */
+  excludeFromTabOrder?: boolean;
+}
+
+export interface ButtonAria {
+  /** Props to spread on the button element. */
+  buttonProps: Record<string, unknown>;
+  /** Whether the button is currently pressed. */
+  isPressed: Accessor<boolean>;
+}

package/src/checkbox/createCheckbox.ts

@@ -0,0 +1,135 @@
+/**
+ * Checkbox hook for Solidaria
+ *
+ * Provides the behavior and accessibility implementation for a checkbox component.
+ * Checkboxes allow users to select multiple items from a list of individual items,
+ * or to mark one individual item as selected.
+ *
+ * This is a 1:1 port of @react-aria/checkbox's useCheckbox hook.
+ */
+
+import { JSX, Accessor, createEffect } from 'solid-js';
+import { createToggle, type AriaToggleProps } from '../toggle';
+import { type ToggleState } from '@proyecto-viviana/solid-stately';
+import { createPress } from '../interactions/createPress';
+import { mergeProps } from '../utils/mergeProps';
+import { type MaybeAccessor, access } from '../utils/reactivity';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface AriaCheckboxProps extends AriaToggleProps {
+  /**
+   * Indeterminism is presentational only.
+   * The indeterminate visual representation remains regardless of user interaction.
+   */
+  isIndeterminate?: boolean;
+  /**
+   * Whether the checkbox is required.
+   */
+  isRequired?: boolean;
+  /**
+   * The validation behavior for the checkbox.
+   * @default 'aria'
+   */
+  validationBehavior?: 'aria' | 'native';
+}
+
+export interface CheckboxAria {
+  /** Props for the label wrapper element. */
+  labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
+  /** Props for the input element. */
+  inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
+  /** Whether the checkbox is selected. */
+  isSelected: Accessor<boolean>;
+  /** Whether the checkbox is in a pressed state. */
+  isPressed: Accessor<boolean>;
+  /** Whether the checkbox is disabled. */
+  isDisabled: boolean;
+  /** Whether the checkbox is read only. */
+  isReadOnly: boolean;
+  /** Whether the checkbox is invalid. */
+  isInvalid: boolean;
+}
+
+// ============================================
+// IMPLEMENTATION
+// ============================================
+
+/**
+ * Provides the behavior and accessibility implementation for a checkbox component.
+ * Checkboxes allow users to select multiple items from a list of individual items,
+ * or to mark one individual item as selected.
+ *
+ * @param props - Props for the checkbox.
+ * @param state - State for the checkbox, as returned by `createToggleState`.
+ * @param inputRef - A ref accessor for the HTML input element.
+ */
+export function createCheckbox(
+  props: MaybeAccessor<AriaCheckboxProps>,
+  state: ToggleState,
+  inputRef: () => HTMLInputElement | null
+): CheckboxAria {
+  const getProps = () => access(props);
+
+  // Get toggle aria props
+  const toggleResult = createToggle(props, state, inputRef);
+  const {
+    labelProps: baseLabelProps,
+    isSelected,
+    isPressed,
+    isDisabled,
+    isReadOnly,
+    isInvalid,
+  } = toggleResult;
+
+  // Handle indeterminate state
+  createEffect(() => {
+    const input = inputRef();
+    const isIndeterminate = getProps().isIndeterminate;
+    if (input) {
+      // indeterminate is a property, but it can only be set via javascript
+      // https://css-tricks.com/indeterminate-checkboxes/
+      input.indeterminate = !!isIndeterminate;
+    }
+  });
+
+  // Reset validation state on label press for checkbox with a hidden input.
+  const { pressProps } = createPress({
+    get isDisabled() {
+      return isDisabled || isReadOnly;
+    },
+    onPress() {
+      // Validation state reset would be handled here if we had form validation
+      // For now, this is a no-op placeholder matching React-Aria's pattern
+    },
+  });
+
+  return {
+    labelProps: mergeProps(
+      baseLabelProps as unknown as Record<string, unknown>,
+      pressProps as unknown as Record<string, unknown>,
+      {
+        // Prevent label from being focused when mouse down on it.
+        // Note, this does not prevent the input from being focused in the `click` event.
+        onMouseDown: (e: MouseEvent) => e.preventDefault(),
+      } as Record<string, unknown>
+    ) as JSX.LabelHTMLAttributes<HTMLLabelElement>,
+    get inputProps() {
+      const p = getProps();
+      const { isRequired, validationBehavior = 'aria' } = p;
+
+      return mergeProps(toggleResult.inputProps, {
+        checked: isSelected(),
+        'aria-required': (isRequired && validationBehavior === 'aria') || undefined,
+        required: isRequired && validationBehavior === 'native',
+      }) as JSX.InputHTMLAttributes<HTMLInputElement>;
+    },
+    isSelected,
+    isPressed,
+    isDisabled,
+    isReadOnly,
+    isInvalid,
+  };
+}

package/src/checkbox/createCheckboxGroup.ts

@@ -0,0 +1,137 @@
+/**
+ * Checkbox group hook for Solidaria
+ *
+ * Provides the behavior and accessibility implementation for a checkbox group component.
+ * Checkbox groups allow users to select multiple items from a list of options.
+ *
+ * This is a 1:1 port of @react-aria/checkbox's useCheckboxGroup hook.
+ */
+
+import { JSX } from 'solid-js';
+import { createField } from '../label';
+import { createFocusWithin } from '../interactions/createFocusWithin';
+import { filterDOMProps } from '../utils/filterDOMProps';
+import { mergeProps } from '../utils/mergeProps';
+import { type MaybeAccessor, access } from '../utils/reactivity';
+import { type CheckboxGroupState, type CheckboxGroupProps } from '@proyecto-viviana/solid-stately';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface AriaCheckboxGroupProps extends CheckboxGroupProps {
+  /** 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 a detailed, extended description for the object. */
+  'aria-details'?: string;
+  /** A description for the field. Provides a hint such as specific requirements for what to choose. */
+  description?: JSX.Element;
+  /** An error message for the field. */
+  errorMessage?: JSX.Element;
+}
+
+export interface CheckboxGroupAria {
+  /** Props for the checkbox group wrapper element. */
+  groupProps: JSX.HTMLAttributes<HTMLElement>;
+  /** Props for the checkbox group's visible label (if any). */
+  labelProps: JSX.HTMLAttributes<HTMLElement>;
+  /** Props for the checkbox group description element, if any. */
+  descriptionProps: JSX.HTMLAttributes<HTMLElement>;
+  /** Props for the checkbox group error message element, if any. */
+  errorMessageProps: JSX.HTMLAttributes<HTMLElement>;
+  /** Whether the checkbox group is invalid. */
+  isInvalid: boolean;
+}
+
+// WeakMap to share data between checkbox group and checkbox group items
+export const checkboxGroupData = new WeakMap<
+  CheckboxGroupState,
+  {
+    name?: string;
+    form?: string;
+    descriptionId?: string;
+    errorMessageId?: string;
+    validationBehavior: 'aria' | 'native';
+  }
+>();
+
+// ============================================
+// IMPLEMENTATION
+// ============================================
+
+/**
+ * Provides the behavior and accessibility implementation for a checkbox group component.
+ * Checkbox groups allow users to select multiple items from a list of options.
+ *
+ * @param props - Props for the checkbox group.
+ * @param state - State for the checkbox group, as returned by `createCheckboxGroupState`.
+ */
+export function createCheckboxGroup(
+  props: MaybeAccessor<AriaCheckboxGroupProps>,
+  state: CheckboxGroupState
+): CheckboxGroupAria {
+  const getProps = () => access(props);
+
+  const isInvalid = () => state.isInvalid;
+
+  // Use field for label association
+  const { labelProps, fieldProps, descriptionProps, errorMessageProps } = createField({
+    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 'aria-details'() { return getProps()['aria-details']; },
+    get description() { return getProps().description; },
+    get errorMessage() { return getProps().errorMessage ?? (isInvalid() ? 'Invalid selection' : undefined); },
+    get isInvalid() { return isInvalid(); },
+    // Checkbox group is not an HTML input element so it
+    // shouldn't be labeled by a <label> element.
+    labelElementType: 'span',
+  });
+
+  // Store data for checkbox group items
+  checkboxGroupData.set(state, {
+    name: getProps().name,
+    form: getProps().form,
+    descriptionId: descriptionProps.id,
+    errorMessageId: errorMessageProps.id,
+    validationBehavior: 'aria',
+  });
+
+  // Filter DOM props
+  const domProps = () => filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true });
+
+  // Handle focus within
+  const { focusWithinProps } = createFocusWithin({
+    get onBlurWithin() { return getProps().onBlur; },
+    get onFocusWithin() { return getProps().onFocus; },
+    get onFocusWithinChange() { return getProps().onFocusChange; },
+  });
+
+  return {
+    get groupProps() {
+      return mergeProps(domProps(), {
+        role: 'group',
+        'aria-disabled': state.isDisabled || undefined,
+        ...fieldProps,
+        ...focusWithinProps,
+      }) as JSX.HTMLAttributes<HTMLElement>;
+    },
+    get labelProps() {
+      return labelProps as JSX.HTMLAttributes<HTMLElement>;
+    },
+    get descriptionProps() {
+      return descriptionProps;
+    },
+    get errorMessageProps() {
+      return errorMessageProps;
+    },
+    get isInvalid() {
+      return isInvalid();
+    },
+  };
+}