@proyecto-viviana/solidaria 0.4.0 → 0.4.2

package/dist/_chunk/createCollator.jsx

@@ -1,167 +1,5 @@
-import { createContext, createEffect, createMemo, createSignal, onCleanup, useContext } from "solid-js";
-//#region src/i18n/utils.ts
-/**
-* i18n utilities for solidaria
-*
-* RTL detection and locale utilities.
-*
-* Port of @react-aria/i18n utils.
-*/
-const RTL_SCRIPTS = new Set([
-	"Arab",
-	"Syrc",
-	"Samr",
-	"Mand",
-	"Thaa",
-	"Mend",
-	"Nkoo",
-	"Adlm",
-	"Rohg",
-	"Hebr"
-]);
-const RTL_LANGS = new Set([
-	"ae",
-	"ar",
-	"arc",
-	"bcc",
-	"bqi",
-	"ckb",
-	"dv",
-	"fa",
-	"glk",
-	"he",
-	"ku",
-	"mzn",
-	"nqo",
-	"pnb",
-	"ps",
-	"sd",
-	"ug",
-	"ur",
-	"yi"
-]);
-/**
-* Determines if a locale is read right to left.
-* Uses Intl.Locale API when available for accurate detection.
-*/
-function isRTL(localeString) {
-	if (typeof Intl !== "undefined" && Intl.Locale) try {
-		const locale = new Intl.Locale(localeString).maximize();
-		const localeAny = locale;
-		const textInfo = typeof localeAny.getTextInfo === "function" ? localeAny.getTextInfo() : localeAny.textInfo;
-		if (textInfo) return textInfo.direction === "rtl";
-		if (locale.script) return RTL_SCRIPTS.has(locale.script);
-	} catch {}
-	const lang = localeString.split("-")[0];
-	return RTL_LANGS.has(lang);
-}
-/**
-* Creates a cache key for formatter options.
-*/
-function createCacheKey(locale, options) {
-	if (!options) return locale;
-	return locale + Object.entries(options).sort((a, b) => a[0] < b[0] ? -1 : 1).join();
-}
-//#endregion
-//#region src/i18n/locale.tsx
-/**
-* Locale context and provider for solidaria
-*
-* Provides locale and text direction to the component tree.
-*
-* Port of @react-aria/i18n context and useDefaultLocale.
-*/
-const localeSymbol = Symbol.for("solidaria.i18n.locale");
-let currentLocale = null;
-const listeners = /* @__PURE__ */ new Set();
-/**
-* Gets the default locale from the browser/system.
-*/
-function getDefaultLocale() {
-	let locale = typeof window !== "undefined" && window[localeSymbol] || typeof navigator !== "undefined" && (navigator.language || navigator.userLanguage) || "en-US";
-	try {
-		Intl.DateTimeFormat.supportedLocalesOf([locale]);
-	} catch {
-		locale = "en-US";
-	}
-	return {
-		locale,
-		direction: isRTL(locale) ? "rtl" : "ltr"
-	};
-}
-function updateLocale() {
-	currentLocale = getDefaultLocale();
-	for (const listener of listeners) listener(currentLocale);
-}
-const I18nContext = createContext(null);
-/**
-* Returns the current browser/system locale, and updates when it changes.
-*
-* @example
-* ```tsx
-* const locale = createDefaultLocale();
-* console.log(locale().locale); // 'en-US'
-* console.log(locale().direction); // 'ltr'
-* ```
-*/
-function createDefaultLocale() {
-	if (!currentLocale) currentLocale = getDefaultLocale();
-	const [locale, setLocale] = createSignal(currentLocale);
-	createEffect(() => {
-		if (typeof window === "undefined") return;
-		if (listeners.size === 0) window.addEventListener("languagechange", updateLocale);
-		listeners.add(setLocale);
-		onCleanup(() => {
-			listeners.delete(setLocale);
-			if (listeners.size === 0) window.removeEventListener("languagechange", updateLocale);
-		});
-	});
-	return locale;
-}
-/**
-* Returns the current locale and layout direction from context or browser default.
-*
-* @example
-* ```tsx
-* function MyComponent() {
-*   const locale = useLocale();
-*   return <div dir={locale().direction}>{locale().locale}</div>;
-* }
-* ```
-*/
-function useLocale() {
-	const context = useContext(I18nContext);
-	const defaultLocale = createDefaultLocale();
-	return context || defaultLocale;
-}
-/**
-* Provides the locale for the application to all child components.
-*
-* @example
-* ```tsx
-* // Use browser default locale
-* <I18nProvider>
-*   <App />
-* </I18nProvider>
-*
-* // Override with specific locale
-* <I18nProvider locale="ar-SA">
-*   <App /> // Will have RTL direction
-* </I18nProvider>
-* ```
-*/
-function I18nProvider(props) {
-	const defaultLocale = createDefaultLocale();
-	const locale = createMemo(() => {
-		if (props.locale) return {
-			locale: props.locale,
-			direction: isRTL(props.locale) ? "rtl" : "ltr"
-		};
-		return defaultLocale();
-	});
-	return <I18nContext.Provider value={locale}>{props.children}</I18nContext.Provider>;
-}
-//#endregion
+import { a as createCacheKey, i as useLocale } from "./locale.jsx";
+import { createMemo } from "solid-js";
 //#region src/i18n/createCollator.ts
 /**
 * createCollator hook for solidaria
@@ -218,6 +56,6 @@ function createCollator(options) {
 	return createMemo(() => getCachedCollator(locale().locale, options));
 }
 //#endregion
-export { useLocale as a, getDefaultLocale as i, I18nProvider as n, createCacheKey as o, createDefaultLocale as r, isRTL as s, createCollator as t };
+export { createCollator as t };
 
 //# sourceMappingURL=createCollator.jsx.map

package/dist/_chunk/createCollator.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"createCollator.jsx","names":[],"sources":["../../src/i18n/utils.ts","../../src/i18n/locale.tsx","../../src/i18n/createCollator.ts"],"sourcesContent":["/**\n * i18n utilities for solidaria\n *\n * RTL detection and locale utilities.\n *\n * Port of @react-aria/i18n utils.\n */\n\n// https://en.wikipedia.org/wiki/Right-to-left\nconst RTL_SCRIPTS = new Set([\n  \"Arab\",\n  \"Syrc\",\n  \"Samr\",\n  \"Mand\",\n  \"Thaa\",\n  \"Mend\",\n  \"Nkoo\",\n  \"Adlm\",\n  \"Rohg\",\n  \"Hebr\",\n]);\n\nconst RTL_LANGS = new Set([\n  \"ae\",\n  \"ar\",\n  \"arc\",\n  \"bcc\",\n  \"bqi\",\n  \"ckb\",\n  \"dv\",\n  \"fa\",\n  \"glk\",\n  \"he\",\n  \"ku\",\n  \"mzn\",\n  \"nqo\",\n  \"pnb\",\n  \"ps\",\n  \"sd\",\n  \"ug\",\n  \"ur\",\n  \"yi\",\n]);\n\n/**\n * Determines if a locale is read right to left.\n * Uses Intl.Locale API when available for accurate detection.\n */\nexport function isRTL(localeString: string): boolean {\n  // If the Intl.Locale API is available, use it to get the locale's text direction.\n  if (typeof Intl !== \"undefined\" && Intl.Locale) {\n    try {\n      const locale = new Intl.Locale(localeString).maximize();\n\n      // Use the text info object to get the direction if possible.\n      // getTextInfo() was implemented as a property by some browsers before it was standardized as a function.\n      const localeAny = locale as unknown as {\n        getTextInfo?: () => { direction: string };\n        textInfo?: { direction: string };\n      };\n      const textInfo =\n        typeof localeAny.getTextInfo === \"function\" ? localeAny.getTextInfo() : localeAny.textInfo;\n\n      if (textInfo) {\n        return textInfo.direction === \"rtl\";\n      }\n\n      // Fallback: guess using the script.\n      if (locale.script) {\n        return RTL_SCRIPTS.has(locale.script);\n      }\n    } catch {\n      // Fall through to language-based detection\n    }\n  }\n\n  // If not, just guess by the language (first part of the locale)\n  const lang = localeString.split(\"-\")[0];\n  return RTL_LANGS.has(lang);\n}\n\n/**\n * Creates a cache key for formatter options.\n */\nexport function createCacheKey(locale: string, options?: Record<string, unknown>): string {\n  if (!options) {\n    return locale;\n  }\n  return (\n    locale +\n    Object.entries(options)\n      .sort((a, b) => (a[0] < b[0] ? -1 : 1))\n      .join()\n  );\n}\n","/**\n * Locale context and provider for solidaria\n *\n * Provides locale and text direction to the component tree.\n *\n * Port of @react-aria/i18n context and useDefaultLocale.\n */\n\nimport {\n  type Accessor,\n  type JSX,\n  type ParentProps,\n  createContext,\n  createEffect,\n  createMemo,\n  createSignal,\n  onCleanup,\n  useContext,\n} from \"solid-js\";\nimport { isRTL } from \"./utils\";\n\n/** Text direction: left-to-right or right-to-left. */\nexport type Direction = \"ltr\" | \"rtl\";\n\n/** Locale information including language code and text direction. */\nexport interface Locale {\n  /** The BCP47 language code for the locale (e.g., 'en-US', 'ar-SA'). */\n  locale: string;\n  /** The writing direction for the locale. */\n  direction: Direction;\n}\n\nexport interface I18nProviderProps extends ParentProps {\n  /** The locale to apply to the children. If not provided, uses browser default. */\n  locale?: string;\n}\n\n// Symbol for server-provided locale\nconst localeSymbol = Symbol.for(\"solidaria.i18n.locale\");\n\nlet currentLocale: Locale | null = null;\nconst listeners = new Set<(locale: Locale) => void>();\n\n/**\n * Gets the default locale from the browser/system.\n */\nexport function getDefaultLocale(): Locale {\n  let locale =\n    (typeof window !== \"undefined\" &&\n      (window as unknown as Record<symbol, string>)[localeSymbol]) ||\n    (typeof navigator !== \"undefined\" &&\n      (navigator.language || (navigator as unknown as { userLanguage?: string }).userLanguage)) ||\n    \"en-US\";\n\n  // Validate the locale is supported\n  try {\n    Intl.DateTimeFormat.supportedLocalesOf([locale]);\n  } catch {\n    locale = \"en-US\";\n  }\n\n  return {\n    locale,\n    direction: isRTL(locale) ? \"rtl\" : \"ltr\",\n  };\n}\n\nfunction updateLocale(): void {\n  currentLocale = getDefaultLocale();\n  for (const listener of listeners) {\n    listener(currentLocale);\n  }\n}\n\nconst I18nContext = createContext<Accessor<Locale> | null>(null);\n\n/**\n * Returns the current browser/system locale, and updates when it changes.\n *\n * @example\n * ```tsx\n * const locale = createDefaultLocale();\n * console.log(locale().locale); // 'en-US'\n * console.log(locale().direction); // 'ltr'\n * ```\n */\nexport function createDefaultLocale(): Accessor<Locale> {\n  if (!currentLocale) {\n    currentLocale = getDefaultLocale();\n  }\n\n  const [locale, setLocale] = createSignal<Locale>(currentLocale);\n\n  createEffect(() => {\n    if (typeof window === \"undefined\") {\n      return;\n    }\n\n    if (listeners.size === 0) {\n      window.addEventListener(\"languagechange\", updateLocale);\n    }\n\n    listeners.add(setLocale);\n\n    onCleanup(() => {\n      listeners.delete(setLocale);\n      if (listeners.size === 0) {\n        window.removeEventListener(\"languagechange\", updateLocale);\n      }\n    });\n  });\n\n  return locale;\n}\n\n/**\n * Returns the current locale and layout direction from context or browser default.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const locale = useLocale();\n *   return <div dir={locale().direction}>{locale().locale}</div>;\n * }\n * ```\n */\nexport function useLocale(): Accessor<Locale> {\n  const context = useContext(I18nContext);\n  const defaultLocale = createDefaultLocale();\n  return context || defaultLocale;\n}\n\n/**\n * Provides the locale for the application to all child components.\n *\n * @example\n * ```tsx\n * // Use browser default locale\n * <I18nProvider>\n *   <App />\n * </I18nProvider>\n *\n * // Override with specific locale\n * <I18nProvider locale=\"ar-SA\">\n *   <App /> // Will have RTL direction\n * </I18nProvider>\n * ```\n */\nexport function I18nProvider(props: I18nProviderProps): JSX.Element {\n  const defaultLocale = createDefaultLocale();\n\n  const locale = createMemo<Locale>(() => {\n    if (props.locale) {\n      return {\n        locale: props.locale,\n        direction: isRTL(props.locale) ? \"rtl\" : \"ltr\",\n      };\n    }\n    return defaultLocale();\n  });\n\n  return <I18nContext.Provider value={locale}>{props.children}</I18nContext.Provider>;\n}\n","/**\n * createCollator hook for solidaria\n *\n * Provides localized string comparison/collation with caching.\n *\n * Port of @react-aria/i18n useCollator.\n */\n\nimport { createMemo } from \"solid-js\";\nimport { useLocale } from \"./locale\";\nimport { createCacheKey } from \"./utils\";\n\nconst collatorCache = new Map<string, Intl.Collator>();\n\n/**\n * Gets or creates a cached collator.\n */\nfunction getCachedCollator(locale: string, options?: Intl.CollatorOptions): Intl.Collator {\n  const cacheKey = createCacheKey(locale, options as Record<string, unknown>);\n\n  if (collatorCache.has(cacheKey)) {\n    return collatorCache.get(cacheKey)!;\n  }\n\n  const collator = new Intl.Collator(locale, options);\n  collatorCache.set(cacheKey, collator);\n  return collator;\n}\n\n/**\n * Provides localized string collation for the current locale.\n * Useful for sorting strings according to locale-specific rules.\n *\n * @example\n * ```tsx\n * function SortedList(props: { items: string[] }) {\n *   const collator = createCollator();\n *\n *   const sortedItems = () =>\n *     [...props.items].sort((a, b) => collator().compare(a, b));\n *\n *   return (\n *     <ul>\n *       <For each={sortedItems()}>\n *         {(item) => <li>{item}</li>}\n *       </For>\n *     </ul>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * // Case-insensitive sorting\n * const collator = createCollator({ sensitivity: 'base' });\n *\n * // Numeric sorting\n * const numericCollator = createCollator({ numeric: true });\n * // ['a1', 'a10', 'a2'].sort(numericCollator().compare) -> ['a1', 'a2', 'a10']\n * ```\n */\nexport function createCollator(options?: Intl.CollatorOptions): () => Intl.Collator {\n  const locale = useLocale();\n\n  return createMemo(() => getCachedCollator(locale().locale, options));\n}\n"],"mappings":"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"}
+{"version":3,"file":"createCollator.jsx","names":[],"sources":["../../src/i18n/createCollator.ts"],"sourcesContent":["/**\n * createCollator hook for solidaria\n *\n * Provides localized string comparison/collation with caching.\n *\n * Port of @react-aria/i18n useCollator.\n */\n\nimport { createMemo } from \"solid-js\";\nimport { useLocale } from \"./locale\";\nimport { createCacheKey } from \"./utils\";\n\nconst collatorCache = new Map<string, Intl.Collator>();\n\n/**\n * Gets or creates a cached collator.\n */\nfunction getCachedCollator(locale: string, options?: Intl.CollatorOptions): Intl.Collator {\n  const cacheKey = createCacheKey(locale, options as Record<string, unknown>);\n\n  if (collatorCache.has(cacheKey)) {\n    return collatorCache.get(cacheKey)!;\n  }\n\n  const collator = new Intl.Collator(locale, options);\n  collatorCache.set(cacheKey, collator);\n  return collator;\n}\n\n/**\n * Provides localized string collation for the current locale.\n * Useful for sorting strings according to locale-specific rules.\n *\n * @example\n * ```tsx\n * function SortedList(props: { items: string[] }) {\n *   const collator = createCollator();\n *\n *   const sortedItems = () =>\n *     [...props.items].sort((a, b) => collator().compare(a, b));\n *\n *   return (\n *     <ul>\n *       <For each={sortedItems()}>\n *         {(item) => <li>{item}</li>}\n *       </For>\n *     </ul>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * // Case-insensitive sorting\n * const collator = createCollator({ sensitivity: 'base' });\n *\n * // Numeric sorting\n * const numericCollator = createCollator({ numeric: true });\n * // ['a1', 'a10', 'a2'].sort(numericCollator().compare) -> ['a1', 'a2', 'a10']\n * ```\n */\nexport function createCollator(options?: Intl.CollatorOptions): () => Intl.Collator {\n  const locale = useLocale();\n\n  return createMemo(() => getCachedCollator(locale().locale, options));\n}\n"],"mappings":";;;;;;;;;;AAYA,MAAM,gCAAgB,IAAI,IAA2B;;;;AAKrD,SAAS,kBAAkB,QAAgB,SAA+C;CACxF,MAAM,WAAW,eAAe,QAAQ,OAAkC;CAE1E,IAAI,cAAc,IAAI,QAAQ,GAC5B,OAAO,cAAc,IAAI,QAAQ;CAGnC,MAAM,WAAW,IAAI,KAAK,SAAS,QAAQ,OAAO;CAClD,cAAc,IAAI,UAAU,QAAQ;CACpC,OAAO;AACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,SAAgB,eAAe,SAAqD;CAClF,MAAM,SAAS,UAAU;CAEzB,OAAO,iBAAiB,kBAAkB,OAAO,CAAC,CAAC,QAAQ,OAAO,CAAC;AACrE"}

