@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/dist/_chunk/createCollectionRowInteraction.jsx

@@ -0,0 +1,133 @@
+import { S as scrollIntoViewport } from "./utils.jsx";
+import { a as getEventTarget, g as isTabbable, i as getActiveElement, l as getScrollParent, o as getFocusableTreeWalker, t as focusSafely, y as nodeContains } from "./focus.jsx";
+//#region src/selection/createCollectionRowInteraction.ts
+function lastFocusable(walker) {
+	let last = null;
+	let next;
+	while (next = walker.nextNode()) last = next;
+	return last instanceof HTMLElement ? last : null;
+}
+function scrollFocusedElementIntoView(row, element) {
+	focusSafely(element);
+	scrollIntoViewport(element, { containingElement: getScrollParent(row) });
+}
+function redispatchCollectionArrowKey(row, event) {
+	row.parentElement?.dispatchEvent(new KeyboardEvent(event.type, {
+		altKey: event.altKey,
+		bubbles: true,
+		cancelable: event.cancelable,
+		code: event.code,
+		composed: event.composed,
+		ctrlKey: event.ctrlKey,
+		key: event.key,
+		location: event.location,
+		metaKey: event.metaKey,
+		repeat: event.repeat,
+		shiftKey: event.shiftKey
+	}));
+}
+function shouldIgnoreRowEvent(event, row) {
+	const target = getEventTarget(event);
+	const currentTarget = event.currentTarget;
+	return !target || !currentTarget || !nodeContains(currentTarget, target) || !nodeContains(row, target);
+}
+function mergeCollectionRowInteractionProps(rowProps, options) {
+	const baseOnKeyDownCapture = rowProps.onKeyDownCapture;
+	const baseOnKeyDown = rowProps.onKeyDown;
+	const baseOnPointerDown = rowProps.onPointerDown;
+	const baseOnMouseDown = rowProps.onMouseDown;
+	const onKeyDownCapture = (event) => {
+		const row = options.ref();
+		const activeElement = getActiveElement(row?.ownerDocument);
+		if (options.keyboardNavigationBehavior() !== "arrow" || !row || !activeElement || shouldIgnoreRowEvent(event, row)) {
+			baseOnKeyDownCapture?.(event);
+			return;
+		}
+		const direction = options.direction?.() ?? "ltr";
+		const walker = getFocusableTreeWalker(row);
+		walker.currentNode = activeElement;
+		switch (event.key) {
+			case "ArrowLeft": {
+				const focusable = direction === "rtl" ? walker.nextNode() : walker.previousNode();
+				event.preventDefault();
+				event.stopPropagation();
+				if (focusable) scrollFocusedElementIntoView(row, focusable);
+				else if (direction === "rtl") scrollFocusedElementIntoView(row, row);
+				else {
+					walker.currentNode = row;
+					const lastElement = lastFocusable(walker);
+					if (lastElement) scrollFocusedElementIntoView(row, lastElement);
+				}
+				break;
+			}
+			case "ArrowRight": {
+				const focusable = direction === "rtl" ? walker.previousNode() : walker.nextNode();
+				event.preventDefault();
+				event.stopPropagation();
+				if (focusable) scrollFocusedElementIntoView(row, focusable);
+				else if (direction === "ltr") scrollFocusedElementIntoView(row, row);
+				else {
+					walker.currentNode = row;
+					const lastElement = lastFocusable(walker);
+					if (lastElement) scrollFocusedElementIntoView(row, lastElement);
+				}
+				break;
+			}
+			case "ArrowUp":
+			case "ArrowDown":
+				if (!event.altKey) {
+					event.preventDefault();
+					event.stopPropagation();
+					redispatchCollectionArrowKey(row, event);
+				}
+				break;
+		}
+		if (!event.cancelBubble) baseOnKeyDownCapture?.(event);
+	};
+	const onKeyDown = (event) => {
+		const row = options.ref();
+		const target = getEventTarget(event);
+		const activeElement = getActiveElement(row?.ownerDocument);
+		if (row && target && activeElement && !shouldIgnoreRowEvent(event, row)) {
+			if (options.keyboardNavigationBehavior() === "tab" && target !== row && event.key !== "Tab") {
+				event.stopPropagation();
+				return;
+			}
+			if (options.keyboardNavigationBehavior() === "tab" && event.key === "Tab") {
+				const walker = getFocusableTreeWalker(row, { tabbable: true });
+				walker.currentNode = activeElement;
+				if (event.shiftKey ? walker.previousNode() : walker.nextNode()) event.stopPropagation();
+			}
+		}
+		if (!event.cancelBubble) baseOnKeyDown?.(event);
+	};
+	const onPointerDown = (event) => {
+		const row = options.ref();
+		const target = getEventTarget(event);
+		if (row && target && target !== row && isTabbable(target)) {
+			event.stopPropagation();
+			return;
+		}
+		baseOnPointerDown?.(event);
+	};
+	const onMouseDown = (event) => {
+		const row = options.ref();
+		const target = getEventTarget(event);
+		if (row && target && target !== row && isTabbable(target)) {
+			event.stopPropagation();
+			return;
+		}
+		baseOnMouseDown?.(event);
+	};
+	return {
+		...rowProps,
+		onKeyDownCapture: options.keyboardNavigationBehavior() === "arrow" ? onKeyDownCapture : baseOnKeyDownCapture,
+		onKeyDown,
+		onPointerDown,
+		onMouseDown
+	};
+}
+//#endregion
+export { mergeCollectionRowInteractionProps as t };
+
+//# sourceMappingURL=createCollectionRowInteraction.jsx.map

