@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/dist/HiddenTimeInput.js

@@ -0,0 +1,104 @@
+import { addEventListener, effect, getNextElement, setAttribute, setProperty, style, template, use } from "solid-js/web";
+import { createEffect, createSignal } from "solid-js";
+import { createFormValidation } from "@proyecto-viviana/solidaria";
+//#region src/HiddenTimeInput.tsx
+/**
+* HiddenTimeInput component for solidaria-components
+*
+* A hidden native time input for form submission.
+*/
+var _tmpl$ = /*#__PURE__*/ template(`<input tabindex=-1 aria-hidden=true>`);
+function accessValue(value) {
+	return typeof value === "function" ? value() : value;
+}
+function formatTimeValue(value, granularity) {
+	if (!value) return "";
+	const hour = String(value.hour).padStart(2, "0");
+	const minute = String(granularity === "hour" ? 0 : value.minute).padStart(2, "0");
+	if (granularity === "second") return `${hour}:${minute}:${String(value.second).padStart(2, "0")}`;
+	return `${hour}:${minute}`;
+}
+function stepForGranularity(granularity) {
+	switch (granularity) {
+		case "hour": return 3600;
+		case "second": return 1;
+		default: return 60;
+	}
+}
+function HiddenTimeInput(props) {
+	const granularity = () => props.granularity ?? "minute";
+	const hasValidationBehavior = () => props.validationBehavior != null;
+	const validationBehavior = () => props.validationBehavior;
+	const usesNativeValidation = () => validationBehavior() === "native";
+	const value = () => accessValue(props.value);
+	const minValue = () => accessValue(props.minValue);
+	const maxValue = () => accessValue(props.maxValue);
+	const inputType = () => usesNativeValidation() ? "text" : hasValidationBehavior() ? "hidden" : "time";
+	const formattedValue = () => formatTimeValue(value(), granularity());
+	const formattedMin = () => formatTimeValue(minValue(), granularity());
+	const formattedMax = () => formatTimeValue(maxValue(), granularity());
+	const [inputRef, setInputRef] = createSignal();
+	if (props.validationState) createFormValidation({
+		get validationBehavior() {
+			return validationBehavior();
+		},
+		get focus() {
+			return props.focus;
+		}
+	}, props.validationState, inputRef);
+	createEffect(() => {
+		const val = formattedValue();
+		const input = inputRef();
+		if (input && input.value !== val) input.value = val;
+	});
+	return (() => {
+		var _el$ = getNextElement(_tmpl$);
+		addEventListener(_el$, "change", usesNativeValidation() ? () => {} : void 0);
+		use((el) => {
+			setInputRef(el);
+		}, _el$);
+		effect((_p$) => {
+			var _v$ = inputType(), _v$2 = props.name, _v$3 = props.form, _v$4 = props.autoComplete, _v$5 = props.isDisabled, _v$6 = usesNativeValidation() && props.isRequired ? true : void 0, _v$7 = usesNativeValidation() || void 0, _v$8 = hasValidationBehavior() ? void 0 : formattedMin() || void 0, _v$9 = hasValidationBehavior() ? void 0 : formattedMax() || void 0, _v$0 = hasValidationBehavior() ? void 0 : stepForGranularity(granularity()), _v$1 = {
+				position: "absolute",
+				width: "1px",
+				height: "1px",
+				padding: "0",
+				margin: "-1px",
+				overflow: "hidden",
+				clip: "rect(0, 0, 0, 0)",
+				"white-space": "nowrap",
+				"border-width": "0"
+			};
+			_v$ !== _p$.e && setAttribute(_el$, "type", _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "name", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$, "form", _p$.a = _v$3);
+			_v$4 !== _p$.o && setAttribute(_el$, "autocomplete", _p$.o = _v$4);
+			_v$5 !== _p$.i && setProperty(_el$, "disabled", _p$.i = _v$5);
+			_v$6 !== _p$.n && setProperty(_el$, "required", _p$.n = _v$6);
+			_v$7 !== _p$.s && setProperty(_el$, "hidden", _p$.s = _v$7);
+			_v$8 !== _p$.h && setAttribute(_el$, "min", _p$.h = _v$8);
+			_v$9 !== _p$.r && setAttribute(_el$, "max", _p$.r = _v$9);
+			_v$0 !== _p$.d && setAttribute(_el$, "step", _p$.d = _v$0);
+			_p$.l = style(_el$, _v$1, _p$.l);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0,
+			n: void 0,
+			s: void 0,
+			h: void 0,
+			r: void 0,
+			d: void 0,
+			l: void 0
+		});
+		effect(() => setProperty(_el$, "value", formattedValue()));
+		return _el$;
+	})();
+}
+//#endregion
+export { HiddenTimeInput };
+
+//# sourceMappingURL=HiddenTimeInput.js.map

