@proyecto-viviana/solidaria 0.3.0 → 0.4.1

package/dist/_chunk/textfield.jsx

@@ -0,0 +1,110 @@
+import { i as mergeProps } from "./env.jsx";
+import { t as filterDOMProps } from "./filterDOMProps.jsx";
+import { t as access } from "./reactivity.jsx";
+import { n as createFocusable } from "./createFocusable.jsx";
+import { t as createField } from "./createField.jsx";
+//#region src/textfield/createTextField.ts
+/**
+* Provides the behavior and accessibility implementation for a text field.
+* Text fields allow users to input text with a keyboard.
+*
+* @param props - Props for the text field.
+* @param ref - Optional ref callback for the input element.
+*/
+function createTextField(props, ref) {
+	const getProps = () => access(props);
+	let lastInputValue;
+	const eventWithCurrentTarget = (event, element) => new Proxy(event, { get(target, property, receiver) {
+		if (property === "target" || property === "currentTarget") return element;
+		const value = Reflect.get(target, property, receiver);
+		return typeof value === "function" ? value.bind(target) : value;
+	} });
+	const { labelProps, fieldProps, descriptionProps, errorMessageProps } = createField(props);
+	const { focusableProps } = createFocusable({
+		get isDisabled() {
+			return getProps().isDisabled;
+		},
+		get autoFocus() {
+			return getProps().autoFocus;
+		},
+		get excludeFromTabOrder() {
+			return getProps().excludeFromTabOrder;
+		},
+		onFocus: getProps().onFocus,
+		onBlur: getProps().onBlur,
+		onFocusChange: getProps().onFocusChange,
+		onKeyDown: getProps().onKeyDown,
+		onKeyUp: getProps().onKeyUp
+	}, ref);
+	const getDomProps = () => filterDOMProps(getProps(), { labelable: true });
+	const getInputProps = () => {
+		const p = getProps();
+		const isInvalid = p.isInvalid ?? false;
+		const isTextarea = p.inputElementType === "textarea";
+		const validationBehavior = p.validationBehavior ?? "native";
+		return mergeProps(getDomProps(), {
+			disabled: p.isDisabled,
+			readOnly: p.isReadOnly,
+			required: validationBehavior === "native" && p.isRequired,
+			"aria-required": validationBehavior === "aria" && p.isRequired || void 0,
+			"aria-invalid": isInvalid || void 0,
+			value: p.value ?? p.defaultValue ?? "",
+			onChange: (e) => {
+				const target = e.target;
+				if (target.value !== lastInputValue) p.onChange?.(target.value);
+			},
+			type: isTextarea ? void 0 : p.type ?? "text",
+			inputMode: p.inputMode,
+			enterKeyHint: p.enterKeyHint,
+			name: p.name,
+			form: p.form,
+			pattern: isTextarea ? void 0 : p.pattern,
+			maxLength: p.maxLength,
+			minLength: p.minLength,
+			placeholder: p.placeholder,
+			autoComplete: p.autoComplete,
+			autoCorrect: p.autoCorrect,
+			autoCapitalize: p.autoCapitalize,
+			spellCheck: p.spellCheck,
+			onCopy: p.onCopy,
+			onCut: p.onCut,
+			onPaste: p.onPaste,
+			onCompositionStart: p.onCompositionStart,
+			onCompositionEnd: p.onCompositionEnd,
+			onCompositionUpdate: p.onCompositionUpdate,
+			onSelect: p.onSelect,
+			onBeforeInput: p.onBeforeInput,
+			onInput: (e) => {
+				const target = e.target;
+				const nextValue = target.value;
+				p.onInput?.(eventWithCurrentTarget(e, target));
+				lastInputValue = nextValue;
+				p.onChange?.(nextValue);
+			}
+		}, focusableProps, fieldProps);
+	};
+	const getIsInvalid = () => {
+		return getProps().isInvalid ?? false;
+	};
+	return {
+		get labelProps() {
+			return labelProps;
+		},
+		get inputProps() {
+			return getInputProps();
+		},
+		get descriptionProps() {
+			return descriptionProps;
+		},
+		get errorMessageProps() {
+			return errorMessageProps;
+		},
+		get isInvalid() {
+			return getIsInvalid();
+		}
+	};
+}
+//#endregion
+export { createTextField as t };
+
+//# sourceMappingURL=textfield.jsx.map