package/dist/_chunk/createField.js

@@ -1,4 +1,5 @@
-import { i as access, o as mergeProps } from "./env.js";
+import { i as mergeProps } from "./env.js";
+import { t as access } from "./reactivity.js";
 import { createId } from "../ssr/index.js";
 import { t as createLabel } from "./createLabel.js";
 //#region src/label/createField.ts

package/dist/_chunk/createField.js.map

@@ -1 +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"}
+{"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

@@ -1,4 +1,5 @@
-import { i as access, o as mergeProps } from "./env.jsx";
+import { i as mergeProps } from "./env.jsx";
+import { t as access } from "./reactivity.jsx";
 import { createId } from "../ssr/index.jsx";
 import { t as createLabel } from "./createLabel.jsx";
 //#region src/label/createField.ts

package/dist/_chunk/createField.jsx.map

@@ -1 +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"}
+{"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

@@ -66,7 +66,6 @@ function createSyntheticBlurHandler() {
 * 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(() => {
@@ -74,8 +73,8 @@ function createFocus(props = {}) {
 	});
 	const onBlur = (e) => {
 		if (e.target === e.currentTarget) {
-			if (onBlurProp) onBlurProp(e);
-			if (onFocusChange) onFocusChange(false);
+			if (props.onBlur) props.onBlur(e);
+			if (props.onFocusChange) props.onFocusChange(false);
 			cleanupRef?.();
 			cleanupRef = void 0;
 		}
@@ -84,15 +83,20 @@ function createFocus(props = {}) {
 		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);
+			if (props.onFocus) props.onFocus(e);
+			if (props.onFocusChange) props.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
+		get onFocus() {
+			if (props.isDisabled) return;
+			return props.onFocus || props.onFocusChange || props.onBlur ? onFocus : void 0;
+		},
+		get onBlur() {
+			if (props.isDisabled) return;
+			return props.onBlur || props.onFocusChange ? onBlur : void 0;
+		}
 	} };
 }
 //#endregion

package/dist/_chunk/createFocus.js.map

@@ -1 +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"}
+{"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  // Read isDisabled/handlers off `props` directly (not via destructure): a Solid\n  // hook body runs once, so a destructure would freeze them at call time. The\n  // handlers read props.x live and the returned props are getters, mirroring\n  // upstream useFocus's per-render re-read. guard:idiomatic-solid.\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 (props.onBlur) {\n        props.onBlur(e);\n      }\n\n      if (props.onFocusChange) {\n        props.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 (props.onFocus) {\n        props.onFocus(e);\n      }\n\n      if (props.onFocusChange) {\n        props.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. Getters re-read props so a\n  // later isDisabled/handler change is reflected (the body itself runs once).\n  return {\n    focusProps: {\n      get onFocus() {\n        if (props.isDisabled) {\n          return undefined;\n        }\n        return props.onFocus || props.onFocusChange || props.onBlur ? onFocus : undefined;\n      },\n      get onBlur() {\n        if (props.isDisabled) {\n          return undefined;\n        }\n        return props.onBlur || props.onFocusChange ? onBlur : undefined;\n      },\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;CAKrE,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,MAAM,QACR,MAAM,OAAO,CAAC;GAGhB,IAAI,MAAM,eACR,MAAM,cAAc,KAAK;GAG3B,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,MAAM,SACR,MAAM,QAAQ,CAAC;GAGjB,IAAI,MAAM,eACR,MAAM,cAAc,IAAI;GAI1B,aAAa,qBAAqB,GAAG,EAAE,MAAM;EAC/C;CACF;CAIA,OAAO,EACL,YAAY;EACV,IAAI,UAAU;GACZ,IAAI,MAAM,YACR;GAEF,OAAO,MAAM,WAAW,MAAM,iBAAiB,MAAM,SAAS,UAAU,KAAA;EAC1E;EACA,IAAI,SAAS;GACX,IAAI,MAAM,YACR;GAEF,OAAO,MAAM,UAAU,MAAM,gBAAgB,SAAS,KAAA;EACxD;CACF,EACF;AACF"}

package/dist/_chunk/createFocus.jsx

@@ -66,7 +66,6 @@ function createSyntheticBlurHandler() {
 * 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(() => {
@@ -74,8 +73,8 @@ function createFocus(props = {}) {
 	});
 	const onBlur = (e) => {
 		if (e.target === e.currentTarget) {
-			if (onBlurProp) onBlurProp(e);
-			if (onFocusChange) onFocusChange(false);
+			if (props.onBlur) props.onBlur(e);
+			if (props.onFocusChange) props.onFocusChange(false);
 			cleanupRef?.();
 			cleanupRef = void 0;
 		}
@@ -84,15 +83,20 @@ function createFocus(props = {}) {
 		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);
+			if (props.onFocus) props.onFocus(e);
+			if (props.onFocusChange) props.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
+		get onFocus() {
+			if (props.isDisabled) return;
+			return props.onFocus || props.onFocusChange || props.onBlur ? onFocus : void 0;
+		},
+		get onBlur() {
+			if (props.isDisabled) return;
+			return props.onBlur || props.onFocusChange ? onBlur : void 0;
+		}
 	} };
 }
 //#endregion

package/dist/_chunk/createFocus.jsx.map

@@ -1 +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"}
+{"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  // Read isDisabled/handlers off `props` directly (not via destructure): a Solid\n  // hook body runs once, so a destructure would freeze them at call time. The\n  // handlers read props.x live and the returned props are getters, mirroring\n  // upstream useFocus's per-render re-read. guard:idiomatic-solid.\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 (props.onBlur) {\n        props.onBlur(e);\n      }\n\n      if (props.onFocusChange) {\n        props.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 (props.onFocus) {\n        props.onFocus(e);\n      }\n\n      if (props.onFocusChange) {\n        props.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. Getters re-read props so a\n  // later isDisabled/handler change is reflected (the body itself runs once).\n  return {\n    focusProps: {\n      get onFocus() {\n        if (props.isDisabled) {\n          return undefined;\n        }\n        return props.onFocus || props.onFocusChange || props.onBlur ? onFocus : undefined;\n      },\n      get onBlur() {\n        if (props.isDisabled) {\n          return undefined;\n        }\n        return props.onBlur || props.onFocusChange ? onBlur : undefined;\n      },\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;CAKrE,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,MAAM,QACR,MAAM,OAAO,CAAC;GAGhB,IAAI,MAAM,eACR,MAAM,cAAc,KAAK;GAG3B,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,MAAM,SACR,MAAM,QAAQ,CAAC;GAGjB,IAAI,MAAM,eACR,MAAM,cAAc,IAAI;GAI1B,aAAa,qBAAqB,GAAG,EAAE,MAAM;EAC/C;CACF;CAIA,OAAO,EACL,YAAY;EACV,IAAI,UAAU;GACZ,IAAI,MAAM,YACR;GAEF,OAAO,MAAM,WAAW,MAAM,iBAAiB,MAAM,SAAS,UAAU,KAAA;EAC1E;EACA,IAAI,SAAS;GACX,IAAI,MAAM,YACR;GAEF,OAAO,MAAM,UAAU,MAAM,gBAAgB,SAAS,KAAA;EACxD;CACF,EACF;AACF"}

package/dist/_chunk/createFocusWithin.js

@@ -59,7 +59,6 @@ function createSyntheticBlurHandler() {
 * Based on react-aria's useFocusWithin but adapted for SolidJS.
 */
 function createFocusWithin(props = {}) {
-	const { isDisabled, onBlurWithin, onFocusWithin, onFocusWithinChange } = props;
 	let isFocusWithin = false;
 	const { addGlobalListener, removeAllGlobalListeners } = createGlobalListeners();
 	const syntheticBlurHandler = createSyntheticBlurHandler();
@@ -75,8 +74,8 @@ function createFocusWithin(props = {}) {
 			removeAllGlobalListeners();
 			cleanupRef?.();
 			cleanupRef = void 0;
-			if (onBlurWithin) onBlurWithin(e);
-			if (onFocusWithinChange) onFocusWithinChange(false);
+			if (props.onBlurWithin) props.onBlurWithin(e);
+			if (props.onFocusWithinChange) props.onFocusWithinChange(false);
 		}
 	};
 	const onFocus = (e) => {
@@ -84,8 +83,8 @@ function createFocusWithin(props = {}) {
 		const ownerDocument = getOwnerDocument(e.target);
 		const activeElement = ownerDocument ? getActiveElement(ownerDocument) : null;
 		if (!isFocusWithin && activeElement === getEventTarget(e)) {
-			if (onFocusWithin) onFocusWithin(e);
-			if (onFocusWithinChange) onFocusWithinChange(true);
+			if (props.onFocusWithin) props.onFocusWithin(e);
+			if (props.onFocusWithinChange) props.onFocusWithinChange(true);
 			isFocusWithin = true;
 			cleanupRef = syntheticBlurHandler(e, e.target);
 			const currentTarget = e.currentTarget;
@@ -97,8 +96,8 @@ function createFocusWithin(props = {}) {
 						setEventTarget(nativeEvent, currentTarget);
 						isFocusWithin = false;
 						removeAllGlobalListeners();
-						if (onBlurWithin) onBlurWithin(nativeEvent);
-						if (onFocusWithinChange) onFocusWithinChange(false);
+						if (props.onBlurWithin) props.onBlurWithin(nativeEvent);
+						if (props.onFocusWithinChange) props.onFocusWithinChange(false);
 						cleanupRef?.();
 						cleanupRef = void 0;
 					}
@@ -106,13 +105,13 @@ function createFocusWithin(props = {}) {
 			}, { capture: true });
 		}
 	};
-	if (isDisabled) return { focusWithinProps: {
-		onFocus: void 0,
-		onBlur: void 0
-	} };
 	return { focusWithinProps: {
-		onFocus,
-		onBlur
+		get onFocus() {
+			return props.isDisabled ? void 0 : onFocus;
+		},
+		get onBlur() {
+			return props.isDisabled ? void 0 : onBlur;
+		}
 	} };
 }
 //#endregion

package/dist/_chunk/createFocusWithin.js.map

@@ -1 +1 @@
-{"version":3,"file":"createFocusWithin.js","names":[],"sources":["../../src/interactions/createFocusWithin.ts"],"sourcesContent":["/**\n * createFocusWithin - Handles focus events for the target and its descendants.\n *\n * This is a 1-1 port of React-Aria's useFocusWithin hook adapted for SolidJS.\n */\n\nimport { JSX, onCleanup } from \"solid-js\";\nimport { getOwnerDocument, getEventTarget, nodeContains, createGlobalListeners } from \"../utils\";\nimport { setEventTarget } from \"../utils/events\";\n\nexport interface FocusWithinProps {\n  /** Whether the focus within events should be disabled. */\n  isDisabled?: boolean;\n  /** Handler that is called when the target element or a descendant receives focus. */\n  onFocusWithin?: (e: FocusEvent) => void;\n  /** Handler that is called when the target element and all descendants lose focus. */\n  onBlurWithin?: (e: FocusEvent) => void;\n  /** Handler that is called when the focus within state changes. */\n  onFocusWithinChange?: (isFocusWithin: boolean) => void;\n}\n\nexport interface FocusWithinResult {\n  /** Props to spread onto the target element. */\n  focusWithinProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\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\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 = () => {\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 () => {\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 target and its descendants.\n *\n * Based on react-aria's useFocusWithin but adapted for SolidJS.\n */\nexport function createFocusWithin(props: FocusWithinProps = {}): FocusWithinResult {\n  const { isDisabled, onBlurWithin, onFocusWithin, onFocusWithinChange } = props;\n\n  // State tracking\n  let isFocusWithin = false;\n\n  // Global listeners manager\n  const { addGlobalListener, removeAllGlobalListeners } = createGlobalListeners();\n  const syntheticBlurHandler = createSyntheticBlurHandler();\n  let cleanupRef: (() => void) | undefined;\n\n  // Cleanup on unmount\n  onCleanup(() => {\n    cleanupRef?.();\n    removeAllGlobalListeners();\n  });\n\n  const onBlur: JSX.EventHandler<HTMLElement, FocusEvent> = (e) => {\n    // Ignore events bubbling through portals\n    if (!e.currentTarget.contains(e.target as Node)) {\n      return;\n    }\n\n    // We don't want to trigger onBlurWithin and then immediately onFocusWithin again\n    // when moving focus inside the element. Only trigger if the currentTarget doesn't\n    // include the relatedTarget (where focus is moving).\n    if (isFocusWithin && !e.currentTarget.contains(e.relatedTarget as Node)) {\n      isFocusWithin = false;\n      removeAllGlobalListeners();\n      cleanupRef?.();\n      cleanupRef = undefined;\n\n      if (onBlurWithin) {\n        onBlurWithin(e);\n      }\n\n      if (onFocusWithinChange) {\n        onFocusWithinChange(false);\n      }\n    }\n  };\n\n  const onFocus: JSX.EventHandler<HTMLElement, FocusEvent> = (e) => {\n    // Ignore events bubbling through portals\n    if (!e.currentTarget.contains(e.target as Node)) {\n      return;\n    }\n\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 (!isFocusWithin && activeElement === getEventTarget(e)) {\n      if (onFocusWithin) {\n        onFocusWithin(e);\n      }\n\n      if (onFocusWithinChange) {\n        onFocusWithinChange(true);\n      }\n\n      isFocusWithin = true;\n      cleanupRef = syntheticBlurHandler(e, e.target);\n\n      // Browsers don't fire blur events when elements are removed from the DOM.\n      // However, if a focus event occurs outside the element we're tracking, we\n      // can manually fire onBlur.\n      const currentTarget = e.currentTarget;\n\n      addGlobalListener(\n        \"focus\",\n        (focusEvent: Event) => {\n          if (\n            isFocusWithin &&\n            !nodeContains(currentTarget, (focusEvent as FocusEvent).target as Element)\n          ) {\n            // Create a synthetic blur event\n            const window = ownerDocument?.defaultView;\n            if (window) {\n              const nativeEvent = new window.FocusEvent(\"blur\", {\n                relatedTarget: (focusEvent as FocusEvent).target as Element,\n              });\n              setEventTarget(nativeEvent, currentTarget);\n\n              isFocusWithin = false;\n              removeAllGlobalListeners();\n\n              if (onBlurWithin) {\n                onBlurWithin(nativeEvent);\n              }\n\n              if (onFocusWithinChange) {\n                onFocusWithinChange(false);\n              }\n              cleanupRef?.();\n              cleanupRef = undefined;\n            }\n          }\n        },\n        { capture: true },\n      );\n    }\n  };\n\n  if (isDisabled) {\n    return {\n      focusWithinProps: {\n        onFocus: undefined,\n        onBlur: undefined,\n      },\n    };\n  }\n\n  return {\n    focusWithinProps: {\n      onFocus,\n      onBlur,\n    },\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"createFocusWithin.js","names":[],"sources":["../../src/interactions/createFocusWithin.ts"],"sourcesContent":["/**\n * createFocusWithin - Handles focus events for the target and its descendants.\n *\n * This is a 1-1 port of React-Aria's useFocusWithin hook adapted for SolidJS.\n */\n\nimport { JSX, onCleanup } from \"solid-js\";\nimport { getOwnerDocument, getEventTarget, nodeContains, createGlobalListeners } from \"../utils\";\nimport { setEventTarget } from \"../utils/events\";\n\nexport interface FocusWithinProps {\n  /** Whether the focus within events should be disabled. */\n  isDisabled?: boolean;\n  /** Handler that is called when the target element or a descendant receives focus. */\n  onFocusWithin?: (e: FocusEvent) => void;\n  /** Handler that is called when the target element and all descendants lose focus. */\n  onBlurWithin?: (e: FocusEvent) => void;\n  /** Handler that is called when the focus within state changes. */\n  onFocusWithinChange?: (isFocusWithin: boolean) => void;\n}\n\nexport interface FocusWithinResult {\n  /** Props to spread onto the target element. */\n  focusWithinProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\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\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 = () => {\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 () => {\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 target and its descendants.\n *\n * Based on react-aria's useFocusWithin but adapted for SolidJS.\n */\nexport function createFocusWithin(props: FocusWithinProps = {}): FocusWithinResult {\n  // Read isDisabled/handlers off `props` directly (not via destructure): a Solid\n  // hook body runs once, so destructuring would freeze them at call time and drop\n  // reactive updates — createOverlay/createVisuallyHidden pass a live isDisabled\n  // getter. The handlers below read props.x live; the return is getter-based so a\n  // later isDisabled flip re-computes. Mirrors upstream useFocusWithin's re-read.\n\n  // State tracking\n  let isFocusWithin = false;\n\n  // Global listeners manager\n  const { addGlobalListener, removeAllGlobalListeners } = createGlobalListeners();\n  const syntheticBlurHandler = createSyntheticBlurHandler();\n  let cleanupRef: (() => void) | undefined;\n\n  // Cleanup on unmount\n  onCleanup(() => {\n    cleanupRef?.();\n    removeAllGlobalListeners();\n  });\n\n  const onBlur: JSX.EventHandler<HTMLElement, FocusEvent> = (e) => {\n    // Ignore events bubbling through portals\n    if (!e.currentTarget.contains(e.target as Node)) {\n      return;\n    }\n\n    // We don't want to trigger onBlurWithin and then immediately onFocusWithin again\n    // when moving focus inside the element. Only trigger if the currentTarget doesn't\n    // include the relatedTarget (where focus is moving).\n    if (isFocusWithin && !e.currentTarget.contains(e.relatedTarget as Node)) {\n      isFocusWithin = false;\n      removeAllGlobalListeners();\n      cleanupRef?.();\n      cleanupRef = undefined;\n\n      if (props.onBlurWithin) {\n        props.onBlurWithin(e);\n      }\n\n      if (props.onFocusWithinChange) {\n        props.onFocusWithinChange(false);\n      }\n    }\n  };\n\n  const onFocus: JSX.EventHandler<HTMLElement, FocusEvent> = (e) => {\n    // Ignore events bubbling through portals\n    if (!e.currentTarget.contains(e.target as Node)) {\n      return;\n    }\n\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 (!isFocusWithin && activeElement === getEventTarget(e)) {\n      if (props.onFocusWithin) {\n        props.onFocusWithin(e);\n      }\n\n      if (props.onFocusWithinChange) {\n        props.onFocusWithinChange(true);\n      }\n\n      isFocusWithin = true;\n      cleanupRef = syntheticBlurHandler(e, e.target);\n\n      // Browsers don't fire blur events when elements are removed from the DOM.\n      // However, if a focus event occurs outside the element we're tracking, we\n      // can manually fire onBlur.\n      const currentTarget = e.currentTarget;\n\n      addGlobalListener(\n        \"focus\",\n        (focusEvent: Event) => {\n          if (\n            isFocusWithin &&\n            !nodeContains(currentTarget, (focusEvent as FocusEvent).target as Element)\n          ) {\n            // Create a synthetic blur event\n            const window = ownerDocument?.defaultView;\n            if (window) {\n              const nativeEvent = new window.FocusEvent(\"blur\", {\n                relatedTarget: (focusEvent as FocusEvent).target as Element,\n              });\n              setEventTarget(nativeEvent, currentTarget);\n\n              isFocusWithin = false;\n              removeAllGlobalListeners();\n\n              if (props.onBlurWithin) {\n                props.onBlurWithin(nativeEvent);\n              }\n\n              if (props.onFocusWithinChange) {\n                props.onFocusWithinChange(false);\n              }\n              cleanupRef?.();\n              cleanupRef = undefined;\n            }\n          }\n        },\n        { capture: true },\n      );\n    }\n  };\n\n  return {\n    focusWithinProps: {\n      get onFocus() {\n        return props.isDisabled ? undefined : onFocus;\n      },\n      get onBlur() {\n        return props.isDisabled ? undefined : onBlur;\n      },\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/_chunk/createFocusWithin.jsx

@@ -59,7 +59,6 @@ function createSyntheticBlurHandler() {
 * Based on react-aria's useFocusWithin but adapted for SolidJS.
 */
 function createFocusWithin(props = {}) {
-	const { isDisabled, onBlurWithin, onFocusWithin, onFocusWithinChange } = props;
 	let isFocusWithin = false;
 	const { addGlobalListener, removeAllGlobalListeners } = createGlobalListeners();
 	const syntheticBlurHandler = createSyntheticBlurHandler();
@@ -75,8 +74,8 @@ function createFocusWithin(props = {}) {
 			removeAllGlobalListeners();
 			cleanupRef?.();
 			cleanupRef = void 0;
-			if (onBlurWithin) onBlurWithin(e);
-			if (onFocusWithinChange) onFocusWithinChange(false);
+			if (props.onBlurWithin) props.onBlurWithin(e);
+			if (props.onFocusWithinChange) props.onFocusWithinChange(false);
 		}
 	};
 	const onFocus = (e) => {
@@ -84,8 +83,8 @@ function createFocusWithin(props = {}) {
 		const ownerDocument = getOwnerDocument(e.target);
 		const activeElement = ownerDocument ? getActiveElement(ownerDocument) : null;
 		if (!isFocusWithin && activeElement === getEventTarget(e)) {
-			if (onFocusWithin) onFocusWithin(e);
-			if (onFocusWithinChange) onFocusWithinChange(true);
+			if (props.onFocusWithin) props.onFocusWithin(e);
+			if (props.onFocusWithinChange) props.onFocusWithinChange(true);
 			isFocusWithin = true;
 			cleanupRef = syntheticBlurHandler(e, e.target);
 			const currentTarget = e.currentTarget;
@@ -97,8 +96,8 @@ function createFocusWithin(props = {}) {
 						setEventTarget(nativeEvent, currentTarget);
 						isFocusWithin = false;
 						removeAllGlobalListeners();
-						if (onBlurWithin) onBlurWithin(nativeEvent);
-						if (onFocusWithinChange) onFocusWithinChange(false);
+						if (props.onBlurWithin) props.onBlurWithin(nativeEvent);
+						if (props.onFocusWithinChange) props.onFocusWithinChange(false);
 						cleanupRef?.();
 						cleanupRef = void 0;
 					}
@@ -106,13 +105,13 @@ function createFocusWithin(props = {}) {
 			}, { capture: true });
 		}
 	};
-	if (isDisabled) return { focusWithinProps: {
-		onFocus: void 0,
-		onBlur: void 0
-	} };
 	return { focusWithinProps: {
-		onFocus,
-		onBlur
+		get onFocus() {
+			return props.isDisabled ? void 0 : onFocus;
+		},
+		get onBlur() {
+			return props.isDisabled ? void 0 : onBlur;
+		}
 	} };
 }
 //#endregion