package/dist/HiddenTimeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HiddenTimeInput.js","names":["JSX","createEffect","createSignal","FormValidationState","TimeValue","createFormValidation","MaybeAccessor","T","HiddenTimeInputProps","name","form","value","autoComplete","isDisabled","isRequired","validationBehavior","validationState","focus","minValue","maxValue","granularity","accessValue","formatTimeValue","hour","String","padStart","minute","second","stepForGranularity","HiddenTimeInput","props","Element","hasValidationBehavior","usesNativeValidation","inputType","formattedValue","formattedMin","formattedMax","inputRef","setInputRef","HTMLInputElement","val","input","_el$","_$getNextElement","_tmpl$","_$addEventListener","undefined","_$use","el","_$effect","_p$","_v$","_v$2","_v$3","_v$4","_v$5","_v$6","_v$7","_v$8","_v$9","_v$0","_v$1","position","width","height","padding","margin","overflow","clip","CSSProperties","e","_$setAttribute","t","a","o","i","_$setProperty","n","s","h","r","d","l","_$style"],"sources":["../src/HiddenTimeInput.tsx"],"sourcesContent":["/**\n * HiddenTimeInput component for solidaria-components\n *\n * A hidden native time input for form submission.\n */\nimport { type JSX, createEffect, createSignal } from \"solid-js\";\nimport { type FormValidationState, type TimeValue } from \"@proyecto-viviana/solid-stately\";\nimport { createFormValidation } from \"@proyecto-viviana/solidaria\";\n\ntype MaybeAccessor<T> = T | (() => T);\n\nexport interface HiddenTimeInputProps {\n  name?: string;\n  form?: string;\n  value?: MaybeAccessor<TimeValue | null | undefined>;\n  autoComplete?: string;\n  isDisabled?: boolean;\n  isRequired?: boolean;\n  validationBehavior?: \"aria\" | \"native\";\n  validationState?: FormValidationState;\n  focus?: () => void;\n  minValue?: MaybeAccessor<TimeValue | undefined>;\n  maxValue?: MaybeAccessor<TimeValue | undefined>;\n  granularity?: \"hour\" | \"minute\" | \"second\";\n}\n\nfunction accessValue<T>(value: MaybeAccessor<T> | undefined): T | undefined {\n  return typeof value === \"function\" ? (value as () => T)() : value;\n}\n\nfunction formatTimeValue(\n  value: TimeValue | undefined | null,\n  granularity: \"hour\" | \"minute\" | \"second\",\n): string {\n  if (!value) return \"\";\n\n  const hour = String(value.hour).padStart(2, \"0\");\n  const minute = String(granularity === \"hour\" ? 0 : value.minute).padStart(2, \"0\");\n\n  if (granularity === \"second\") {\n    const second = String(value.second).padStart(2, \"0\");\n    return `${hour}:${minute}:${second}`;\n  }\n\n  return `${hour}:${minute}`;\n}\n\nfunction stepForGranularity(granularity: \"hour\" | \"minute\" | \"second\"): number {\n  switch (granularity) {\n    case \"hour\":\n      return 3600;\n    case \"second\":\n      return 1;\n    case \"minute\":\n    default:\n      return 60;\n  }\n}\n\nexport function HiddenTimeInput(props: HiddenTimeInputProps): JSX.Element {\n  const granularity = () => props.granularity ?? \"minute\";\n  const hasValidationBehavior = () => props.validationBehavior != null;\n  const validationBehavior = () => props.validationBehavior;\n  const usesNativeValidation = () => validationBehavior() === \"native\";\n  const value = () => accessValue(props.value);\n  const minValue = () => accessValue(props.minValue);\n  const maxValue = () => accessValue(props.maxValue);\n  const inputType = () =>\n    usesNativeValidation() ? \"text\" : hasValidationBehavior() ? \"hidden\" : \"time\";\n  const formattedValue = () => formatTimeValue(value(), granularity());\n  const formattedMin = () => formatTimeValue(minValue(), granularity());\n  const formattedMax = () => formatTimeValue(maxValue(), granularity());\n\n  const [inputRef, setInputRef] = createSignal<HTMLInputElement>();\n\n  if (props.validationState) {\n    createFormValidation(\n      {\n        get validationBehavior() {\n          return validationBehavior();\n        },\n        get focus() {\n          return props.focus;\n        },\n      },\n      props.validationState,\n      inputRef,\n    );\n  }\n\n  createEffect(() => {\n    const val = formattedValue();\n    const input = inputRef();\n    if (input && input.value !== val) {\n      input.value = val;\n    }\n  });\n\n  return (\n    <input\n      ref={(el) => {\n        setInputRef(el);\n      }}\n      type={inputType()}\n      name={props.name}\n      form={props.form}\n      value={formattedValue()}\n      autocomplete={props.autoComplete}\n      disabled={props.isDisabled}\n      required={usesNativeValidation() && props.isRequired ? true : undefined}\n      hidden={usesNativeValidation() || undefined}\n      min={hasValidationBehavior() ? undefined : formattedMin() || undefined}\n      max={hasValidationBehavior() ? undefined : formattedMax() || undefined}\n      step={hasValidationBehavior() ? undefined : stepForGranularity(granularity())}\n      onChange={usesNativeValidation() ? () => {} : undefined}\n      tabIndex={-1}\n      aria-hidden=\"true\"\n      style={\n        {\n          position: \"absolute\",\n          width: \"1px\",\n          height: \"1px\",\n          padding: \"0\",\n          margin: \"-1px\",\n          overflow: \"hidden\",\n          clip: \"rect(0, 0, 0, 0)\",\n          \"white-space\": \"nowrap\",\n          \"border-width\": \"0\",\n        } as JSX.CSSProperties\n      }\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/HiddenTimeInput.jsx

@@ -0,0 +1,69 @@
+import { createEffect, createSignal } from "solid-js";
+import { createFormValidation } from "@proyecto-viviana/solidaria";
+//#region src/HiddenTimeInput.tsx
+/**
+* HiddenTimeInput component for solidaria-components
+*
+* A hidden native time input for form submission.
+*/
+function accessValue(value) {
+	return typeof value === "function" ? value() : value;
+}
+function formatTimeValue(value, granularity) {
+	if (!value) return "";
+	const hour = String(value.hour).padStart(2, "0");
+	const minute = String(granularity === "hour" ? 0 : value.minute).padStart(2, "0");
+	if (granularity === "second") return `${hour}:${minute}:${String(value.second).padStart(2, "0")}`;
+	return `${hour}:${minute}`;
+}
+function stepForGranularity(granularity) {
+	switch (granularity) {
+		case "hour": return 3600;
+		case "second": return 1;
+		default: return 60;
+	}
+}
+function HiddenTimeInput(props) {
+	const granularity = () => props.granularity ?? "minute";
+	const hasValidationBehavior = () => props.validationBehavior != null;
+	const validationBehavior = () => props.validationBehavior;
+	const usesNativeValidation = () => validationBehavior() === "native";
+	const value = () => accessValue(props.value);
+	const minValue = () => accessValue(props.minValue);
+	const maxValue = () => accessValue(props.maxValue);
+	const inputType = () => usesNativeValidation() ? "text" : hasValidationBehavior() ? "hidden" : "time";
+	const formattedValue = () => formatTimeValue(value(), granularity());
+	const formattedMin = () => formatTimeValue(minValue(), granularity());
+	const formattedMax = () => formatTimeValue(maxValue(), granularity());
+	const [inputRef, setInputRef] = createSignal();
+	if (props.validationState) createFormValidation({
+		get validationBehavior() {
+			return validationBehavior();
+		},
+		get focus() {
+			return props.focus;
+		}
+	}, props.validationState, inputRef);
+	createEffect(() => {
+		const val = formattedValue();
+		const input = inputRef();
+		if (input && input.value !== val) input.value = val;
+	});
+	return <input ref={(el) => {
+		setInputRef(el);
+	}} type={inputType()} name={props.name} form={props.form} value={formattedValue()} autocomplete={props.autoComplete} disabled={props.isDisabled} required={usesNativeValidation() && props.isRequired ? true : void 0} hidden={usesNativeValidation() || void 0} min={hasValidationBehavior() ? void 0 : formattedMin() || void 0} max={hasValidationBehavior() ? void 0 : formattedMax() || void 0} step={hasValidationBehavior() ? void 0 : stepForGranularity(granularity())} onChange={usesNativeValidation() ? () => {} : void 0} tabIndex={-1} aria-hidden="true" style={{
+		position: "absolute",
+		width: "1px",
+		height: "1px",
+		padding: "0",
+		margin: "-1px",
+		overflow: "hidden",
+		clip: "rect(0, 0, 0, 0)",
+		"white-space": "nowrap",
+		"border-width": "0"
+	}} />;
+}
+//#endregion
+export { HiddenTimeInput };
+
+//# sourceMappingURL=HiddenTimeInput.jsx.map