package/dist/_chunk/textfield.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"textfield.jsx","names":[],"sources":["../../src/textfield/createTextField.ts"],"sourcesContent":["/**\n * TextField hook for Solidaria\n *\n * Provides the behavior and accessibility implementation for a text field.\n *\n * This is a 1:1 port of @react-aria/textfield's useTextField hook.\n */\n\nimport { JSX } from \"solid-js\";\nimport { createField, type AriaFieldProps, type FieldAria } from \"../label\";\nimport { createFocusable, type FocusableDOMProps, type FocusableProps } from \"../interactions\";\nimport { mergeProps, filterDOMProps } from \"../utils\";\nimport { type MaybeAccessor, access } from \"../utils/reactivity\";\n\nexport interface AriaTextFieldProps extends AriaFieldProps, FocusableProps, FocusableDOMProps {\n  /** The current value (controlled). */\n  value?: string;\n  /** The default value (uncontrolled). */\n  defaultValue?: string;\n  /** Handler that is called when the value changes. */\n  onChange?: (value: string) => void;\n  /** Whether the input is disabled. */\n  isDisabled?: boolean;\n  /** Whether the input is read only. */\n  isReadOnly?: boolean;\n  /** Whether the input is required. */\n  isRequired?: boolean;\n  /** Whether to use native HTML form validation or ARIA validation semantics. */\n  validationBehavior?: \"aria\" | \"native\";\n  /** The type of input to render. */\n  type?: \"text\" | \"search\" | \"url\" | \"tel\" | \"email\" | \"password\" | string;\n  /** The input mode hint for virtual keyboards. */\n  inputMode?: \"none\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | \"search\";\n  /** Hint for the enter key action on virtual keyboards. */\n  enterKeyHint?: \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\";\n  /** The name of the input element, used when submitting an HTML form. */\n  name?: string;\n  /** Associates the input with a form element by id. */\n  form?: string;\n  /** Regex pattern to validate the input value. */\n  pattern?: string;\n  /** The maximum number of characters supported by the input. */\n  maxLength?: number;\n  /** The minimum number of characters required by the input. */\n  minLength?: number;\n  /** Placeholder text for the input. */\n  placeholder?: string;\n  /** Whether to enable auto complete. */\n  autoComplete?: string;\n  /** Whether to enable auto correct. */\n  autoCorrect?: string;\n  /** Whether to enable spell check. */\n  spellCheck?: \"true\" | \"false\";\n  /** Controls whether and how text input is automatically capitalized. */\n  autoCapitalize?: \"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\";\n  /** The element type to use for the input. Defaults to 'input'. */\n  inputElementType?: \"input\" | \"textarea\";\n\n  // Clipboard events\n  onCopy?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, ClipboardEvent>;\n  onCut?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, ClipboardEvent>;\n  onPaste?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, ClipboardEvent>;\n\n  // Composition events\n  onCompositionStart?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, CompositionEvent>;\n  onCompositionEnd?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, CompositionEvent>;\n  onCompositionUpdate?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, CompositionEvent>;\n\n  // Selection events\n  onSelect?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, Event>;\n\n  // Input events\n  onBeforeInput?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, InputEvent>;\n  onInput?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, InputEvent>;\n}\n\nexport interface TextFieldAria<\n  T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n> extends Omit<FieldAria, \"fieldProps\"> {\n  /** Props for the input element. */\n  inputProps: JSX.InputHTMLAttributes<T>;\n  /** Whether the text field is invalid. */\n  isInvalid: boolean;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a text field.\n * Text fields allow users to input text with a keyboard.\n *\n * @param props - Props for the text field.\n * @param ref - Optional ref callback for the input element.\n */\nexport function createTextField<\n  T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n>(props: MaybeAccessor<AriaTextFieldProps>, ref?: (el: T) => void): TextFieldAria<T> {\n  const getProps = () => access(props);\n  let lastInputValue: string | undefined;\n\n  const eventWithCurrentTarget = (\n    event: InputEvent,\n    element: HTMLInputElement | HTMLTextAreaElement,\n  ) =>\n    new Proxy(event, {\n      get(target, property, receiver) {\n        if (property === \"target\" || property === \"currentTarget\") {\n          return element;\n        }\n\n        const value = Reflect.get(target, property, receiver);\n        return typeof value === \"function\" ? value.bind(target) : value;\n      },\n    });\n\n  // Get field accessibility props (label, description, error message)\n  const { labelProps, fieldProps, descriptionProps, errorMessageProps } = createField(props);\n\n  // Get focusable props\n  const { focusableProps } = createFocusable(\n    {\n      get isDisabled() {\n        return getProps().isDisabled;\n      },\n      get autoFocus() {\n        return getProps().autoFocus;\n      },\n      get excludeFromTabOrder() {\n        return getProps().excludeFromTabOrder;\n      },\n      onFocus: getProps().onFocus,\n      onBlur: getProps().onBlur,\n      onFocusChange: getProps().onFocusChange,\n      onKeyDown: getProps().onKeyDown,\n      onKeyUp: getProps().onKeyUp,\n    },\n    ref as ((el: HTMLElement) => void) | undefined,\n  );\n\n  // Filter DOM props\n  const getDomProps = () =>\n    filterDOMProps(getProps() as Record<string, unknown>, { labelable: true });\n\n  // Build input props\n  const getInputProps = (): JSX.InputHTMLAttributes<T> => {\n    const p = getProps();\n    const isInvalid = p.isInvalid ?? false;\n    const isTextarea = p.inputElementType === \"textarea\";\n    const validationBehavior = p.validationBehavior ?? \"native\";\n\n    return mergeProps(\n      getDomProps(),\n      {\n        disabled: p.isDisabled,\n        readOnly: p.isReadOnly,\n        required: validationBehavior === \"native\" && p.isRequired,\n        \"aria-required\": (validationBehavior === \"aria\" && p.isRequired) || undefined,\n        \"aria-invalid\": isInvalid || undefined,\n        value: p.value ?? p.defaultValue ?? \"\",\n        onChange: (e: Event) => {\n          const target = e.target as HTMLInputElement | HTMLTextAreaElement;\n          if (target.value !== lastInputValue) {\n            p.onChange?.(target.value);\n          }\n        },\n        // Don't include type and pattern for textarea elements\n        type: isTextarea ? undefined : (p.type ?? \"text\"),\n        inputMode: p.inputMode,\n        enterKeyHint: p.enterKeyHint,\n        name: p.name,\n        form: p.form,\n        pattern: isTextarea ? undefined : p.pattern,\n        maxLength: p.maxLength,\n        minLength: p.minLength,\n        placeholder: p.placeholder,\n        autoComplete: p.autoComplete,\n        autoCorrect: p.autoCorrect,\n        autoCapitalize: p.autoCapitalize,\n        spellCheck: p.spellCheck,\n\n        // Clipboard events\n        onCopy: p.onCopy,\n        onCut: p.onCut,\n        onPaste: p.onPaste,\n\n        // Composition events\n        onCompositionStart: p.onCompositionStart,\n        onCompositionEnd: p.onCompositionEnd,\n        onCompositionUpdate: p.onCompositionUpdate,\n\n        // Selection events\n        onSelect: p.onSelect,\n\n        // Input events\n        onBeforeInput: p.onBeforeInput,\n        onInput: (e: InputEvent) => {\n          const target = e.target as HTMLInputElement | HTMLTextAreaElement;\n          const nextValue = target.value;\n          p.onInput?.(\n            eventWithCurrentTarget(e, target) as Parameters<NonNullable<typeof p.onInput>>[0],\n          );\n          lastInputValue = nextValue;\n          p.onChange?.(nextValue);\n        },\n      },\n      focusableProps as Record<string, unknown>,\n      fieldProps as Record<string, unknown>,\n    ) as JSX.InputHTMLAttributes<T>;\n  };\n\n  const getIsInvalid = () => {\n    return getProps().isInvalid ?? false;\n  };\n\n  return {\n    get labelProps() {\n      return labelProps;\n    },\n    get inputProps() {\n      return getInputProps();\n    },\n    get descriptionProps() {\n      return descriptionProps;\n    },\n    get errorMessageProps() {\n      return errorMessageProps;\n    },\n    get isInvalid() {\n      return getIsInvalid();\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;AA4FA,SAAgB,gBAEd,OAA0C,KAAyC;CACnF,MAAM,iBAAiB,OAAO,KAAK;CACnC,IAAI;CAEJ,MAAM,0BACJ,OACA,YAEA,IAAI,MAAM,OAAO,EACf,IAAI,QAAQ,UAAU,UAAU;EAC9B,IAAI,aAAa,YAAY,aAAa,iBACxC,OAAO;EAGT,MAAM,QAAQ,QAAQ,IAAI,QAAQ,UAAU,QAAQ;EACpD,OAAO,OAAO,UAAU,aAAa,MAAM,KAAK,MAAM,IAAI;CAC5D,EACF,CAAC;CAGH,MAAM,EAAE,YAAY,YAAY,kBAAkB,sBAAsB,YAAY,KAAK;CAGzF,MAAM,EAAE,mBAAmB,gBACzB;EACE,IAAI,aAAa;GACf,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,YAAY;GACd,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,sBAAsB;GACxB,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,SAAS,SAAS,CAAC,CAAC;EACpB,QAAQ,SAAS,CAAC,CAAC;EACnB,eAAe,SAAS,CAAC,CAAC;EAC1B,WAAW,SAAS,CAAC,CAAC;EACtB,SAAS,SAAS,CAAC,CAAC;CACtB,GACA,GACF;CAGA,MAAM,oBACJ,eAAe,SAAS,GAA8B,EAAE,WAAW,KAAK,CAAC;CAG3E,MAAM,sBAAkD;EACtD,MAAM,IAAI,SAAS;EACnB,MAAM,YAAY,EAAE,aAAa;EACjC,MAAM,aAAa,EAAE,qBAAqB;EAC1C,MAAM,qBAAqB,EAAE,sBAAsB;EAEnD,OAAO,WACL,YAAY,GACZ;GACE,UAAU,EAAE;GACZ,UAAU,EAAE;GACZ,UAAU,uBAAuB,YAAY,EAAE;GAC/C,iBAAkB,uBAAuB,UAAU,EAAE,cAAe,KAAA;GACpE,gBAAgB,aAAa,KAAA;GAC7B,OAAO,EAAE,SAAS,EAAE,gBAAgB;GACpC,WAAW,MAAa;IACtB,MAAM,SAAS,EAAE;IACjB,IAAI,OAAO,UAAU,gBACnB,EAAE,WAAW,OAAO,KAAK;GAE7B;GAEA,MAAM,aAAa,KAAA,IAAa,EAAE,QAAQ;GAC1C,WAAW,EAAE;GACb,cAAc,EAAE;GAChB,MAAM,EAAE;GACR,MAAM,EAAE;GACR,SAAS,aAAa,KAAA,IAAY,EAAE;GACpC,WAAW,EAAE;GACb,WAAW,EAAE;GACb,aAAa,EAAE;GACf,cAAc,EAAE;GAChB,aAAa,EAAE;GACf,gBAAgB,EAAE;GAClB,YAAY,EAAE;GAGd,QAAQ,EAAE;GACV,OAAO,EAAE;GACT,SAAS,EAAE;GAGX,oBAAoB,EAAE;GACtB,kBAAkB,EAAE;GACpB,qBAAqB,EAAE;GAGvB,UAAU,EAAE;GAGZ,eAAe,EAAE;GACjB,UAAU,MAAkB;IAC1B,MAAM,SAAS,EAAE;IACjB,MAAM,YAAY,OAAO;IACzB,EAAE,UACA,uBAAuB,GAAG,MAAM,CAClC;IACA,iBAAiB;IACjB,EAAE,WAAW,SAAS;GACxB;EACF,GACA,gBACA,UACF;CACF;CAEA,MAAM,qBAAqB;EACzB,OAAO,SAAS,CAAC,CAAC,aAAa;CACjC;CAEA,OAAO;EACL,IAAI,aAAa;GACf,OAAO;EACT;EACA,IAAI,aAAa;GACf,OAAO,cAAc;EACvB;EACA,IAAI,mBAAmB;GACrB,OAAO;EACT;EACA,IAAI,oBAAoB;GACtB,OAAO;EACT;EACA,IAAI,YAAY;GACd,OAAO,aAAa;EACtB;CACF;AACF"}