package/dist/_chunk/createCollectionRowInteraction.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"createCollectionRowInteraction.jsx","names":[],"sources":["../../src/selection/createCollectionRowInteraction.ts"],"sourcesContent":["import type { Accessor, JSX } from \"solid-js\";\nimport {\n  getActiveElement,\n  getEventTarget,\n  getFocusableTreeWalker,\n  getScrollParent,\n  isTabbable,\n  nodeContains,\n} from \"../utils/dom\";\nimport { focusSafely } from \"../utils/focus\";\nimport { scrollIntoViewport } from \"../utils/scrollIntoView\";\n\ntype KeyboardNavigationBehavior = \"arrow\" | \"tab\";\n\ninterface CollectionRowInteractionOptions {\n  ref: Accessor<HTMLElement | null>;\n  keyboardNavigationBehavior: Accessor<KeyboardNavigationBehavior>;\n  direction?: Accessor<\"ltr\" | \"rtl\">;\n}\n\ntype CollectionRowInteractionProps<T extends HTMLElement> = JSX.HTMLAttributes<T> & {\n  onKeyDownCapture?: JSX.EventHandler<T, KeyboardEvent>;\n};\n\nfunction lastFocusable(walker: TreeWalker): HTMLElement | null {\n  let last: Node | null = null;\n  let next: Node | null;\n  while ((next = walker.nextNode())) {\n    last = next;\n  }\n  return last instanceof HTMLElement ? last : null;\n}\n\nfunction scrollFocusedElementIntoView(row: HTMLElement, element: HTMLElement): void {\n  focusSafely(element);\n  scrollIntoViewport(element, { containingElement: getScrollParent(row) });\n}\n\nfunction redispatchCollectionArrowKey(row: HTMLElement, event: KeyboardEvent): void {\n  row.parentElement?.dispatchEvent(\n    new KeyboardEvent(event.type, {\n      altKey: event.altKey,\n      bubbles: true,\n      cancelable: event.cancelable,\n      code: event.code,\n      composed: event.composed,\n      ctrlKey: event.ctrlKey,\n      key: event.key,\n      location: event.location,\n      metaKey: event.metaKey,\n      repeat: event.repeat,\n      shiftKey: event.shiftKey,\n    }),\n  );\n}\n\nfunction shouldIgnoreRowEvent(event: Event, row: HTMLElement): boolean {\n  const target = getEventTarget<Element>(event);\n  const currentTarget = event.currentTarget as Element | null;\n  return (\n    !target || !currentTarget || !nodeContains(currentTarget, target) || !nodeContains(row, target)\n  );\n}\n\nexport function mergeCollectionRowInteractionProps<T extends HTMLElement>(\n  rowProps: CollectionRowInteractionProps<T>,\n  options: CollectionRowInteractionOptions,\n): CollectionRowInteractionProps<T> {\n  const baseOnKeyDownCapture = rowProps.onKeyDownCapture as\n    | ((event: KeyboardEvent) => void)\n    | undefined;\n  const baseOnKeyDown = rowProps.onKeyDown as ((event: KeyboardEvent) => void) | undefined;\n  const baseOnPointerDown = rowProps.onPointerDown as ((event: PointerEvent) => void) | undefined;\n  const baseOnMouseDown = rowProps.onMouseDown as ((event: MouseEvent) => void) | undefined;\n\n  const onKeyDownCapture = (event: KeyboardEvent) => {\n    const row = options.ref();\n    const activeElement = getActiveElement(row?.ownerDocument);\n    if (\n      options.keyboardNavigationBehavior() !== \"arrow\" ||\n      !row ||\n      !activeElement ||\n      shouldIgnoreRowEvent(event, row)\n    ) {\n      baseOnKeyDownCapture?.(event);\n      return;\n    }\n\n    const direction = options.direction?.() ?? \"ltr\";\n    const walker = getFocusableTreeWalker(row);\n    walker.currentNode = activeElement;\n\n    switch (event.key) {\n      case \"ArrowLeft\": {\n        const focusable =\n          direction === \"rtl\"\n            ? (walker.nextNode() as HTMLElement | null)\n            : (walker.previousNode() as HTMLElement | null);\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (focusable) {\n          scrollFocusedElementIntoView(row, focusable);\n        } else if (direction === \"rtl\") {\n          scrollFocusedElementIntoView(row, row);\n        } else {\n          walker.currentNode = row;\n          const lastElement = lastFocusable(walker);\n          if (lastElement) {\n            scrollFocusedElementIntoView(row, lastElement);\n          }\n        }\n        break;\n      }\n      case \"ArrowRight\": {\n        const focusable =\n          direction === \"rtl\"\n            ? (walker.previousNode() as HTMLElement | null)\n            : (walker.nextNode() as HTMLElement | null);\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (focusable) {\n          scrollFocusedElementIntoView(row, focusable);\n        } else if (direction === \"ltr\") {\n          scrollFocusedElementIntoView(row, row);\n        } else {\n          walker.currentNode = row;\n          const lastElement = lastFocusable(walker);\n          if (lastElement) {\n            scrollFocusedElementIntoView(row, lastElement);\n          }\n        }\n        break;\n      }\n      case \"ArrowUp\":\n      case \"ArrowDown\": {\n        if (!event.altKey) {\n          event.preventDefault();\n          event.stopPropagation();\n          redispatchCollectionArrowKey(row, event);\n        }\n        break;\n      }\n    }\n\n    if (!event.cancelBubble) {\n      baseOnKeyDownCapture?.(event);\n    }\n  };\n\n  const onKeyDown = (event: KeyboardEvent) => {\n    const row = options.ref();\n    const target = getEventTarget<Element>(event);\n    const activeElement = getActiveElement(row?.ownerDocument);\n\n    if (row && target && activeElement && !shouldIgnoreRowEvent(event, row)) {\n      if (options.keyboardNavigationBehavior() === \"tab\" && target !== row && event.key !== \"Tab\") {\n        event.stopPropagation();\n        return;\n      }\n\n      if (options.keyboardNavigationBehavior() === \"tab\" && event.key === \"Tab\") {\n        const walker = getFocusableTreeWalker(row, { tabbable: true });\n        walker.currentNode = activeElement;\n        const next = event.shiftKey ? walker.previousNode() : walker.nextNode();\n\n        if (next) {\n          event.stopPropagation();\n        }\n      }\n    }\n\n    if (!event.cancelBubble) {\n      baseOnKeyDown?.(event);\n    }\n  };\n\n  const onPointerDown = (event: PointerEvent) => {\n    const row = options.ref();\n    const target = getEventTarget<Element>(event);\n    if (row && target && target !== row && isTabbable(target)) {\n      event.stopPropagation();\n      return;\n    }\n    baseOnPointerDown?.(event);\n  };\n\n  const onMouseDown = (event: MouseEvent) => {\n    const row = options.ref();\n    const target = getEventTarget<Element>(event);\n    if (row && target && target !== row && isTabbable(target)) {\n      event.stopPropagation();\n      return;\n    }\n    baseOnMouseDown?.(event);\n  };\n\n  return {\n    ...rowProps,\n    onKeyDownCapture:\n      options.keyboardNavigationBehavior() === \"arrow\" ? onKeyDownCapture : baseOnKeyDownCapture,\n    onKeyDown,\n    onPointerDown,\n    onMouseDown,\n  };\n}\n"],"mappings":"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"}

package/dist/_chunk/createField.js

@@ -0,0 +1,54 @@
+import { i as access, o as mergeProps } from "./env.js";
+import { createId } from "../ssr/index.js";
+import { t as createLabel } from "./createLabel.js";
+//#region src/label/createField.ts
+/**
+* Provides the accessibility implementation for input fields.
+* Fields accept user input, gain context from their label, and may display
+* a description or error message.
+*
+* @param props - Props for the Field.
+*/
+function createField(props) {
+	const getProps = () => access(props);
+	const { labelProps, fieldProps: baseLabelFieldProps } = createLabel(props);
+	const descriptionId = createId();
+	const errorMessageId = createId();
+	const getDescriptionProps = () => {
+		const { description, errorMessage, isInvalid } = getProps();
+		if (!description && !errorMessage && !isInvalid) return {};
+		return { id: descriptionId };
+	};
+	const getErrorMessageProps = () => {
+		const { errorMessage, isInvalid } = getProps();
+		if (!errorMessage && !isInvalid) return {};
+		return { id: errorMessageId };
+	};
+	const getFieldProps = () => {
+		const { description, errorMessage, isInvalid } = getProps();
+		const describedByIds = [];
+		if (description) describedByIds.push(descriptionId);
+		if (isInvalid && errorMessage) describedByIds.push(errorMessageId);
+		const existingDescribedBy = getProps()["aria-describedby"];
+		if (existingDescribedBy) describedByIds.push(existingDescribedBy);
+		return mergeProps(baseLabelFieldProps, { "aria-describedby": describedByIds.length > 0 ? describedByIds.join(" ") : void 0 });
+	};
+	return {
+		get labelProps() {
+			return labelProps;
+		},
+		get fieldProps() {
+			return getFieldProps();
+		},
+		get descriptionProps() {
+			return getDescriptionProps();
+		},
+		get errorMessageProps() {
+			return getErrorMessageProps();
+		}
+	};
+}
+//#endregion
+export { createField as t };
+
+//# sourceMappingURL=createField.js.map