package/dist/HiddenTimeInput.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"HiddenTimeInput.jsx","names":[],"sources":["../src/HiddenTimeInput.tsx"],"sourcesContent":["/**\n * HiddenTimeInput component for solidaria-components\n *\n * A hidden native time input for form submission.\n */\nimport { type JSX, createEffect, createSignal } from \"solid-js\";\nimport { type FormValidationState, type TimeValue } from \"@proyecto-viviana/solid-stately\";\nimport { createFormValidation } from \"@proyecto-viviana/solidaria\";\n\ntype MaybeAccessor<T> = T | (() => T);\n\nexport interface HiddenTimeInputProps {\n  name?: string;\n  form?: string;\n  value?: MaybeAccessor<TimeValue | null | undefined>;\n  autoComplete?: string;\n  isDisabled?: boolean;\n  isRequired?: boolean;\n  validationBehavior?: \"aria\" | \"native\";\n  validationState?: FormValidationState;\n  focus?: () => void;\n  minValue?: MaybeAccessor<TimeValue | undefined>;\n  maxValue?: MaybeAccessor<TimeValue | undefined>;\n  granularity?: \"hour\" | \"minute\" | \"second\";\n}\n\nfunction accessValue<T>(value: MaybeAccessor<T> | undefined): T | undefined {\n  return typeof value === \"function\" ? (value as () => T)() : value;\n}\n\nfunction formatTimeValue(\n  value: TimeValue | undefined | null,\n  granularity: \"hour\" | \"minute\" | \"second\",\n): string {\n  if (!value) return \"\";\n\n  const hour = String(value.hour).padStart(2, \"0\");\n  const minute = String(granularity === \"hour\" ? 0 : value.minute).padStart(2, \"0\");\n\n  if (granularity === \"second\") {\n    const second = String(value.second).padStart(2, \"0\");\n    return `${hour}:${minute}:${second}`;\n  }\n\n  return `${hour}:${minute}`;\n}\n\nfunction stepForGranularity(granularity: \"hour\" | \"minute\" | \"second\"): number {\n  switch (granularity) {\n    case \"hour\":\n      return 3600;\n    case \"second\":\n      return 1;\n    case \"minute\":\n    default:\n      return 60;\n  }\n}\n\nexport function HiddenTimeInput(props: HiddenTimeInputProps): JSX.Element {\n  const granularity = () => props.granularity ?? \"minute\";\n  const hasValidationBehavior = () => props.validationBehavior != null;\n  const validationBehavior = () => props.validationBehavior;\n  const usesNativeValidation = () => validationBehavior() === \"native\";\n  const value = () => accessValue(props.value);\n  const minValue = () => accessValue(props.minValue);\n  const maxValue = () => accessValue(props.maxValue);\n  const inputType = () =>\n    usesNativeValidation() ? \"text\" : hasValidationBehavior() ? \"hidden\" : \"time\";\n  const formattedValue = () => formatTimeValue(value(), granularity());\n  const formattedMin = () => formatTimeValue(minValue(), granularity());\n  const formattedMax = () => formatTimeValue(maxValue(), granularity());\n\n  const [inputRef, setInputRef] = createSignal<HTMLInputElement>();\n\n  if (props.validationState) {\n    createFormValidation(\n      {\n        get validationBehavior() {\n          return validationBehavior();\n        },\n        get focus() {\n          return props.focus;\n        },\n      },\n      props.validationState,\n      inputRef,\n    );\n  }\n\n  createEffect(() => {\n    const val = formattedValue();\n    const input = inputRef();\n    if (input && input.value !== val) {\n      input.value = val;\n    }\n  });\n\n  return (\n    <input\n      ref={(el) => {\n        setInputRef(el);\n      }}\n      type={inputType()}\n      name={props.name}\n      form={props.form}\n      value={formattedValue()}\n      autocomplete={props.autoComplete}\n      disabled={props.isDisabled}\n      required={usesNativeValidation() && props.isRequired ? true : undefined}\n      hidden={usesNativeValidation() || undefined}\n      min={hasValidationBehavior() ? undefined : formattedMin() || undefined}\n      max={hasValidationBehavior() ? undefined : formattedMax() || undefined}\n      step={hasValidationBehavior() ? undefined : stepForGranularity(granularity())}\n      onChange={usesNativeValidation() ? () => {} : undefined}\n      tabIndex={-1}\n      aria-hidden=\"true\"\n      style={\n        {\n          position: \"absolute\",\n          width: \"1px\",\n          height: \"1px\",\n          padding: \"0\",\n          margin: \"-1px\",\n          overflow: \"hidden\",\n          clip: \"rect(0, 0, 0, 0)\",\n          \"white-space\": \"nowrap\",\n          \"border-width\": \"0\",\n        } as JSX.CSSProperties\n      }\n    />\n  );\n}\n"],"mappings":";;;;;;;;AA0BA,SAAS,YAAe,OAAoD;CAC1E,OAAO,OAAO,UAAU,aAAc,MAAkB,IAAI;AAC9D;AAEA,SAAS,gBACP,OACA,aACQ;CACR,IAAI,CAAC,OAAO,OAAO;CAEnB,MAAM,OAAO,OAAO,MAAM,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;CAC/C,MAAM,SAAS,OAAO,gBAAgB,SAAS,IAAI,MAAM,MAAM,CAAC,CAAC,SAAS,GAAG,GAAG;CAEhF,IAAI,gBAAgB,UAElB,OAAO,GAAG,KAAK,GAAG,OAAO,GADV,OAAO,MAAM,MAAM,CAAC,CAAC,SAAS,GAAG,GACf;CAGnC,OAAO,GAAG,KAAK,GAAG;AACpB;AAEA,SAAS,mBAAmB,aAAmD;CAC7E,QAAQ,aAAR;EACE,KAAK,QACH,OAAO;EACT,KAAK,UACH,OAAO;EAET,SACE,OAAO;CACX;AACF;AAEA,SAAgB,gBAAgB,OAA0C;CACxE,MAAM,oBAAoB,MAAM,eAAe;CAC/C,MAAM,8BAA8B,MAAM,sBAAsB;CAChE,MAAM,2BAA2B,MAAM;CACvC,MAAM,6BAA6B,mBAAmB,MAAM;CAC5D,MAAM,cAAc,YAAY,MAAM,KAAK;CAC3C,MAAM,iBAAiB,YAAY,MAAM,QAAQ;CACjD,MAAM,iBAAiB,YAAY,MAAM,QAAQ;CACjD,MAAM,kBACJ,qBAAqB,IAAI,SAAS,sBAAsB,IAAI,WAAW;CACzE,MAAM,uBAAuB,gBAAgB,MAAM,GAAG,YAAY,CAAC;CACnE,MAAM,qBAAqB,gBAAgB,SAAS,GAAG,YAAY,CAAC;CACpE,MAAM,qBAAqB,gBAAgB,SAAS,GAAG,YAAY,CAAC;CAEpE,MAAM,CAAC,UAAU,eAAe,aAA+B;CAE/D,IAAI,MAAM,iBACR,qBACE;EACE,IAAI,qBAAqB;GACvB,OAAO,mBAAmB;EAC5B;EACA,IAAI,QAAQ;GACV,OAAO,MAAM;EACf;CACF,GACA,MAAM,iBACN,QACF;CAGF,mBAAmB;EACjB,MAAM,MAAM,eAAe;EAC3B,MAAM,QAAQ,SAAS;EACvB,IAAI,SAAS,MAAM,UAAU,KAC3B,MAAM,QAAQ;CAElB,CAAC;CAED,OACE,CAAC,MACC,MAAM,OAAO;EACX,YAAY,EAAE;CAChB,GACA,MAAM,UAAU,GAChB,MAAM,MAAM,MACZ,MAAM,MAAM,MACZ,OAAO,eAAe,GACtB,cAAc,MAAM,cACpB,UAAU,MAAM,YAChB,UAAU,qBAAqB,KAAK,MAAM,aAAa,OAAO,KAAA,GAC9D,QAAQ,qBAAqB,KAAK,KAAA,GAClC,KAAK,sBAAsB,IAAI,KAAA,IAAY,aAAa,KAAK,KAAA,GAC7D,KAAK,sBAAsB,IAAI,KAAA,IAAY,aAAa,KAAK,KAAA,GAC7D,MAAM,sBAAsB,IAAI,KAAA,IAAY,mBAAmB,YAAY,CAAC,GAC5E,UAAU,qBAAqB,UAAU,CAAC,IAAI,KAAA,GAC9C,UAAU,IACV,mBACA,OACE;EACE,UAAU;EACV,OAAO;EACP,QAAQ;EACR,SAAS;EACT,QAAQ;EACR,UAAU;EACV,MAAM;EACN,eAAe;EACf,gBAAgB;CAClB;AAIR"}