package/dist/_chunk/toast.js

@@ -0,0 +1,250 @@
+import { n as focusWithoutScrolling } from "./focus.js";
+import { o as getInteractionModality } from "./createInteractionModality.js";
+import { t as createHover } from "./createHover.js";
+import { createId } from "../ssr/index.js";
+import { t as createLandmark } from "./createLandmark.js";
+import { createEffect, createMemo, onCleanup } from "solid-js";
+//#region src/toast/createToast.ts
+/**
+* createToast hook for Solidaria
+*
+* Provides the accessibility implementation for a Toast component.
+*
+* Port of @react-aria/toast useToast.
+*/
+/**
+* Provides the accessibility implementation for a Toast component.
+*
+* The toast uses role="alertdialog" to announce content to screen readers.
+* The content area uses role="alert" for the actual message.
+*
+* @example
+* ```tsx
+* import { createToast } from 'solidaria';
+*
+* function Toast(props) {
+*   const {
+*     toastProps,
+*     contentProps,
+*     titleProps,
+*     closeButtonProps
+*   } = createToast({ toast: props.toast, state: props.state });
+*
+*   return (
+*     <div {...toastProps}>
+*       <div {...contentProps}>
+*         <div {...titleProps}>{props.toast.content.title}</div>
+*       </div>
+*       <button {...closeButtonProps}>×</button>
+*     </div>
+*   );
+* }
+* ```
+*/
+function createToast(props) {
+	const titleId = createId();
+	const descriptionId = createId();
+	const hasTitle = props.hasTitle ?? true;
+	const hasDescription = props.hasDescription ?? true;
+	const close = () => {
+		props.state.close(props.toast.key);
+	};
+	const toastProps = createMemo(() => ({
+		role: "alertdialog",
+		"aria-modal": "false",
+		"aria-labelledby": hasTitle ? titleId : void 0,
+		"aria-describedby": hasDescription ? descriptionId : void 0,
+		tabIndex: 0,
+		"data-animation": props.toast.animation,
+		"data-key": props.toast.key
+	}));
+	const contentProps = createMemo(() => ({
+		role: "alert",
+		"aria-atomic": "true",
+		"aria-live": "assertive"
+	}));
+	const titleProps = createMemo(() => ({ id: titleId }));
+	const descriptionProps = createMemo(() => ({ id: descriptionId }));
+	const closeButtonProps = createMemo(() => ({
+		"aria-label": "Close",
+		onClick: close
+	}));
+	return {
+		get toastProps() {
+			return toastProps();
+		},
+		get contentProps() {
+			return contentProps();
+		},
+		get titleProps() {
+			return titleProps();
+		},
+		get descriptionProps() {
+			return descriptionProps();
+		},
+		get closeButtonProps() {
+			return closeButtonProps();
+		}
+	};
+}
+//#endregion
+//#region src/toast/createToastRegion.ts
+/**
+* createToastRegion hook for Solidaria
+*
+* Provides the accessibility implementation for a ToastRegion component.
+* The region is a landmark that contains all visible toasts.
+*
+* Port of @react-aria/toast useToastRegion.
+*/
+/**
+* Provides the accessibility implementation for a ToastRegion component.
+*
+* The region is a landmark (role="region") that contains all visible toasts.
+* It pauses toast timers on hover or focus to give users time to read/interact.
+*
+* @example
+* ```tsx
+* import { createToastRegion } from 'solidaria';
+* import { For, Show } from 'solid-js';
+*
+* function ToastRegion(props) {
+*   let ref;
+*   const { regionProps } = createToastRegion({ state: props.state });
+*
+*   return (
+*     <Show when={props.state.visibleToasts().length > 0}>
+*       <div {...regionProps} ref={ref}>
+*         <For each={props.state.visibleToasts()}>
+*           {(toast) => <Toast toast={toast} state={props.state} />}
+*         </For>
+*       </div>
+*     </Show>
+*   );
+* }
+* ```
+*/
+function createToastRegion(props) {
+	const visibleToasts = () => typeof props.state.visibleToasts === "function" ? props.state.visibleToasts() : [];
+	const regionRef = () => props.ref?.();
+	const activeRegionRef = () => visibleToasts().length > 0 ? regionRef() : void 0;
+	const { landmarkProps } = createLandmark(() => ({
+		role: "region",
+		"aria-label": props["aria-label"] ?? "Notifications"
+	}), activeRegionRef);
+	let isHovered = false;
+	let isFocused = false;
+	let toastElements = [];
+	let previousVisibleToasts = visibleToasts();
+	let focusedToastIndex = -1;
+	let lastFocused = null;
+	const updateTimers = () => {
+		if (isHovered || isFocused) props.state.pauseAll();
+		else props.state.resumeAll();
+	};
+	const { hoverProps } = createHover({
+		onHoverStart: () => {
+			isHovered = true;
+			updateTimers();
+		},
+		onHoverEnd: () => {
+			isHovered = false;
+			updateTimers();
+		}
+	});
+	const getToastElements = () => {
+		const element = regionRef();
+		return element ? [...element.querySelectorAll("[role=\"alertdialog\"]")] : [];
+	};
+	const restoreLastFocused = () => {
+		if (!lastFocused?.isConnected) {
+			lastFocused = null;
+			return;
+		}
+		if (getInteractionModality() === "pointer") focusWithoutScrolling(lastFocused);
+		else lastFocused.focus();
+		lastFocused = null;
+	};
+	const handleFocusIn = (e) => {
+		const currentTarget = e.currentTarget;
+		const relatedTarget = e.relatedTarget;
+		if (!isFocused) {
+			isFocused = true;
+			if (relatedTarget && !currentTarget.contains(relatedTarget)) lastFocused = relatedTarget;
+			updateTimers();
+		}
+		toastElements = getToastElements();
+		const target = e.target instanceof Element ? e.target.closest("[role=\"alertdialog\"]") : null;
+		focusedToastIndex = target ? toastElements.findIndex((toast) => toast === target) : -1;
+	};
+	const handleFocusOut = (e) => {
+		const target = e.relatedTarget;
+		const currentTarget = e.currentTarget;
+		if (!target || !currentTarget.contains(target)) {
+			isFocused = false;
+			focusedToastIndex = -1;
+			updateTimers();
+		}
+	};
+	createEffect(() => {
+		const currentVisibleToasts = visibleToasts();
+		const element = regionRef();
+		if (focusedToastIndex === -1 || currentVisibleToasts.length === 0 || !element) {
+			toastElements = [];
+			previousVisibleToasts = currentVisibleToasts;
+			return;
+		}
+		toastElements = getToastElements();
+		if (previousVisibleToasts.length === currentVisibleToasts.length && currentVisibleToasts.every((toast, index) => toast.key === previousVisibleToasts[index]?.key)) {
+			previousVisibleToasts = currentVisibleToasts;
+			return;
+		}
+		const allToasts = previousVisibleToasts.map((toast, index) => ({
+			index,
+			isRemoved: !currentVisibleToasts.some((currentToast) => currentToast.key === toast.key)
+		}));
+		const removedFocusedToastIndex = allToasts.findIndex((toast) => toast.index === focusedToastIndex && toast.isRemoved);
+		if (removedFocusedToastIndex > -1) if (getInteractionModality() === "pointer" && lastFocused?.isConnected) focusWithoutScrolling(lastFocused);
+		else {
+			let index = 0;
+			let nextToast;
+			let previousToast;
+			while (index <= removedFocusedToastIndex) {
+				if (!allToasts[index]?.isRemoved) previousToast = Math.max(0, index - 1);
+				index++;
+			}
+			while (index < allToasts.length) {
+				if (!allToasts[index]?.isRemoved) {
+					nextToast = index - 1;
+					break;
+				}
+				index++;
+			}
+			if (previousToast === void 0 && nextToast === void 0) previousToast = 0;
+			if (previousToast !== void 0 && previousToast >= 0 && previousToast < toastElements.length) focusWithoutScrolling(toastElements[previousToast]);
+			else if (nextToast !== void 0 && nextToast >= 0 && nextToast < toastElements.length) focusWithoutScrolling(toastElements[nextToast]);
+		}
+		previousVisibleToasts = currentVisibleToasts;
+	});
+	createEffect(() => {
+		if (visibleToasts().length === 0) restoreLastFocused();
+	});
+	onCleanup(() => {
+		restoreLastFocused();
+	});
+	const regionProps = createMemo(() => ({
+		...landmarkProps,
+		...hoverProps,
+		tabIndex: -1,
+		"data-solidaria-top-layer": "true",
+		onFocusIn: handleFocusIn,
+		onFocusOut: handleFocusOut
+	}));
+	return { get regionProps() {
+		return regionProps();
+	} };
+}
+//#endregion
+export { createToast as n, createToastRegion as t };
+
+//# sourceMappingURL=toast.js.map