package/dist/_chunk/createField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createField.js","names":[],"sources":["../../src/label/createField.ts"],"sourcesContent":["/**\n * Field hook for Solidaria\n *\n * Provides the accessibility implementation for input fields.\n * Fields accept user input, gain context from their label, and may display\n * a description or error message.\n *\n * This is a 1:1 port of @react-aria/label's useField hook.\n */\n\nimport { JSX } from \"solid-js\";\nimport { createId } from \"../ssr\";\nimport {\n  createLabel,\n  type LabelAriaProps,\n  type LabelAria,\n  type AriaLabelingProps,\n  type DOMProps,\n} from \"./createLabel\";\nimport { mergeProps } from \"../utils/mergeProps\";\nimport { type MaybeAccessor, access } from \"../utils/reactivity\";\n\nexport interface HelpTextProps {\n  /** A description for the field. Provides a hint such as specific requirements for what to choose. */\n  description?: JSX.Element;\n  /** An error message for the field. */\n  errorMessage?: JSX.Element | ((validation: ValidationResult) => JSX.Element);\n}\n\nexport interface ValidationResult {\n  /** Whether the input value is invalid. */\n  isInvalid: boolean;\n  /** The current error messages for the input if it is invalid, otherwise an empty array. */\n  validationErrors: string[];\n  /** The native validity state for the input. */\n  validationDetails: ValidityState;\n}\n\nexport interface Validation<T> {\n  /** Whether the input value is invalid. */\n  isInvalid?: boolean;\n  /** Whether the input is required before form submission. */\n  isRequired?: boolean;\n  /** A function that returns an error message if a given value is invalid. */\n  validate?: (value: T) => string | string[] | true | null | undefined;\n}\n\nexport interface AriaFieldProps\n  extends LabelAriaProps, HelpTextProps, Omit<Validation<any>, \"isRequired\"> {}\n\nexport interface FieldAria extends LabelAria {\n  /** Props for the description element, if any. */\n  descriptionProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the error message element, if any. */\n  errorMessageProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\n/**\n * Provides the accessibility implementation for input fields.\n * Fields accept user input, gain context from their label, and may display\n * a description or error message.\n *\n * @param props - Props for the Field.\n */\nexport function createField(props: MaybeAccessor<AriaFieldProps>): FieldAria {\n  const getProps = () => access(props);\n\n  const { labelProps, fieldProps: baseLabelFieldProps } = createLabel(props);\n\n  // Generate IDs for description and error message\n  const descriptionId = createId();\n  const errorMessageId = createId();\n\n  const getDescriptionProps = (): FieldAria[\"descriptionProps\"] => {\n    const { description, errorMessage, isInvalid } = getProps();\n\n    // Only include ID if description exists or there's an error message that might be shown\n    if (!description && !errorMessage && !isInvalid) {\n      return {};\n    }\n\n    return {\n      id: descriptionId,\n    };\n  };\n\n  const getErrorMessageProps = (): FieldAria[\"errorMessageProps\"] => {\n    const { errorMessage, isInvalid } = getProps();\n\n    // Only include ID if there's an error message and the field is invalid\n    if (!errorMessage && !isInvalid) {\n      return {};\n    }\n\n    return {\n      id: errorMessageId,\n    };\n  };\n\n  const getFieldProps = (): AriaLabelingProps & DOMProps => {\n    const { description, errorMessage, isInvalid } = getProps();\n\n    const describedByIds: string[] = [];\n\n    // Add description ID if description exists\n    if (description) {\n      describedByIds.push(descriptionId);\n    }\n\n    // Add error message ID if field is invalid and error message exists\n    // Use aria-describedby for error message because aria-errormessage is unsupported\n    // using VoiceOver or NVDA. See https://github.com/adobe/react-spectrum/issues/1346#issuecomment-740136268\n    if (isInvalid && errorMessage) {\n      describedByIds.push(errorMessageId);\n    }\n\n    // Add any existing aria-describedby from props\n    const existingDescribedBy = getProps()[\"aria-describedby\"];\n    if (existingDescribedBy) {\n      describedByIds.push(existingDescribedBy);\n    }\n\n    const ariaDescribedBy = describedByIds.length > 0 ? describedByIds.join(\" \") : undefined;\n\n    return mergeProps(baseLabelFieldProps, {\n      \"aria-describedby\": ariaDescribedBy,\n    }) as AriaLabelingProps & DOMProps;\n  };\n\n  return {\n    get labelProps() {\n      return labelProps;\n    },\n    get fieldProps() {\n      return getFieldProps();\n    },\n    get descriptionProps() {\n      return getDescriptionProps();\n    },\n    get errorMessageProps() {\n      return getErrorMessageProps();\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;AAgEA,SAAgB,YAAY,OAAiD;CAC3E,MAAM,iBAAiB,OAAO,KAAK;CAEnC,MAAM,EAAE,YAAY,YAAY,wBAAwB,YAAY,KAAK;CAGzE,MAAM,gBAAgB,SAAS;CAC/B,MAAM,iBAAiB,SAAS;CAEhC,MAAM,4BAA2D;EAC/D,MAAM,EAAE,aAAa,cAAc,cAAc,SAAS;EAG1D,IAAI,CAAC,eAAe,CAAC,gBAAgB,CAAC,WACpC,OAAO,CAAC;EAGV,OAAO,EACL,IAAI,cACN;CACF;CAEA,MAAM,6BAA6D;EACjE,MAAM,EAAE,cAAc,cAAc,SAAS;EAG7C,IAAI,CAAC,gBAAgB,CAAC,WACpB,OAAO,CAAC;EAGV,OAAO,EACL,IAAI,eACN;CACF;CAEA,MAAM,sBAAoD;EACxD,MAAM,EAAE,aAAa,cAAc,cAAc,SAAS;EAE1D,MAAM,iBAA2B,CAAC;EAGlC,IAAI,aACF,eAAe,KAAK,aAAa;EAMnC,IAAI,aAAa,cACf,eAAe,KAAK,cAAc;EAIpC,MAAM,sBAAsB,SAAS,CAAC,CAAC;EACvC,IAAI,qBACF,eAAe,KAAK,mBAAmB;EAKzC,OAAO,WAAW,qBAAqB,EACrC,oBAHsB,eAAe,SAAS,IAAI,eAAe,KAAK,GAAG,IAAI,KAAA,EAI/E,CAAC;CACH;CAEA,OAAO;EACL,IAAI,aAAa;GACf,OAAO;EACT;EACA,IAAI,aAAa;GACf,OAAO,cAAc;EACvB;EACA,IAAI,mBAAmB;GACrB,OAAO,oBAAoB;EAC7B;EACA,IAAI,oBAAoB;GACtB,OAAO,qBAAqB;EAC9B;CACF;AACF"}

package/dist/_chunk/createField.jsx

@@ -0,0 +1,54 @@
+import { i as access, o as mergeProps } from "./env.jsx";
+import { createId } from "../ssr/index.jsx";
+import { t as createLabel } from "./createLabel.jsx";
+//#region src/label/createField.ts
+/**
+* Provides the accessibility implementation for input fields.
+* Fields accept user input, gain context from their label, and may display
+* a description or error message.
+*
+* @param props - Props for the Field.
+*/
+function createField(props) {
+	const getProps = () => access(props);
+	const { labelProps, fieldProps: baseLabelFieldProps } = createLabel(props);
+	const descriptionId = createId();
+	const errorMessageId = createId();
+	const getDescriptionProps = () => {
+		const { description, errorMessage, isInvalid } = getProps();
+		if (!description && !errorMessage && !isInvalid) return {};
+		return { id: descriptionId };
+	};
+	const getErrorMessageProps = () => {
+		const { errorMessage, isInvalid } = getProps();
+		if (!errorMessage && !isInvalid) return {};
+		return { id: errorMessageId };
+	};
+	const getFieldProps = () => {
+		const { description, errorMessage, isInvalid } = getProps();
+		const describedByIds = [];
+		if (description) describedByIds.push(descriptionId);
+		if (isInvalid && errorMessage) describedByIds.push(errorMessageId);
+		const existingDescribedBy = getProps()["aria-describedby"];
+		if (existingDescribedBy) describedByIds.push(existingDescribedBy);
+		return mergeProps(baseLabelFieldProps, { "aria-describedby": describedByIds.length > 0 ? describedByIds.join(" ") : void 0 });
+	};
+	return {
+		get labelProps() {
+			return labelProps;
+		},
+		get fieldProps() {
+			return getFieldProps();
+		},
+		get descriptionProps() {
+			return getDescriptionProps();
+		},
+		get errorMessageProps() {
+			return getErrorMessageProps();
+		}
+	};
+}
+//#endregion
+export { createField as t };
+
+//# sourceMappingURL=createField.jsx.map

