@proyecto-viviana/solidaria-components 0.2.1 → 0.2.3

package/src/Checkbox.tsx

@@ -0,0 +1,387 @@
+/**
+ * Checkbox and CheckboxGroup components for solidaria-components
+ *
+ * Pre-wired headless checkbox components that combine state + aria hooks.
+ * Port of react-aria-components/src/Checkbox.tsx
+ */
+
+import {
+  type JSX,
+  type Accessor,
+  type ParentProps,
+  createContext,
+  useContext,
+  createMemo,
+  splitProps,
+} from 'solid-js';
+import {
+  createCheckbox,
+  createCheckboxGroup,
+  createCheckboxGroupItem,
+  createFocusRing,
+  createHover,
+  type AriaCheckboxProps,
+  type AriaCheckboxGroupProps,
+} from '@proyecto-viviana/solidaria';
+import {
+  createToggleState,
+  createCheckboxGroupState,
+  type CheckboxGroupState,
+} from '@proyecto-viviana/solid-stately';
+import { VisuallyHidden } from './VisuallyHidden';
+import {
+  type RenderChildren,
+  type ClassNameOrFunction,
+  type StyleOrFunction,
+  type SlotProps,
+  useRenderProps,
+  filterDOMProps,
+} from './utils';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface CheckboxGroupRenderProps {
+  /** 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;
+  /** State of the checkbox group. */
+  state: CheckboxGroupState;
+}
+
+export interface CheckboxRenderProps {
+  /** Whether the checkbox is selected. */
+  isSelected: boolean;
+  /** Whether the checkbox is indeterminate. */
+  isIndeterminate: boolean;
+  /** Whether the checkbox is currently hovered with a mouse. */
+  isHovered: boolean;
+  /** Whether the checkbox is currently in a pressed state. */
+  isPressed: boolean;
+  /** Whether the checkbox is focused, either via a mouse or keyboard. */
+  isFocused: boolean;
+  /** Whether the checkbox is keyboard focused. */
+  isFocusVisible: boolean;
+  /** Whether the checkbox is disabled. */
+  isDisabled: boolean;
+  /** Whether the checkbox is read only. */
+  isReadOnly: boolean;
+  /** Whether the checkbox is invalid. */
+  isInvalid: boolean;
+  /** Whether the checkbox is required. */
+  isRequired: boolean;
+}
+
+export interface CheckboxGroupProps
+  extends Omit<AriaCheckboxGroupProps, 'children' | 'label' | 'description' | 'errorMessage'>,
+    SlotProps {
+  /** The children of the component. A function may be provided to receive render props. */
+  children?: RenderChildren<CheckboxGroupRenderProps>;
+  /** The CSS className for the element. */
+  class?: ClassNameOrFunction<CheckboxGroupRenderProps>;
+  /** The inline style for the element. */
+  style?: StyleOrFunction<CheckboxGroupRenderProps>;
+}
+
+export interface CheckboxProps
+  extends Omit<AriaCheckboxProps, 'children'>,
+    SlotProps {
+  /** The children of the component. A function may be provided to receive render props. */
+  children?: RenderChildren<CheckboxRenderProps>;
+  /** The CSS className for the element. */
+  class?: ClassNameOrFunction<CheckboxRenderProps>;
+  /** The inline style for the element. */
+  style?: StyleOrFunction<CheckboxRenderProps>;
+  /** Whether the checkbox is indeterminate. */
+  isIndeterminate?: boolean;
+}
+
+// ============================================
+// CONTEXT
+// ============================================
+
+export const CheckboxGroupContext = createContext<CheckboxGroupProps | null>(null);
+export const CheckboxGroupStateContext = createContext<CheckboxGroupState | null>(null);
+export const CheckboxContext = createContext<CheckboxProps | null>(null);
+
+// ============================================
+// CHECKBOX GROUP COMPONENT
+// ============================================
+
+/**
+ * A checkbox group allows a user to select multiple items from a list of options.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxGroup>
+ *   <Checkbox value="one">Option 1</Checkbox>
+ *   <Checkbox value="two">Option 2</Checkbox>
+ * </CheckboxGroup>
+ * ```
+ */
+export function CheckboxGroup(props: ParentProps<CheckboxGroupProps>): JSX.Element {
+  const [local, ariaProps] = splitProps(props, [
+    'class',
+    'style',
+    'slot',
+  ]);
+
+  // Create checkbox group state
+  // Use getters to ensure props are read lazily inside reactive contexts
+  const state = createCheckboxGroupState({
+    get value() { return ariaProps.value; },
+    get defaultValue() { return ariaProps.defaultValue; },
+    get onChange() { return ariaProps.onChange; },
+    get isDisabled() { return ariaProps.isDisabled; },
+    get isReadOnly() { return ariaProps.isReadOnly; },
+    get isRequired() { return ariaProps.isRequired; },
+    get isInvalid() { return ariaProps.isInvalid; },
+  });
+
+  // Create checkbox group aria props
+  const groupAria = createCheckboxGroup(() => ariaProps, state);
+
+  // Render props values
+  const renderValues = createMemo<CheckboxGroupRenderProps>(() => ({
+    isDisabled: state.isDisabled,
+    isReadOnly: state.isReadOnly,
+    isRequired: ariaProps.isRequired ?? false,
+    isInvalid: groupAria.isInvalid,
+    state,
+  }));
+
+  // Resolve render props
+  const renderProps = useRenderProps(
+    {
+      children: props.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: 'solidaria-CheckboxGroup',
+    },
+    renderValues
+  );
+
+  // Filter DOM props
+  const domProps = createMemo(() => filterDOMProps(ariaProps, { global: true }));
+
+  // Remove ref from spread props to avoid type conflicts
+  const cleanGroupProps = () => {
+    const { ref: _ref, ...rest } = groupAria.groupProps as Record<string, unknown>;
+    return rest;
+  };
+
+  // Resolve children - we need to pass render props if children is a function
+  // but we use props.children directly (not renderProps.renderChildren())
+  // to preserve SolidJS context propagation for nested components like Checkbox
+  const resolvedChildren = () => {
+    const children = props.children;
+    if (typeof children === 'function') {
+      return children(renderValues());
+    }
+    return children;
+  };
+
+  return (
+    <CheckboxGroupStateContext.Provider value={state}>
+      <div
+        {...domProps()}
+        {...cleanGroupProps()}
+        class={renderProps.class()}
+        style={renderProps.style()}
+        data-disabled={state.isDisabled || undefined}
+        data-readonly={state.isReadOnly || undefined}
+        data-required={ariaProps.isRequired || undefined}
+        data-invalid={groupAria.isInvalid || undefined}
+      >
+        {resolvedChildren()}
+      </div>
+    </CheckboxGroupStateContext.Provider>
+  );
+}
+
+// ============================================
+// CHECKBOX COMPONENT
+// ============================================
+
+/**
+ * A checkbox allows a user to select multiple items from a list of individual items,
+ * or to mark one individual item as selected.
+ *
+ * @example
+ * ```tsx
+ * <Checkbox>
+ *   {({ isSelected }) => (
+ *     <>
+ *       <span class={`checkbox ${isSelected ? 'checked' : ''}`}>
+ *         {isSelected && '✓'}
+ *       </span>
+ *       <span>Accept terms</span>
+ *     </>
+ *   )}
+ * </Checkbox>
+ * ```
+ */
+export function Checkbox(props: CheckboxProps): JSX.Element {
+  let inputRef: HTMLInputElement | null = null;
+
+  const [local, ariaProps] = splitProps(props, [
+    'class',
+    'style',
+    'slot',
+    'isIndeterminate',
+  ]);
+
+  // Check if we're inside a CheckboxGroup
+  const groupState = useContext(CheckboxGroupStateContext);
+
+  // Create appropriate state/aria hooks based on context
+  let isSelected: Accessor<boolean>;
+  let isPressed: Accessor<boolean>;
+  let isDisabled: boolean;
+  let isReadOnly: boolean;
+  let isInvalid: boolean;
+  let labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
+  let inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
+
+  if (groupState) {
+    // Inside a CheckboxGroup - use group item
+    const itemAria = createCheckboxGroupItem(
+      () => ({
+        ...ariaProps,
+        value: ariaProps.value ?? '',
+        children: typeof props.children === 'function' ? true : props.children,
+      }),
+      groupState,
+      () => inputRef
+    );
+    isSelected = itemAria.isSelected;
+    isPressed = itemAria.isPressed;
+    isDisabled = itemAria.isDisabled;
+    isReadOnly = itemAria.isReadOnly;
+    isInvalid = itemAria.isInvalid;
+    labelProps = itemAria.labelProps;
+    inputProps = itemAria.inputProps;
+  } else {
+    // Standalone checkbox
+    // Use getters to ensure props are read lazily inside reactive contexts
+    const state = createToggleState({
+      get isSelected() { return ariaProps.isSelected; },
+      get defaultSelected() { return ariaProps.defaultSelected; },
+      get onChange() { return ariaProps.onChange; },
+      get isReadOnly() { return ariaProps.isReadOnly; },
+    });
+
+    const checkboxAria = createCheckbox(
+      () => ({
+        ...ariaProps,
+        isIndeterminate: local.isIndeterminate,
+        children: typeof props.children === 'function' ? true : props.children,
+      }),
+      state,
+      () => inputRef
+    );
+    isSelected = checkboxAria.isSelected;
+    isPressed = checkboxAria.isPressed;
+    isDisabled = checkboxAria.isDisabled;
+    isReadOnly = checkboxAria.isReadOnly;
+    isInvalid = checkboxAria.isInvalid;
+    labelProps = checkboxAria.labelProps;
+    inputProps = checkboxAria.inputProps;
+  }
+
+  // Create focus ring
+  const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+
+  // Create hover
+  const { isHovered, hoverProps } = createHover({
+    get isDisabled() {
+      return isDisabled || isReadOnly;
+    },
+  });
+
+  // Render props values
+  const renderValues = createMemo<CheckboxRenderProps>(() => ({
+    isSelected: isSelected(),
+    isIndeterminate: local.isIndeterminate ?? false,
+    isHovered: isHovered(),
+    isPressed: isPressed(),
+    isFocused: isFocused(),
+    isFocusVisible: isFocusVisible(),
+    isDisabled,
+    isReadOnly,
+    isInvalid,
+    isRequired: ariaProps.isRequired ?? false,
+  }));
+
+  // Resolve render props
+  const renderProps = useRenderProps(
+    {
+      children: props.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: 'solidaria-Checkbox',
+    },
+    renderValues
+  );
+
+  // Filter DOM props
+  const domProps = createMemo(() => {
+    const filtered = filterDOMProps(ariaProps, { global: true });
+    delete (filtered as Record<string, unknown>).id;
+    delete (filtered as Record<string, unknown>).onClick;
+    return filtered;
+  });
+
+  // Remove ref from spread props to avoid type conflicts
+  const cleanLabelProps = () => {
+    const { ref: _ref1, ...rest } = labelProps as Record<string, unknown>;
+    return rest;
+  };
+  const cleanHoverProps = () => {
+    const { ref: _ref2, ...rest } = hoverProps as Record<string, unknown>;
+    return rest;
+  };
+  const cleanInputProps = () => {
+    const { ref: _ref3, ...rest } = inputProps as Record<string, unknown>;
+    return rest;
+  };
+  const cleanFocusProps = () => {
+    const { ref: _ref4, ...rest } = focusProps as Record<string, unknown>;
+    return rest;
+  };
+
+  return (
+    <label
+      {...domProps()}
+      {...cleanLabelProps()}
+      {...cleanHoverProps()}
+      class={renderProps.class()}
+      style={renderProps.style()}
+      data-selected={isSelected() || undefined}
+      data-indeterminate={local.isIndeterminate || undefined}
+      data-pressed={isPressed() || undefined}
+      data-hovered={isHovered() || undefined}
+      data-focused={isFocused() || undefined}
+      data-focus-visible={isFocusVisible() || undefined}
+      data-disabled={isDisabled || undefined}
+      data-readonly={isReadOnly || undefined}
+      data-invalid={isInvalid || undefined}
+      data-required={ariaProps.isRequired || undefined}
+    >
+      <VisuallyHidden>
+        <input
+          ref={(el) => (inputRef = el)}
+          {...cleanInputProps()}
+          {...cleanFocusProps()}
+        />
+      </VisuallyHidden>
+      {renderProps.renderChildren()}
+    </label>
+  );
+}