package/dist/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../src/Icon.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,KAAK,GAAG,EAA+C,MAAM,UAAU,CAAC;AACjF,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,SAAS,EAGf,MAAM,SAAS,CAAC;AAEjB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAE9D,MAAM,WAAW,eAAe;IAC9B,wDAAwD;IACxD,YAAY,EAAE,OAAO,CAAC;IACtB,qDAAqD;IACrD,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,sEAAsE;IACtE,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,0FAA0F;IAC1F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,yFAAyF;IACzF,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,6BAA6B;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,WAAW,8CAAwC,CAAC;AAEjE;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAgElD"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../src/Icon.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,KAAK,GAAG,EAA+C,MAAM,UAAU,CAAC;AACjF,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,SAAS,EAGf,MAAM,SAAS,CAAC;AAEjB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAE9D,MAAM,WAAW,eAAe;IAC9B,wDAAwD;IACxD,YAAY,EAAE,OAAO,CAAC;IACtB,qDAAqD;IACrD,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,sEAAsE;IACtE,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,0FAA0F;IAC1F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,yFAAyF;IACzF,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,6BAA6B;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,WAAW,8CAAwC,CAAC;AAEjE;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAkElD"}

package/dist/Icon.js

@@ -0,0 +1,127 @@
+import { filterDOMProps, useRenderProps } from "./utils.js";
+import { Button } from "./Button.js";
+import { createComponent, getNextElement, insert, mergeProps, runHydrationEvents, spread, template } from "solid-js/web";
+import { Show, createContext, createMemo, splitProps } from "solid-js";
+//#region src/Icon.tsx
+/**
+* Icon component for solidaria-components
+*
+* Minimal headless Icon that owns ARIA semantics:
+* - Decorative (no label): aria-hidden="true"
+* - Informative (aria-label): role="img" + aria-label
+* - Interactive (onPress): wraps content in headless Button
+*
+* The UI layer consumes this for styling/composition only.
+*/
+var _tmpl$ = /*#__PURE__*/ template(`<span>`);
+const IconContext = createContext(null);
+/**
+* An icon wrapper that provides correct ARIA semantics.
+*
+* - **Decorative** (no `aria-label`): renders `<span aria-hidden="true">`
+* - **Informative** (`aria-label` provided): renders `<span role="img" aria-label="...">`
+* - **Interactive** (`onPress` provided): wraps in headless `Button`
+*
+* @example
+* ```tsx
+* // Decorative
+* <Icon><SearchSvg /></Icon>
+*
+* // Informative
+* <Icon aria-label="Search"><SearchSvg /></Icon>
+*
+* // Interactive
+* <Icon onPress={handleSearch} aria-label="Search"><SearchSvg /></Icon>
+* ```
+*/
+function Icon(props) {
+	const [local, rest] = splitProps(props, [
+		"children",
+		"class",
+		"style",
+		"slot",
+		"onPress",
+		"aria-label",
+		"aria-labelledby"
+	]);
+	const hasLabel = () => !!(local["aria-label"] || local["aria-labelledby"]);
+	const isInteractive = () => !!local.onPress;
+	const isDecorative = () => !hasLabel();
+	const renderValues = createMemo(() => ({
+		isDecorative: isDecorative(),
+		isInteractive: isInteractive()
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return local.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Icon"
+	}, renderValues);
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	return createComponent(Show, {
+		get when() {
+			return isInteractive();
+		},
+		get fallback() {
+			return (() => {
+				var _el$ = getNextElement(_tmpl$);
+				spread(_el$, mergeProps(domProps, {
+					get role() {
+						return hasLabel() ? "img" : void 0;
+					},
+					get ["aria-hidden"]() {
+						return isDecorative() ? "true" : void 0;
+					},
+					get ["aria-label"]() {
+						return local["aria-label"];
+					},
+					get ["aria-labelledby"]() {
+						return local["aria-labelledby"];
+					},
+					get ["class"]() {
+						return renderProps.class();
+					},
+					get style() {
+						return renderProps.style();
+					},
+					"data-interactive": void 0,
+					get ["data-decorative"]() {
+						return isDecorative() || void 0;
+					}
+				}), false, true);
+				insert(_el$, () => renderProps.renderChildren());
+				runHydrationEvents();
+				return _el$;
+			})();
+		},
+		get children() {
+			return createComponent(Button, mergeProps(domProps, {
+				get onPress() {
+					return local.onPress;
+				},
+				get ["aria-label"]() {
+					return local["aria-label"];
+				},
+				get ["aria-labelledby"]() {
+					return local["aria-labelledby"];
+				},
+				get ["class"]() {
+					return renderProps.class();
+				},
+				get style() {
+					return renderProps.style();
+				},
+				"data-interactive": "",
+				get children() {
+					return renderProps.renderChildren();
+				}
+			}));
+		}
+	});
+}
+//#endregion
+export { Icon, IconContext };
+
+//# sourceMappingURL=Icon.js.map

package/dist/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","names":["JSX","createContext","createMemo","Show","splitProps","RenderChildren","ClassNameOrFunction","StyleOrFunction","SlotProps","useRenderProps","filterDOMProps","Button","PressEvent","IconRenderProps","isDecorative","isInteractive","IconProps","onPress","e","children","class","style","id","IconContext","Icon","props","Element","local","rest","hasLabel","renderValues","renderProps","defaultClassName","domProps","global","_$createComponent","when","fallback","_el$","_$getNextElement","_tmpl$","_$spread","_$mergeProps","role","undefined","aria-hidden","aria-label","aria-labelledby","data-decorative","_$insert","renderChildren","_$runHydrationEvents"],"sources":["../src/Icon.tsx"],"sourcesContent":["/**\n * Icon component for solidaria-components\n *\n * Minimal headless Icon that owns ARIA semantics:\n * - Decorative (no label): aria-hidden=\"true\"\n * - Informative (aria-label): role=\"img\" + aria-label\n * - Interactive (onPress): wraps content in headless Button\n *\n * The UI layer consumes this for styling/composition only.\n */\n\nimport { type JSX, createContext, createMemo, Show, splitProps } from \"solid-js\";\nimport {\n  type RenderChildren,\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type SlotProps,\n  useRenderProps,\n  filterDOMProps,\n} from \"./utils\";\nimport { Button } from \"./Button\";\nimport type { PressEvent } from \"@proyecto-viviana/solidaria\";\n\nexport interface IconRenderProps {\n  /** Whether the icon is purely decorative (no label). */\n  isDecorative: boolean;\n  /** Whether the icon is interactive (has onPress). */\n  isInteractive: boolean;\n}\n\nexport interface IconProps extends SlotProps {\n  /** Handler called when the icon is pressed (makes it interactive). */\n  onPress?: (e: PressEvent) => void;\n  /** Accessible label for the icon. When provided, the icon is informative (role=\"img\"). */\n  \"aria-label\"?: string;\n  /** ID of an element that labels this icon. */\n  \"aria-labelledby\"?: string;\n  /** The children of the component. A function may be provided to receive render props. */\n  children?: RenderChildren<IconRenderProps>;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<IconRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<IconRenderProps>;\n  /** The id of the element. */\n  id?: string;\n}\n\nexport const IconContext = createContext<IconProps | null>(null);\n\n/**\n * An icon wrapper that provides correct ARIA semantics.\n *\n * - **Decorative** (no `aria-label`): renders `<span aria-hidden=\"true\">`\n * - **Informative** (`aria-label` provided): renders `<span role=\"img\" aria-label=\"...\">`\n * - **Interactive** (`onPress` provided): wraps in headless `Button`\n *\n * @example\n * ```tsx\n * // Decorative\n * <Icon><SearchSvg /></Icon>\n *\n * // Informative\n * <Icon aria-label=\"Search\"><SearchSvg /></Icon>\n *\n * // Interactive\n * <Icon onPress={handleSearch} aria-label=\"Search\"><SearchSvg /></Icon>\n * ```\n */\nexport function Icon(props: IconProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"children\",\n    \"class\",\n    \"style\",\n    \"slot\",\n    \"onPress\",\n    \"aria-label\",\n    \"aria-labelledby\",\n  ]);\n\n  const hasLabel = () => !!(local[\"aria-label\"] || local[\"aria-labelledby\"]);\n  const isInteractive = () => !!local.onPress;\n  const isDecorative = () => !hasLabel();\n\n  const renderValues = createMemo<IconRenderProps>(() => ({\n    isDecorative: isDecorative(),\n    isInteractive: isInteractive(),\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return local.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-Icon\",\n    },\n    renderValues,\n  );\n\n  const domProps = createMemo(() => filterDOMProps(rest, { global: true }));\n\n  return (\n    <Show\n      when={isInteractive()}\n      fallback={\n        <span\n          {...domProps()}\n          role={hasLabel() ? \"img\" : undefined}\n          aria-hidden={isDecorative() ? \"true\" : undefined}\n          aria-label={local[\"aria-label\"]}\n          aria-labelledby={local[\"aria-labelledby\"]}\n          class={renderProps.class()}\n          style={renderProps.style()}\n          data-interactive={undefined}\n          data-decorative={isDecorative() || undefined}\n        >\n          {renderProps.renderChildren()}\n        </span>\n      }\n    >\n      <Button\n        {...domProps()}\n        onPress={local.onPress}\n        aria-label={local[\"aria-label\"]}\n        aria-labelledby={local[\"aria-labelledby\"]}\n        class={renderProps.class()}\n        style={renderProps.style()}\n        data-interactive=\"\"\n      >\n        {renderProps.renderChildren()}\n      </Button>\n    </Show>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AA+CA,MAAauB,cAActB,cAAgC,IAAI;;;;;;;;;;;;;;;;;;;;AAqB/D,SAAgBuB,KAAKC,OAA+B;CAClD,MAAM,CAACE,OAAOC,QAAQxB,WAAWqB,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;CAAiB,CAClB;CAED,MAAMI,iBAAiB,CAAC,EAAEF,MAAM,iBAAiBA,MAAM;CACvD,MAAMZ,sBAAsB,CAAC,CAACY,MAAMV;CACpC,MAAMH,qBAAqB,CAACe,SAAS;CAErC,MAAMC,eAAe5B,kBAAmC;EACtDY,cAAcA,aAAa;EAC3BC,eAAeA,cAAc;CAC/B,EAAE;CAEF,MAAMgB,cAActB,eAClB;EACE,IAAIU,WAAW;GACb,OAAOQ,MAAMR;EACf;EACAC,OAAOO,MAAMP;EACbC,OAAOM,MAAMN;EACbW,kBAAkB;CACpB,GACAF,YACF;CAEA,MAAMG,WAAW/B,iBAAiBQ,eAAekB,MAAM,EAAEM,QAAQ,KAAK,CAAC,CAAC;CAExE,OAAAC,gBACGhC,MAAI;EAAA,IACHiC,OAAI;GAAA,OAAErB,cAAc;EAAC;EAAA,IACrBsB,WAAQ;GAAA,cAAA;IAAA,IAAAC,OAAAC,eAAAC,MAAA;IAAAC,OAAAH,MAAAI,WAEAT,UAAQ;KAAA,IACZU,OAAI;MAAA,OAAEd,SAAS,IAAI,QAAQe,KAAAA;KAAS;KAAA,KAAA,iBAAA;MAAA,OACvB9B,aAAa,IAAI,SAAS8B,KAAAA;KAAS;KAAA,KAAA,gBAAA;MAAA,OACpCjB,MAAM;KAAa;KAAA,KAAA,qBAAA;MAAA,OACdA,MAAM;KAAkB;KAAA,KAAA,WAAA;MAAA,OAClCI,YAAYX,MAAM;KAAC;KAAA,IAC1BC,QAAK;MAAA,OAAEU,YAAYV,MAAM;KAAC;KAAA,oBACRuB,KAAAA;KAAS,KAAA,qBAAA;MAAA,OACV9B,aAAa,KAAK8B,KAAAA;KAAS;IAAA,CAAA,GAAA,OAAA,IAAA;IAAAK,OAAAX,YAE3CP,YAAYmB,eAAe,CAAC;IAAAC,mBAAA;IAAA,OAAAb;GAAA,EAAA,CAAA;EAAA;EAAA,IAAAnB,WAAA;GAAA,OAAAgB,gBAIhCxB,QAAM+B,WACDT,UAAQ;IAAA,IACZhB,UAAO;KAAA,OAAEU,MAAMV;IAAO;IAAA,KAAA,gBAAA;KAAA,OACVU,MAAM;IAAa;IAAA,KAAA,qBAAA;KAAA,OACdA,MAAM;IAAkB;IAAA,KAAA,WAAA;KAAA,OAClCI,YAAYX,MAAM;IAAC;IAAA,IAC1BC,QAAK;KAAA,OAAEU,YAAYV,MAAM;IAAC;IAAA,oBAAA;IAAA,IAAAF,WAAA;KAAA,OAGzBY,YAAYmB,eAAe;IAAC;GAAA,CAAA,CAAA;EAAA;CAAA,CAAA;AAIrC"}