package/dist/_chunk/createField.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"createField.jsx","names":[],"sources":["../../src/label/createField.ts"],"sourcesContent":["/**\n * Field hook for Solidaria\n *\n * Provides the accessibility implementation for input fields.\n * Fields accept user input, gain context from their label, and may display\n * a description or error message.\n *\n * This is a 1:1 port of @react-aria/label's useField hook.\n */\n\nimport { JSX } from \"solid-js\";\nimport { createId } from \"../ssr\";\nimport {\n  createLabel,\n  type LabelAriaProps,\n  type LabelAria,\n  type AriaLabelingProps,\n  type DOMProps,\n} from \"./createLabel\";\nimport { mergeProps } from \"../utils/mergeProps\";\nimport { type MaybeAccessor, access } from \"../utils/reactivity\";\n\nexport interface HelpTextProps {\n  /** A description for the field. Provides a hint such as specific requirements for what to choose. */\n  description?: JSX.Element;\n  /** An error message for the field. */\n  errorMessage?: JSX.Element | ((validation: ValidationResult) => JSX.Element);\n}\n\nexport interface ValidationResult {\n  /** Whether the input value is invalid. */\n  isInvalid: boolean;\n  /** The current error messages for the input if it is invalid, otherwise an empty array. */\n  validationErrors: string[];\n  /** The native validity state for the input. */\n  validationDetails: ValidityState;\n}\n\nexport interface Validation<T> {\n  /** Whether the input value is invalid. */\n  isInvalid?: boolean;\n  /** Whether the input is required before form submission. */\n  isRequired?: boolean;\n  /** A function that returns an error message if a given value is invalid. */\n  validate?: (value: T) => string | string[] | true | null | undefined;\n}\n\nexport interface AriaFieldProps\n  extends LabelAriaProps, HelpTextProps, Omit<Validation<any>, \"isRequired\"> {}\n\nexport interface FieldAria extends LabelAria {\n  /** Props for the description element, if any. */\n  descriptionProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the error message element, if any. */\n  errorMessageProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\n/**\n * Provides the accessibility implementation for input fields.\n * Fields accept user input, gain context from their label, and may display\n * a description or error message.\n *\n * @param props - Props for the Field.\n */\nexport function createField(props: MaybeAccessor<AriaFieldProps>): FieldAria {\n  const getProps = () => access(props);\n\n  const { labelProps, fieldProps: baseLabelFieldProps } = createLabel(props);\n\n  // Generate IDs for description and error message\n  const descriptionId = createId();\n  const errorMessageId = createId();\n\n  const getDescriptionProps = (): FieldAria[\"descriptionProps\"] => {\n    const { description, errorMessage, isInvalid } = getProps();\n\n    // Only include ID if description exists or there's an error message that might be shown\n    if (!description && !errorMessage && !isInvalid) {\n      return {};\n    }\n\n    return {\n      id: descriptionId,\n    };\n  };\n\n  const getErrorMessageProps = (): FieldAria[\"errorMessageProps\"] => {\n    const { errorMessage, isInvalid } = getProps();\n\n    // Only include ID if there's an error message and the field is invalid\n    if (!errorMessage && !isInvalid) {\n      return {};\n    }\n\n    return {\n      id: errorMessageId,\n    };\n  };\n\n  const getFieldProps = (): AriaLabelingProps & DOMProps => {\n    const { description, errorMessage, isInvalid } = getProps();\n\n    const describedByIds: string[] = [];\n\n    // Add description ID if description exists\n    if (description) {\n      describedByIds.push(descriptionId);\n    }\n\n    // Add error message ID if field is invalid and error message exists\n    // Use aria-describedby for error message because aria-errormessage is unsupported\n    // using VoiceOver or NVDA. See https://github.com/adobe/react-spectrum/issues/1346#issuecomment-740136268\n    if (isInvalid && errorMessage) {\n      describedByIds.push(errorMessageId);\n    }\n\n    // Add any existing aria-describedby from props\n    const existingDescribedBy = getProps()[\"aria-describedby\"];\n    if (existingDescribedBy) {\n      describedByIds.push(existingDescribedBy);\n    }\n\n    const ariaDescribedBy = describedByIds.length > 0 ? describedByIds.join(\" \") : undefined;\n\n    return mergeProps(baseLabelFieldProps, {\n      \"aria-describedby\": ariaDescribedBy,\n    }) as AriaLabelingProps & DOMProps;\n  };\n\n  return {\n    get labelProps() {\n      return labelProps;\n    },\n    get fieldProps() {\n      return getFieldProps();\n    },\n    get descriptionProps() {\n      return getDescriptionProps();\n    },\n    get errorMessageProps() {\n      return getErrorMessageProps();\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;AAgEA,SAAgB,YAAY,OAAiD;CAC3E,MAAM,iBAAiB,OAAO,KAAK;CAEnC,MAAM,EAAE,YAAY,YAAY,wBAAwB,YAAY,KAAK;CAGzE,MAAM,gBAAgB,SAAS;CAC/B,MAAM,iBAAiB,SAAS;CAEhC,MAAM,4BAA2D;EAC/D,MAAM,EAAE,aAAa,cAAc,cAAc,SAAS;EAG1D,IAAI,CAAC,eAAe,CAAC,gBAAgB,CAAC,WACpC,OAAO,CAAC;EAGV,OAAO,EACL,IAAI,cACN;CACF;CAEA,MAAM,6BAA6D;EACjE,MAAM,EAAE,cAAc,cAAc,SAAS;EAG7C,IAAI,CAAC,gBAAgB,CAAC,WACpB,OAAO,CAAC;EAGV,OAAO,EACL,IAAI,eACN;CACF;CAEA,MAAM,sBAAoD;EACxD,MAAM,EAAE,aAAa,cAAc,cAAc,SAAS;EAE1D,MAAM,iBAA2B,CAAC;EAGlC,IAAI,aACF,eAAe,KAAK,aAAa;EAMnC,IAAI,aAAa,cACf,eAAe,KAAK,cAAc;EAIpC,MAAM,sBAAsB,SAAS,CAAC,CAAC;EACvC,IAAI,qBACF,eAAe,KAAK,mBAAmB;EAKzC,OAAO,WAAW,qBAAqB,EACrC,oBAHsB,eAAe,SAAS,IAAI,eAAe,KAAK,GAAG,IAAI,KAAA,EAI/E,CAAC;CACH;CAEA,OAAO;EACL,IAAI,aAAa;GACf,OAAO;EACT;EACA,IAAI,aAAa;GACf,OAAO,cAAc;EACvB;EACA,IAAI,mBAAmB;GACrB,OAAO,oBAAoB;EAC7B;EACA,IAAI,oBAAoB;GACtB,OAAO,qBAAqB;EAC9B;CACF;AACF"}

package/dist/_chunk/createFocus.js

@@ -0,0 +1,101 @@
+import { a as getEventTarget, s as getOwnerDocument } from "./focus.js";
+import { onCleanup } from "solid-js";
+//#region src/interactions/createFocus.ts
+/**
+* createFocus - Handles focus events for the immediate target.
+*
+* This is a 1-1 port of React-Aria's useFocus hook adapted for SolidJS.
+* Focus events on child elements will be ignored.
+*/
+function getActiveElement(doc) {
+	let activeElement = doc.activeElement;
+	while (activeElement && activeElement.shadowRoot?.activeElement) activeElement = activeElement.shadowRoot?.activeElement ?? null;
+	return activeElement;
+}
+/**
+* Synthetic blur event handler for Firefox bug workaround.
+* React (and we) don't fire onBlur when an element is disabled.
+* Most browsers fire a native focusout event in this case, except for Firefox.
+* We use a MutationObserver to watch for the disabled attribute.
+*/
+function createSyntheticBlurHandler() {
+	let isFocused = false;
+	let observer = null;
+	return (_e, target) => {
+		if (target instanceof HTMLButtonElement || target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) {
+			isFocused = true;
+			const onBlurHandler = (_blurEvent) => {
+				isFocused = false;
+				if (observer) {
+					observer.disconnect();
+					observer = null;
+				}
+			};
+			target.addEventListener("focusout", onBlurHandler, { once: true });
+			observer = new MutationObserver(() => {
+				if (isFocused && target.disabled) {
+					isFocused = false;
+					observer?.disconnect();
+					observer = null;
+					const ownerDocument = target.ownerDocument;
+					const relatedTarget = target === ownerDocument.activeElement ? null : ownerDocument.activeElement;
+					target.dispatchEvent(new FocusEvent("blur", { relatedTarget }));
+					target.dispatchEvent(new FocusEvent("focusout", {
+						bubbles: true,
+						relatedTarget
+					}));
+				}
+			});
+			observer.observe(target, {
+				attributes: true,
+				attributeFilter: ["disabled"]
+			});
+			return () => {
+				if (observer) {
+					observer.disconnect();
+					observer = null;
+				}
+			};
+		}
+	};
+}
+/**
+* Handles focus events for the immediate target.
+* Focus events on child elements will be ignored.
+*
+* Based on react-aria's useFocus but adapted for SolidJS.
+*/
+function createFocus(props = {}) {
+	const { isDisabled, onFocus: onFocusProp, onBlur: onBlurProp, onFocusChange } = props;
+	let cleanupRef;
+	const syntheticBlurHandler = createSyntheticBlurHandler();
+	onCleanup(() => {
+		if (cleanupRef) cleanupRef();
+	});
+	const onBlur = (e) => {
+		if (e.target === e.currentTarget) {
+			if (onBlurProp) onBlurProp(e);
+			if (onFocusChange) onFocusChange(false);
+			cleanupRef?.();
+			cleanupRef = void 0;
+		}
+	};
+	const onFocus = (e) => {
+		const ownerDocument = getOwnerDocument(e.target);
+		const activeElement = ownerDocument ? getActiveElement(ownerDocument) : null;
+		if (e.target === e.currentTarget && activeElement === getEventTarget(e)) {
+			if (onFocusProp) onFocusProp(e);
+			if (onFocusChange) onFocusChange(true);
+			cleanupRef = syntheticBlurHandler(e, e.target);
+		}
+	};
+	if (isDisabled) return { focusProps: {} };
+	return { focusProps: {
+		onFocus: onFocusProp || onFocusChange || onBlurProp ? onFocus : void 0,
+		onBlur: onBlurProp || onFocusChange ? onBlur : void 0
+	} };
+}
+//#endregion
+export { createFocus as t };
+
+//# sourceMappingURL=createFocus.js.map