package/dist/_chunk/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","names":[],"sources":["../../src/toast/createToast.ts","../../src/toast/createToastRegion.ts"],"sourcesContent":["/**\n * createToast hook for Solidaria\n *\n * Provides the accessibility implementation for a Toast component.\n *\n * Port of @react-aria/toast useToast.\n */\n\nimport { type JSX, createMemo } from \"solid-js\";\nimport { type QueuedToast, type ToastState } from \"@proyecto-viviana/solid-stately\";\nimport { createId } from \"../ssr\";\n\nexport interface AriaToastProps<T> {\n  /** The toast to display. */\n  toast: QueuedToast<T>;\n  /** The toast state from createToastState. */\n  state: ToastState<T>;\n  /** Whether the rendered toast includes a title element. */\n  hasTitle?: boolean;\n  /** Whether the rendered toast includes a description element. */\n  hasDescription?: boolean;\n}\n\nexport interface ToastAria {\n  /** Props for the toast container element. */\n  toastProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the toast content element (contains the message). */\n  contentProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the toast title element. */\n  titleProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the toast description element. */\n  descriptionProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the close button. */\n  closeButtonProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;\n}\n\n/**\n * Provides the accessibility implementation for a Toast component.\n *\n * The toast uses role=\"alertdialog\" to announce content to screen readers.\n * The content area uses role=\"alert\" for the actual message.\n *\n * @example\n * ```tsx\n * import { createToast } from 'solidaria';\n *\n * function Toast(props) {\n *   const {\n *     toastProps,\n *     contentProps,\n *     titleProps,\n *     closeButtonProps\n *   } = createToast({ toast: props.toast, state: props.state });\n *\n *   return (\n *     <div {...toastProps}>\n *       <div {...contentProps}>\n *         <div {...titleProps}>{props.toast.content.title}</div>\n *       </div>\n *       <button {...closeButtonProps}>×</button>\n *     </div>\n *   );\n * }\n * ```\n */\nexport function createToast<T>(props: AriaToastProps<T>): ToastAria {\n  const titleId = createId();\n  const descriptionId = createId();\n  const hasTitle = props.hasTitle ?? true;\n  const hasDescription = props.hasDescription ?? true;\n\n  const close = () => {\n    props.state.close(props.toast.key);\n  };\n\n  // Toast container - role=\"alertdialog\" for screen readers\n  const toastProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({\n    role: \"alertdialog\",\n    \"aria-modal\": \"false\",\n    \"aria-labelledby\": hasTitle ? titleId : undefined,\n    \"aria-describedby\": hasDescription ? descriptionId : undefined,\n    tabIndex: 0,\n    \"data-animation\": props.toast.animation,\n    \"data-key\": props.toast.key,\n  }));\n\n  // Content area with role=\"alert\" for immediate announcement\n  const contentProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({\n    role: \"alert\",\n    \"aria-atomic\": \"true\",\n    \"aria-live\": \"assertive\",\n  }));\n\n  // Title props\n  const titleProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({\n    id: titleId,\n  }));\n\n  // Description props\n  const descriptionProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({\n    id: descriptionId,\n  }));\n\n  // Close button\n  const closeButtonProps = createMemo<JSX.ButtonHTMLAttributes<HTMLButtonElement>>(() => ({\n    \"aria-label\": \"Close\",\n    onClick: close,\n  }));\n\n  return {\n    get toastProps() {\n      return toastProps();\n    },\n    get contentProps() {\n      return contentProps();\n    },\n    get titleProps() {\n      return titleProps();\n    },\n    get descriptionProps() {\n      return descriptionProps();\n    },\n    get closeButtonProps() {\n      return closeButtonProps();\n    },\n  };\n}\n","/**\n * createToastRegion hook for Solidaria\n *\n * Provides the accessibility implementation for a ToastRegion component.\n * The region is a landmark that contains all visible toasts.\n *\n * Port of @react-aria/toast useToastRegion.\n */\n\nimport { type Accessor, type JSX, createEffect, createMemo, onCleanup } from \"solid-js\";\nimport { type ToastState } from \"@proyecto-viviana/solid-stately\";\nimport { createHover } from \"../interactions/createHover\";\nimport { getInteractionModality } from \"../interactions/createInteractionModality\";\nimport { createLandmark } from \"../landmark/createLandmark\";\nimport { focusWithoutScrolling } from \"../utils/focus\";\n\nexport interface AriaToastRegionProps<T> {\n  /** The toast state from createToastState. */\n  state: ToastState<T>;\n  /** The toast region element. Required for landmark navigation and focus recovery. */\n  ref?: Accessor<HTMLElement | undefined>;\n  /** An accessible label for the region. */\n  \"aria-label\"?: string;\n}\n\nexport interface ToastRegionAria {\n  /** Props for the toast region container element. */\n  regionProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\n/**\n * Provides the accessibility implementation for a ToastRegion component.\n *\n * The region is a landmark (role=\"region\") that contains all visible toasts.\n * It pauses toast timers on hover or focus to give users time to read/interact.\n *\n * @example\n * ```tsx\n * import { createToastRegion } from 'solidaria';\n * import { For, Show } from 'solid-js';\n *\n * function ToastRegion(props) {\n *   let ref;\n *   const { regionProps } = createToastRegion({ state: props.state });\n *\n *   return (\n *     <Show when={props.state.visibleToasts().length > 0}>\n *       <div {...regionProps} ref={ref}>\n *         <For each={props.state.visibleToasts()}>\n *           {(toast) => <Toast toast={toast} state={props.state} />}\n *         </For>\n *       </div>\n *     </Show>\n *   );\n * }\n * ```\n */\nexport function createToastRegion<T>(props: AriaToastRegionProps<T>): ToastRegionAria {\n  const visibleToasts = () =>\n    typeof props.state.visibleToasts === \"function\" ? props.state.visibleToasts() : [];\n  const regionRef = () => props.ref?.();\n  const activeRegionRef = () => (visibleToasts().length > 0 ? regionRef() : undefined);\n\n  const { landmarkProps } = createLandmark(\n    () => ({\n      role: \"region\",\n      \"aria-label\": props[\"aria-label\"] ?? \"Notifications\",\n    }),\n    activeRegionRef,\n  );\n\n  let isHovered = false;\n  let isFocused = false;\n  let toastElements: HTMLElement[] = [];\n  let previousVisibleToasts = visibleToasts();\n  let focusedToastIndex = -1;\n  let lastFocused: HTMLElement | null = null;\n\n  const updateTimers = () => {\n    if (isHovered || isFocused) {\n      props.state.pauseAll();\n    } else {\n      props.state.resumeAll();\n    }\n  };\n\n  const { hoverProps } = createHover({\n    onHoverStart: () => {\n      isHovered = true;\n      updateTimers();\n    },\n    onHoverEnd: () => {\n      isHovered = false;\n      updateTimers();\n    },\n  });\n\n  const getToastElements = () => {\n    const element = regionRef();\n    return element ? [...element.querySelectorAll<HTMLElement>('[role=\"alertdialog\"]')] : [];\n  };\n\n  const restoreLastFocused = () => {\n    if (!lastFocused?.isConnected) {\n      lastFocused = null;\n      return;\n    }\n\n    if (getInteractionModality() === \"pointer\") {\n      focusWithoutScrolling(lastFocused);\n    } else {\n      lastFocused.focus();\n    }\n\n    lastFocused = null;\n  };\n\n  const handleFocusIn = (e: FocusEvent) => {\n    const currentTarget = e.currentTarget as HTMLElement;\n    const relatedTarget = e.relatedTarget as HTMLElement | null;\n\n    if (!isFocused) {\n      isFocused = true;\n      if (relatedTarget && !currentTarget.contains(relatedTarget)) {\n        lastFocused = relatedTarget;\n      }\n      updateTimers();\n    }\n\n    toastElements = getToastElements();\n    const target =\n      e.target instanceof Element ? e.target.closest<HTMLElement>('[role=\"alertdialog\"]') : null;\n    focusedToastIndex = target ? toastElements.findIndex((toast) => toast === target) : -1;\n  };\n\n  const handleFocusOut = (e: FocusEvent) => {\n    const target = e.relatedTarget as HTMLElement | null;\n    const currentTarget = e.currentTarget as HTMLElement;\n    if (!target || !currentTarget.contains(target)) {\n      isFocused = false;\n      focusedToastIndex = -1;\n      updateTimers();\n    }\n  };\n\n  createEffect(() => {\n    const currentVisibleToasts = visibleToasts();\n    const element = regionRef();\n\n    if (focusedToastIndex === -1 || currentVisibleToasts.length === 0 || !element) {\n      toastElements = [];\n      previousVisibleToasts = currentVisibleToasts;\n      return;\n    }\n\n    toastElements = getToastElements();\n\n    const unchanged =\n      previousVisibleToasts.length === currentVisibleToasts.length &&\n      currentVisibleToasts.every((toast, index) => toast.key === previousVisibleToasts[index]?.key);\n\n    if (unchanged) {\n      previousVisibleToasts = currentVisibleToasts;\n      return;\n    }\n\n    const allToasts = previousVisibleToasts.map((toast, index) => ({\n      index,\n      isRemoved: !currentVisibleToasts.some((currentToast) => currentToast.key === toast.key),\n    }));\n    const removedFocusedToastIndex = allToasts.findIndex(\n      (toast) => toast.index === focusedToastIndex && toast.isRemoved,\n    );\n\n    if (removedFocusedToastIndex > -1) {\n      if (getInteractionModality() === \"pointer\" && lastFocused?.isConnected) {\n        focusWithoutScrolling(lastFocused);\n      } else {\n        let index = 0;\n        let nextToast: number | undefined;\n        let previousToast: number | undefined;\n\n        while (index <= removedFocusedToastIndex) {\n          if (!allToasts[index]?.isRemoved) {\n            previousToast = Math.max(0, index - 1);\n          }\n          index++;\n        }\n\n        while (index < allToasts.length) {\n          if (!allToasts[index]?.isRemoved) {\n            nextToast = index - 1;\n            break;\n          }\n          index++;\n        }\n\n        if (previousToast === undefined && nextToast === undefined) {\n          previousToast = 0;\n        }\n\n        if (\n          previousToast !== undefined &&\n          previousToast >= 0 &&\n          previousToast < toastElements.length\n        ) {\n          focusWithoutScrolling(toastElements[previousToast]);\n        } else if (nextToast !== undefined && nextToast >= 0 && nextToast < toastElements.length) {\n          focusWithoutScrolling(toastElements[nextToast]);\n        }\n      }\n    }\n\n    previousVisibleToasts = currentVisibleToasts;\n  });\n\n  createEffect(() => {\n    if (visibleToasts().length === 0) {\n      restoreLastFocused();\n    }\n  });\n\n  onCleanup(() => {\n    restoreLastFocused();\n  });\n\n  // Region props\n  const regionProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({\n    ...landmarkProps,\n    ...hoverProps,\n    tabIndex: -1,\n    \"data-solidaria-top-layer\": \"true\",\n    onFocusIn: handleFocusIn,\n    onFocusOut: handleFocusOut,\n  }));\n\n  return {\n    get regionProps() {\n      return regionProps();\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/_chunk/toast.jsx