package/dist/Icon.jsx

@@ -0,0 +1,72 @@
+import { filterDOMProps, useRenderProps } from "./utils.jsx";
+import { Button } from "./Button.jsx";
+import { Show, createContext, createMemo, splitProps } from "solid-js";
+//#region src/Icon.tsx
+/**
+* Icon component for solidaria-components
+*
+* Minimal headless Icon that owns ARIA semantics:
+* - Decorative (no label): aria-hidden="true"
+* - Informative (aria-label): role="img" + aria-label
+* - Interactive (onPress): wraps content in headless Button
+*
+* The UI layer consumes this for styling/composition only.
+*/
+const IconContext = createContext(null);
+/**
+* An icon wrapper that provides correct ARIA semantics.
+*
+* - **Decorative** (no `aria-label`): renders `<span aria-hidden="true">`
+* - **Informative** (`aria-label` provided): renders `<span role="img" aria-label="...">`
+* - **Interactive** (`onPress` provided): wraps in headless `Button`
+*
+* @example
+* ```tsx
+* // Decorative
+* <Icon><SearchSvg /></Icon>
+*
+* // Informative
+* <Icon aria-label="Search"><SearchSvg /></Icon>
+*
+* // Interactive
+* <Icon onPress={handleSearch} aria-label="Search"><SearchSvg /></Icon>
+* ```
+*/
+function Icon(props) {
+	const [local, rest] = splitProps(props, [
+		"children",
+		"class",
+		"style",
+		"slot",
+		"onPress",
+		"aria-label",
+		"aria-labelledby"
+	]);
+	const hasLabel = () => !!(local["aria-label"] || local["aria-labelledby"]);
+	const isInteractive = () => !!local.onPress;
+	const isDecorative = () => !hasLabel();
+	const renderValues = createMemo(() => ({
+		isDecorative: isDecorative(),
+		isInteractive: isInteractive()
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return local.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Icon"
+	}, renderValues);
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	return <Show when={isInteractive()} fallback={<span {...domProps()} role={hasLabel() ? "img" : void 0} aria-hidden={isDecorative() ? "true" : void 0} aria-label={local["aria-label"]} aria-labelledby={local["aria-labelledby"]} class={renderProps.class()} style={renderProps.style()} data-interactive={void 0} data-decorative={isDecorative() || void 0}>
+          {renderProps.renderChildren()}
+        </span>}>
+      <Button {...domProps()} onPress={local.onPress} aria-label={local["aria-label"]} aria-labelledby={local["aria-labelledby"]} class={renderProps.class()} style={renderProps.style()} data-interactive="">
+        {renderProps.renderChildren()}
+      </Button>
+    </Show>;
+}
+//#endregion
+export { Icon, IconContext };
+
+//# sourceMappingURL=Icon.jsx.map

package/dist/Icon.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.jsx","names":[],"sources":["../src/Icon.tsx"],"sourcesContent":["/**\n * Icon component for solidaria-components\n *\n * Minimal headless Icon that owns ARIA semantics:\n * - Decorative (no label): aria-hidden=\"true\"\n * - Informative (aria-label): role=\"img\" + aria-label\n * - Interactive (onPress): wraps content in headless Button\n *\n * The UI layer consumes this for styling/composition only.\n */\n\nimport { type JSX, createContext, createMemo, Show, splitProps } from \"solid-js\";\nimport {\n  type RenderChildren,\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type SlotProps,\n  useRenderProps,\n  filterDOMProps,\n} from \"./utils\";\nimport { Button } from \"./Button\";\nimport type { PressEvent } from \"@proyecto-viviana/solidaria\";\n\nexport interface IconRenderProps {\n  /** Whether the icon is purely decorative (no label). */\n  isDecorative: boolean;\n  /** Whether the icon is interactive (has onPress). */\n  isInteractive: boolean;\n}\n\nexport interface IconProps extends SlotProps {\n  /** Handler called when the icon is pressed (makes it interactive). */\n  onPress?: (e: PressEvent) => void;\n  /** Accessible label for the icon. When provided, the icon is informative (role=\"img\"). */\n  \"aria-label\"?: string;\n  /** ID of an element that labels this icon. */\n  \"aria-labelledby\"?: string;\n  /** The children of the component. A function may be provided to receive render props. */\n  children?: RenderChildren<IconRenderProps>;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<IconRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<IconRenderProps>;\n  /** The id of the element. */\n  id?: string;\n}\n\nexport const IconContext = createContext<IconProps | null>(null);\n\n/**\n * An icon wrapper that provides correct ARIA semantics.\n *\n * - **Decorative** (no `aria-label`): renders `<span aria-hidden=\"true\">`\n * - **Informative** (`aria-label` provided): renders `<span role=\"img\" aria-label=\"...\">`\n * - **Interactive** (`onPress` provided): wraps in headless `Button`\n *\n * @example\n * ```tsx\n * // Decorative\n * <Icon><SearchSvg /></Icon>\n *\n * // Informative\n * <Icon aria-label=\"Search\"><SearchSvg /></Icon>\n *\n * // Interactive\n * <Icon onPress={handleSearch} aria-label=\"Search\"><SearchSvg /></Icon>\n * ```\n */\nexport function Icon(props: IconProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"children\",\n    \"class\",\n    \"style\",\n    \"slot\",\n    \"onPress\",\n    \"aria-label\",\n    \"aria-labelledby\",\n  ]);\n\n  const hasLabel = () => !!(local[\"aria-label\"] || local[\"aria-labelledby\"]);\n  const isInteractive = () => !!local.onPress;\n  const isDecorative = () => !hasLabel();\n\n  const renderValues = createMemo<IconRenderProps>(() => ({\n    isDecorative: isDecorative(),\n    isInteractive: isInteractive(),\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return local.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-Icon\",\n    },\n    renderValues,\n  );\n\n  const domProps = createMemo(() => filterDOMProps(rest, { global: true }));\n\n  return (\n    <Show\n      when={isInteractive()}\n      fallback={\n        <span\n          {...domProps()}\n          role={hasLabel() ? \"img\" : undefined}\n          aria-hidden={isDecorative() ? \"true\" : undefined}\n          aria-label={local[\"aria-label\"]}\n          aria-labelledby={local[\"aria-labelledby\"]}\n          class={renderProps.class()}\n          style={renderProps.style()}\n          data-interactive={undefined}\n          data-decorative={isDecorative() || undefined}\n        >\n          {renderProps.renderChildren()}\n        </span>\n      }\n    >\n      <Button\n        {...domProps()}\n        onPress={local.onPress}\n        aria-label={local[\"aria-label\"]}\n        aria-labelledby={local[\"aria-labelledby\"]}\n        class={renderProps.class()}\n        style={renderProps.style()}\n        data-interactive=\"\"\n      >\n        {renderProps.renderChildren()}\n      </Button>\n    </Show>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AA+CA,MAAa,cAAc,cAAgC,IAAI;;;;;;;;;;;;;;;;;;;;AAqB/D,SAAgB,KAAK,OAA+B;CAClD,MAAM,CAAC,OAAO,QAAQ,WAAW,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,iBAAiB,CAAC,EAAE,MAAM,iBAAiB,MAAM;CACvD,MAAM,sBAAsB,CAAC,CAAC,MAAM;CACpC,MAAM,qBAAqB,CAAC,SAAS;CAErC,MAAM,eAAe,kBAAmC;EACtD,cAAc,aAAa;EAC3B,eAAe,cAAc;CAC/B,EAAE;CAEF,MAAM,cAAc,eAClB;EACE,IAAI,WAAW;GACb,OAAO,MAAM;EACf;EACA,OAAO,MAAM;EACb,OAAO,MAAM;EACb,kBAAkB;CACpB,GACA,YACF;CAEA,MAAM,WAAW,iBAAiB,eAAe,MAAM,EAAE,QAAQ,KAAK,CAAC,CAAC;CAExE,OACE,CAAC,KACC,MAAM,cAAc,GACpB,UACE,CAAC,SACK,SAAS,GACb,MAAM,SAAS,IAAI,QAAQ,KAAA,GAC3B,aAAa,aAAa,IAAI,SAAS,KAAA,GACvC,YAAY,MAAM,eAClB,iBAAiB,MAAM,oBACvB,OAAO,YAAY,MAAM,GACzB,OAAO,YAAY,MAAM,GACzB,kBAAkB,KAAA,GAClB,iBAAiB,aAAa,KAAK,KAAA,GACpC;WACE,YAAY,eAAe,EAAE;QAChC,EAAE,OAEL;MACC,CAAC,WACK,SAAS,GACb,SAAS,MAAM,SACf,YAAY,MAAM,eAClB,iBAAiB,MAAM,oBACvB,OAAO,YAAY,MAAM,GACzB,OAAO,YAAY,MAAM,GACzB,oBACD;SACE,YAAY,eAAe,EAAE;MAChC,EAAE,OAAO;IACX,EAAE;AAEN"}

