@proyecto-viviana/solidaria 0.1.3 → 0.2.0

package/src/checkbox/createCheckboxGroupItem.ts

@@ -1,117 +0,0 @@
-/**
- * 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

@@ -1,193 +0,0 @@
-/**
- * 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

@@ -1,13 +0,0 @@
-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/color/createColorArea.ts

@@ -1,314 +0,0 @@
-/**
- * createColorArea hook.
- *
- * Provides ARIA attributes and keyboard/pointer handling for a 2D color area.
- */
-
-import { createMemo, type Accessor } from 'solid-js';
-import type { ColorAreaState } from '@proyecto-viviana/solid-stately';
-import { createId } from '../ssr';
-import type { AriaColorAreaOptions, ColorAreaAria } from './types';
-
-/**
- * Creates ARIA props for a color area.
- */
-export function createColorArea(
-  props: Accessor<AriaColorAreaOptions>,
-  state: Accessor<ColorAreaState>,
-  areaRef: Accessor<HTMLDivElement | null>
-): ColorAreaAria {
-  const getProps = () => props();
-  const getState = () => state();
-
-  // Generate IDs
-  const xInputId = createId();
-  const yInputId = createId();
-
-  // Calculate position from pointer event
-  const getPositionFromEvent = (e: MouseEvent | PointerEvent) => {
-    const area = areaRef();
-    if (!area) return null;
-
-    const rect = area.getBoundingClientRect();
-    const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-    const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
-
-    return { x, y };
-  };
-
-  // Handle pointer down
-  const onPointerDown = (e: PointerEvent) => {
-    if (getProps().isDisabled || getState().isDisabled) return;
-
-    const pos = getPositionFromEvent(e);
-    if (!pos) return;
-
-    getState().setColorFromPoint(pos.x, pos.y);
-    getState().setDragging(true);
-
-    // Capture pointer for dragging
-    (e.target as HTMLElement).setPointerCapture?.(e.pointerId);
-  };
-
-  // Handle pointer move
-  const onPointerMove = (e: PointerEvent) => {
-    if (!getState().isDragging) return;
-
-    const pos = getPositionFromEvent(e);
-    if (!pos) return;
-
-    getState().setColorFromPoint(pos.x, pos.y);
-  };
-
-  // Handle pointer up
-  const onPointerUp = (e: PointerEvent) => {
-    if (getState().isDragging) {
-      getState().setDragging(false);
-      (e.target as HTMLElement).releasePointerCapture?.(e.pointerId);
-    }
-  };
-
-  // Handle keyboard for X axis
-  const onKeyDownX = (e: KeyboardEvent) => {
-    if (getProps().isDisabled || getState().isDisabled) return;
-
-    const s = getState();
-    let handled = true;
-
-    switch (e.key) {
-      case 'ArrowRight':
-        s.incrementX();
-        break;
-      case 'ArrowLeft':
-        s.decrementX();
-        break;
-      case 'ArrowUp':
-        s.incrementY();
-        break;
-      case 'ArrowDown':
-        s.decrementY();
-        break;
-      case 'PageUp':
-        s.incrementY(s.yChannelPageStep);
-        break;
-      case 'PageDown':
-        s.decrementY(s.yChannelPageStep);
-        break;
-      case 'Home':
-        if (e.ctrlKey) {
-          s.setXValue(0);
-          s.setYValue(100);
-        } else {
-          s.setXValue(0);
-        }
-        break;
-      case 'End':
-        if (e.ctrlKey) {
-          s.setXValue(100);
-          s.setYValue(0);
-        } else {
-          s.setXValue(100);
-        }
-        break;
-      default:
-        handled = false;
-    }
-
-    if (handled) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  };
-
-  // Handle keyboard for Y axis
-  const onKeyDownY = (e: KeyboardEvent) => {
-    if (getProps().isDisabled || getState().isDisabled) return;
-
-    const s = getState();
-    let handled = true;
-
-    switch (e.key) {
-      case 'ArrowUp':
-        s.incrementY();
-        break;
-      case 'ArrowDown':
-        s.decrementY();
-        break;
-      case 'ArrowRight':
-        s.incrementX();
-        break;
-      case 'ArrowLeft':
-        s.decrementX();
-        break;
-      case 'PageUp':
-        s.incrementY(s.yChannelPageStep);
-        break;
-      case 'PageDown':
-        s.decrementY(s.yChannelPageStep);
-        break;
-      case 'Home':
-        s.setYValue(100);
-        break;
-      case 'End':
-        s.setYValue(0);
-        break;
-      default:
-        handled = false;
-    }
-
-    if (handled) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  };
-
-  // Color area props
-  const colorAreaProps = createMemo(() => {
-    const s = getState();
-    const p = getProps();
-
-    return {
-      role: 'group' as const,
-      'aria-label': p['aria-label'],
-      'aria-labelledby': p['aria-labelledby'],
-      'aria-describedby': p['aria-describedby'],
-      'aria-disabled': s.isDisabled || p.isDisabled || undefined,
-      onPointerDown,
-      onPointerMove,
-      onPointerUp,
-      style: {
-        position: 'relative' as const,
-        'touch-action': 'none',
-      },
-      'data-disabled': s.isDisabled || p.isDisabled || undefined,
-    };
-  });
-
-  // Gradient props (the visual area)
-  const gradientProps = createMemo(() => {
-    return {
-      role: 'presentation' as const,
-      style: {
-        width: '100%',
-        height: '100%',
-      },
-    };
-  });
-
-  // Thumb props
-  const thumbProps = createMemo(() => {
-    const s = getState();
-    const p = getProps();
-    const pos = s.getThumbPosition();
-
-    return {
-      role: 'presentation' as const,
-      style: {
-        position: 'absolute' as const,
-        left: `${pos.x * 100}%`,
-        top: `${pos.y * 100}%`,
-        transform: 'translate(-50%, -50%)',
-        'touch-action': 'none',
-      },
-      'data-dragging': s.isDragging || undefined,
-      'data-disabled': s.isDisabled || p.isDisabled || undefined,
-    };
-  });
-
-  // X input props (hidden, for accessibility)
-  const xInputProps = createMemo(() => {
-    const s = getState();
-    const p = getProps();
-    const xRange = s.value.getChannelRange(s.xChannel);
-    const xName = s.value.getChannelName(s.xChannel, 'en-US');
-
-    return {
-      type: 'range',
-      id: xInputId,
-      'aria-label': `${xName}`,
-      'aria-valuetext': `${xName}: ${s.getXValue()}`,
-      min: xRange.minValue,
-      max: xRange.maxValue,
-      step: xRange.step,
-      value: s.getXValue(),
-      disabled: s.isDisabled || p.isDisabled,
-      onKeyDown: onKeyDownX,
-      onChange: (e: Event) => {
-        const target = e.target as HTMLInputElement;
-        s.setXValue(parseFloat(target.value));
-      },
-      onBlur: () => {
-        if (s.isDragging) {
-          s.setDragging(false);
-        }
-      },
-      tabIndex: 0,
-      style: {
-        position: 'absolute' as const,
-        width: '1px',
-        height: '1px',
-        padding: '0',
-        margin: '-1px',
-        overflow: 'hidden',
-        clip: 'rect(0, 0, 0, 0)',
-        'white-space': 'nowrap',
-        border: '0',
-      },
-    };
-  });
-
-  // Y input props (hidden, for accessibility)
-  const yInputProps = createMemo(() => {
-    const s = getState();
-    const p = getProps();
-    const yRange = s.value.getChannelRange(s.yChannel);
-    const yName = s.value.getChannelName(s.yChannel, 'en-US');
-
-    return {
-      type: 'range',
-      id: yInputId,
-      'aria-label': `${yName}`,
-      'aria-valuetext': `${yName}: ${s.getYValue()}`,
-      min: yRange.minValue,
-      max: yRange.maxValue,
-      step: yRange.step,
-      value: s.getYValue(),
-      disabled: s.isDisabled || p.isDisabled,
-      onKeyDown: onKeyDownY,
-      onChange: (e: Event) => {
-        const target = e.target as HTMLInputElement;
-        s.setYValue(parseFloat(target.value));
-      },
-      tabIndex: -1, // Only first input is in tab order
-      style: {
-        position: 'absolute' as const,
-        width: '1px',
-        height: '1px',
-        padding: '0',
-        margin: '-1px',
-        overflow: 'hidden',
-        clip: 'rect(0, 0, 0, 0)',
-        'white-space': 'nowrap',
-        border: '0',
-      },
-    };
-  });
-
-  return {
-    get colorAreaProps() {
-      return colorAreaProps();
-    },
-    get gradientProps() {
-      return gradientProps();
-    },
-    get thumbProps() {
-      return thumbProps();
-    },
-    get xInputProps() {
-      return xInputProps();
-    },
-    get yInputProps() {
-      return yInputProps();
-    },
-  };
-}