@proyecto-viviana/solidaria 0.2.5 → 0.3.0

package/src/button/createButton.ts

@@ -1,11 +1,11 @@
-import { Accessor } from 'solid-js';
-import { createPress } from '../interactions';
-import { createFocusable } from '../interactions';
-import { mergeProps, filterDOMProps } from '../utils';
-import type { AriaButtonProps, ButtonAria } from './types';
+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') {
+  if (typeof isDisabled === "function") {
     return isDisabled();
   }
   return isDisabled ?? false;
@@ -38,101 +38,130 @@ function isDisabledValue(isDisabled: Accessor<boolean> | boolean | undefined): b
  * ```
  */
 export function createButton(props: AriaButtonProps = {}): ButtonAria {
-  const elementType = props.elementType ?? 'button';
+  const elementType = props.elementType ?? "button";
+  const isDisabled = () => isDisabledValue(props.isDisabled);
 
   const { pressProps, isPressed } = createPress({
-    isDisabled: props.isDisabled,
-    onPress: props.onPress,
-    onPressStart: props.onPressStart,
-    onPressEnd: props.onPressEnd,
-    onPressUp: props.onPressUp,
-    onPressChange: props.onPressChange,
-    onClick: props.onClick,
-    preventFocusOnPress: props.preventFocusOnPress,
+    isDisabled,
+    onPress: (event) => props.onPress?.(event),
+    onPressStart: (event) => props.onPressStart?.(event),
+    onPressEnd: (event) => props.onPressEnd?.(event),
+    onPressUp: (event) => props.onPressUp?.(event),
+    onPressChange: (pressed) => props.onPressChange?.(pressed),
+    onClick: (event) => props.onClick?.(event),
+    get preventFocusOnPress() {
+      return props.preventFocusOnPress;
+    },
   });
 
   const { focusableProps } = createFocusable({
-    isDisabled: props.isDisabled,
+    isDisabled,
     autoFocus: props.autoFocus,
     excludeFromTabOrder: props.excludeFromTabOrder,
   });
 
-  const isNativeButton = elementType === 'button' || elementType === 'input';
-  const isLink = elementType === 'a';
-  const disabled = isDisabledValue(props.isDisabled);
+  const isNativeButton = elementType === "button";
+  const isLink = elementType === "a";
 
   // Handle allowFocusWhenDisabled - set tabIndex to -1 when disabled but focusable
   // This allows tooltips to be shown on disabled buttons
-  if (props.allowFocusWhenDisabled && disabled) {
-    (focusableProps as Record<string, unknown>).tabIndex = -1;
+  if (props.allowFocusWhenDisabled) {
+    Object.defineProperty(focusableProps, "tabIndex", {
+      enumerable: true,
+      configurable: true,
+      get() {
+        return isDisabled() ? -1 : props.excludeFromTabOrder ? -1 : 0;
+      },
+    });
   }
 
-  // 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 }),
+      get type() {
+        return props.type ?? "button";
+      },
+      get disabled() {
+        return isDisabled();
+      },
+      get form() {
+        return props.form;
+      },
+      get formAction() {
+        return props.formAction;
+      },
+      get formEncType() {
+        return props.formEncType;
+      },
+      get formMethod() {
+        return props.formMethod;
+      },
+      get formNoValidate() {
+        return props.formNoValidate;
+      },
+      get formTarget() {
+        return props.formTarget;
+      },
+      get name() {
+        return props.name;
+      },
+      get value() {
+        return props.value;
+      },
     };
   } else {
-    // Non-native buttons need role and tabIndex
+    // Non-native buttons need role; focusableProps supplies tabIndex.
     additionalProps = {
-      role: 'button',
-      tabIndex: disabled ? undefined : 0,
-      'aria-disabled': disabled ? true : undefined,
+      role: "button",
+      get href() {
+        return isLink && !isDisabled() ? props.href : undefined;
+      },
+      get target() {
+        return isLink ? props.target : undefined;
+      },
+      get type() {
+        return elementType === "input" ? (props.type ?? "button") : undefined;
+      },
+      get disabled() {
+        return elementType === "input" ? isDisabled() : undefined;
+      },
+      get "aria-disabled"() {
+        return isDisabled() && elementType !== "input" ? true : undefined;
+      },
+      get rel() {
+        return isLink ? props.rel : 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 ariaProps: Record<string, unknown> = {
+    get "aria-haspopup"() {
+      return props["aria-haspopup"];
+    },
+    get "aria-expanded"() {
+      return props["aria-expanded"];
+    },
+    get "aria-controls"() {
+      return props["aria-controls"];
+    },
+    get "aria-pressed"() {
+      return props["aria-pressed"];
+    },
+    get "aria-current"() {
+      return props["aria-current"];
+    },
+    get "aria-disabled"() {
+      return props["aria-disabled"];
+    },
+  };
 
   const buttonProps = mergeProps(
-    filterDOMProps(props as Record<string, unknown>, { labelable: true }),
     additionalProps,
-    ariaProps,
     focusableProps as Record<string, unknown>,
-    pressProps as Record<string, unknown>
+    pressProps as Record<string, unknown>,
+    filterDOMProps(props as Record<string, unknown>, { labelable: true }),
+    ariaProps,
   );
 
   return {

package/src/button/createToggleButton.ts

@@ -1,10 +1,10 @@
-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';
+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'> {
+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. */
@@ -19,7 +19,7 @@ export interface ToggleButtonAria extends ButtonAria {
 }
 
 function getSelectedValue(isSelected: Accessor<boolean> | boolean | undefined): boolean {
-  if (typeof isSelected === 'function') {
+  if (typeof isSelected === "function") {
     return isSelected();
   }
   return isSelected ?? false;
@@ -54,7 +54,7 @@ export function createToggleButton(props: AriaToggleButtonProps = {}): ToggleBut
   // Handle controlled vs uncontrolled state
   const isControlled = props.isSelected !== undefined;
   const [uncontrolledSelected, setUncontrolledSelected] = createSignal(
-    props.defaultSelected ?? false
+    props.defaultSelected ?? false,
   );
 
   const isSelected = (): boolean => {
@@ -82,13 +82,13 @@ export function createToggleButton(props: AriaToggleButtonProps = {}): ToggleBut
   const { buttonProps: baseButtonProps, isPressed } = createButton(
     mergeProps(props, {
       onPress,
-    }) as AriaButtonProps
+    }) as AriaButtonProps,
   );
 
   // Create buttonProps with a getter for aria-pressed so it stays reactive
   const buttonProps = {
     ...baseButtonProps,
-    get 'aria-pressed'() {
+    get "aria-pressed"() {
       return isSelected();
     },
   };

package/src/button/createToggleButtonGroup.ts

@@ -0,0 +1,121 @@
+import type { JSX } from "solid-js";
+import type { Key, ToggleGroupProps, ToggleGroupState } from "@proyecto-viviana/solid-stately";
+import { createToolbar, type Orientation } from "../toolbar";
+import { mergeProps } from "../utils";
+import {
+  createToggleButton,
+  type AriaToggleButtonProps,
+  type ToggleButtonAria,
+} from "./createToggleButton";
+
+export interface AriaToggleButtonGroupProps extends ToggleGroupProps {
+  /**
+   * The orientation of the toggle button group.
+   * @default 'horizontal'
+   */
+  orientation?: Orientation;
+  /** Accessible label. */
+  "aria-label"?: string;
+  /** Labelled-by id. */
+  "aria-labelledby"?: string;
+}
+
+export interface ToggleButtonGroupAria {
+  /** Props for the group container. */
+  groupProps: JSX.HTMLAttributes<HTMLElement>;
+}
+
+export interface AriaToggleButtonGroupItemProps extends Omit<AriaToggleButtonProps, "children"> {
+  /** Key used in the group selection state. */
+  id: Key;
+}
+
+function isDisabledValue(isDisabled: AriaToggleButtonProps["isDisabled"]): boolean {
+  if (typeof isDisabled === "function") {
+    return isDisabled();
+  }
+  return !!isDisabled;
+}
+
+/**
+ * Provides ARIA behavior for a toggle button group container.
+ */
+export function createToggleButtonGroup(
+  props: AriaToggleButtonGroupProps,
+  state: ToggleGroupState,
+): ToggleButtonGroupAria {
+  const { toolbarProps } = createToolbar({
+    get orientation() {
+      return props.orientation;
+    },
+    get "aria-label"() {
+      return props["aria-label"];
+    },
+    get "aria-labelledby"() {
+      return props["aria-labelledby"];
+    },
+  });
+
+  const groupProps = mergeProps(toolbarProps as Record<string, unknown>, {
+    get role() {
+      return state.selectionMode === "single" ? "radiogroup" : toolbarProps.role;
+    },
+    get "aria-disabled"() {
+      return props.isDisabled || undefined;
+    },
+  }) as JSX.HTMLAttributes<HTMLElement>;
+
+  return { groupProps };
+}
+
+/**
+ * Provides ARIA behavior for an item within a toggle button group.
+ */
+export function createToggleButtonGroupItem(
+  props: AriaToggleButtonGroupItemProps,
+  state: ToggleGroupState,
+): ToggleButtonAria {
+  const { id: _id, ...toggleProps } = props;
+
+  const toggleButton = createToggleButton({
+    ...toggleProps,
+    get isSelected() {
+      return state.selectedKeys.has(props.id);
+    },
+    onChange(isSelected) {
+      state.setSelected(props.id, isSelected);
+      props.onChange?.(isSelected);
+    },
+    get isDisabled() {
+      return isDisabledValue(props.isDisabled) || state.isDisabled;
+    },
+  });
+
+  const baseButtonProps = toggleButton.buttonProps as Record<string, unknown>;
+  const buttonProps: Record<string, unknown> = {
+    ...baseButtonProps,
+    get role() {
+      if (state.selectionMode === "single") {
+        return "radio";
+      }
+      return baseButtonProps.role as string | undefined;
+    },
+    get "aria-checked"() {
+      if (state.selectionMode !== "single") {
+        return undefined;
+      }
+      return state.selectedKeys.has(props.id);
+    },
+    get "aria-pressed"() {
+      if (state.selectionMode === "single") {
+        return undefined;
+      }
+      return baseButtonProps["aria-pressed"];
+    },
+  };
+
+  return {
+    ...toggleButton,
+    buttonProps,
+  };
+}

package/src/button/index.ts

@@ -1,4 +1,10 @@
-export { createButton } from './createButton';
-export { createToggleButton } from './createToggleButton';
-export type { AriaButtonProps, ButtonAria } from './types';
-export type { AriaToggleButtonProps, ToggleButtonAria } from './createToggleButton';
+export { createButton } from "./createButton";
+export { createToggleButton } from "./createToggleButton";
+export { createToggleButtonGroup, createToggleButtonGroupItem } from "./createToggleButtonGroup";
+export type { AriaButtonProps, ButtonAria } from "./types";
+export type { AriaToggleButtonProps, ToggleButtonAria } from "./createToggleButton";
+export type {
+  AriaToggleButtonGroupProps,
+  ToggleButtonGroupAria,
+  AriaToggleButtonGroupItemProps,
+} from "./createToggleButtonGroup";

package/src/button/types.ts

@@ -1,7 +1,9 @@
-import { Accessor } from 'solid-js';
-import { PressEvent } from '../interactions';
+import { Accessor } from "solid-js";
+import { PressEvent } from "../interactions";
 
 export interface AriaButtonProps {
+  /** The element's unique identifier. */
+  id?: string | number;
   /** Whether the button is disabled. */
   isDisabled?: Accessor<boolean> | boolean;
   /** Handler called when the press is released over the target. */
@@ -30,7 +32,7 @@ export interface AriaButtonProps {
   /** 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';
+  elementType?: "button" | "a" | "div" | "input" | "span";
   /** The URL to link to (for anchor elements). */
   href?: string;
   /** The target for the link (for anchor elements). */
@@ -38,23 +40,27 @@ export interface AriaButtonProps {
   /** The rel attribute for the link (for anchor elements). */
   rel?: string;
   /** The type attribute for button elements. */
-  type?: 'button' | 'submit' | 'reset';
+  type?: "button" | "submit" | "reset";
   /** Whether the button is in a pressed state (controlled). */
-  'aria-pressed'?: boolean | 'true' | 'false' | 'mixed';
+  "aria-pressed"?: boolean | "true" | "false" | "mixed";
   /** Whether the button has a popup. */
-  'aria-haspopup'?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false';
+  "aria-haspopup"?: boolean | "menu" | "listbox" | "tree" | "grid" | "dialog" | "true" | "false";
   /** Whether the popup is expanded. */
-  'aria-expanded'?: boolean | 'true' | 'false';
+  "aria-expanded"?: boolean | "true" | "false";
   /** The accessible label for the button. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** The id of the element that labels the button. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** The id of the element that describes the button. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
+  /** The id of the element that provides detailed, extended description for the button. */
+  "aria-details"?: string;
   /** Identifies the element (or elements) whose contents or presence are controlled by the button. */
-  'aria-controls'?: string;
+  "aria-controls"?: string;
   /** Indicates the current "pressed" state of toggle buttons. */
-  'aria-current'?: boolean | 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false';
+  "aria-current"?: boolean | "page" | "step" | "location" | "date" | "time" | "true" | "false";
+  /** Indicates that the button is perceivable but disabled. */
+  "aria-disabled"?: boolean | "true" | "false";
   /** Additional attributes for form buttons. */
   form?: string;
   formAction?: string;

package/src/calendar/createCalendar.ts

@@ -5,15 +5,12 @@
  * Based on @react-aria/calendar useCalendar
  */
 
-import { createMemo } from 'solid-js';
-import { createId } from '../ssr';
-import { access, type MaybeAccessor } from '../utils/reactivity';
-import { mergeProps } from '../utils/mergeProps';
-import type { CalendarState } from '@proyecto-viviana/solid-stately';
-
-// ============================================
-// TYPES
-// ============================================
+import { createMemo } from "solid-js";
+import { createId } from "../ssr";
+import { access, type MaybeAccessor } from "../utils/reactivity";
+import { mergeProps } from "../utils/mergeProps";
+import type { CalendarState } from "@proyecto-viviana/solid-stately";
+import { formatVisibleRangeDescription, setCalendarHookData } from "./utils";
 
 export interface AriaCalendarProps {
   /** An ID for the calendar. */
@@ -23,11 +20,19 @@ export interface AriaCalendarProps {
   /** Whether the calendar is read-only. */
   isReadOnly?: boolean;
   /** An accessible label for the calendar. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** The ID of an element that labels the calendar. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** The ID of an element that describes the calendar. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
+  /** The ID of an element that provides additional details about the calendar. */
+  "aria-details"?: string;
+  /** Whether the current selection is invalid. */
+  isInvalid?: boolean;
+  /** Error message rendered for invalid selections. */
+  errorMessage?: string;
+  /** ID of the rendered error message element. */
+  errorMessageId?: string;
   /** Minimum number of visible months. */
   visibleMonths?: number;
 }
@@ -41,27 +46,50 @@ export interface CalendarAria {
   nextButtonProps: Record<string, unknown>;
   /** Props for the title/heading element. */
   titleProps: Record<string, unknown>;
+  /** Props for the error message element, if any. */
+  errorMessageProps: Record<string, unknown>;
   /** An accessible label for the title. */
   title: string;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides the behavior and accessibility implementation for a calendar component.
  */
 export function createCalendar<T extends CalendarState>(
   props: MaybeAccessor<AriaCalendarProps>,
-  state: T
+  state: T,
 ): CalendarAria {
   const getProps = () => access(props);
   const id = createId(getProps().id);
   const titleId = createId();
+  const errorMessageId = createId(getProps().errorMessageId);
 
   // Title (e.g., "December 2024")
   const title = createMemo(() => state.title());
+  const visibleRangeDescription = createMemo(() => {
+    const range = state.visibleRange();
+    return formatVisibleRangeDescription(range.start, range.end, state.timeZone, state.locale());
+  });
+  const calendarLabel = createMemo(() => {
+    const p = getProps();
+    return [p["aria-label"], visibleRangeDescription()].filter(Boolean).join(", ");
+  });
+
+  const initialProps = getProps();
+  if (
+    initialProps.id ||
+    initialProps["aria-label"] ||
+    initialProps["aria-labelledby"] ||
+    initialProps["aria-describedby"] ||
+    initialProps["aria-details"] ||
+    initialProps.errorMessage ||
+    initialProps.errorMessageId
+  ) {
+    setCalendarHookData(state, {
+      errorMessageId:
+        initialProps.errorMessage || initialProps.errorMessageId ? errorMessageId : undefined,
+    });
+  }
 
   // Previous button props
   const prevButtonProps = createMemo(() => {
@@ -69,7 +97,7 @@ export function createCalendar<T extends CalendarState>(
     const isDisabled = p.isDisabled || state.isDisabled();
 
     return {
-      'aria-label': 'Previous month',
+      "aria-label": "Previous month",
       onClick: () => {
         if (!isDisabled) {
           state.focusPreviousPage();
@@ -86,7 +114,7 @@ export function createCalendar<T extends CalendarState>(
     const isDisabled = p.isDisabled || state.isDisabled();
 
     return {
-      'aria-label': 'Next month',
+      "aria-label": "Next month",
       onClick: () => {
         if (!isDisabled) {
           state.focusNextPage();
@@ -100,22 +128,24 @@ export function createCalendar<T extends CalendarState>(
   // Title props
   const titleProps = createMemo(() => ({
     id: titleId,
-    'aria-live': 'polite' as const,
+    "aria-live": "polite" as const,
+  }));
+  const errorMessageProps = createMemo(() => ({
+    id: errorMessageId,
   }));
 
   // Calendar container props
   const calendarProps = createMemo(() => {
     const p = getProps();
 
-    return mergeProps(
-      {
-        id,
-        role: 'group',
-        'aria-labelledby': p['aria-labelledby'] ?? titleId,
-        'aria-label': p['aria-label'],
-        'aria-describedby': p['aria-describedby'],
-      }
-    );
+    return mergeProps({
+      id,
+      role: "application",
+      "aria-labelledby": p["aria-labelledby"],
+      "aria-label": calendarLabel(),
+      "aria-describedby": p["aria-describedby"],
+      "aria-details": p["aria-details"],
+    });
   });
 
   return {
@@ -131,6 +161,9 @@ export function createCalendar<T extends CalendarState>(
     get titleProps() {
       return titleProps();
     },
+    get errorMessageProps() {
+      return errorMessageProps();
+    },
     get title() {
       return title();
     },