package/dist/_chunk/createFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createFocus.js","names":[],"sources":["../../src/interactions/createFocus.ts"],"sourcesContent":["/**\n * createFocus - Handles focus events for the immediate target.\n *\n * This is a 1-1 port of React-Aria's useFocus hook adapted for SolidJS.\n * Focus events on child elements will be ignored.\n */\n\nimport { JSX, onCleanup } from \"solid-js\";\nimport { getOwnerDocument, getEventTarget } from \"../utils\";\nfunction getActiveElement(doc: Document): Element | null {\n  let activeElement = doc.activeElement;\n  while (activeElement && (activeElement as Element).shadowRoot?.activeElement) {\n    activeElement = (activeElement as Element).shadowRoot?.activeElement ?? null;\n  }\n  return activeElement;\n}\n\nexport interface FocusEvents {\n  /** Handler that is called when the element receives focus. */\n  onFocus?: (e: FocusEvent) => void;\n  /** Handler that is called when the element loses focus. */\n  onBlur?: (e: FocusEvent) => void;\n  /** Handler that is called when the element's focus status changes. */\n  onFocusChange?: (isFocused: boolean) => void;\n}\n\nexport interface CreateFocusProps extends FocusEvents {\n  /** Whether the focus events should be disabled. */\n  isDisabled?: boolean;\n}\n\nexport interface FocusResult {\n  /** Props to spread onto the target element. */\n  focusProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\n/**\n * Synthetic blur event handler for Firefox bug workaround.\n * React (and we) don't fire onBlur when an element is disabled.\n * Most browsers fire a native focusout event in this case, except for Firefox.\n * We use a MutationObserver to watch for the disabled attribute.\n */\nfunction createSyntheticBlurHandler(): (\n  _e: FocusEvent,\n  target: Element,\n) => (() => void) | undefined {\n  let isFocused = false;\n  let observer: MutationObserver | null = null;\n\n  return (_e: FocusEvent, target: Element) => {\n    if (\n      target instanceof HTMLButtonElement ||\n      target instanceof HTMLInputElement ||\n      target instanceof HTMLTextAreaElement ||\n      target instanceof HTMLSelectElement\n    ) {\n      isFocused = true;\n\n      const onBlurHandler = (_blurEvent: Event) => {\n        isFocused = false;\n\n        if (observer) {\n          observer.disconnect();\n          observer = null;\n        }\n      };\n\n      target.addEventListener(\"focusout\", onBlurHandler, { once: true });\n\n      observer = new MutationObserver(() => {\n        if (isFocused && (target as HTMLButtonElement).disabled) {\n          isFocused = false;\n          observer?.disconnect();\n          observer = null;\n          const ownerDocument = target.ownerDocument;\n          const relatedTarget =\n            target === ownerDocument.activeElement ? null : ownerDocument.activeElement;\n          target.dispatchEvent(new FocusEvent(\"blur\", { relatedTarget }));\n          target.dispatchEvent(new FocusEvent(\"focusout\", { bubbles: true, relatedTarget }));\n        }\n      });\n\n      observer.observe(target, { attributes: true, attributeFilter: [\"disabled\"] });\n\n      // Return cleanup function\n      return () => {\n        if (observer) {\n          observer.disconnect();\n          observer = null;\n        }\n      };\n    }\n\n    return undefined;\n  };\n}\n\n/**\n * Handles focus events for the immediate target.\n * Focus events on child elements will be ignored.\n *\n * Based on react-aria's useFocus but adapted for SolidJS.\n */\nexport function createFocus(props: CreateFocusProps = {}): FocusResult {\n  const { isDisabled, onFocus: onFocusProp, onBlur: onBlurProp, onFocusChange } = props;\n\n  let cleanupRef: (() => void) | undefined;\n  const syntheticBlurHandler = createSyntheticBlurHandler();\n\n  // Cleanup on unmount\n  onCleanup(() => {\n    if (cleanupRef) {\n      cleanupRef();\n    }\n  });\n\n  const onBlur: JSX.EventHandler<HTMLElement, FocusEvent> = (e) => {\n    // Only handle if target is the currentTarget (not bubbled from children)\n    if (e.target === e.currentTarget) {\n      if (onBlurProp) {\n        onBlurProp(e);\n      }\n\n      if (onFocusChange) {\n        onFocusChange(false);\n      }\n\n      cleanupRef?.();\n      cleanupRef = undefined;\n    }\n  };\n\n  const onFocus: JSX.EventHandler<HTMLElement, FocusEvent> = (e) => {\n    // Double check that document.activeElement actually matches e.target\n    // in case a previously chained focus handler already moved focus somewhere else.\n    const ownerDocument = getOwnerDocument(e.target);\n    const activeElement = ownerDocument ? getActiveElement(ownerDocument) : null;\n\n    if (e.target === e.currentTarget && activeElement === getEventTarget(e)) {\n      if (onFocusProp) {\n        onFocusProp(e);\n      }\n\n      if (onFocusChange) {\n        onFocusChange(true);\n      }\n\n      // Set up synthetic blur handler for Firefox bug\n      cleanupRef = syntheticBlurHandler(e, e.target);\n    }\n  };\n\n  // If disabled or no handlers, return empty props\n  if (isDisabled) {\n    return {\n      focusProps: {},\n    };\n  }\n\n  const hasHandlers = onFocusProp || onFocusChange || onBlurProp;\n\n  return {\n    focusProps: {\n      onFocus: hasHandlers ? onFocus : undefined,\n      onBlur: onBlurProp || onFocusChange ? onBlur : undefined,\n    },\n  };\n}\n"],"mappings":";;;;;;;;;AASA,SAAS,iBAAiB,KAA+B;CACvD,IAAI,gBAAgB,IAAI;CACxB,OAAO,iBAAkB,cAA0B,YAAY,eAC7D,gBAAiB,cAA0B,YAAY,iBAAiB;CAE1E,OAAO;AACT;;;;;;;AA2BA,SAAS,6BAGqB;CAC5B,IAAI,YAAY;CAChB,IAAI,WAAoC;CAExC,QAAQ,IAAgB,WAAoB;EAC1C,IACE,kBAAkB,qBAClB,kBAAkB,oBAClB,kBAAkB,uBAClB,kBAAkB,mBAClB;GACA,YAAY;GAEZ,MAAM,iBAAiB,eAAsB;IAC3C,YAAY;IAEZ,IAAI,UAAU;KACZ,SAAS,WAAW;KACpB,WAAW;IACb;GACF;GAEA,OAAO,iBAAiB,YAAY,eAAe,EAAE,MAAM,KAAK,CAAC;GAEjE,WAAW,IAAI,uBAAuB;IACpC,IAAI,aAAc,OAA6B,UAAU;KACvD,YAAY;KACZ,UAAU,WAAW;KACrB,WAAW;KACX,MAAM,gBAAgB,OAAO;KAC7B,MAAM,gBACJ,WAAW,cAAc,gBAAgB,OAAO,cAAc;KAChE,OAAO,cAAc,IAAI,WAAW,QAAQ,EAAE,cAAc,CAAC,CAAC;KAC9D,OAAO,cAAc,IAAI,WAAW,YAAY;MAAE,SAAS;MAAM;KAAc,CAAC,CAAC;IACnF;GACF,CAAC;GAED,SAAS,QAAQ,QAAQ;IAAE,YAAY;IAAM,iBAAiB,CAAC,UAAU;GAAE,CAAC;GAG5E,aAAa;IACX,IAAI,UAAU;KACZ,SAAS,WAAW;KACpB,WAAW;IACb;GACF;EACF;CAGF;AACF;;;;;;;AAQA,SAAgB,YAAY,QAA0B,CAAC,GAAgB;CACrE,MAAM,EAAE,YAAY,SAAS,aAAa,QAAQ,YAAY,kBAAkB;CAEhF,IAAI;CACJ,MAAM,uBAAuB,2BAA2B;CAGxD,gBAAgB;EACd,IAAI,YACF,WAAW;CAEf,CAAC;CAED,MAAM,UAAqD,MAAM;EAE/D,IAAI,EAAE,WAAW,EAAE,eAAe;GAChC,IAAI,YACF,WAAW,CAAC;GAGd,IAAI,eACF,cAAc,KAAK;GAGrB,aAAa;GACb,aAAa,KAAA;EACf;CACF;CAEA,MAAM,WAAsD,MAAM;EAGhE,MAAM,gBAAgB,iBAAiB,EAAE,MAAM;EAC/C,MAAM,gBAAgB,gBAAgB,iBAAiB,aAAa,IAAI;EAExE,IAAI,EAAE,WAAW,EAAE,iBAAiB,kBAAkB,eAAe,CAAC,GAAG;GACvE,IAAI,aACF,YAAY,CAAC;GAGf,IAAI,eACF,cAAc,IAAI;GAIpB,aAAa,qBAAqB,GAAG,EAAE,MAAM;EAC/C;CACF;CAGA,IAAI,YACF,OAAO,EACL,YAAY,CAAC,EACf;CAKF,OAAO,EACL,YAAY;EACV,SAJgB,eAAe,iBAAiB,aAIzB,UAAU,KAAA;EACjC,QAAQ,cAAc,gBAAgB,SAAS,KAAA;CACjD,EACF;AACF"}

