@proyecto-viviana/solidaria-components 0.5.0 → 0.7.0-rc.0

package/dist/FileTrigger.js

@@ -1,14 +1,28 @@
-import { getNextElement, insert, mergeProps, runHydrationEvents, spread, template, use } from "solid-js/web";
-import { createSignal, splitProps } from "solid-js";
+/*
+* Copyright 2023 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/FileTrigger.tsx
+import { getNextElement, insert, ref, runHydrationEvents, scope, spread, template } from "@solidjs/web";
+import { createSignal } from "solid-js";
 import { createPress } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 //#region src/FileTrigger.tsx
 /**
 * FileTrigger primitive for solidaria-components.
 *
 * Opens the native file picker from any pressable child.
-* Parity target: react-aria-components/src/FileTrigger.tsx
+* Based on packages/react-aria-components/src/FileTrigger.tsx.
 */
-var _tmpl$ = /*#__PURE__*/ template(`<span>`), _tmpl$2 = /*#__PURE__*/ template(`<input>`);
+var _tmpl$ = /* @__PURE__ */ template(`<span>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<input>`);
 /**
 * A FileTrigger allows a user to access the file system using a custom trigger.
 */
@@ -42,16 +56,20 @@ function FileTrigger(props) {
 	};
 	return [(() => {
 		var _el$ = getNextElement(_tmpl$);
-		spread(_el$, pressProps, false, true);
-		insert(_el$, () => local.children);
+		spread(_el$, pressProps, true);
+		insert(_el$, scope(() => {
+			return local.children;
+		}));
 		runHydrationEvents();
 		return _el$;
 	})(), (() => {
 		var _el$2 = getNextElement(_tmpl$2);
-		use(setInputRef, _el$2);
-		spread(_el$2, mergeProps(inputProps, {
-			"type": "file",
-			"style": { display: "none" },
+		ref(() => {
+			return setInputRef;
+		}, _el$2);
+		spread(_el$2, [inputProps, {
+			type: "file",
+			style: { display: "none" },
 			get accept() {
 				return local.acceptedFileTypes?.join(",");
 			},
@@ -67,8 +85,8 @@ function FileTrigger(props) {
 			get webkitdirectory() {
 				return local.acceptDirectory ? "" : void 0;
 			},
-			"onChange": onInputChange
-		}), false, false);
+			onChange: onInputChange
+		}], false);
 		runHydrationEvents();
 		return _el$2;
 	})()];

package/dist/FileTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileTrigger.js","names":["JSX","createSignal","splitProps","createPress","PressEvent","FileTriggerProps","Omit","InputHTMLAttributes","HTMLInputElement","acceptedFileTypes","ReadonlyArray","allowsMultiple","defaultCamera","acceptDirectory","onSelect","files","FileList","children","Element","FileTrigger","props","local","inputProps","inputRef","setInputRef","openFilePicker","input","value","click","pressProps","isDisabled","disabled","onPress","_e","onInputChange","EventHandler","Event","e","currentTarget","_el$","_$getNextElement","_tmpl$","_$spread","_$insert","_$runHydrationEvents","_el$2","_tmpl$2","_$use","_$mergeProps","display","accept","join","multiple","capture","webkitdirectory","undefined"],"sources":["../src/FileTrigger.tsx"],"sourcesContent":["/**\n * FileTrigger primitive for solidaria-components.\n *\n * Opens the native file picker from any pressable child.\n * Parity target: react-aria-components/src/FileTrigger.tsx\n */\n\nimport { type JSX, createSignal, splitProps } from \"solid-js\";\nimport { createPress, type PressEvent } from \"@proyecto-viviana/solidaria\";\n\nexport interface FileTriggerProps extends Omit<\n  JSX.InputHTMLAttributes<HTMLInputElement>,\n  \"type\" | \"onChange\" | \"children\" | \"onSelect\"\n> {\n  /** Mime types accepted by the file picker. */\n  acceptedFileTypes?: ReadonlyArray<string>;\n  /** Whether multiple files can be selected. */\n  allowsMultiple?: boolean;\n  /** Default camera capture mode for mobile devices. */\n  defaultCamera?: \"user\" | \"environment\";\n  /** Enables directory selection in supported browsers. */\n  acceptDirectory?: boolean;\n  /** Called when user selection changes. */\n  onSelect?: (files: FileList | null) => void;\n  /** Trigger content (typically a button). */\n  children?: JSX.Element;\n}\n\n/**\n * A FileTrigger allows a user to access the file system using a custom trigger.\n */\nexport function FileTrigger(props: FileTriggerProps): JSX.Element {\n  const [local, inputProps] = splitProps(props, [\n    \"acceptedFileTypes\",\n    \"allowsMultiple\",\n    \"defaultCamera\",\n    \"acceptDirectory\",\n    \"onSelect\",\n    \"children\",\n    \"disabled\",\n  ]);\n\n  const [inputRef, setInputRef] = createSignal<HTMLInputElement | null>(null);\n\n  const openFilePicker = () => {\n    const input = inputRef();\n    if (!input) return;\n    if (input.value) input.value = \"\";\n    input.click();\n  };\n\n  const { pressProps } = createPress({\n    get isDisabled() {\n      return !!local.disabled;\n    },\n    onPress: (_e: PressEvent) => {\n      openFilePicker();\n    },\n  });\n\n  const onInputChange: JSX.EventHandler<HTMLInputElement, Event> = (e) => {\n    local.onSelect?.(e.currentTarget.files);\n  };\n\n  return (\n    <>\n      <span {...pressProps}>{local.children}</span>\n      <input\n        {...inputProps}\n        ref={setInputRef}\n        type=\"file\"\n        style={{ display: \"none\" }}\n        accept={local.acceptedFileTypes?.join(\",\")}\n        multiple={local.allowsMultiple}\n        capture={local.defaultCamera}\n        disabled={local.disabled}\n        // @ts-expect-error Non-standard attribute supported by WebKit browsers.\n        webkitdirectory={local.acceptDirectory ? \"\" : undefined}\n        onChange={onInputChange}\n      />\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AA+BA,SAAgBmB,YAAYC,OAAsC;CAChE,MAAM,CAACC,OAAOC,cAAcpB,WAAWkB,OAAO;EAC5C;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX;CAED,MAAM,CAACG,UAAUC,eAAevB,aAAsC,IAAI;CAE1E,MAAMwB,uBAAuB;EAC3B,MAAMC,QAAQH,SAAS;EACvB,IAAI,CAACG,OAAO;EACZ,IAAIA,MAAMC,OAAOD,MAAMC,QAAQ;EAC/BD,MAAME,MAAM;CACd;CAEA,MAAM,EAAEC,eAAe1B,YAAY;EACjC,IAAI2B,aAAa;GACf,OAAO,CAAC,CAACT,MAAMU;EACjB;EACAC,UAAUC,OAAmB;GAC3BR,eAAe;EACjB;CACF,CAAC;CAED,MAAMS,iBAA4DG,MAAM;EACtEhB,MAAMP,WAAWuB,EAAEC,cAAcvB,KAAK;CACxC;CAEA,OAAA,QAAA;EAAA,IAAAwB,OAAAC,eAAAC,MAAA;EAAAC,OAAAH,MAEcV,YAAU,OAAA,IAAA;EAAAc,OAAAJ,YAAGlB,MAAMJ,QAAQ;EAAA2B,mBAAA;EAAA,OAAAL;CAAA,EAAA,CAAA,UAAA;EAAA,IAAAM,QAAAL,eAAAM,OAAA;EAAAC,IAG9BvB,aAAWqB,KAAA;EAAAH,OAAAG,OAAAG,WADZ1B,YAAU;GAAA,QAET;GAAM,SACJ,EAAE2B,SAAS,OAAO;GAAC,IAC1BC,SAAM;IAAA,OAAE7B,MAAMZ,mBAAmB0C,KAAK,GAAG;GAAC;GAAA,IAC1CC,WAAQ;IAAA,OAAE/B,MAAMV;GAAc;GAAA,IAC9B0C,UAAO;IAAA,OAAEhC,MAAMT;GAAa;GAAA,IAC5BmB,WAAQ;IAAA,OAAEV,MAAMU;GAAQ;GAAA,IAExBuB,kBAAe;IAAA,OAAEjC,MAAMR,kBAAkB,KAAK0C,KAAAA;GAAS;GAAA,YAC7CrB;EAAa,CAAA,GAAA,OAAA,KAAA;EAAAU,mBAAA;EAAA,OAAAC;CAAA,EAAA,CAAA,CAAA;AAI/B"}
+{"version":3,"file":"FileTrigger.js","names":["{local.children}","ref={setInputRef}","type=\"file\"","style={{ display: \"none\" }}","onChange={onInputChange}"],"sources":["../src/FileTrigger.tsx"],"sourcesContent":["/*\n * Copyright 2023 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/FileTrigger.tsx\n\n/**\n * FileTrigger primitive for solidaria-components.\n *\n * Opens the native file picker from any pressable child.\n * Based on packages/react-aria-components/src/FileTrigger.tsx.\n */\n\nimport { createSignal } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { createPress, type PressEvent } from \"@proyecto-viviana/solidaria\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\nexport interface FileTriggerProps extends Omit<\n  JSX.InputHTMLAttributes<HTMLInputElement>,\n  \"type\" | \"onChange\" | \"children\" | \"onSelect\"\n> {\n  /** Mime types accepted by the file picker. */\n  acceptedFileTypes?: ReadonlyArray<string>;\n  /** Whether multiple files can be selected. */\n  allowsMultiple?: boolean;\n  /** Default camera capture mode for mobile devices. */\n  defaultCamera?: \"user\" | \"environment\";\n  /** Enables directory selection in supported browsers. */\n  acceptDirectory?: boolean;\n  /** Called when user selection changes. */\n  onSelect?: (files: FileList | null) => void;\n  /** Trigger content (typically a button). */\n  children?: JSX.Element;\n}\n\n/**\n * A FileTrigger allows a user to access the file system using a custom trigger.\n */\nexport function FileTrigger(props: FileTriggerProps): JSX.Element {\n  const [local, inputProps] = splitProps(props, [\n    \"acceptedFileTypes\",\n    \"allowsMultiple\",\n    \"defaultCamera\",\n    \"acceptDirectory\",\n    \"onSelect\",\n    \"children\",\n    \"disabled\",\n  ]);\n\n  const [inputRef, setInputRef] = createSignal<HTMLInputElement | null>(null);\n\n  const openFilePicker = () => {\n    const input = inputRef();\n    if (!input) return;\n    if (input.value) input.value = \"\";\n    input.click();\n  };\n\n  const { pressProps } = createPress({\n    get isDisabled() {\n      return !!local.disabled;\n    },\n    onPress: (_e: PressEvent) => {\n      openFilePicker();\n    },\n  });\n\n  const onInputChange: JSX.EventHandler<HTMLInputElement, Event> = (e) => {\n    local.onSelect?.(e.currentTarget.files);\n  };\n\n  return (\n    <>\n      <span {...pressProps}>{local.children}</span>\n      <input\n        {...inputProps}\n        ref={setInputRef}\n        type=\"file\"\n        style={{ display: \"none\" }}\n        accept={local.acceptedFileTypes?.join(\",\")}\n        multiple={local.allowsMultiple}\n        capture={local.defaultCamera}\n        disabled={local.disabled}\n        webkitdirectory={local.acceptDirectory ? \"\" : undefined}\n        onChange={onInputChange}\n      />\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,SAAgB,YAAY,OAAsC;CAChE,MAAM,CAAC,OAAO,cAAc,WAAW,OAAO;EAC5C;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,CAAC,UAAU,eAAe,aAAsC,IAAI;CAE1E,MAAM,uBAAuB;EAC3B,MAAM,QAAQ,SAAS;EACvB,IAAI,CAAC,OAAO;EACZ,IAAI,MAAM,OAAO,MAAM,QAAQ;EAC/B,MAAM,MAAM;CACd;CAEA,MAAM,EAAE,eAAe,YAAY;EACjC,IAAI,aAAa;GACf,OAAO,CAAC,CAAC,MAAM;EACjB;EACA,UAAU,OAAmB;GAC3B,eAAe;EACjB;CACF,CAAC;CAED,MAAM,iBAA4D,MAAM;EACtE,MAAM,WAAW,EAAE,cAAc,KAAK;CACxC;CAEA,OACI,QACA;EAA4C,IAAA,OAAA,eAAA,MAAA;EAAlC,OAAA,MAAA,YAAA,IAAA;EAAV,OAAA,MAAsBA,YAAAA;GAAC,OAAA,MAAM;EAAQ,CAAA,CAAO;EAA5C,mBAA4C;EAA5C,OAAA;CAA4C,EAAA,CAAA,UAC5C;EAWC,IAAA,QAAA,eAAA,OAAA;EATC,UAAA;GAAK,OAAA;EAAW,GAAhBC,KAAgB;EADZ,OAAA,OAAA,CAAA,YAAA;GAEJC,MAAAA;GACAC,OAAO,EAAE,SAAS,OAAO;GACzB,IAAA,SAAA;IAAQ,OAAA,MAAM,mBAAmB,KAAK,GAAG;GAAC;GAC1C,IAAA,WAAA;IAAU,OAAA,MAAM;GAAc;GAC9B,IAAA,UAAA;IAAS,OAAA,MAAM;GAAa;GAC5B,IAAA,WAAA;IAAU,OAAA,MAAM;GAAQ;GACxB,IAAA,kBAAA;IAAiB,OAAA,MAAM,kBAAkB,KAAK,KAAA;GAAS;GACvDC,UAAU;;EAVZ,mBAWC;EAXD,OAAA;CAWC,EAAA,CAAA,CAZF;AAeL"}

package/dist/FileTrigger.jsx

@@ -1,11 +1,24 @@
-import { createSignal, splitProps } from "solid-js";
+/*
+* Copyright 2023 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/FileTrigger.tsx
+import { createSignal } from "solid-js";
 import { createPress } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 //#region src/FileTrigger.tsx
 /**
 * FileTrigger primitive for solidaria-components.
 *
 * Opens the native file picker from any pressable child.
-* Parity target: react-aria-components/src/FileTrigger.tsx
+* Based on packages/react-aria-components/src/FileTrigger.tsx.
 */
 /**
 * A FileTrigger allows a user to access the file system using a custom trigger.

package/dist/FileTrigger.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"FileTrigger.jsx","names":[],"sources":["../src/FileTrigger.tsx"],"sourcesContent":["/**\n * FileTrigger primitive for solidaria-components.\n *\n * Opens the native file picker from any pressable child.\n * Parity target: react-aria-components/src/FileTrigger.tsx\n */\n\nimport { type JSX, createSignal, splitProps } from \"solid-js\";\nimport { createPress, type PressEvent } from \"@proyecto-viviana/solidaria\";\n\nexport interface FileTriggerProps extends Omit<\n  JSX.InputHTMLAttributes<HTMLInputElement>,\n  \"type\" | \"onChange\" | \"children\" | \"onSelect\"\n> {\n  /** Mime types accepted by the file picker. */\n  acceptedFileTypes?: ReadonlyArray<string>;\n  /** Whether multiple files can be selected. */\n  allowsMultiple?: boolean;\n  /** Default camera capture mode for mobile devices. */\n  defaultCamera?: \"user\" | \"environment\";\n  /** Enables directory selection in supported browsers. */\n  acceptDirectory?: boolean;\n  /** Called when user selection changes. */\n  onSelect?: (files: FileList | null) => void;\n  /** Trigger content (typically a button). */\n  children?: JSX.Element;\n}\n\n/**\n * A FileTrigger allows a user to access the file system using a custom trigger.\n */\nexport function FileTrigger(props: FileTriggerProps): JSX.Element {\n  const [local, inputProps] = splitProps(props, [\n    \"acceptedFileTypes\",\n    \"allowsMultiple\",\n    \"defaultCamera\",\n    \"acceptDirectory\",\n    \"onSelect\",\n    \"children\",\n    \"disabled\",\n  ]);\n\n  const [inputRef, setInputRef] = createSignal<HTMLInputElement | null>(null);\n\n  const openFilePicker = () => {\n    const input = inputRef();\n    if (!input) return;\n    if (input.value) input.value = \"\";\n    input.click();\n  };\n\n  const { pressProps } = createPress({\n    get isDisabled() {\n      return !!local.disabled;\n    },\n    onPress: (_e: PressEvent) => {\n      openFilePicker();\n    },\n  });\n\n  const onInputChange: JSX.EventHandler<HTMLInputElement, Event> = (e) => {\n    local.onSelect?.(e.currentTarget.files);\n  };\n\n  return (\n    <>\n      <span {...pressProps}>{local.children}</span>\n      <input\n        {...inputProps}\n        ref={setInputRef}\n        type=\"file\"\n        style={{ display: \"none\" }}\n        accept={local.acceptedFileTypes?.join(\",\")}\n        multiple={local.allowsMultiple}\n        capture={local.defaultCamera}\n        disabled={local.disabled}\n        // @ts-expect-error Non-standard attribute supported by WebKit browsers.\n        webkitdirectory={local.acceptDirectory ? \"\" : undefined}\n        onChange={onInputChange}\n      />\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AA+BA,SAAgB,YAAY,OAAsC;CAChE,MAAM,CAAC,OAAO,cAAc,WAAW,OAAO;EAC5C;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,CAAC,UAAU,eAAe,aAAsC,IAAI;CAE1E,MAAM,uBAAuB;EAC3B,MAAM,QAAQ,SAAS;EACvB,IAAI,CAAC,OAAO;EACZ,IAAI,MAAM,OAAO,MAAM,QAAQ;EAC/B,MAAM,MAAM;CACd;CAEA,MAAM,EAAE,eAAe,YAAY;EACjC,IAAI,aAAa;GACf,OAAO,CAAC,CAAC,MAAM;EACjB;EACA,UAAU,OAAmB;GAC3B,eAAe;EACjB;CACF,CAAC;CAED,MAAM,iBAA4D,MAAM;EACtE,MAAM,WAAW,EAAE,cAAc,KAAK;CACxC;CAEA,OACE,EAAE;MACA,CAAC,SAAS,aAAa,MAAM,SAAS,EAAE,KAAK;MAC7C,CAAC,UACK,YACJ,KAAK,aACL,YACA,OAAO,EAAE,SAAS,OAAO,GACzB,QAAQ,MAAM,mBAAmB,KAAK,GAAG,GACzC,UAAU,MAAM,gBAChB,SAAS,MAAM,eACf,UAAU,MAAM,UAEhB,iBAAiB,MAAM,kBAAkB,KAAK,KAAA,GAC9C,UAAU,iBACV;IACJ;AAEJ"}
+{"version":3,"file":"FileTrigger.jsx","names":[],"sources":["../src/FileTrigger.tsx"],"sourcesContent":["/*\n * Copyright 2023 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/FileTrigger.tsx\n\n/**\n * FileTrigger primitive for solidaria-components.\n *\n * Opens the native file picker from any pressable child.\n * Based on packages/react-aria-components/src/FileTrigger.tsx.\n */\n\nimport { createSignal } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { createPress, type PressEvent } from \"@proyecto-viviana/solidaria\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\nexport interface FileTriggerProps extends Omit<\n  JSX.InputHTMLAttributes<HTMLInputElement>,\n  \"type\" | \"onChange\" | \"children\" | \"onSelect\"\n> {\n  /** Mime types accepted by the file picker. */\n  acceptedFileTypes?: ReadonlyArray<string>;\n  /** Whether multiple files can be selected. */\n  allowsMultiple?: boolean;\n  /** Default camera capture mode for mobile devices. */\n  defaultCamera?: \"user\" | \"environment\";\n  /** Enables directory selection in supported browsers. */\n  acceptDirectory?: boolean;\n  /** Called when user selection changes. */\n  onSelect?: (files: FileList | null) => void;\n  /** Trigger content (typically a button). */\n  children?: JSX.Element;\n}\n\n/**\n * A FileTrigger allows a user to access the file system using a custom trigger.\n */\nexport function FileTrigger(props: FileTriggerProps): JSX.Element {\n  const [local, inputProps] = splitProps(props, [\n    \"acceptedFileTypes\",\n    \"allowsMultiple\",\n    \"defaultCamera\",\n    \"acceptDirectory\",\n    \"onSelect\",\n    \"children\",\n    \"disabled\",\n  ]);\n\n  const [inputRef, setInputRef] = createSignal<HTMLInputElement | null>(null);\n\n  const openFilePicker = () => {\n    const input = inputRef();\n    if (!input) return;\n    if (input.value) input.value = \"\";\n    input.click();\n  };\n\n  const { pressProps } = createPress({\n    get isDisabled() {\n      return !!local.disabled;\n    },\n    onPress: (_e: PressEvent) => {\n      openFilePicker();\n    },\n  });\n\n  const onInputChange: JSX.EventHandler<HTMLInputElement, Event> = (e) => {\n    local.onSelect?.(e.currentTarget.files);\n  };\n\n  return (\n    <>\n      <span {...pressProps}>{local.children}</span>\n      <input\n        {...inputProps}\n        ref={setInputRef}\n        type=\"file\"\n        style={{ display: \"none\" }}\n        accept={local.acceptedFileTypes?.join(\",\")}\n        multiple={local.allowsMultiple}\n        capture={local.defaultCamera}\n        disabled={local.disabled}\n        webkitdirectory={local.acceptDirectory ? \"\" : undefined}\n        onChange={onInputChange}\n      />\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,SAAgB,YAAY,OAAsC;CAChE,MAAM,CAAC,OAAO,cAAc,WAAW,OAAO;EAC5C;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,CAAC,UAAU,eAAe,aAAsC,IAAI;CAE1E,MAAM,uBAAuB;EAC3B,MAAM,QAAQ,SAAS;EACvB,IAAI,CAAC,OAAO;EACZ,IAAI,MAAM,OAAO,MAAM,QAAQ;EAC/B,MAAM,MAAM;CACd;CAEA,MAAM,EAAE,eAAe,YAAY;EACjC,IAAI,aAAa;GACf,OAAO,CAAC,CAAC,MAAM;EACjB;EACA,UAAU,OAAmB;GAC3B,eAAe;EACjB;CACF,CAAC;CAED,MAAM,iBAA4D,MAAM;EACtE,MAAM,WAAW,EAAE,cAAc,KAAK;CACxC;CAEA,OACE,EAAE;MACA,CAAC,SAAS,aAAa,MAAM,SAAS,EAAE,KAAK;MAC7C,CAAC,UACK,YACJ,KAAK,aACL,YACA,OAAO,EAAE,SAAS,OAAO,GACzB,QAAQ,MAAM,mBAAmB,KAAK,GAAG,GACzC,UAAU,MAAM,gBAChB,SAAS,MAAM,eACf,UAAU,MAAM,UAChB,iBAAiB,MAAM,kBAAkB,KAAK,KAAA,GAC9C,UAAU,iBACV;IACJ;AAEJ"}

package/dist/Focusable.d.ts

@@ -1,10 +1,4 @@
-/**
- * Focusable component for solidaria-components
- *
- * A render-prop component that wraps createFocusable to make an element
- * focusable and capable of auto focus. Port of React Aria's Focusable.
- */
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { type CreateFocusableProps } from "@proyecto-viviana/solidaria";
 export interface FocusableProps extends CreateFocusableProps {
     /** A single child element to make focusable. */
@@ -19,7 +13,7 @@ export interface FocusableProps extends CreateFocusableProps {
  * @example
  * ```tsx
  * <Focusable onFocus={() => console.log('focused')}>
- *   <div tabIndex={0}>Focusable content</div>
+ *   <div tabindex={0}>Focusable content</div>
  * </Focusable>
  * ```
  */

package/dist/Focusable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Focusable.d.ts","sourceRoot":"","sources":["../src/Focusable.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,KAAK,GAAG,EAKT,MAAM,UAAU,CAAC;AAClB,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAEzF,MAAM,WAAW,cAAe,SAAQ,oBAAoB;IAC1D,gDAAgD;IAChD,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,oBAAoB;IACpB,GAAG,CAAC,EAAE,WAAW,GAAG,CAAC,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC,CAAC;CACjD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAoE5D"}
+{"version":3,"file":"Focusable.d.ts","sourceRoot":"","sources":["../src/Focusable.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAGzF,MAAM,WAAW,cAAe,SAAQ,oBAAoB;IAC1D,gDAAgD;IAChD,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,oBAAoB;IACpB,GAAG,CAAC,EAAE,WAAW,GAAG,CAAC,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC,CAAC;CACjD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CA0E5D"}

package/dist/Focusable.js

@@ -1,12 +1,25 @@
-import { memo } from "solid-js/web";
-import { children, createEffect, onCleanup, splitProps } from "solid-js";
+/*
+* Copyright 2020 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/interactions/useFocusable.tsx
+import { memo } from "@solidjs/web";
+import { children, createTrackedEffect } from "solid-js";
 import { createFocusable } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 //#region src/Focusable.tsx
 /**
 * Focusable component for solidaria-components
 *
 * A render-prop component that wraps createFocusable to make an element
-* focusable and capable of auto focus. Port of React Aria's Focusable.
+* focusable and capable of auto focus.
 */
 /**
 * Makes its child element focusable and capable of auto focus.
@@ -15,7 +28,7 @@ import { createFocusable } from "@proyecto-viviana/solidaria";
 * @example
 * ```tsx
 * <Focusable onFocus={() => console.log('focused')}>
-*   <div tabIndex={0}>Focusable content</div>
+*   <div tabindex={0}>Focusable content</div>
 * </Focusable>
 * ```
 */
@@ -24,7 +37,8 @@ function Focusable(props) {
 	let ref;
 	const { focusableProps: domProps } = createFocusable(focusableProps, () => ref);
 	const resolved = children(() => local.children);
-	createEffect(() => {
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		const child = resolved();
 		if (child instanceof HTMLElement) {
 			ref = child;
@@ -57,10 +71,13 @@ function Focusable(props) {
 					else child.setAttribute(key, String(value));
 				}
 			}
-			onCleanup(() => {
+			_s2Cleanups.push(() => {
 				for (const [eventName, listener] of listeners) child.removeEventListener(eventName, listener);
 			});
 		}
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
 	return memo(resolved);
 }

package/dist/Focusable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Focusable.js","names":["JSX","children","resolveChildren","createEffect","onCleanup","splitProps","createFocusable","CreateFocusableProps","FocusableProps","Element","ref","HTMLElement","el","Focusable","props","local","focusableProps","domProps","resolved","child","listeners","Array","EventListener","addListener","eventName","handler","listener","addEventListener","push","onFocus","onBlur","onKeyDown","onKeyUp","key","value","Object","entries","startsWith","hasAttribute","removeAttribute","tabIndex","Number","setAttribute","String","removeEventListener","_$memo"],"sources":["../src/Focusable.tsx"],"sourcesContent":["/**\n * Focusable component for solidaria-components\n *\n * A render-prop component that wraps createFocusable to make an element\n * focusable and capable of auto focus. Port of React Aria's Focusable.\n */\n\nimport {\n  type JSX,\n  children as resolveChildren,\n  createEffect,\n  onCleanup,\n  splitProps,\n} from \"solid-js\";\nimport { createFocusable, type CreateFocusableProps } from \"@proyecto-viviana/solidaria\";\n\nexport interface FocusableProps extends CreateFocusableProps {\n  /** A single child element to make focusable. */\n  children: JSX.Element;\n  /** Ref callback. */\n  ref?: HTMLElement | ((el: HTMLElement) => void);\n}\n\n/**\n * Makes its child element focusable and capable of auto focus.\n * Applies focus and keyboard event handlers from createFocusable.\n *\n * @example\n * ```tsx\n * <Focusable onFocus={() => console.log('focused')}>\n *   <div tabIndex={0}>Focusable content</div>\n * </Focusable>\n * ```\n */\nexport function Focusable(props: FocusableProps): JSX.Element {\n  const [local, focusableProps] = splitProps(props, [\"children\", \"ref\"]);\n\n  let ref!: HTMLElement;\n  const { focusableProps: domProps } = createFocusable(focusableProps, () => ref);\n\n  const resolved = resolveChildren(() => local.children);\n\n  createEffect(() => {\n    const child = resolved() as HTMLElement;\n    if (child instanceof HTMLElement) {\n      ref = child;\n      if (typeof local.ref === \"function\") {\n        local.ref(child);\n      }\n\n      // Apply focusable props to the child element\n      const props = domProps;\n      const listeners: Array<[string, EventListener]> = [];\n      const addListener = (eventName: string, handler: unknown) => {\n        if (typeof handler === \"function\") {\n          const listener = handler as EventListener;\n          child.addEventListener(eventName, listener);\n          listeners.push([eventName, listener]);\n        }\n      };\n\n      addListener(\"focus\", props.onFocus);\n      addListener(\"blur\", props.onBlur);\n      addListener(\"keydown\", props.onKeyDown);\n      addListener(\"keyup\", props.onKeyUp);\n\n      // Apply non-event focusable props (e.g. tabIndex/aria/data attrs).\n      // Keep explicit child tabIndex to mirror mergeProps(child.props precedence).\n      for (const [key, value] of Object.entries(props)) {\n        if (key === \"ref\" || (key.startsWith(\"on\") && typeof value === \"function\")) continue;\n\n        if (key === \"tabIndex\") {\n          if (child.hasAttribute(\"tabindex\")) continue;\n          if (value == null || value === false) {\n            child.removeAttribute(\"tabindex\");\n          } else {\n            child.tabIndex = Number(value);\n          }\n          continue;\n        }\n\n        if (key.startsWith(\"aria-\") || key.startsWith(\"data-\") || key === \"id\" || key === \"role\") {\n          if (child.hasAttribute(key)) continue;\n          if (value == null || value === false) {\n            child.removeAttribute(key);\n          } else if (value === true) {\n            child.setAttribute(key, \"\");\n          } else {\n            child.setAttribute(key, String(value));\n          }\n        }\n      }\n\n      onCleanup(() => {\n        for (const [eventName, listener] of listeners) {\n          child.removeEventListener(eventName, listener);\n        }\n      });\n    }\n  });\n\n  return <>{resolved()}</>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkCA,SAAgBa,UAAUC,OAAoC;CAC5D,MAAM,CAACC,OAAOC,kBAAkBX,WAAWS,OAAO,CAAC,YAAY,KAAK,CAAC;CAErE,IAAIJ;CACJ,MAAM,EAAEM,gBAAgBC,aAAaX,gBAAgBU,sBAAsBN,GAAG;CAE9E,MAAMQ,WAAWhB,eAAsBa,MAAMd,QAAQ;CAErDE,mBAAmB;EACjB,MAAMgB,QAAQD,SAAS;EACvB,IAAIC,iBAAiBR,aAAa;GAChCD,MAAMS;GACN,IAAI,OAAOJ,MAAML,QAAQ,YACvBK,MAAML,IAAIS,KAAK;GAIjB,MAAML,QAAQG;GACd,MAAMG,YAA4C,CAAA;GAClD,MAAMG,eAAeC,WAAmBC,YAAqB;IAC3D,IAAI,OAAOA,YAAY,YAAY;KACjC,MAAMC,WAAWD;KACjBN,MAAMQ,iBAAiBH,WAAWE,QAAQ;KAC1CN,UAAUQ,KAAK,CAACJ,WAAWE,QAAQ,CAAC;IACtC;GACF;GAEAH,YAAY,SAAST,MAAMe,OAAO;GAClCN,YAAY,QAAQT,MAAMgB,MAAM;GAChCP,YAAY,WAAWT,MAAMiB,SAAS;GACtCR,YAAY,SAAST,MAAMkB,OAAO;GAIlC,KAAK,MAAM,CAACC,KAAKC,UAAUC,OAAOC,QAAQtB,KAAK,GAAG;IAChD,IAAImB,QAAQ,SAAUA,IAAII,WAAW,IAAI,KAAK,OAAOH,UAAU,YAAa;IAE5E,IAAID,QAAQ,YAAY;KACtB,IAAId,MAAMmB,aAAa,UAAU,GAAG;KACpC,IAAIJ,SAAS,QAAQA,UAAU,OAC7Bf,MAAMoB,gBAAgB,UAAU;UAEhCpB,MAAMqB,WAAWC,OAAOP,KAAK;KAE/B;IACF;IAEA,IAAID,IAAII,WAAW,OAAO,KAAKJ,IAAII,WAAW,OAAO,KAAKJ,QAAQ,QAAQA,QAAQ,QAAQ;KACxF,IAAId,MAAMmB,aAAaL,GAAG,GAAG;KAC7B,IAAIC,SAAS,QAAQA,UAAU,OAC7Bf,MAAMoB,gBAAgBN,GAAG;UACpB,IAAIC,UAAU,MACnBf,MAAMuB,aAAaT,KAAK,EAAE;UAE1Bd,MAAMuB,aAAaT,KAAKU,OAAOT,KAAK,CAAC;IAEzC;GACF;GAEA9B,gBAAgB;IACd,KAAK,MAAM,CAACoB,WAAWE,aAAaN,WAClCD,MAAMyB,oBAAoBpB,WAAWE,QAAQ;GAEjD,CAAC;EACH;CACF,CAAC;CAED,OAAAmB,KAAU3B,QAAQ;AACpB"}
+{"version":3,"file":"Focusable.js","names":["{resolved()}"],"sources":["../src/Focusable.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/interactions/useFocusable.tsx\n\n/**\n * Focusable component for solidaria-components\n *\n * A render-prop component that wraps createFocusable to make an element\n * focusable and capable of auto focus.\n */\n\nimport {\n  children as resolveChildren,\n  createEffect,\n  onCleanup,\n  createTrackedEffect,\n} from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { createFocusable, type CreateFocusableProps } from \"@proyecto-viviana/solidaria\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\nexport interface FocusableProps extends CreateFocusableProps {\n  /** A single child element to make focusable. */\n  children: JSX.Element;\n  /** Ref callback. */\n  ref?: HTMLElement | ((el: HTMLElement) => void);\n}\n\n/**\n * Makes its child element focusable and capable of auto focus.\n * Applies focus and keyboard event handlers from createFocusable.\n *\n * @example\n * ```tsx\n * <Focusable onFocus={() => console.log('focused')}>\n *   <div tabindex={0}>Focusable content</div>\n * </Focusable>\n * ```\n */\nexport function Focusable(props: FocusableProps): JSX.Element {\n  const [local, focusableProps] = splitProps(props, [\"children\", \"ref\"]);\n\n  let ref!: HTMLElement;\n  const { focusableProps: domProps } = createFocusable(focusableProps, () => ref);\n\n  const resolved = resolveChildren(() => local.children);\n\n  createTrackedEffect(() => {\n    const _s2Cleanups: Array<() => void> = [];\n\n    const child = resolved() as HTMLElement;\n    if (child instanceof HTMLElement) {\n      ref = child;\n      if (typeof local.ref === \"function\") {\n        local.ref(child);\n      }\n\n      // Apply focusable props to the child element\n      const props = domProps;\n      const listeners: Array<[string, EventListener]> = [];\n      const addListener = (eventName: string, handler: unknown) => {\n        if (typeof handler === \"function\") {\n          const listener = handler as EventListener;\n          child.addEventListener(eventName, listener);\n          listeners.push([eventName, listener]);\n        }\n      };\n\n      addListener(\"focus\", props.onFocus);\n      addListener(\"blur\", props.onBlur);\n      addListener(\"keydown\", props.onKeyDown);\n      addListener(\"keyup\", props.onKeyUp);\n\n      // Apply non-event focusable props (e.g. tabIndex/aria/data attrs).\n      // Keep explicit child tabIndex to mirror mergeProps(child.props precedence).\n      for (const [key, value] of Object.entries(props)) {\n        if (key === \"ref\" || (key.startsWith(\"on\") && typeof value === \"function\")) continue;\n\n        if (key === \"tabIndex\") {\n          if (child.hasAttribute(\"tabindex\")) continue;\n          if (value == null || value === false) {\n            child.removeAttribute(\"tabindex\");\n          } else {\n            child.tabIndex = Number(value);\n          }\n          continue;\n        }\n\n        if (key.startsWith(\"aria-\") || key.startsWith(\"data-\") || key === \"id\" || key === \"role\") {\n          if (child.hasAttribute(key)) continue;\n          if (value == null || value === false) {\n            child.removeAttribute(key);\n          } else if (value === true) {\n            child.setAttribute(key, \"\");\n          } else {\n            child.setAttribute(key, String(value));\n          }\n        }\n      }\n\n      _s2Cleanups.push(() => {\n        for (const [eventName, listener] of listeners) {\n          child.removeEventListener(eventName, listener);\n        }\n      });\n    }\n\n    return () => {\n      for (const c of _s2Cleanups) c();\n    };\n  });\n\n  return <>{resolved()}</>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,SAAgB,UAAU,OAAoC;CAC5D,MAAM,CAAC,OAAO,kBAAkB,WAAW,OAAO,CAAC,YAAY,KAAK,CAAC;CAErE,IAAI;CACJ,MAAM,EAAE,gBAAgB,aAAa,gBAAgB,sBAAsB,GAAG;CAE9E,MAAM,WAAW,eAAsB,MAAM,QAAQ;CAErD,0BAA0B;EACxB,MAAM,cAAiC,CAAC;EAExC,MAAM,QAAQ,SAAS;EACvB,IAAI,iBAAiB,aAAa;GAChC,MAAM;GACN,IAAI,OAAO,MAAM,QAAQ,YACvB,MAAM,IAAI,KAAK;GAIjB,MAAM,QAAQ;GACd,MAAM,YAA4C,CAAC;GACnD,MAAM,eAAe,WAAmB,YAAqB;IAC3D,IAAI,OAAO,YAAY,YAAY;KACjC,MAAM,WAAW;KACjB,MAAM,iBAAiB,WAAW,QAAQ;KAC1C,UAAU,KAAK,CAAC,WAAW,QAAQ,CAAC;IACtC;GACF;GAEA,YAAY,SAAS,MAAM,OAAO;GAClC,YAAY,QAAQ,MAAM,MAAM;GAChC,YAAY,WAAW,MAAM,SAAS;GACtC,YAAY,SAAS,MAAM,OAAO;GAIlC,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,KAAK,GAAG;IAChD,IAAI,QAAQ,SAAU,IAAI,WAAW,IAAI,KAAK,OAAO,UAAU,YAAa;IAE5E,IAAI,QAAQ,YAAY;KACtB,IAAI,MAAM,aAAa,UAAU,GAAG;KACpC,IAAI,SAAS,QAAQ,UAAU,OAC7B,MAAM,gBAAgB,UAAU;UAEhC,MAAM,WAAW,OAAO,KAAK;KAE/B;IACF;IAEA,IAAI,IAAI,WAAW,OAAO,KAAK,IAAI,WAAW,OAAO,KAAK,QAAQ,QAAQ,QAAQ,QAAQ;KACxF,IAAI,MAAM,aAAa,GAAG,GAAG;KAC7B,IAAI,SAAS,QAAQ,UAAU,OAC7B,MAAM,gBAAgB,GAAG;UACpB,IAAI,UAAU,MACnB,MAAM,aAAa,KAAK,EAAE;UAE1B,MAAM,aAAa,KAAK,OAAO,KAAK,CAAC;IAEzC;GACF;GAEA,YAAY,WAAW;IACrB,KAAK,MAAM,CAAC,WAAW,aAAa,WAClC,MAAM,oBAAoB,WAAW,QAAQ;GAEjD,CAAC;EACH;EAEA,aAAa;GACX,KAAK,MAAM,KAAK,aAAa,EAAE;EACjC;CACF,CAAC;CAED,OAASA,KAAC,QAAU;AACtB"}

package/dist/Focusable.jsx

@@ -1,11 +1,24 @@
-import { children, createEffect, onCleanup, splitProps } from "solid-js";
+/*
+* Copyright 2020 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/interactions/useFocusable.tsx
+import { children, createTrackedEffect } from "solid-js";
 import { createFocusable } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 //#region src/Focusable.tsx
 /**
 * Focusable component for solidaria-components
 *
 * A render-prop component that wraps createFocusable to make an element
-* focusable and capable of auto focus. Port of React Aria's Focusable.
+* focusable and capable of auto focus.
 */
 /**
 * Makes its child element focusable and capable of auto focus.
@@ -14,7 +27,7 @@ import { createFocusable } from "@proyecto-viviana/solidaria";
 * @example
 * ```tsx
 * <Focusable onFocus={() => console.log('focused')}>
-*   <div tabIndex={0}>Focusable content</div>
+*   <div tabindex={0}>Focusable content</div>
 * </Focusable>
 * ```
 */
@@ -23,7 +36,8 @@ function Focusable(props) {
 	let ref;
 	const { focusableProps: domProps } = createFocusable(focusableProps, () => ref);
 	const resolved = children(() => local.children);
-	createEffect(() => {
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		const child = resolved();
 		if (child instanceof HTMLElement) {
 			ref = child;
@@ -56,10 +70,13 @@ function Focusable(props) {
 					else child.setAttribute(key, String(value));
 				}
 			}
-			onCleanup(() => {
+			_s2Cleanups.push(() => {
 				for (const [eventName, listener] of listeners) child.removeEventListener(eventName, listener);
 			});
 		}
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
 	return <>{resolved()}</>;
 }

package/dist/Focusable.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Focusable.jsx","names":["resolveChildren"],"sources":["../src/Focusable.tsx"],"sourcesContent":["/**\n * Focusable component for solidaria-components\n *\n * A render-prop component that wraps createFocusable to make an element\n * focusable and capable of auto focus. Port of React Aria's Focusable.\n */\n\nimport {\n  type JSX,\n  children as resolveChildren,\n  createEffect,\n  onCleanup,\n  splitProps,\n} from \"solid-js\";\nimport { createFocusable, type CreateFocusableProps } from \"@proyecto-viviana/solidaria\";\n\nexport interface FocusableProps extends CreateFocusableProps {\n  /** A single child element to make focusable. */\n  children: JSX.Element;\n  /** Ref callback. */\n  ref?: HTMLElement | ((el: HTMLElement) => void);\n}\n\n/**\n * Makes its child element focusable and capable of auto focus.\n * Applies focus and keyboard event handlers from createFocusable.\n *\n * @example\n * ```tsx\n * <Focusable onFocus={() => console.log('focused')}>\n *   <div tabIndex={0}>Focusable content</div>\n * </Focusable>\n * ```\n */\nexport function Focusable(props: FocusableProps): JSX.Element {\n  const [local, focusableProps] = splitProps(props, [\"children\", \"ref\"]);\n\n  let ref!: HTMLElement;\n  const { focusableProps: domProps } = createFocusable(focusableProps, () => ref);\n\n  const resolved = resolveChildren(() => local.children);\n\n  createEffect(() => {\n    const child = resolved() as HTMLElement;\n    if (child instanceof HTMLElement) {\n      ref = child;\n      if (typeof local.ref === \"function\") {\n        local.ref(child);\n      }\n\n      // Apply focusable props to the child element\n      const props = domProps;\n      const listeners: Array<[string, EventListener]> = [];\n      const addListener = (eventName: string, handler: unknown) => {\n        if (typeof handler === \"function\") {\n          const listener = handler as EventListener;\n          child.addEventListener(eventName, listener);\n          listeners.push([eventName, listener]);\n        }\n      };\n\n      addListener(\"focus\", props.onFocus);\n      addListener(\"blur\", props.onBlur);\n      addListener(\"keydown\", props.onKeyDown);\n      addListener(\"keyup\", props.onKeyUp);\n\n      // Apply non-event focusable props (e.g. tabIndex/aria/data attrs).\n      // Keep explicit child tabIndex to mirror mergeProps(child.props precedence).\n      for (const [key, value] of Object.entries(props)) {\n        if (key === \"ref\" || (key.startsWith(\"on\") && typeof value === \"function\")) continue;\n\n        if (key === \"tabIndex\") {\n          if (child.hasAttribute(\"tabindex\")) continue;\n          if (value == null || value === false) {\n            child.removeAttribute(\"tabindex\");\n          } else {\n            child.tabIndex = Number(value);\n          }\n          continue;\n        }\n\n        if (key.startsWith(\"aria-\") || key.startsWith(\"data-\") || key === \"id\" || key === \"role\") {\n          if (child.hasAttribute(key)) continue;\n          if (value == null || value === false) {\n            child.removeAttribute(key);\n          } else if (value === true) {\n            child.setAttribute(key, \"\");\n          } else {\n            child.setAttribute(key, String(value));\n          }\n        }\n      }\n\n      onCleanup(() => {\n        for (const [eventName, listener] of listeners) {\n          child.removeEventListener(eventName, listener);\n        }\n      });\n    }\n  });\n\n  return <>{resolved()}</>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkCA,SAAgB,UAAU,OAAoC;CAC5D,MAAM,CAAC,OAAO,kBAAkB,WAAW,OAAO,CAAC,YAAY,KAAK,CAAC;CAErE,IAAI;CACJ,MAAM,EAAE,gBAAgB,aAAa,gBAAgB,sBAAsB,GAAG;CAE9E,MAAM,WAAWA,eAAsB,MAAM,QAAQ;CAErD,mBAAmB;EACjB,MAAM,QAAQ,SAAS;EACvB,IAAI,iBAAiB,aAAa;GAChC,MAAM;GACN,IAAI,OAAO,MAAM,QAAQ,YACvB,MAAM,IAAI,KAAK;GAIjB,MAAM,QAAQ;GACd,MAAM,YAA4C,CAAC;GACnD,MAAM,eAAe,WAAmB,YAAqB;IAC3D,IAAI,OAAO,YAAY,YAAY;KACjC,MAAM,WAAW;KACjB,MAAM,iBAAiB,WAAW,QAAQ;KAC1C,UAAU,KAAK,CAAC,WAAW,QAAQ,CAAC;IACtC;GACF;GAEA,YAAY,SAAS,MAAM,OAAO;GAClC,YAAY,QAAQ,MAAM,MAAM;GAChC,YAAY,WAAW,MAAM,SAAS;GACtC,YAAY,SAAS,MAAM,OAAO;GAIlC,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,KAAK,GAAG;IAChD,IAAI,QAAQ,SAAU,IAAI,WAAW,IAAI,KAAK,OAAO,UAAU,YAAa;IAE5E,IAAI,QAAQ,YAAY;KACtB,IAAI,MAAM,aAAa,UAAU,GAAG;KACpC,IAAI,SAAS,QAAQ,UAAU,OAC7B,MAAM,gBAAgB,UAAU;UAEhC,MAAM,WAAW,OAAO,KAAK;KAE/B;IACF;IAEA,IAAI,IAAI,WAAW,OAAO,KAAK,IAAI,WAAW,OAAO,KAAK,QAAQ,QAAQ,QAAQ,QAAQ;KACxF,IAAI,MAAM,aAAa,GAAG,GAAG;KAC7B,IAAI,SAAS,QAAQ,UAAU,OAC7B,MAAM,gBAAgB,GAAG;UACpB,IAAI,UAAU,MACnB,MAAM,aAAa,KAAK,EAAE;UAE1B,MAAM,aAAa,KAAK,OAAO,KAAK,CAAC;IAEzC;GACF;GAEA,gBAAgB;IACd,KAAK,MAAM,CAAC,WAAW,aAAa,WAClC,MAAM,oBAAoB,WAAW,QAAQ;GAEjD,CAAC;EACH;CACF,CAAC;CAED,OAAO,GAAG,SAAS,EAAE;AACvB"}
+{"version":3,"file":"Focusable.jsx","names":["resolveChildren"],"sources":["../src/Focusable.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/interactions/useFocusable.tsx\n\n/**\n * Focusable component for solidaria-components\n *\n * A render-prop component that wraps createFocusable to make an element\n * focusable and capable of auto focus.\n */\n\nimport {\n  children as resolveChildren,\n  createEffect,\n  onCleanup,\n  createTrackedEffect,\n} from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { createFocusable, type CreateFocusableProps } from \"@proyecto-viviana/solidaria\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\nexport interface FocusableProps extends CreateFocusableProps {\n  /** A single child element to make focusable. */\n  children: JSX.Element;\n  /** Ref callback. */\n  ref?: HTMLElement | ((el: HTMLElement) => void);\n}\n\n/**\n * Makes its child element focusable and capable of auto focus.\n * Applies focus and keyboard event handlers from createFocusable.\n *\n * @example\n * ```tsx\n * <Focusable onFocus={() => console.log('focused')}>\n *   <div tabindex={0}>Focusable content</div>\n * </Focusable>\n * ```\n */\nexport function Focusable(props: FocusableProps): JSX.Element {\n  const [local, focusableProps] = splitProps(props, [\"children\", \"ref\"]);\n\n  let ref!: HTMLElement;\n  const { focusableProps: domProps } = createFocusable(focusableProps, () => ref);\n\n  const resolved = resolveChildren(() => local.children);\n\n  createTrackedEffect(() => {\n    const _s2Cleanups: Array<() => void> = [];\n\n    const child = resolved() as HTMLElement;\n    if (child instanceof HTMLElement) {\n      ref = child;\n      if (typeof local.ref === \"function\") {\n        local.ref(child);\n      }\n\n      // Apply focusable props to the child element\n      const props = domProps;\n      const listeners: Array<[string, EventListener]> = [];\n      const addListener = (eventName: string, handler: unknown) => {\n        if (typeof handler === \"function\") {\n          const listener = handler as EventListener;\n          child.addEventListener(eventName, listener);\n          listeners.push([eventName, listener]);\n        }\n      };\n\n      addListener(\"focus\", props.onFocus);\n      addListener(\"blur\", props.onBlur);\n      addListener(\"keydown\", props.onKeyDown);\n      addListener(\"keyup\", props.onKeyUp);\n\n      // Apply non-event focusable props (e.g. tabIndex/aria/data attrs).\n      // Keep explicit child tabIndex to mirror mergeProps(child.props precedence).\n      for (const [key, value] of Object.entries(props)) {\n        if (key === \"ref\" || (key.startsWith(\"on\") && typeof value === \"function\")) continue;\n\n        if (key === \"tabIndex\") {\n          if (child.hasAttribute(\"tabindex\")) continue;\n          if (value == null || value === false) {\n            child.removeAttribute(\"tabindex\");\n          } else {\n            child.tabIndex = Number(value);\n          }\n          continue;\n        }\n\n        if (key.startsWith(\"aria-\") || key.startsWith(\"data-\") || key === \"id\" || key === \"role\") {\n          if (child.hasAttribute(key)) continue;\n          if (value == null || value === false) {\n            child.removeAttribute(key);\n          } else if (value === true) {\n            child.setAttribute(key, \"\");\n          } else {\n            child.setAttribute(key, String(value));\n          }\n        }\n      }\n\n      _s2Cleanups.push(() => {\n        for (const [eventName, listener] of listeners) {\n          child.removeEventListener(eventName, listener);\n        }\n      });\n    }\n\n    return () => {\n      for (const c of _s2Cleanups) c();\n    };\n  });\n\n  return <>{resolved()}</>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,SAAgB,UAAU,OAAoC;CAC5D,MAAM,CAAC,OAAO,kBAAkB,WAAW,OAAO,CAAC,YAAY,KAAK,CAAC;CAErE,IAAI;CACJ,MAAM,EAAE,gBAAgB,aAAa,gBAAgB,sBAAsB,GAAG;CAE9E,MAAM,WAAWA,eAAsB,MAAM,QAAQ;CAErD,0BAA0B;EACxB,MAAM,cAAiC,CAAC;EAExC,MAAM,QAAQ,SAAS;EACvB,IAAI,iBAAiB,aAAa;GAChC,MAAM;GACN,IAAI,OAAO,MAAM,QAAQ,YACvB,MAAM,IAAI,KAAK;GAIjB,MAAM,QAAQ;GACd,MAAM,YAA4C,CAAC;GACnD,MAAM,eAAe,WAAmB,YAAqB;IAC3D,IAAI,OAAO,YAAY,YAAY;KACjC,MAAM,WAAW;KACjB,MAAM,iBAAiB,WAAW,QAAQ;KAC1C,UAAU,KAAK,CAAC,WAAW,QAAQ,CAAC;IACtC;GACF;GAEA,YAAY,SAAS,MAAM,OAAO;GAClC,YAAY,QAAQ,MAAM,MAAM;GAChC,YAAY,WAAW,MAAM,SAAS;GACtC,YAAY,SAAS,MAAM,OAAO;GAIlC,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,KAAK,GAAG;IAChD,IAAI,QAAQ,SAAU,IAAI,WAAW,IAAI,KAAK,OAAO,UAAU,YAAa;IAE5E,IAAI,QAAQ,YAAY;KACtB,IAAI,MAAM,aAAa,UAAU,GAAG;KACpC,IAAI,SAAS,QAAQ,UAAU,OAC7B,MAAM,gBAAgB,UAAU;UAEhC,MAAM,WAAW,OAAO,KAAK;KAE/B;IACF;IAEA,IAAI,IAAI,WAAW,OAAO,KAAK,IAAI,WAAW,OAAO,KAAK,QAAQ,QAAQ,QAAQ,QAAQ;KACxF,IAAI,MAAM,aAAa,GAAG,GAAG;KAC7B,IAAI,SAAS,QAAQ,UAAU,OAC7B,MAAM,gBAAgB,GAAG;UACpB,IAAI,UAAU,MACnB,MAAM,aAAa,KAAK,EAAE;UAE1B,MAAM,aAAa,KAAK,OAAO,KAAK,CAAC;IAEzC;GACF;GAEA,YAAY,WAAW;IACrB,KAAK,MAAM,CAAC,WAAW,aAAa,WAClC,MAAM,oBAAoB,WAAW,QAAQ;GAEjD,CAAC;EACH;EAEA,aAAa;GACX,KAAK,MAAM,KAAK,aAAa,EAAE;EACjC;CACF,CAAC;CAED,OAAO,GAAG,SAAS,EAAE;AACvB"}

package/dist/Form.d.ts

@@ -1,10 +1,4 @@
-/**
- * Form primitive for solidaria-components.
- *
- * Provides form-level validation behavior and server validation context.
- * Port direction: react-aria-components/src/Form.tsx
- */
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { type ValidationErrors, type ValidationBehavior } from "@proyecto-viviana/solid-stately";
 import { type ClassNameOrFunction, type StyleOrFunction, type RenderChildren, type SlotProps } from "./utils";
 type RefLike<T> = ((el: T) => void) | {
@@ -21,7 +15,7 @@ export interface FormProps extends Omit<JSX.FormHTMLAttributes<HTMLFormElement>,
     /** Character encodings accepted by the server. React-style alias for Solid's `accept-charset`. */
     acceptCharset?: string;
     /** Browser auto-capitalization hint. React-style alias for Solid's `autocapitalize`. */
-    autoCapitalize?: JSX.HTMLAttributes<HTMLFormElement>["autoCapitalize"];
+    autoCapitalize?: JSX.HTMLAttributes<HTMLElement>["autocapitalize"];
     /** Browser autocomplete behavior. React-style alias for Solid's `autocomplete`. */
     autoComplete?: JSX.FormHTMLAttributes<HTMLFormElement>["autocomplete"];
     /** Form encoding type. React-style alias for Solid's `enctype`. */
@@ -36,6 +30,13 @@ export interface FormProps extends Omit<JSX.FormHTMLAttributes<HTMLFormElement>,
     ref?: RefLike<HTMLFormElement>;
 }
 export declare const FormContext: import("solid-js").Context<FormProps | null>;
+/**
+ * RAC `props.validationBehavior ?? formValidationBehavior ?? "native"`.
+ * Resolve after splitProps. Do not Proxy field props — Solid's server
+ * splitProps rejects a getOwnPropertyDescriptor trap that disagrees with the
+ * target (viviana-ui TextField always owns a `validationBehavior` getter).
+ */
+export declare function resolveValidationBehavior(local: ValidationBehavior | undefined, formContext: FormProps | null | undefined): ValidationBehavior;
 export declare function Form(props: FormProps): JSX.Element;
 export {};
 //# sourceMappingURL=Form.d.ts.map

package/dist/Form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../src/Form.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,KAAK,GAAG,EAA6B,MAAM,UAAU,CAAC;AAC/D,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACxB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,SAAS,EAGf,MAAM,SAAS,CAAC;AAEjB,KAAK,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;CAAE,GAAG,SAAS,CAAC;AAWzE,MAAM,WAAW,eAAe;IAC9B,kBAAkB,EAAE,kBAAkB,CAAC;CACxC;AAED,MAAM,WAAW,SACf,SACE,IAAI,CAAC,GAAG,CAAC,kBAAkB,CAAC,eAAe,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC,EACrF,SAAS;IACX,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,gCAAgC;IAChC,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,kGAAkG;IAClG,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,wFAAwF;IACxF,cAAc,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,CAAC;IACvE,mFAAmF;IACnF,YAAY,CAAC,EAAE,GAAG,CAAC,kBAAkB,CAAC,eAAe,CAAC,CAAC,cAAc,CAAC,CAAC;IACvE,mEAAmE;IACnE,OAAO,CAAC,EAAE,GAAG,CAAC,kBAAkB,CAAC,eAAe,CAAC,CAAC,SAAS,CAAC,CAAC;IAC7D,qCAAqC;IACrC,QAAQ,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IAC3C,yCAAyC;IACzC,KAAK,CAAC,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IAC7C,wCAAwC;IACxC,KAAK,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IACzC,2CAA2C;IAC3C,GAAG,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;CAChC;AAED,eAAO,MAAM,WAAW,8CAAwC,CAAC;AA+BjE,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CA6ClD"}
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../src/Form.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACxB,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,SAAS,EAGf,MAAM,SAAS,CAAC;AAEjB,KAAK,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;CAAE,GAAG,SAAS,CAAC;AAWzE,MAAM,WAAW,eAAe;IAC9B,kBAAkB,EAAE,kBAAkB,CAAC;CACxC;AAED,MAAM,WAAW,SACf,SACE,IAAI,CAAC,GAAG,CAAC,kBAAkB,CAAC,eAAe,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC,EACrF,SAAS;IACX,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,gCAAgC;IAChC,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,kGAAkG;IAClG,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,wFAAwF;IACxF,cAAc,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,gBAAgB,CAAC,CAAC;IACnE,mFAAmF;IACnF,YAAY,CAAC,EAAE,GAAG,CAAC,kBAAkB,CAAC,eAAe,CAAC,CAAC,cAAc,CAAC,CAAC;IACvE,mEAAmE;IACnE,OAAO,CAAC,EAAE,GAAG,CAAC,kBAAkB,CAAC,eAAe,CAAC,CAAC,SAAS,CAAC,CAAC;IAC7D,qCAAqC;IACrC,QAAQ,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IAC3C,yCAAyC;IACzC,KAAK,CAAC,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IAC7C,wCAAwC;IACxC,KAAK,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IACzC,2CAA2C;IAC3C,GAAG,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;CAChC;AAED,eAAO,MAAM,WAAW,8CAAwC,CAAC;AAEjE;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,kBAAkB,GAAG,SAAS,EACrC,WAAW,EAAE,SAAS,GAAG,IAAI,GAAG,SAAS,GACxC,kBAAkB,CAEpB;AA+BD,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CA8DlD"}

package/dist/Form.js

@@ -1,22 +1,44 @@
+/*
+* Copyright 2023 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the 'License');
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/Form.tsx
 import { filterDOMProps, useRenderProps } from "./utils.js";
-import { createComponent, getNextElement, insert, mergeProps, runHydrationEvents, spread, template, use } from "solid-js/web";
-import { createContext, splitProps } from "solid-js";
+import { claimElement, createComponent, getNextElement, insert, ref, runHydrationEvents, spread, template } from "@solidjs/web";
+import { createContext } from "solid-js";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { FormValidationContext } from "@proyecto-viviana/solid-stately";
 //#region src/Form.tsx
 /**
 * Form primitive for solidaria-components.
 *
 * Provides form-level validation behavior and server validation context.
-* Port direction: react-aria-components/src/Form.tsx
+* Based on packages/react-aria-components/src/Form.tsx.
 */
-var _tmpl$ = /*#__PURE__*/ template(`<form>`);
-function assignRef(ref, el) {
+var _tmpl$ = /* @__PURE__ */ template(`<form>`);
+function assignRef$1(ref, el) {
 	if (!ref) return;
 	if (typeof ref === "function") ref(el);
 	else ref.current = el;
 }
 const FormContext = createContext(null);
-const formDOMPropNames = new Set([
+/**
+* RAC `props.validationBehavior ?? formValidationBehavior ?? "native"`.
+* Resolve after splitProps. Do not Proxy field props — Solid's server
+* splitProps rejects a getOwnPropertyDescriptor trap that disagrees with the
+* target (viviana-ui TextField always owns a `validationBehavior` getter).
+*/
+function resolveValidationBehavior(local, formContext) {
+	return local ?? formContext?.validationBehavior ?? "native";
+}
+const formDOMPropNames = /* @__PURE__ */ new Set([
 	"accept-charset",
 	"acceptCharset",
 	"action",
@@ -47,7 +69,7 @@ function Form(props) {
 		"ref",
 		"slot"
 	]);
-	const validationBehavior = local.validationBehavior ?? "native";
+	const validationBehavior = () => local.validationBehavior ?? "native";
 	const errors = local.validationErrors ?? {};
 	const renderProps = useRenderProps({
 		get children() {
@@ -56,44 +78,45 @@ function Form(props) {
 		class: local.class,
 		style: local.style,
 		defaultClassName: "solidaria-Form"
-	}, () => ({ validationBehavior }));
+	}, () => ({ validationBehavior: validationBehavior() }));
 	const filteredDomProps = filterFormDOMProps(domProps);
-	return (() => {
-		var _el$ = getNextElement(_tmpl$);
-		use((el) => assignRef(local.ref, el), _el$);
-		spread(_el$, mergeProps(filteredDomProps, {
-			"noValidate": validationBehavior !== "native",
-			get ["class"]() {
-				return renderProps.class();
-			},
-			get style() {
-				return renderProps.style();
-			},
-			get slot() {
-				return local.slot;
-			}
-		}), false, true);
-		insert(_el$, createComponent(FormContext.Provider, {
-			get value() {
-				return {
-					...props,
-					validationBehavior
-				};
-			},
-			get children() {
-				return createComponent(FormValidationContext.Provider, {
-					value: errors,
-					get children() {
-						return renderProps.renderChildren();
-					}
-				});
-			}
-		}));
-		runHydrationEvents();
-		return _el$;
-	})();
+	const formContextValue = { get validationBehavior() {
+		return validationBehavior();
+	} };
+	var _el$ = getNextElement(_tmpl$);
+	ref(() => {
+		return (el) => assignRef$1(local.ref, el);
+	}, _el$);
+	claimElement(_el$);
+	spread(_el$, [filteredDomProps, {
+		get novalidate() {
+			return validationBehavior() !== "native";
+		},
+		get "class"() {
+			return renderProps.class();
+		},
+		get style() {
+			return renderProps.style();
+		},
+		get slot() {
+			return local.slot;
+		}
+	}], true);
+	insert(_el$, createComponent(FormContext, {
+		value: formContextValue,
+		get children() {
+			return createComponent(FormValidationContext, {
+				value: errors,
+				get children() {
+					return renderProps.renderChildren();
+				}
+			});
+		}
+	}));
+	runHydrationEvents();
+	return _el$;
 }
 //#endregion
-export { Form, FormContext };
+export { Form, FormContext, resolveValidationBehavior };
 
 //# sourceMappingURL=Form.js.map

package/dist/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","names":["JSX","createContext","splitProps","FormValidationContext","ValidationErrors","ValidationBehavior","ClassNameOrFunction","StyleOrFunction","RenderChildren","SlotProps","useRenderProps","filterDOMProps","RefLike","el","T","current","assignRef","ref","FormRenderProps","validationBehavior","FormProps","Omit","FormHTMLAttributes","HTMLFormElement","validationErrors","acceptCharset","autoCapitalize","HTMLAttributes","autoComplete","encType","children","class","style","FormContext","formDOMPropNames","Set","filterFormDOMProps","props","Record","filtered","global","key","Object","prototype","hasOwnProperty","call","has","Form","Element","local","domProps","errors","renderProps","defaultClassName","filteredDomProps","_el$","_$getNextElement","_tmpl$","_$use","_$spread","_$mergeProps","slot","_$insert","_$createComponent","Provider","value","renderChildren","_$runHydrationEvents"],"sources":["../src/Form.tsx"],"sourcesContent":["/**\n * Form primitive for solidaria-components.\n *\n * Provides form-level validation behavior and server validation context.\n * Port direction: react-aria-components/src/Form.tsx\n */\n\nimport { type JSX, createContext, splitProps } from \"solid-js\";\nimport {\n  FormValidationContext,\n  type ValidationErrors,\n  type ValidationBehavior,\n} from \"@proyecto-viviana/solid-stately\";\nimport {\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type RenderChildren,\n  type SlotProps,\n  useRenderProps,\n  filterDOMProps,\n} from \"./utils\";\n\ntype RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;\n\nfunction assignRef<T>(ref: RefLike<T>, el: T): void {\n  if (!ref) return;\n  if (typeof ref === \"function\") {\n    ref(el);\n  } else {\n    ref.current = el;\n  }\n}\n\nexport interface FormRenderProps {\n  validationBehavior: ValidationBehavior;\n}\n\nexport interface FormProps\n  extends\n    Omit<JSX.FormHTMLAttributes<HTMLFormElement>, \"children\" | \"class\" | \"style\" | \"ref\">,\n    SlotProps {\n  /** Server-side validation errors keyed by field name. */\n  validationErrors?: ValidationErrors;\n  /** Validation behavior mode. */\n  validationBehavior?: ValidationBehavior;\n  /** Character encodings accepted by the server. React-style alias for Solid's `accept-charset`. */\n  acceptCharset?: string;\n  /** Browser auto-capitalization hint. React-style alias for Solid's `autocapitalize`. */\n  autoCapitalize?: JSX.HTMLAttributes<HTMLFormElement>[\"autoCapitalize\"];\n  /** Browser autocomplete behavior. React-style alias for Solid's `autocomplete`. */\n  autoComplete?: JSX.FormHTMLAttributes<HTMLFormElement>[\"autocomplete\"];\n  /** Form encoding type. React-style alias for Solid's `enctype`. */\n  encType?: JSX.FormHTMLAttributes<HTMLFormElement>[\"enctype\"];\n  /** The children of the component. */\n  children?: RenderChildren<FormRenderProps>;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<FormRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<FormRenderProps>;\n  /** Ref for the underlying form element. */\n  ref?: RefLike<HTMLFormElement>;\n}\n\nexport const FormContext = createContext<FormProps | null>(null);\n\nconst formDOMPropNames = new Set([\n  \"accept-charset\",\n  \"acceptCharset\",\n  \"action\",\n  \"autocapitalize\",\n  \"autoCapitalize\",\n  \"autocomplete\",\n  \"autoComplete\",\n  \"encoding\",\n  \"enctype\",\n  \"encType\",\n  \"method\",\n  \"name\",\n  \"rel\",\n  \"target\",\n]);\n\nfunction filterFormDOMProps(props: object): Record<string, unknown> {\n  const filtered = filterDOMProps<Record<string, unknown>>(props, { global: true });\n\n  for (const key in props) {\n    if (Object.prototype.hasOwnProperty.call(props, key) && formDOMPropNames.has(key)) {\n      filtered[key] = (props as Record<string, unknown>)[key];\n    }\n  }\n\n  return filtered;\n}\n\nexport function Form(props: FormProps): JSX.Element {\n  const [local, domProps] = splitProps(props, [\n    \"validationErrors\",\n    \"validationBehavior\",\n    \"children\",\n    \"class\",\n    \"style\",\n    \"ref\",\n    \"slot\",\n  ]);\n\n  const validationBehavior: ValidationBehavior = local.validationBehavior ?? \"native\";\n  const errors = local.validationErrors ?? {};\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return local.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-Form\",\n    },\n    () => ({\n      validationBehavior,\n    }),\n  );\n\n  const filteredDomProps = filterFormDOMProps(domProps);\n\n  return (\n    <form\n      {...filteredDomProps}\n      ref={(el) => assignRef(local.ref, el)}\n      noValidate={validationBehavior !== \"native\"}\n      class={renderProps.class()}\n      style={renderProps.style()}\n      slot={local.slot}\n    >\n      <FormContext.Provider value={{ ...props, validationBehavior }}>\n        <FormValidationContext.Provider value={errors}>\n          {renderProps.renderChildren()}\n        </FormValidationContext.Provider>\n      </FormContext.Provider>\n    </form>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAwBA,SAASgB,UAAaC,KAAiBJ,IAAa;CAClD,IAAI,CAACI,KAAK;CACV,IAAI,OAAOA,QAAQ,YACjBA,IAAIJ,EAAE;MAENI,IAAIF,UAAUF;AAElB;AAgCA,MAAaoB,cAAchC,cAAgC,IAAI;AAE/D,MAAMiC,mBAAmB,IAAIC,IAAI;CAC/B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AAAQ,CACT;AAED,SAASC,mBAAmBC,OAAwC;CAClE,MAAME,WAAW5B,eAAwC0B,OAAO,EAAEG,QAAQ,KAAK,CAAC;CAEhF,KAAK,MAAMC,OAAOJ,OAChB,IAAIK,OAAOC,UAAUC,eAAeC,KAAKR,OAAOI,GAAG,KAAKP,iBAAiBY,IAAIL,GAAG,GAC9EF,SAASE,OAAQJ,MAAkCI;CAIvD,OAAOF;AACT;AAEA,SAAgBQ,KAAKV,OAA+B;CAClD,MAAM,CAACY,OAAOC,YAAYhD,WAAWmC,OAAO;EAC1C;EACA;EACA;EACA;EACA;EACA;EACA;CAAM,CACP;CAED,MAAMlB,qBAAyC8B,MAAM9B,sBAAsB;CAC3E,MAAMgC,SAASF,MAAMzB,oBAAoB,CAAC;CAC1C,MAAM4B,cAAc1C,eAClB;EACE,IAAIoB,WAAW;GACb,OAAOmB,MAAMnB;EACf;EACAC,OAAOkB,MAAMlB;EACbC,OAAOiB,MAAMjB;EACbqB,kBAAkB;CACpB,UACO,EACLlC,mBACF,EACF;CAEA,MAAMmC,mBAAmBlB,mBAAmBc,QAAQ;CAEpD,cAAA;EAAA,IAAAK,OAAAC,eAAAC,MAAA;EAAAC,KAGU7C,OAAOG,UAAUiC,MAAMhC,KAAKJ,EAAE,GAAC0C,IAAA;EAAAI,OAAAJ,MAAAK,WADjCN,kBAAgB;GAAA,cAERnC,uBAAuB;GAAQ,KAAA,WAAA;IAAA,OACpCiC,YAAYrB,MAAM;GAAC;GAAA,IAC1BC,QAAK;IAAA,OAAEoB,YAAYpB,MAAM;GAAC;GAAA,IAC1B6B,OAAI;IAAA,OAAEZ,MAAMY;GAAI;EAAA,CAAA,GAAA,OAAA,IAAA;EAAAC,OAAAP,MAAAQ,gBAEf9B,YAAY+B,UAAQ;GAAA,IAACC,QAAK;IAAA,OAAE;KAAE,GAAG5B;KAAOlB;IAAmB;GAAC;GAAA,IAAAW,WAAA;IAAA,OAAAiC,gBAC1D5D,sBAAsB6D,UAAQ;KAACC,OAAOd;KAAM,IAAArB,WAAA;MAAA,OAC1CsB,YAAYc,eAAe;KAAC;IAAA,CAAA;GAAA;EAAA,CAAA,CAAA;EAAAC,mBAAA;EAAA,OAAAZ;CAAA,EAAA,CAAA;AAKvC"}
+{"version":3,"file":"Form.js","names":["ref={(el) => assignRef(local.ref, el)}","<FormContext value={formContextValue}>\n        <FormValidationContext value={errors}>{renderProps.renderChildren()}</FormValidationContext>\n      </FormContext>","value={formContextValue}","<FormValidationContext value={errors}>{renderProps.renderChildren()}</FormValidationContext>","value={errors}","<form\n      {...filteredDomProps}\n      ref={(el) => assignRef(local.ref, el)}\n      novalidate={validationBehavior() !== \"native\"}\n      class={renderProps.class()}\n      style={renderProps.style()}\n      slot={local.slot}\n    >\n      <FormContext value={formContextValue}>\n        <FormValidationContext value={errors}>{renderProps.renderChildren()}</FormValidationContext>\n      </FormContext>\n    </form>"],"sources":["../src/Form.tsx"],"sourcesContent":["/*\n * Copyright 2023 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the 'License');\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/Form.tsx\n\n/**\n * Form primitive for solidaria-components.\n *\n * Provides form-level validation behavior and server validation context.\n * Based on packages/react-aria-components/src/Form.tsx.\n */\n\nimport { createContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  FormValidationContext,\n  type ValidationErrors,\n  type ValidationBehavior,\n} from \"@proyecto-viviana/solid-stately\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type RenderChildren,\n  type SlotProps,\n  useRenderProps,\n  filterDOMProps,\n} from \"./utils\";\n\ntype RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;\n\nfunction assignRef<T>(ref: RefLike<T>, el: T): void {\n  if (!ref) return;\n  if (typeof ref === \"function\") {\n    ref(el);\n  } else {\n    ref.current = el;\n  }\n}\n\nexport interface FormRenderProps {\n  validationBehavior: ValidationBehavior;\n}\n\nexport interface FormProps\n  extends\n    Omit<JSX.FormHTMLAttributes<HTMLFormElement>, \"children\" | \"class\" | \"style\" | \"ref\">,\n    SlotProps {\n  /** Server-side validation errors keyed by field name. */\n  validationErrors?: ValidationErrors;\n  /** Validation behavior mode. */\n  validationBehavior?: ValidationBehavior;\n  /** Character encodings accepted by the server. React-style alias for Solid's `accept-charset`. */\n  acceptCharset?: string;\n  /** Browser auto-capitalization hint. React-style alias for Solid's `autocapitalize`. */\n  autoCapitalize?: JSX.HTMLAttributes<HTMLElement>[\"autocapitalize\"];\n  /** Browser autocomplete behavior. React-style alias for Solid's `autocomplete`. */\n  autoComplete?: JSX.FormHTMLAttributes<HTMLFormElement>[\"autocomplete\"];\n  /** Form encoding type. React-style alias for Solid's `enctype`. */\n  encType?: JSX.FormHTMLAttributes<HTMLFormElement>[\"enctype\"];\n  /** The children of the component. */\n  children?: RenderChildren<FormRenderProps>;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<FormRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<FormRenderProps>;\n  /** Ref for the underlying form element. */\n  ref?: RefLike<HTMLFormElement>;\n}\n\nexport const FormContext = createContext<FormProps | null>(null);\n\n/**\n * RAC `props.validationBehavior ?? formValidationBehavior ?? \"native\"`.\n * Resolve after splitProps. Do not Proxy field props — Solid's server\n * splitProps rejects a getOwnPropertyDescriptor trap that disagrees with the\n * target (viviana-ui TextField always owns a `validationBehavior` getter).\n */\nexport function resolveValidationBehavior(\n  local: ValidationBehavior | undefined,\n  formContext: FormProps | null | undefined,\n): ValidationBehavior {\n  return local ?? formContext?.validationBehavior ?? \"native\";\n}\n\nconst formDOMPropNames = new Set([\n  \"accept-charset\",\n  \"acceptCharset\",\n  \"action\",\n  \"autocapitalize\",\n  \"autoCapitalize\",\n  \"autocomplete\",\n  \"autoComplete\",\n  \"encoding\",\n  \"enctype\",\n  \"encType\",\n  \"method\",\n  \"name\",\n  \"rel\",\n  \"target\",\n]);\n\nfunction filterFormDOMProps(props: object): Record<string, unknown> {\n  const filtered = filterDOMProps<Record<string, unknown>>(props, { global: true });\n\n  for (const key in props) {\n    if (Object.prototype.hasOwnProperty.call(props, key) && formDOMPropNames.has(key)) {\n      filtered[key] = (props as Record<string, unknown>)[key];\n    }\n  }\n\n  return filtered;\n}\n\nexport function Form(props: FormProps): JSX.Element {\n  const [local, domProps] = splitProps(props, [\n    \"validationErrors\",\n    \"validationBehavior\",\n    \"children\",\n    \"class\",\n    \"style\",\n    \"ref\",\n    \"slot\",\n  ]);\n\n  const validationBehavior = () => local.validationBehavior ?? \"native\";\n  const errors = local.validationErrors ?? {};\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return local.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-Form\",\n    },\n    () => ({\n      validationBehavior: validationBehavior(),\n    }),\n  );\n\n  const filteredDomProps = filterFormDOMProps(domProps);\n\n  // FormContext is only consumed for `validationBehavior` (TextField, Checkbox,\n  // DateField, …). Never spread `props` into the context value: in Solid,\n  // `props.children` is a getter that *creates* the child tree when read. Eager\n  // `{...props}` therefore builds every child once for the discarded context\n  // object and again for `renderChildren()`, double-advancing createUniqueId\n  // and desyncing SSR hydration keys. RAC can spread props because React\n  // elements are already-built descriptors; Solid cannot.\n  //\n  // Surface symptom (effect-latam /perfil, /foros): Form+sole Spectrum Button\n  // → \"Hydration Mismatch\" / \"template is not a function\" and a blank route.\n  // Form+TextField (multiple children) often still hydrates because array/\n  // fragment child paths mask the slot drift — the double-create is still\n  // wrong either way.\n  const formContextValue: FormProps = {\n    get validationBehavior() {\n      return validationBehavior();\n    },\n  };\n\n  return (\n    <form\n      {...filteredDomProps}\n      ref={(el) => assignRef(local.ref, el)}\n      novalidate={validationBehavior() !== \"native\"}\n      class={renderProps.class()}\n      style={renderProps.style()}\n      slot={local.slot}\n    >\n      <FormContext value={formContextValue}>\n        <FormValidationContext value={errors}>{renderProps.renderChildren()}</FormValidationContext>\n      </FormContext>\n    </form>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,SAAS,YAAa,KAAiB,IAAa;CAClD,IAAI,CAAC,KAAK;CACV,IAAI,OAAO,QAAQ,YACjB,IAAI,EAAE;MAEN,IAAI,UAAU;AAElB;AAgCA,MAAa,cAAc,cAAgC,IAAI;;;;;;;AAQ/D,SAAgB,0BACd,OACA,aACoB;CACpB,OAAO,SAAS,aAAa,sBAAsB;AACrD;AAEA,MAAM,mCAAmB,IAAI,IAAI;CAC/B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;AAED,SAAS,mBAAmB,OAAwC;CAClE,MAAM,WAAW,eAAwC,OAAO,EAAE,QAAQ,KAAK,CAAC;CAEhF,KAAK,MAAM,OAAO,OAChB,IAAI,OAAO,UAAU,eAAe,KAAK,OAAO,GAAG,KAAK,iBAAiB,IAAI,GAAG,GAC9E,SAAS,OAAQ,MAAkC;CAIvD,OAAO;AACT;AAEA,SAAgB,KAAK,OAA+B;CAClD,MAAM,CAAC,OAAO,YAAY,WAAW,OAAO;EAC1C;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,2BAA2B,MAAM,sBAAsB;CAC7D,MAAM,SAAS,MAAM,oBAAoB,CAAC;CAC1C,MAAM,cAAc,eAClB;EACE,IAAI,WAAW;GACb,OAAO,MAAM;EACf;EACA,OAAO,MAAM;EACb,OAAO,MAAM;EACb,kBAAkB;CACpB,UACO,EACL,oBAAoB,mBAAmB,EACzC,EACF;CAEA,MAAM,mBAAmB,mBAAmB,QAAQ;CAepD,MAAM,mBAA8B,EAClC,IAAI,qBAAqB;EACvB,OAAO,mBAAmB;CAC5B,EACF;CAGE,IAAA,OAAA,eAAA,MAWM;CATJ,UAAA;EAAM,QAAA,OAAO,YAAU,MAAM,KAAK,EAAE;CAAC,GAArCA,IAAqC;;CADjC,OAAA,MAAA,CAAA,kBAAA;EAEJ,IAAA,aAAA;GAAY,OAAA,mBAAmB,MAAM;EAAQ;EAC7C,IAAA,UAAA;GAAO,OAAA,YAAY,MAAM;EAAC;EAC1B,IAAA,QAAA;GAAO,OAAA,YAAY,MAAM;EAAC;EAC1B,IAAA,OAAA;GAAM,OAAA,MAAM;EAAI;;CANlB,OAAA,MAQEC,gBAAAA,aAAAA;EAAaC,OAAO;EAApB,IAAA,WAAA;GACEC,OAAAA,gBAAAA,uBAAAA;IAAuBC,OAAO;IAA9B,IAAA,WAAA;KAAuC,OAAA,YAAY,eAAe;IAAyB;;EAChF;CACT,CAAA,CAAA;CAXN,mBAWM;CAZR,OACEC;AAaJ"}