package/dist/Keyboard.js

@@ -0,0 +1,30 @@
+import { getNextElement, insert, runHydrationEvents, spread, template } from "solid-js/web";
+import { createContext, splitProps, useContext } from "solid-js";
+//#region src/Keyboard.tsx
+/**
+* Keyboard primitive for solidaria-components.
+*
+* Displays keyboard key hints with semantic <kbd> markup.
+* Port direction: react-aria-components/src/Keyboard.tsx
+*/
+var _tmpl$ = /*#__PURE__*/ template(`<kbd dir=ltr>`);
+const KeyboardContext = createContext(null);
+function Keyboard(props) {
+	const context = useContext(KeyboardContext);
+	const merged = () => ({
+		...context,
+		...props
+	});
+	const [local, domProps] = splitProps(merged(), ["children"]);
+	return (() => {
+		var _el$ = getNextElement(_tmpl$);
+		spread(_el$, domProps, false, true);
+		insert(_el$, () => local.children);
+		runHydrationEvents();
+		return _el$;
+	})();
+}
+//#endregion
+export { Keyboard, KeyboardContext };
+
+//# sourceMappingURL=Keyboard.js.map

package/dist/Keyboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Keyboard.js","names":["JSX","createContext","splitProps","useContext","KeyboardProps","HTMLAttributes","HTMLElement","children","Element","KeyboardContext","Keyboard","props","context","merged","local","domProps","_el$","_$getNextElement","_tmpl$","_$spread","_$insert","_$runHydrationEvents"],"sources":["../src/Keyboard.tsx"],"sourcesContent":["/**\n * Keyboard primitive for solidaria-components.\n *\n * Displays keyboard key hints with semantic <kbd> markup.\n * Port direction: react-aria-components/src/Keyboard.tsx\n */\n\nimport { type JSX, createContext, splitProps, useContext } from \"solid-js\";\n\nexport interface KeyboardProps extends JSX.HTMLAttributes<HTMLElement> {\n  children?: JSX.Element;\n}\n\nexport const KeyboardContext = createContext<KeyboardProps | null>(null);\n\nexport function Keyboard(props: KeyboardProps): JSX.Element {\n  const context = useContext(KeyboardContext);\n  const merged = () => ({ ...context, ...props });\n  const [local, domProps] = splitProps(merged(), [\"children\"]);\n\n  return (\n    <kbd dir=\"ltr\" {...domProps}>\n      {local.children}\n    </kbd>\n  );\n}\n"],"mappings":";;;;;;;;;;AAaA,MAAaS,kBAAkBR,cAAoC,IAAI;AAEvE,SAAgBS,SAASC,OAAmC;CAC1D,MAAMC,UAAUT,WAAWM,eAAe;CAC1C,MAAMI,gBAAgB;EAAE,GAAGD;EAAS,GAAGD;CAAM;CAC7C,MAAM,CAACG,OAAOC,YAAYb,WAAWW,OAAO,GAAG,CAAC,UAAU,CAAC;CAE3D,cAAA;EAAA,IAAAG,OAAAC,eAAAC,MAAA;EAAAC,OAAAH,MACqBD,UAAQ,OAAA,IAAA;EAAAK,OAAAJ,YACxBF,MAAMP,QAAQ;EAAAc,mBAAA;EAAA,OAAAL;CAAA,EAAA,CAAA;AAGrB"}