package/dist/_chunk/createFocus.jsx

@@ -0,0 +1,101 @@
+import { a as getEventTarget, s as getOwnerDocument } from "./focus.jsx";
+import { onCleanup } from "solid-js";
+//#region src/interactions/createFocus.ts
+/**
+* createFocus - Handles focus events for the immediate target.
+*
+* This is a 1-1 port of React-Aria's useFocus hook adapted for SolidJS.
+* Focus events on child elements will be ignored.
+*/
+function getActiveElement(doc) {
+	let activeElement = doc.activeElement;
+	while (activeElement && activeElement.shadowRoot?.activeElement) activeElement = activeElement.shadowRoot?.activeElement ?? null;
+	return activeElement;
+}
+/**
+* Synthetic blur event handler for Firefox bug workaround.
+* React (and we) don't fire onBlur when an element is disabled.
+* Most browsers fire a native focusout event in this case, except for Firefox.
+* We use a MutationObserver to watch for the disabled attribute.
+*/
+function createSyntheticBlurHandler() {
+	let isFocused = false;
+	let observer = null;
+	return (_e, target) => {
+		if (target instanceof HTMLButtonElement || target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) {
+			isFocused = true;
+			const onBlurHandler = (_blurEvent) => {
+				isFocused = false;
+				if (observer) {
+					observer.disconnect();
+					observer = null;
+				}
+			};
+			target.addEventListener("focusout", onBlurHandler, { once: true });
+			observer = new MutationObserver(() => {
+				if (isFocused && target.disabled) {
+					isFocused = false;
+					observer?.disconnect();
+					observer = null;
+					const ownerDocument = target.ownerDocument;
+					const relatedTarget = target === ownerDocument.activeElement ? null : ownerDocument.activeElement;
+					target.dispatchEvent(new FocusEvent("blur", { relatedTarget }));
+					target.dispatchEvent(new FocusEvent("focusout", {
+						bubbles: true,
+						relatedTarget
+					}));
+				}
+			});
+			observer.observe(target, {
+				attributes: true,
+				attributeFilter: ["disabled"]
+			});
+			return () => {
+				if (observer) {
+					observer.disconnect();
+					observer = null;
+				}
+			};
+		}
+	};
+}
+/**
+* Handles focus events for the immediate target.
+* Focus events on child elements will be ignored.
+*
+* Based on react-aria's useFocus but adapted for SolidJS.
+*/
+function createFocus(props = {}) {
+	const { isDisabled, onFocus: onFocusProp, onBlur: onBlurProp, onFocusChange } = props;
+	let cleanupRef;
+	const syntheticBlurHandler = createSyntheticBlurHandler();
+	onCleanup(() => {
+		if (cleanupRef) cleanupRef();
+	});
+	const onBlur = (e) => {
+		if (e.target === e.currentTarget) {
+			if (onBlurProp) onBlurProp(e);
+			if (onFocusChange) onFocusChange(false);
+			cleanupRef?.();
+			cleanupRef = void 0;
+		}
+	};
+	const onFocus = (e) => {
+		const ownerDocument = getOwnerDocument(e.target);
+		const activeElement = ownerDocument ? getActiveElement(ownerDocument) : null;
+		if (e.target === e.currentTarget && activeElement === getEventTarget(e)) {
+			if (onFocusProp) onFocusProp(e);
+			if (onFocusChange) onFocusChange(true);
+			cleanupRef = syntheticBlurHandler(e, e.target);
+		}
+	};
+	if (isDisabled) return { focusProps: {} };
+	return { focusProps: {
+		onFocus: onFocusProp || onFocusChange || onBlurProp ? onFocus : void 0,
+		onBlur: onBlurProp || onFocusChange ? onBlur : void 0
+	} };
+}
+//#endregion
+export { createFocus as t };
+
+//# sourceMappingURL=createFocus.jsx.map

