@proyecto-viviana/solidaria-components 0.2.4 → 0.2.9

package/src/TimeField.tsx

@@ -17,6 +17,7 @@ import {
 } from 'solid-js';
 import {
   createTimeField,
+  createTimeSegment,
   type AriaTimeFieldProps,
 } from '@proyecto-viviana/solidaria';
 import {
@@ -109,9 +110,20 @@ export interface TimeSegmentProps extends SlotProps {
 // CONTEXT
 // ============================================
 
-export const TimeFieldContext = createContext<TimeFieldState<TimeValue> | null>(null);
+export interface TimeFieldContextValue {
+  state: TimeFieldState<TimeValue>;
+  aria: {
+    labelProps: Record<string, unknown>;
+    inputProps: Record<string, unknown>;
+    descriptionProps: Record<string, unknown>;
+    errorMessageProps: Record<string, unknown>;
+  };
+}
 
-export function useTimeFieldContext(): TimeFieldState<TimeValue> {
+export const TimeFieldContext = createContext<TimeFieldContextValue | null>(null);
+export const TimeFieldStateContext = createContext<TimeFieldState<TimeValue> | null>(null);
+
+function useTimeFieldContextValue(): TimeFieldContextValue {
   const context = useContext(TimeFieldContext);
   if (!context) {
     throw new Error('TimeField components must be used within a TimeField');
@@ -119,6 +131,10 @@ export function useTimeFieldContext(): TimeFieldState<TimeValue> {
   return context;
 }
 
+export function useTimeFieldContext(): TimeFieldState<TimeValue> {
+  return useTimeFieldContextValue().state;
+}
+
 // ============================================
 // TIME FIELD COMPONENT
 // ============================================
@@ -205,20 +221,32 @@ function TimeFieldInner<T extends TimeValue = TimeValue>(
   );
 
   return (
-    <TimeFieldContext.Provider value={state as unknown as TimeFieldState<TimeValue>}>
-      <div
-        ref={setFieldRef}
-        {...fieldAria.fieldProps}
-        class={renderProps.class()}
-        style={renderProps.style()}
-        data-disabled={dataAttr(state.isDisabled())}
-        data-readonly={dataAttr(state.isReadOnly())}
-        data-required={dataAttr(state.isRequired())}
-        data-invalid={dataAttr(state.isInvalid())}
+    <TimeFieldStateContext.Provider value={state as unknown as TimeFieldState<TimeValue>}>
+      <TimeFieldContext.Provider
+        value={{
+          state: state as unknown as TimeFieldState<TimeValue>,
+          aria: {
+            labelProps: fieldAria.labelProps,
+            inputProps: fieldAria.inputProps,
+            descriptionProps: fieldAria.descriptionProps,
+            errorMessageProps: fieldAria.errorMessageProps,
+          },
+        }}
       >
-        {props.children as JSX.Element}
-      </div>
-    </TimeFieldContext.Provider>
+        <div
+          ref={setFieldRef}
+          {...fieldAria.fieldProps}
+          class={renderProps.class()}
+          style={renderProps.style()}
+          data-disabled={dataAttr(state.isDisabled())}
+          data-readonly={dataAttr(state.isReadOnly())}
+          data-required={dataAttr(state.isRequired())}
+          data-invalid={dataAttr(state.isInvalid())}
+        >
+          {props.children as JSX.Element}
+        </div>
+      </TimeFieldContext.Provider>
+    </TimeFieldStateContext.Provider>
   );
 }
 
@@ -230,7 +258,7 @@ function TimeFieldInner<T extends TimeValue = TimeValue>(
  * The input area containing time segments.
  */
 export function TimeInput(props: TimeInputProps): JSX.Element {
-  const state = useTimeFieldContext();
+  const { state, aria } = useTimeFieldContextValue();
   const [isFocused, setIsFocused] = createSignal(false);
 
   // Render props values
@@ -251,7 +279,7 @@ export function TimeInput(props: TimeInputProps): JSX.Element {
 
   return (
     <div
-      role="presentation"
+      {...aria.inputProps}
       class={renderProps.class()}
       style={renderProps.style()}
       data-disabled={dataAttr(state.isDisabled())}
@@ -275,126 +303,21 @@ export function TimeInput(props: TimeInputProps): JSX.Element {
  */
 export function TimeSegment(props: TimeSegmentProps): JSX.Element {
   const state = useTimeFieldContext();
-  const [_segmentRef, setSegmentRef] = createSignal<HTMLDivElement | null>(null);
-
-  // Create segment ARIA props
-  // We use a simplified version for time segments
-  const [isFocused, setIsFocused] = createSignal(false);
-  const [enteredKeys, setEnteredKeys] = createSignal('');
-
-  const isEditable = createMemo(() => {
-    const seg = props.segment;
-    return seg.isEditable && !state.isDisabled() && !state.isReadOnly();
-  });
-
-  const handleKeyDown = (e: KeyboardEvent) => {
-    if (!isEditable()) return;
-
-    const seg = props.segment;
-    const type = seg.type;
-
-    if (type === 'literal') return;
-
-    switch (e.key) {
-      case 'ArrowUp':
-        e.preventDefault();
-        state.incrementSegment(type);
-        break;
-      case 'ArrowDown':
-        e.preventDefault();
-        state.decrementSegment(type);
-        break;
-      case 'Backspace':
-      case 'Delete':
-        e.preventDefault();
-        state.clearSegment(type);
-        setEnteredKeys('');
-        break;
-      default:
-        if (/^\d$/.test(e.key)) {
-          e.preventDefault();
-          const newKeys = enteredKeys() + e.key;
-          const numValue = parseInt(newKeys, 10);
-          const maxValue = seg.maxValue ?? 59;
-          const minValue = seg.minValue ?? 0;
-
-          if (numValue <= maxValue) {
-            state.setSegment(type, numValue);
-            if (numValue * 10 > maxValue || newKeys.length >= 2) {
-              setEnteredKeys('');
-            } else {
-              setEnteredKeys(newKeys);
-            }
-          } else {
-            const singleValue = parseInt(e.key, 10);
-            if (singleValue >= minValue && singleValue <= maxValue) {
-              state.setSegment(type, singleValue);
-            }
-            setEnteredKeys(e.key);
-          }
-        }
-        break;
-    }
-  };
-
-  const handleFocus = () => {
-    setIsFocused(true);
-    setEnteredKeys('');
-  };
-
-  const handleBlur = () => {
-    setIsFocused(false);
-    setEnteredKeys('');
-  };
-
-  // Segment props
-  const segmentProps = createMemo(() => {
-    const seg = props.segment;
-    const type = seg.type;
+  const [segmentRef, setSegmentRef] = createSignal<HTMLDivElement | null>(null);
 
-    if (type === 'literal') {
-      return {
-        'aria-hidden': true,
-      };
-    }
-
-    return {
-      role: 'spinbutton' as const,
-      tabIndex: isEditable() ? 0 : -1,
-      'aria-label': getTimeSegmentLabel(type),
-      'aria-valuenow': seg.value,
-      'aria-valuemin': seg.minValue,
-      'aria-valuemax': seg.maxValue,
-      'aria-valuetext': seg.isPlaceholder ? seg.placeholder : seg.text,
-      'aria-readonly': state.isReadOnly() || undefined,
-      'aria-disabled': state.isDisabled() || undefined,
-      'aria-invalid': state.isInvalid() || undefined,
-      contentEditable: isEditable(),
-      inputMode: 'numeric' as const,
-      autoCorrect: 'off',
-      enterKeyHint: 'next' as const,
-      spellCheck: false,
-      onKeyDown: handleKeyDown,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      onMouseDown: (e: MouseEvent) => {
-        e.preventDefault();
-      },
-    };
-  });
-
-  const text = createMemo(() => {
-    const seg = props.segment;
-    return seg.isPlaceholder ? seg.placeholder : seg.text;
-  });
+  const segmentAria = createTimeSegment(
+    { segment: props.segment },
+    state as unknown as TimeFieldState,
+    segmentRef
+  );
 
   // Render props values
   const renderValues = createMemo<TimeSegmentRenderProps>(() => ({
-    isFocused: isFocused(),
-    isEditable: isEditable(),
-    isPlaceholder: props.segment.isPlaceholder,
+    isFocused: segmentAria.isFocused,
+    isEditable: segmentAria.isEditable,
+    isPlaceholder: segmentAria.isPlaceholder,
     type: props.segment.type,
-    text: text(),
+    text: segmentAria.text,
   }));
 
   // Resolve render props
@@ -413,18 +336,18 @@ export function TimeSegment(props: TimeSegmentProps): JSX.Element {
     if (typeof props.children === 'function') {
       return renderProps.renderChildren();
     }
-    return text();
+    return segmentAria.text;
   };
 
   return (
     <div
       ref={setSegmentRef}
-      {...segmentProps()}
+      {...segmentAria.segmentProps}
       class={renderProps.class()}
       style={renderProps.style()}
-      data-focused={dataAttr(isFocused())}
-      data-editable={dataAttr(isEditable())}
-      data-placeholder={dataAttr(props.segment.isPlaceholder)}
+      data-focused={dataAttr(segmentAria.isFocused)}
+      data-editable={dataAttr(segmentAria.isEditable)}
+      data-placeholder={dataAttr(segmentAria.isPlaceholder)}
       data-type={props.segment.type}
     >
       {getChildren()}
@@ -433,22 +356,49 @@ export function TimeSegment(props: TimeSegmentProps): JSX.Element {
 }
 
 // ============================================
-// HELPER FUNCTIONS
+// LABEL / DESCRIPTION / ERROR
 // ============================================
 
-function getTimeSegmentLabel(type: TimeSegmentType['type']): string {
-  switch (type) {
-    case 'hour':
-      return 'Hour';
-    case 'minute':
-      return 'Minute';
-    case 'second':
-      return 'Second';
-    case 'dayPeriod':
-      return 'AM/PM';
-    default:
-      return '';
-  }
+export interface TimeFieldLabelProps {
+  children?: JSX.Element;
+  class?: string;
+}
+
+export function TimeFieldLabel(props: TimeFieldLabelProps): JSX.Element {
+  const { aria } = useTimeFieldContextValue();
+  return (
+    <span {...aria.labelProps} class={props.class}>
+      {props.children}
+    </span>
+  );
+}
+
+export interface TimeFieldDescriptionProps {
+  children?: JSX.Element;
+  class?: string;
+}
+
+export function TimeFieldDescription(props: TimeFieldDescriptionProps): JSX.Element {
+  const { aria } = useTimeFieldContextValue();
+  return (
+    <p {...aria.descriptionProps} class={props.class}>
+      {props.children}
+    </p>
+  );
+}
+
+export interface TimeFieldErrorMessageProps {
+  children?: JSX.Element;
+  class?: string;
+}
+
+export function TimeFieldErrorMessage(props: TimeFieldErrorMessageProps): JSX.Element {
+  const { aria } = useTimeFieldContextValue();
+  return (
+    <p {...aria.errorMessageProps} class={props.class}>
+      {props.children}
+    </p>
+  );
 }
 
 // Re-export types

package/src/Toast.tsx

@@ -9,6 +9,8 @@ import {
   type JSX,
   createContext,
   createMemo,
+  createEffect,
+  onCleanup,
   splitProps,
   Show,
   useContext,
@@ -24,6 +26,7 @@ import {
 import {
   createToast,
   createToastRegion,
+  useUNSAFE_PortalContext,
 } from '@proyecto-viviana/solidaria';
 import {
   type RenderChildren,
@@ -101,6 +104,13 @@ export interface ToastProps {
 
 export const ToastContext = createContext<ToastState<ToastContent> | null>(null);
 
+interface ToastAriaContextValue {
+  titleProps: JSX.HTMLAttributes<HTMLElement>;
+  descriptionProps: JSX.HTMLAttributes<HTMLElement>;
+}
+
+const ToastAriaContext = createContext<ToastAriaContextValue | null>(null);
+
 export function useToastContext(): ToastState<ToastContent> {
   const context = useContext(ToastContext);
   if (!context) {
@@ -116,7 +126,7 @@ export function useToastContext(): ToastState<ToastContent> {
 /** Default global toast queue that can be used for app-wide toasts. */
 export const globalToastQueue = new ToastQueue<ToastContent>({
   maxVisibleToasts: 5,
-  hasExitAnimation: false, // TODO: Enable once exit animation handling is implemented
+  hasExitAnimation: true,
 });
 
 /**
@@ -202,6 +212,8 @@ export function ToastRegion(props: ToastRegionProps): JSX.Element {
     'portal',
     'placement',
   ]);
+  const portalContext = useUNSAFE_PortalContext();
+  const portalContainer = () => portalContext.getContainer?.() ?? undefined;
 
   // Get state from context if not provided
   const contextState = useContext(ToastContext);
@@ -301,7 +313,7 @@ export function ToastRegion(props: ToastRegionProps): JSX.Element {
   return (
     <Show when={hasToasts()}>
       <Show when={local.portal !== false} fallback={regionContent()}>
-        <Portal>{regionContent()}</Portal>
+        <Portal mount={portalContainer()}>{regionContent()}</Portal>
       </Show>
     </Show>
   );
@@ -334,6 +346,8 @@ export function Toast(props: ToastProps): JSX.Element {
     'style',
   ]);
 
+  let toastRef!: HTMLDivElement;
+
   // Get state from context
   const state = useToastContext();
 
@@ -341,6 +355,8 @@ export function Toast(props: ToastProps): JSX.Element {
   const toastAria = createToast({
     toast: local.toast,
     state,
+    hasTitle: !!local.toast.content.title,
+    hasDescription: !!local.toast.content.description,
   });
 
   // Render props values
@@ -372,20 +388,92 @@ export function Toast(props: ToastProps): JSX.Element {
     return { 'pointer-events': 'auto' as const, ...custom } as JSX.CSSProperties;
   };
 
+  // Exit animation lifecycle:
+  // When animation becomes 'exiting', wait for CSS animations/transitions to finish,
+  // then call state.remove() to finalize removal from the queue.
+  // In JSDOM or when no animations are running, remove immediately.
+  // Reduced-motion is handled by CSS (shorter/no animations), so the lifecycle
+  // naturally completes faster when the user prefers reduced motion.
+  createEffect(() => {
+    if (local.toast.animation !== 'exiting') return;
+    if (!toastRef) {
+      state.remove(local.toast.key);
+      return;
+    }
+
+    // Check if the element supports the Web Animations API
+    if (!('getAnimations' in toastRef)) {
+      state.remove(local.toast.key);
+      return;
+    }
+
+    const animations = toastRef.getAnimations();
+    if (animations.length === 0) {
+      // No CSS animations/transitions running - remove immediately
+      state.remove(local.toast.key);
+      return;
+    }
+
+    // Wait for all running animations to finish, then remove
+    let canceled = false;
+    Promise.all(animations.map((a) => a.finished))
+      .then(() => {
+        if (!canceled) {
+          state.remove(local.toast.key);
+        }
+      })
+      .catch(() => {
+        // Animation was canceled (e.g. element removed) - still clean up
+        if (!canceled) {
+          state.remove(local.toast.key);
+        }
+      });
+
+    onCleanup(() => {
+      canceled = true;
+    });
+  });
+
   // Extract ref from toastProps to avoid type conflicts
   const { ref: _ref, ...cleanToastProps } = toastAria.toastProps as Record<string, unknown>;
 
+  // Ensure ARIA title/description IDs are present on rendered sub-components,
+  // even when children are pre-composed outside the Toast provider owner.
+  createEffect(() => {
+    if (!toastRef) return;
+
+    const titleId = (toastAria.titleProps as Record<string, unknown>).id as string | undefined;
+    const descriptionId = (toastAria.descriptionProps as Record<string, unknown>).id as string | undefined;
+
+    if (titleId) {
+      const titleEl = toastRef.querySelector('[data-solidaria-toast-title]');
+      if (titleEl instanceof HTMLElement) {
+        titleEl.id = titleId;
+      }
+    }
+
+    if (descriptionId) {
+      const descriptionEl = toastRef.querySelector('[data-solidaria-toast-description]');
+      if (descriptionEl instanceof HTMLElement) {
+        descriptionEl.id = descriptionId;
+      }
+    }
+  });
+
   return (
-    <div
-      {...domProps()}
-      {...cleanToastProps}
-      class={renderProps.class()}
-      style={mergedStyle()}
-      data-animation={local.toast.animation}
-      data-type={local.toast.content.type}
-    >
-      {renderProps.renderChildren()}
-    </div>
+    <ToastAriaContext.Provider value={{ titleProps: toastAria.titleProps, descriptionProps: toastAria.descriptionProps }}>
+      <div
+        ref={toastRef}
+        {...domProps()}
+        {...cleanToastProps}
+        class={renderProps.class()}
+        style={mergedStyle()}
+        data-animation={local.toast.animation}
+        data-type={local.toast.content.type}
+      >
+        {renderProps.renderChildren()}
+      </div>
+    </ToastAriaContext.Provider>
   );
 }
 
@@ -403,8 +491,11 @@ export interface ToastTitleProps {
  * ToastTitle renders the toast title with proper accessibility attributes.
  */
 export function ToastTitle(props: ToastTitleProps): JSX.Element {
+  const context = useContext(ToastAriaContext);
+  const { ref: _ref, ...ariaTitleProps } = (context?.titleProps ?? {}) as Record<string, unknown>;
+
   return (
-    <div class={props.class} style={props.style}>
+    <div data-solidaria-toast-title="" {...ariaTitleProps} class={props.class} style={props.style}>
       {props.children}
     </div>
   );
@@ -420,8 +511,11 @@ export interface ToastDescriptionProps {
  * ToastDescription renders the toast description with proper accessibility attributes.
  */
 export function ToastDescription(props: ToastDescriptionProps): JSX.Element {
+  const context = useContext(ToastAriaContext);
+  const { ref: _ref, ...ariaDescriptionProps } = (context?.descriptionProps ?? {}) as Record<string, unknown>;
+
   return (
-    <div class={props.class} style={props.style}>
+    <div data-solidaria-toast-description="" {...ariaDescriptionProps} class={props.class} style={props.style}>
       {props.children}
     </div>
   );

package/src/ToggleButton.tsx

@@ -0,0 +1,159 @@
+/**
+ * ToggleButton component for solidaria-components
+ *
+ * A pre-wired headless toggle button that combines pressed + selected state.
+ * Port direction: react-aria-components/src/ToggleButton.tsx
+ */
+
+import {
+  type JSX,
+  createContext,
+  createMemo,
+  splitProps,
+  useContext,
+} from 'solid-js';
+import {
+  createToggleButton,
+  createToggleButtonGroupItem,
+  createFocusRing,
+  createHover,
+  mergeProps,
+  type AriaToggleButtonProps,
+} from '@proyecto-viviana/solidaria';
+import type { Key } from '@proyecto-viviana/solid-stately';
+import {
+  type RenderChildren,
+  type ClassNameOrFunction,
+  type StyleOrFunction,
+  type SlotProps,
+  useRenderProps,
+  filterDOMProps,
+} from './utils';
+import { useToggleButtonGroupStateContext } from './ToggleButtonGroup';
+
+export interface ToggleButtonRenderProps {
+  isHovered: boolean;
+  isPressed: boolean;
+  isFocused: boolean;
+  isFocusVisible: boolean;
+  isDisabled: boolean;
+  isSelected: boolean;
+}
+
+export interface ToggleButtonProps
+  extends Omit<AriaToggleButtonProps, 'children'>,
+    SlotProps {
+  /** Key used when inside ToggleButtonGroup selection state. */
+  toggleKey?: Key;
+  /** Preferred group key prop, parity with RAC item id usage. */
+  id?: Key;
+  children?: RenderChildren<ToggleButtonRenderProps>;
+  class?: ClassNameOrFunction<ToggleButtonRenderProps>;
+  style?: StyleOrFunction<ToggleButtonRenderProps>;
+}
+
+export const ToggleButtonContext = createContext<ToggleButtonProps | null>(null);
+
+function resolveDisabledValue(
+  isDisabled: AriaToggleButtonProps['isDisabled']
+): boolean {
+  if (typeof isDisabled === 'function') {
+    return isDisabled();
+  }
+  return !!isDisabled;
+}
+
+export function ToggleButton(props: ToggleButtonProps): JSX.Element {
+  const contextProps = useContext(ToggleButtonContext);
+  const mergedProps = (contextProps ? mergeProps(contextProps, props) : props) as ToggleButtonProps;
+
+  const [local, ariaProps] = splitProps(mergedProps, [
+    'children',
+    'class',
+    'style',
+    'slot',
+    'toggleKey',
+    'id',
+  ]);
+  const groupState = useToggleButtonGroupStateContext();
+  const groupKey = local.id ?? local.toggleKey;
+
+  const toggleAria = groupState && groupKey != null
+    ? createToggleButtonGroupItem(
+      {
+        ...ariaProps,
+        id: groupKey,
+      },
+      groupState
+    )
+    : createToggleButton(ariaProps);
+
+  const isDisabled = () =>
+    resolveDisabledValue(ariaProps.isDisabled) || !!groupState?.isDisabled;
+
+  const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+  const { isHovered, hoverProps } = createHover({
+    get isDisabled() {
+      return isDisabled();
+    },
+  });
+
+  const renderValues = createMemo<ToggleButtonRenderProps>(() => ({
+    isHovered: isHovered(),
+    isPressed: toggleAria.isPressed(),
+    isFocused: isFocused(),
+    isFocusVisible: isFocusVisible(),
+    isDisabled: isDisabled(),
+    isSelected: toggleAria.isSelected(),
+  }));
+
+  const renderProps = useRenderProps(
+    {
+      children: local.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: 'solidaria-ToggleButton',
+    },
+    renderValues
+  );
+
+  const domProps = createMemo(() => {
+    const filtered = filterDOMProps(ariaProps, { global: true });
+    delete (filtered as Record<string, unknown>).onClick;
+    delete (filtered as Record<string, unknown>).id;
+    return filtered;
+  });
+
+  const cleanButtonProps = () => {
+    const { ref: _ref1, ...rest } = toggleAria.buttonProps as Record<string, unknown>;
+    return rest;
+  };
+  const cleanFocusProps = () => {
+    const { ref: _ref2, ...rest } = focusProps as Record<string, unknown>;
+    return rest;
+  };
+  const cleanHoverProps = () => {
+    const { ref: _ref3, ...rest } = hoverProps as Record<string, unknown>;
+    return rest;
+  };
+
+  return (
+    <button
+      {...domProps()}
+      {...cleanButtonProps()}
+      {...cleanFocusProps()}
+      {...cleanHoverProps()}
+      class={renderProps.class()}
+      style={renderProps.style()}
+      slot={local.slot}
+      data-pressed={toggleAria.isPressed() || undefined}
+      data-hovered={isHovered() || undefined}
+      data-focused={isFocused() || undefined}
+      data-focus-visible={isFocusVisible() || undefined}
+      data-disabled={isDisabled() || undefined}
+      data-selected={toggleAria.isSelected() || undefined}
+    >
+      {renderProps.renderChildren()}
+    </button>
+  );
+}