@@ -0,0 +1,250 @@
+import { n as focusWithoutScrolling } from "./focus.jsx";
+import { o as getInteractionModality } from "./createInteractionModality.jsx";
+import { t as createHover } from "./createHover.jsx";
+import { createId } from "../ssr/index.jsx";
+import { t as createLandmark } from "./createLandmark.jsx";
+import { createEffect, createMemo, onCleanup } from "solid-js";
+//#region src/toast/createToast.ts
+/**
+* createToast hook for Solidaria
+*
+* Provides the accessibility implementation for a Toast component.
+*
+* Port of @react-aria/toast useToast.
+*/
+/**
+* Provides the accessibility implementation for a Toast component.
+*
+* The toast uses role="alertdialog" to announce content to screen readers.
+* The content area uses role="alert" for the actual message.
+*
+* @example
+* ```tsx
+* import { createToast } from 'solidaria';
+*
+* function Toast(props) {
+*   const {
+*     toastProps,
+*     contentProps,
+*     titleProps,
+*     closeButtonProps
+*   } = createToast({ toast: props.toast, state: props.state });
+*
+*   return (
+*     <div {...toastProps}>
+*       <div {...contentProps}>
+*         <div {...titleProps}>{props.toast.content.title}</div>
+*       </div>
+*       <button {...closeButtonProps}>×</button>
+*     </div>
+*   );
+* }
+* ```
+*/
+function createToast(props) {
+	const titleId = createId();
+	const descriptionId = createId();
+	const hasTitle = props.hasTitle ?? true;
+	const hasDescription = props.hasDescription ?? true;
+	const close = () => {
+		props.state.close(props.toast.key);
+	};
+	const toastProps = createMemo(() => ({
+		role: "alertdialog",
+		"aria-modal": "false",
+		"aria-labelledby": hasTitle ? titleId : void 0,
+		"aria-describedby": hasDescription ? descriptionId : void 0,
+		tabIndex: 0,
+		"data-animation": props.toast.animation,
+		"data-key": props.toast.key
+	}));
+	const contentProps = createMemo(() => ({
+		role: "alert",
+		"aria-atomic": "true",
+		"aria-live": "assertive"
+	}));
+	const titleProps = createMemo(() => ({ id: titleId }));
+	const descriptionProps = createMemo(() => ({ id: descriptionId }));
+	const closeButtonProps = createMemo(() => ({
+		"aria-label": "Close",
+		onClick: close
+	}));
+	return {
+		get toastProps() {
+			return toastProps();
+		},
+		get contentProps() {
+			return contentProps();
+		},
+		get titleProps() {
+			return titleProps();
+		},
+		get descriptionProps() {
+			return descriptionProps();
+		},
+		get closeButtonProps() {
+			return closeButtonProps();
+		}
+	};
+}
+//#endregion
+//#region src/toast/createToastRegion.ts
+/**
+* createToastRegion hook for Solidaria
+*
+* Provides the accessibility implementation for a ToastRegion component.
+* The region is a landmark that contains all visible toasts.
+*
+* Port of @react-aria/toast useToastRegion.
+*/
+/**
+* Provides the accessibility implementation for a ToastRegion component.
+*
+* The region is a landmark (role="region") that contains all visible toasts.
+* It pauses toast timers on hover or focus to give users time to read/interact.
+*
+* @example
+* ```tsx
+* import { createToastRegion } from 'solidaria';
+* import { For, Show } from 'solid-js';
+*
+* function ToastRegion(props) {
+*   let ref;
+*   const { regionProps } = createToastRegion({ state: props.state });
+*
+*   return (
+*     <Show when={props.state.visibleToasts().length > 0}>
+*       <div {...regionProps} ref={ref}>
+*         <For each={props.state.visibleToasts()}>
+*           {(toast) => <Toast toast={toast} state={props.state} />}
+*         </For>
+*       </div>
+*     </Show>
+*   );
+* }
+* ```
+*/
+function createToastRegion(props) {
+	const visibleToasts = () => typeof props.state.visibleToasts === "function" ? props.state.visibleToasts() : [];
+	const regionRef = () => props.ref?.();
+	const activeRegionRef = () => visibleToasts().length > 0 ? regionRef() : void 0;
+	const { landmarkProps } = createLandmark(() => ({
+		role: "region",
+		"aria-label": props["aria-label"] ?? "Notifications"
+	}), activeRegionRef);
+	let isHovered = false;
+	let isFocused = false;
+	let toastElements = [];
+	let previousVisibleToasts = visibleToasts();
+	let focusedToastIndex = -1;
+	let lastFocused = null;
+	const updateTimers = () => {
+		if (isHovered || isFocused) props.state.pauseAll();
+		else props.state.resumeAll();
+	};
+	const { hoverProps } = createHover({
+		onHoverStart: () => {
+			isHovered = true;
+			updateTimers();
+		},
+		onHoverEnd: () => {
+			isHovered = false;
+			updateTimers();
+		}
+	});
+	const getToastElements = () => {
+		const element = regionRef();
+		return element ? [...element.querySelectorAll("[role=\"alertdialog\"]")] : [];
+	};
+	const restoreLastFocused = () => {
+		if (!lastFocused?.isConnected) {
+			lastFocused = null;
+			return;
+		}
+		if (getInteractionModality() === "pointer") focusWithoutScrolling(lastFocused);
+		else lastFocused.focus();
+		lastFocused = null;
+	};
+	const handleFocusIn = (e) => {
+		const currentTarget = e.currentTarget;
+		const relatedTarget = e.relatedTarget;
+		if (!isFocused) {
+			isFocused = true;
+			if (relatedTarget && !currentTarget.contains(relatedTarget)) lastFocused = relatedTarget;
+			updateTimers();
+		}
+		toastElements = getToastElements();
+		const target = e.target instanceof Element ? e.target.closest("[role=\"alertdialog\"]") : null;
+		focusedToastIndex = target ? toastElements.findIndex((toast) => toast === target) : -1;
+	};
+	const handleFocusOut = (e) => {
+		const target = e.relatedTarget;
+		const currentTarget = e.currentTarget;
+		if (!target || !currentTarget.contains(target)) {
+			isFocused = false;
+			focusedToastIndex = -1;
+			updateTimers();
+		}
+	};
+	createEffect(() => {
+		const currentVisibleToasts = visibleToasts();
+		const element = regionRef();
+		if (focusedToastIndex === -1 || currentVisibleToasts.length === 0 || !element) {
+			toastElements = [];
+			previousVisibleToasts = currentVisibleToasts;
+			return;
+		}
+		toastElements = getToastElements();
+		if (previousVisibleToasts.length === currentVisibleToasts.length && currentVisibleToasts.every((toast, index) => toast.key === previousVisibleToasts[index]?.key)) {
+			previousVisibleToasts = currentVisibleToasts;
+			return;
+		}
+		const allToasts = previousVisibleToasts.map((toast, index) => ({
+			index,
+			isRemoved: !currentVisibleToasts.some((currentToast) => currentToast.key === toast.key)
+		}));
+		const removedFocusedToastIndex = allToasts.findIndex((toast) => toast.index === focusedToastIndex && toast.isRemoved);
+		if (removedFocusedToastIndex > -1) if (getInteractionModality() === "pointer" && lastFocused?.isConnected) focusWithoutScrolling(lastFocused);
+		else {
+			let index = 0;
+			let nextToast;
+			let previousToast;
+			while (index <= removedFocusedToastIndex) {
+				if (!allToasts[index]?.isRemoved) previousToast = Math.max(0, index - 1);
+				index++;
+			}
+			while (index < allToasts.length) {
+				if (!allToasts[index]?.isRemoved) {
+					nextToast = index - 1;
+					break;
+				}
+				index++;
+			}
+			if (previousToast === void 0 && nextToast === void 0) previousToast = 0;
+			if (previousToast !== void 0 && previousToast >= 0 && previousToast < toastElements.length) focusWithoutScrolling(toastElements[previousToast]);
+			else if (nextToast !== void 0 && nextToast >= 0 && nextToast < toastElements.length) focusWithoutScrolling(toastElements[nextToast]);
+		}
+		previousVisibleToasts = currentVisibleToasts;
+	});
+	createEffect(() => {
+		if (visibleToasts().length === 0) restoreLastFocused();
+	});
+	onCleanup(() => {
+		restoreLastFocused();
+	});
+	const regionProps = createMemo(() => ({
+		...landmarkProps,
+		...hoverProps,
+		tabIndex: -1,
+		"data-solidaria-top-layer": "true",
+		onFocusIn: handleFocusIn,
+		onFocusOut: handleFocusOut
+	}));
+	return { get regionProps() {
+		return regionProps();
+	} };
+}
+//#endregion
+export { createToast as n, createToastRegion as t };
+
+//# sourceMappingURL=toast.jsx.map