package/dist/_chunk/createFocus.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"createFocus.jsx","names":[],"sources":["../../src/interactions/createFocus.ts"],"sourcesContent":["/**\n * createFocus - Handles focus events for the immediate target.\n *\n * This is a 1-1 port of React-Aria's useFocus hook adapted for SolidJS.\n * Focus events on child elements will be ignored.\n */\n\nimport { JSX, onCleanup } from \"solid-js\";\nimport { getOwnerDocument, getEventTarget } from \"../utils\";\nfunction getActiveElement(doc: Document): Element | null {\n  let activeElement = doc.activeElement;\n  while (activeElement && (activeElement as Element).shadowRoot?.activeElement) {\n    activeElement = (activeElement as Element).shadowRoot?.activeElement ?? null;\n  }\n  return activeElement;\n}\n\nexport interface FocusEvents {\n  /** Handler that is called when the element receives focus. */\n  onFocus?: (e: FocusEvent) => void;\n  /** Handler that is called when the element loses focus. */\n  onBlur?: (e: FocusEvent) => void;\n  /** Handler that is called when the element's focus status changes. */\n  onFocusChange?: (isFocused: boolean) => void;\n}\n\nexport interface CreateFocusProps extends FocusEvents {\n  /** Whether the focus events should be disabled. */\n  isDisabled?: boolean;\n}\n\nexport interface FocusResult {\n  /** Props to spread onto the target element. */\n  focusProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\n/**\n * Synthetic blur event handler for Firefox bug workaround.\n * React (and we) don't fire onBlur when an element is disabled.\n * Most browsers fire a native focusout event in this case, except for Firefox.\n * We use a MutationObserver to watch for the disabled attribute.\n */\nfunction createSyntheticBlurHandler(): (\n  _e: FocusEvent,\n  target: Element,\n) => (() => void) | undefined {\n  let isFocused = false;\n  let observer: MutationObserver | null = null;\n\n  return (_e: FocusEvent, target: Element) => {\n    if (\n      target instanceof HTMLButtonElement ||\n      target instanceof HTMLInputElement ||\n      target instanceof HTMLTextAreaElement ||\n      target instanceof HTMLSelectElement\n    ) {\n      isFocused = true;\n\n      const onBlurHandler = (_blurEvent: Event) => {\n        isFocused = false;\n\n        if (observer) {\n          observer.disconnect();\n          observer = null;\n        }\n      };\n\n      target.addEventListener(\"focusout\", onBlurHandler, { once: true });\n\n      observer = new MutationObserver(() => {\n        if (isFocused && (target as HTMLButtonElement).disabled) {\n          isFocused = false;\n          observer?.disconnect();\n          observer = null;\n          const ownerDocument = target.ownerDocument;\n          const relatedTarget =\n            target === ownerDocument.activeElement ? null : ownerDocument.activeElement;\n          target.dispatchEvent(new FocusEvent(\"blur\", { relatedTarget }));\n          target.dispatchEvent(new FocusEvent(\"focusout\", { bubbles: true, relatedTarget }));\n        }\n      });\n\n      observer.observe(target, { attributes: true, attributeFilter: [\"disabled\"] });\n\n      // Return cleanup function\n      return () => {\n        if (observer) {\n          observer.disconnect();\n          observer = null;\n        }\n      };\n    }\n\n    return undefined;\n  };\n}\n\n/**\n * Handles focus events for the immediate target.\n * Focus events on child elements will be ignored.\n *\n * Based on react-aria's useFocus but adapted for SolidJS.\n */\nexport function createFocus(props: CreateFocusProps = {}): FocusResult {\n  const { isDisabled, onFocus: onFocusProp, onBlur: onBlurProp, onFocusChange } = props;\n\n  let cleanupRef: (() => void) | undefined;\n  const syntheticBlurHandler = createSyntheticBlurHandler();\n\n  // Cleanup on unmount\n  onCleanup(() => {\n    if (cleanupRef) {\n      cleanupRef();\n    }\n  });\n\n  const onBlur: JSX.EventHandler<HTMLElement, FocusEvent> = (e) => {\n    // Only handle if target is the currentTarget (not bubbled from children)\n    if (e.target === e.currentTarget) {\n      if (onBlurProp) {\n        onBlurProp(e);\n      }\n\n      if (onFocusChange) {\n        onFocusChange(false);\n      }\n\n      cleanupRef?.();\n      cleanupRef = undefined;\n    }\n  };\n\n  const onFocus: JSX.EventHandler<HTMLElement, FocusEvent> = (e) => {\n    // Double check that document.activeElement actually matches e.target\n    // in case a previously chained focus handler already moved focus somewhere else.\n    const ownerDocument = getOwnerDocument(e.target);\n    const activeElement = ownerDocument ? getActiveElement(ownerDocument) : null;\n\n    if (e.target === e.currentTarget && activeElement === getEventTarget(e)) {\n      if (onFocusProp) {\n        onFocusProp(e);\n      }\n\n      if (onFocusChange) {\n        onFocusChange(true);\n      }\n\n      // Set up synthetic blur handler for Firefox bug\n      cleanupRef = syntheticBlurHandler(e, e.target);\n    }\n  };\n\n  // If disabled or no handlers, return empty props\n  if (isDisabled) {\n    return {\n      focusProps: {},\n    };\n  }\n\n  const hasHandlers = onFocusProp || onFocusChange || onBlurProp;\n\n  return {\n    focusProps: {\n      onFocus: hasHandlers ? onFocus : undefined,\n      onBlur: onBlurProp || onFocusChange ? onBlur : undefined,\n    },\n  };\n}\n"],"mappings":";;;;;;;;;AASA,SAAS,iBAAiB,KAA+B;CACvD,IAAI,gBAAgB,IAAI;CACxB,OAAO,iBAAkB,cAA0B,YAAY,eAC7D,gBAAiB,cAA0B,YAAY,iBAAiB;CAE1E,OAAO;AACT;;;;;;;AA2BA,SAAS,6BAGqB;CAC5B,IAAI,YAAY;CAChB,IAAI,WAAoC;CAExC,QAAQ,IAAgB,WAAoB;EAC1C,IACE,kBAAkB,qBAClB,kBAAkB,oBAClB,kBAAkB,uBAClB,kBAAkB,mBAClB;GACA,YAAY;GAEZ,MAAM,iBAAiB,eAAsB;IAC3C,YAAY;IAEZ,IAAI,UAAU;KACZ,SAAS,WAAW;KACpB,WAAW;IACb;GACF;GAEA,OAAO,iBAAiB,YAAY,eAAe,EAAE,MAAM,KAAK,CAAC;GAEjE,WAAW,IAAI,uBAAuB;IACpC,IAAI,aAAc,OAA6B,UAAU;KACvD,YAAY;KACZ,UAAU,WAAW;KACrB,WAAW;KACX,MAAM,gBAAgB,OAAO;KAC7B,MAAM,gBACJ,WAAW,cAAc,gBAAgB,OAAO,cAAc;KAChE,OAAO,cAAc,IAAI,WAAW,QAAQ,EAAE,cAAc,CAAC,CAAC;KAC9D,OAAO,cAAc,IAAI,WAAW,YAAY;MAAE,SAAS;MAAM;KAAc,CAAC,CAAC;IACnF;GACF,CAAC;GAED,SAAS,QAAQ,QAAQ;IAAE,YAAY;IAAM,iBAAiB,CAAC,UAAU;GAAE,CAAC;GAG5E,aAAa;IACX,IAAI,UAAU;KACZ,SAAS,WAAW;KACpB,WAAW;IACb;GACF;EACF;CAGF;AACF;;;;;;;AAQA,SAAgB,YAAY,QAA0B,CAAC,GAAgB;CACrE,MAAM,EAAE,YAAY,SAAS,aAAa,QAAQ,YAAY,kBAAkB;CAEhF,IAAI;CACJ,MAAM,uBAAuB,2BAA2B;CAGxD,gBAAgB;EACd,IAAI,YACF,WAAW;CAEf,CAAC;CAED,MAAM,UAAqD,MAAM;EAE/D,IAAI,EAAE,WAAW,EAAE,eAAe;GAChC,IAAI,YACF,WAAW,CAAC;GAGd,IAAI,eACF,cAAc,KAAK;GAGrB,aAAa;GACb,aAAa,KAAA;EACf;CACF;CAEA,MAAM,WAAsD,MAAM;EAGhE,MAAM,gBAAgB,iBAAiB,EAAE,MAAM;EAC/C,MAAM,gBAAgB,gBAAgB,iBAAiB,aAAa,IAAI;EAExE,IAAI,EAAE,WAAW,EAAE,iBAAiB,kBAAkB,eAAe,CAAC,GAAG;GACvE,IAAI,aACF,YAAY,CAAC;GAGf,IAAI,eACF,cAAc,IAAI;GAIpB,aAAa,qBAAqB,GAAG,EAAE,MAAM;EAC/C;CACF;CAGA,IAAI,YACF,OAAO,EACL,YAAY,CAAC,EACf;CAKF,OAAO,EACL,YAAY;EACV,SAJgB,eAAe,iBAAiB,aAIzB,UAAU,KAAA;EACjC,QAAQ,cAAc,gBAAgB,SAAS,KAAA;CACjD,EACF;AACF"}

package/dist/_chunk/createFocusRing.js