package/dist/Keyboard.jsx

@@ -0,0 +1,24 @@
+import { createContext, splitProps, useContext } from "solid-js";
+//#region src/Keyboard.tsx
+/**
+* Keyboard primitive for solidaria-components.
+*
+* Displays keyboard key hints with semantic <kbd> markup.
+* Port direction: react-aria-components/src/Keyboard.tsx
+*/
+const KeyboardContext = createContext(null);
+function Keyboard(props) {
+	const context = useContext(KeyboardContext);
+	const merged = () => ({
+		...context,
+		...props
+	});
+	const [local, domProps] = splitProps(merged(), ["children"]);
+	return <kbd dir="ltr" {...domProps}>
+      {local.children}
+    </kbd>;
+}
+//#endregion
+export { Keyboard, KeyboardContext };
+
+//# sourceMappingURL=Keyboard.jsx.map

package/dist/Keyboard.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Keyboard.jsx","names":[],"sources":["../src/Keyboard.tsx"],"sourcesContent":["/**\n * Keyboard primitive for solidaria-components.\n *\n * Displays keyboard key hints with semantic <kbd> markup.\n * Port direction: react-aria-components/src/Keyboard.tsx\n */\n\nimport { type JSX, createContext, splitProps, useContext } from \"solid-js\";\n\nexport interface KeyboardProps extends JSX.HTMLAttributes<HTMLElement> {\n  children?: JSX.Element;\n}\n\nexport const KeyboardContext = createContext<KeyboardProps | null>(null);\n\nexport function Keyboard(props: KeyboardProps): JSX.Element {\n  const context = useContext(KeyboardContext);\n  const merged = () => ({ ...context, ...props });\n  const [local, domProps] = splitProps(merged(), [\"children\"]);\n\n  return (\n    <kbd dir=\"ltr\" {...domProps}>\n      {local.children}\n    </kbd>\n  );\n}\n"],"mappings":";;;;;;;;AAaA,MAAa,kBAAkB,cAAoC,IAAI;AAEvE,SAAgB,SAAS,OAAmC;CAC1D,MAAM,UAAU,WAAW,eAAe;CAC1C,MAAM,gBAAgB;EAAE,GAAG;EAAS,GAAG;CAAM;CAC7C,MAAM,CAAC,OAAO,YAAY,WAAW,OAAO,GAAG,CAAC,UAAU,CAAC;CAE3D,OACE,CAAC,IAAI,cAAc,UAAU;OAC1B,MAAM,SAAS;IAClB,EAAE;AAEN"}