@@ -0,0 +1,54 @@
+import { t as createFocus } from "./createFocus.js";
+import { t as createFocusWithin } from "./createFocusWithin.js";
+import { c as isFocusVisible, i as createFocusVisibleListener } from "./createInteractionModality.js";
+import { createEffect, createMemo, createSignal, onCleanup } from "solid-js";
+//#region src/interactions/createFocusRing.ts
+/**
+* createFocusRing hook for Solidaria
+*
+* Determines whether a focus ring should be visible for a given element.
+* Focus rings are visible when the user navigates with keyboard, but hidden
+* when using mouse/touch.
+*
+* Port of @react-aria/focus useFocusRing.
+*/
+/**
+* Determines whether a focus ring should be visible for a given element.
+*
+* Focus rings are visible when:
+* - The element is focused AND
+* - The user is navigating with keyboard (not mouse/touch)
+*
+* For text inputs, focus rings are always visible when focused.
+*/
+function createFocusRing(props = {}) {
+	const { isTextInput = false, autoFocus = false, within = false } = props;
+	const [isFocused, setIsFocused] = createSignal(false);
+	const [focusVisibleFlag, setFocusVisibleFlag] = createSignal(autoFocus || isFocusVisible());
+	const isFocusVisible$1 = createMemo(() => isFocused() && focusVisibleFlag());
+	createEffect(() => {
+		onCleanup(createFocusVisibleListener((visible) => {
+			setFocusVisibleFlag(visible);
+		}, { isTextInput }));
+	});
+	const onFocusChange = (focused) => {
+		setIsFocused(focused);
+	};
+	const focusResult = createFocus({
+		isDisabled: within,
+		onFocusChange
+	});
+	const focusWithinResult = createFocusWithin({
+		isDisabled: !within,
+		onFocusWithinChange: onFocusChange
+	});
+	return {
+		isFocused,
+		isFocusVisible: isFocusVisible$1,
+		focusProps: within ? focusWithinResult.focusWithinProps : focusResult.focusProps
+	};
+}
+//#endregion
+export { createFocusRing as t };
+
+//# sourceMappingURL=createFocusRing.js.map

package/dist/_chunk/createFocusRing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createFocusRing.js","names":["isGlobalFocusVisible","isFocusVisible"],"sources":["../../src/interactions/createFocusRing.ts"],"sourcesContent":["/**\n * createFocusRing hook for Solidaria\n *\n * Determines whether a focus ring should be visible for a given element.\n * Focus rings are visible when the user navigates with keyboard, but hidden\n * when using mouse/touch.\n *\n * Port of @react-aria/focus useFocusRing.\n */\n\nimport {\n  type JSX,\n  type Accessor,\n  createSignal,\n  createEffect,\n  onCleanup,\n  createMemo,\n} from \"solid-js\";\nimport { createFocus } from \"./createFocus\";\nimport { createFocusWithin } from \"./createFocusWithin\";\nimport {\n  createFocusVisibleListener,\n  isFocusVisible as isGlobalFocusVisible,\n} from \"./createInteractionModality\";\n\nexport interface FocusRingProps {\n  /** Whether the element is a text input. */\n  isTextInput?: boolean;\n  /** Whether the element will be auto focused. */\n  autoFocus?: boolean;\n  /** Whether focus should be tracked within the element. */\n  within?: boolean;\n}\n\nexport interface FocusRingResult {\n  /** Whether the element is currently focused. */\n  isFocused: Accessor<boolean>;\n  /** Whether the focus ring should be visible. */\n  isFocusVisible: Accessor<boolean>;\n  /** Props to spread on the element to track focus. */\n  focusProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\n/**\n * Determines whether a focus ring should be visible for a given element.\n *\n * Focus rings are visible when:\n * - The element is focused AND\n * - The user is navigating with keyboard (not mouse/touch)\n *\n * For text inputs, focus rings are always visible when focused.\n */\nexport function createFocusRing(props: FocusRingProps = {}): FocusRingResult {\n  const { isTextInput = false, autoFocus = false, within = false } = props;\n\n  const [isFocused, setIsFocused] = createSignal(false);\n  const [focusVisibleFlag, setFocusVisibleFlag] = createSignal(autoFocus || isGlobalFocusVisible());\n  const isFocusVisible = createMemo(() => isFocused() && focusVisibleFlag());\n\n  createEffect(() => {\n    const cleanup = createFocusVisibleListener(\n      (visible) => {\n        setFocusVisibleFlag(visible);\n      },\n      { isTextInput },\n    );\n    onCleanup(cleanup);\n  });\n\n  const onFocusChange = (focused: boolean) => {\n    setIsFocused(focused);\n  };\n\n  const focusResult = createFocus({\n    isDisabled: within,\n    onFocusChange,\n  });\n\n  const focusWithinResult = createFocusWithin({\n    isDisabled: !within,\n    onFocusWithinChange: onFocusChange,\n  });\n\n  return {\n    isFocused,\n    isFocusVisible,\n    focusProps: (within\n      ? focusWithinResult.focusWithinProps\n      : focusResult.focusProps) as JSX.HTMLAttributes<HTMLElement>,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoDA,SAAgB,gBAAgB,QAAwB,CAAC,GAAoB;CAC3E,MAAM,EAAE,cAAc,OAAO,YAAY,OAAO,SAAS,UAAU;CAEnE,MAAM,CAAC,WAAW,gBAAgB,aAAa,KAAK;CACpD,MAAM,CAAC,kBAAkB,uBAAuB,aAAa,aAAaA,eAAqB,CAAC;CAChG,MAAMC,mBAAiB,iBAAiB,UAAU,KAAK,iBAAiB,CAAC;CAEzE,mBAAmB;EAOjB,UANgB,4BACb,YAAY;GACX,oBAAoB,OAAO;EAC7B,GACA,EAAE,YAAY,CAEA,CAAC;CACnB,CAAC;CAED,MAAM,iBAAiB,YAAqB;EAC1C,aAAa,OAAO;CACtB;CAEA,MAAM,cAAc,YAAY;EAC9B,YAAY;EACZ;CACF,CAAC;CAED,MAAM,oBAAoB,kBAAkB;EAC1C,YAAY,CAAC;EACb,qBAAqB;CACvB,CAAC;CAED,OAAO;EACL;EACA,gBAAA;EACA,YAAa,SACT,kBAAkB,mBAClB,YAAY;CAClB;AACF"}

package/dist/_chunk/createFocusRing.jsx

@@ -0,0 +1,54 @@
+import { t as createFocus } from "./createFocus.jsx";
+import { t as createFocusWithin } from "./createFocusWithin.jsx";
+import { c as isFocusVisible, i as createFocusVisibleListener } from "./createInteractionModality.jsx";
+import { createEffect, createMemo, createSignal, onCleanup } from "solid-js";
+//#region src/interactions/createFocusRing.ts
+/**
+* createFocusRing hook for Solidaria
+*
+* Determines whether a focus ring should be visible for a given element.
+* Focus rings are visible when the user navigates with keyboard, but hidden
+* when using mouse/touch.
+*
+* Port of @react-aria/focus useFocusRing.
+*/
+/**
+* Determines whether a focus ring should be visible for a given element.
+*
+* Focus rings are visible when:
+* - The element is focused AND
+* - The user is navigating with keyboard (not mouse/touch)
+*
+* For text inputs, focus rings are always visible when focused.
+*/
+function createFocusRing(props = {}) {
+	const { isTextInput = false, autoFocus = false, within = false } = props;
+	const [isFocused, setIsFocused] = createSignal(false);
+	const [focusVisibleFlag, setFocusVisibleFlag] = createSignal(autoFocus || isFocusVisible());
+	const isFocusVisible$1 = createMemo(() => isFocused() && focusVisibleFlag());
+	createEffect(() => {
+		onCleanup(createFocusVisibleListener((visible) => {
+			setFocusVisibleFlag(visible);
+		}, { isTextInput }));
+	});
+	const onFocusChange = (focused) => {
+		setIsFocused(focused);
+	};
+	const focusResult = createFocus({
+		isDisabled: within,
+		onFocusChange
+	});
+	const focusWithinResult = createFocusWithin({
+		isDisabled: !within,
+		onFocusWithinChange: onFocusChange
+	});
+	return {
+		isFocused,
+		isFocusVisible: isFocusVisible$1,
+		focusProps: within ? focusWithinResult.focusWithinProps : focusResult.focusProps
+	};
+}
+//#endregion
+export { createFocusRing as t };
+
+//# sourceMappingURL=createFocusRing.jsx.map