package/dist/Landmark.js

@@ -0,0 +1,134 @@
+import { filterDOMProps } from "./utils.js";
+import { Dynamic, createComponent, mergeProps } from "solid-js/web";
+import { createContext, createMemo, createSignal, splitProps } from "solid-js";
+import { createLandmark, getLandmarkController } from "@proyecto-viviana/solidaria";
+//#region src/Landmark.tsx
+/**
+* Landmark component for solidaria-components
+*
+* Pre-wired headless landmark component that combines aria hooks.
+* Enables F6 keyboard navigation between major page sections.
+*/
+const LandmarkContext = createContext(null);
+/**
+* Maps ARIA landmark roles to their semantic HTML elements.
+* Using semantic elements is preferred when possible.
+*/
+const roleToSemanticElement = {
+	main: "main",
+	navigation: "nav",
+	search: "search",
+	banner: "header",
+	contentinfo: "footer",
+	complementary: "aside",
+	form: "form",
+	region: "section"
+};
+/**
+* A landmark is a region of the page that helps screen reader users navigate.
+* Press F6 to cycle through landmarks, or Shift+F6 to go backwards.
+*
+* @example
+* ```tsx
+* // Main content area
+* <Landmark role="main" aria-label="Main content">
+*   <h1>Welcome</h1>
+*   <p>Page content here...</p>
+* </Landmark>
+*
+* // Navigation
+* <Landmark role="navigation" aria-label="Primary navigation">
+*   <nav>...</nav>
+* </Landmark>
+*
+* // Search
+* <Landmark role="search" aria-label="Site search">
+*   <form>...</form>
+* </Landmark>
+*
+* // Custom element type
+* <Landmark role="region" aria-label="Featured content" elementType="div">
+*   ...
+* </Landmark>
+* ```
+*/
+function Landmark(props) {
+	const [local, ariaProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"children",
+		"elementType"
+	]);
+	const [ref, setRef] = createSignal();
+	const elementType = createMemo(() => {
+		if (local.elementType) return local.elementType;
+		return roleToSemanticElement[ariaProps.role] ?? "div";
+	});
+	const landmarkAria = createLandmark({
+		get role() {
+			return ariaProps.role;
+		},
+		get "aria-label"() {
+			return ariaProps["aria-label"];
+		},
+		get "aria-labelledby"() {
+			return ariaProps["aria-labelledby"];
+		},
+		get id() {
+			return ariaProps.id;
+		},
+		get focus() {
+			return ariaProps.focus;
+		}
+	}, ref);
+	const renderValues = createMemo(() => ({ role: ariaProps.role }));
+	const resolvedClass = createMemo(() => {
+		const cls = local.class;
+		if (typeof cls === "function") return cls(renderValues());
+		return cls ?? `solidaria-Landmark solidaria-Landmark--${ariaProps.role}`;
+	});
+	const resolvedStyle = createMemo(() => {
+		const style = local.style;
+		if (typeof style === "function") return style(renderValues());
+		return style;
+	});
+	const domProps = createMemo(() => filterDOMProps(ariaProps, { global: true }));
+	return createComponent(Dynamic, mergeProps({
+		get component() {
+			return elementType();
+		},
+		ref: setRef
+	}, domProps, () => landmarkAria.landmarkProps, {
+		get ["class"]() {
+			return resolvedClass();
+		},
+		get style() {
+			return resolvedStyle();
+		},
+		get slot() {
+			return local.slot;
+		},
+		get children() {
+			return props.children;
+		}
+	}));
+}
+/**
+* Returns a controller for programmatic landmark navigation.
+*
+* @example
+* ```tsx
+* const controller = useLandmarkController();
+*
+* <button onClick={() => controller.focusMain()}>Skip to main content</button>
+* <button onClick={() => controller.focusNext()}>Next landmark</button>
+* ```
+*/
+function useLandmarkController() {
+	return getLandmarkController();
+}
+//#endregion
+export { Landmark, LandmarkContext, useLandmarkController };
+
+//# sourceMappingURL=Landmark.js.map