@thewaver/ss-components 0.0.1 → 0.0.2

package/dist/Fundamentals/Input/TagInput/TagInput.css.js

@@ -0,0 +1,11 @@
+/* empty css                                     */
+/* empty css                            */
+//#region src/Fundamentals/Input/TagInput/TagInput.css.ts
+var tagInputRoot = "_1a0cg310";
+var tagInputTag = "_1a0cg311 _1lgjca40";
+var tagInputField = "_1a0cg312";
+var tagInputPlaceholder = "_1a0cg313";
+//#endregion
+export { tagInputField, tagInputPlaceholder, tagInputRoot, tagInputTag };
+
+//# sourceMappingURL=TagInput.css.js.map

package/dist/Fundamentals/Input/TagInput/TagInput.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagInput.css.js","names":[],"sources":["../../../../src/Fundamentals/Input/TagInput/TagInput.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\n\nimport { buttonElement } from \"../../Button/Button.css\";\n\nconst TAG_INPUT_FIELD_MIN_WIDTH = 60;\n\nexport const tagInputRoot = style({\n    display: \"flex\",\n    position: \"relative\",\n    flexWrap: \"wrap\",\n    alignItems: \"center\",\n    width: \"100%\",\n    pointerEvents: \"all\",\n    cursor: \"text\",\n});\n\nexport const tagInputTag = style([buttonElement, {}]);\n\nexport const tagInputField = style({\n    flex: \"1 0 100%\",\n    minWidth: TAG_INPUT_FIELD_MIN_WIDTH,\n    margin: 0,\n    padding: 0,\n    border: \"0 none\",\n    background: \"none\",\n    color: \"inherit\",\n    font: \"inherit\",\n    pointerEvents: \"all\",\n    userSelect: \"text\",\n    cursor: \"text\",\n\n    selectors: {\n        \"&:focus\": {\n            outline: \"0 none\",\n        },\n        \"&[aria-disabled='true']\": {\n            caretColor: \"transparent\",\n            cursor: \"not-allowed\",\n        },\n    },\n});\n\nexport const tagInputPlaceholder = style({\n    position: \"absolute\",\n    pointerEvents: \"none\",\n});\n"],"mappings":""}

package/dist/Fundamentals/Input/TagInput/TagInput.js

@@ -0,0 +1,189 @@
+import { access, accessSignal } from "../../../Utils/propUtils.js";
+import { SignalMirror } from "../../../Abstracts/SignalMirror/SignalMirror.js";
+import { InteractionWrapper } from "../../InteractionWrapper/InteractionWrapper.js";
+import { tagInputField, tagInputPlaceholder, tagInputRoot, tagInputTag } from "./TagInput.css.js";
+import { Index, Show, createMemo } from "solid-js";
+import { className, createComponent, delegateEvents, effect, insert, memo, mergeProps, setAttribute, setStyleProperty, style, template, use } from "solid-js/web";
+//#region src/Fundamentals/Input/TagInput/TagInput.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div role=group><input type=text>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<button type=button tabindex=-1>`);
+var DEFAULT_TAG_INPUT_GAP = 5;
+var DEFAULT_TAG_INPUT_PADDING = 0;
+var TagInput = (props) => {
+	const valueSignal = accessSignal(() => props.valueSignal);
+	let fieldRef;
+	let tagRefs = [];
+	const textSignal = SignalMirror.createOptional(() => props.textSignal, "");
+	const getIsDisabled = createMemo(() => access(props.isDisabled) ?? false);
+	const getTags = () => valueSignal[0]();
+	const getIsEmpty = createMemo(() => textSignal[0]().length < 1);
+	const setTags = (tags) => {
+		valueSignal[1](() => tags);
+		props.onTagsChange?.(tags);
+	};
+	const focusTag = (index) => {
+		tagRefs[index]?.focus();
+	};
+	const focusField = () => {
+		fieldRef?.focus();
+	};
+	const addTag = () => {
+		const text = textSignal[0]();
+		const tag = props.computeTag ? props.computeTag(text) : text.trim();
+		if (!tag) return;
+		setTags([...getTags(), tag]);
+		textSignal[1]("");
+	};
+	const removeTag = (index) => {
+		const tags = getTags();
+		setTags(tags.filter((_, position) => position !== index));
+		if (index > 0) {
+			focusTag(index - 1);
+			return;
+		}
+		if (tags.length > 1) {
+			focusTag(0);
+			return;
+		}
+		focusField();
+	};
+	const handleFieldKeyDown = (e) => {
+		if (getIsDisabled()) return;
+		if (e.key === "Enter") {
+			e.preventDefault();
+			addTag();
+			return;
+		}
+		if (!getIsEmpty() || getTags().length < 1) return;
+		if (e.key === "Backspace" || e.key === "ArrowLeft") {
+			e.preventDefault();
+			focusTag(getTags().length - 1);
+		}
+	};
+	const handleTagKeyDown = (e, index) => {
+		if (getIsDisabled()) return;
+		if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+			focusField();
+			return;
+		}
+		if (e.key === "Backspace" || e.key === "Delete") {
+			e.preventDefault();
+			removeTag(index);
+			return;
+		}
+		if (e.key === "ArrowLeft" && index > 0) {
+			e.preventDefault();
+			focusTag(index - 1);
+			return;
+		}
+		if (e.key === "ArrowRight") {
+			e.preventDefault();
+			if (index < getTags().length - 1) {
+				focusTag(index + 1);
+				return;
+			}
+			focusField();
+		}
+	};
+	return createComponent(InteractionWrapper, mergeProps(props, {
+		extraFlags: () => ({
+			isEmpty: getIsEmpty(),
+			hasTags: getTags().length > 0
+		}),
+		renderControl: (setElementRef, getFlags) => [memo(() => props.renderContent?.(getFlags)), (() => {
+			var _el$ = _tmpl$2(), _el$2 = _el$.firstChild;
+			_el$.$$pointerdown = (e) => {
+				if (e.target !== e.currentTarget) return;
+				e.preventDefault();
+				focusField();
+			};
+			className(_el$, tagInputRoot);
+			insert(_el$, createComponent(Index, {
+				get each() {
+					return getTags();
+				},
+				children: (getTag, index) => createComponent(InteractionWrapper, {
+					isDisabled: () => getFlags().isDisabled ?? false,
+					renderControl: (setTagRef, getTagFlags) => (() => {
+						var _el$4 = _tmpl$3();
+						_el$4.$$keydown = (e) => handleTagKeyDown(e, index);
+						_el$4.$$click = () => {
+							if (getTagFlags().isDisabled) return;
+							removeTag(index);
+						};
+						use((element) => {
+							tagRefs[index] = element;
+							setTagRef(element);
+						}, _el$4);
+						className(_el$4, tagInputTag);
+						insert(_el$4, () => props.renderTag(getTag, getTagFlags));
+						effect((_p$) => {
+							var _v$0 = props.computeTagAriaLabel?.(getTag()) ?? getTag(), _v$1 = getTagFlags().isDisabled || void 0;
+							_v$0 !== _p$.e && setAttribute(_el$4, "aria-label", _p$.e = _v$0);
+							_v$1 !== _p$.t && setAttribute(_el$4, "aria-disabled", _p$.t = _v$1);
+							return _p$;
+						}, {
+							e: void 0,
+							t: void 0
+						});
+						return _el$4;
+					})()
+				})
+			}), _el$2);
+			_el$2.$$keydown = handleFieldKeyDown;
+			_el$2.$$input = (e) => textSignal[1](e.currentTarget.value);
+			use((element) => {
+				fieldRef = element;
+				setElementRef(element);
+			}, _el$2);
+			className(_el$2, tagInputField);
+			insert(_el$, createComponent(Show, {
+				get when() {
+					return memo(() => !!(props.renderPlaceholder && getIsEmpty()))() && getTags().length < 1;
+				},
+				get children() {
+					var _el$3 = _tmpl$();
+					className(_el$3, tagInputPlaceholder);
+					insert(_el$3, () => props.renderPlaceholder(getFlags));
+					return _el$3;
+				}
+			}), null);
+			effect((_p$) => {
+				var _v$ = `${access(props.gap) ?? DEFAULT_TAG_INPUT_GAP}px`, _v$2 = `${access(props.padding) ?? DEFAULT_TAG_INPUT_PADDING}px`, _v$3 = access(props.ariaLabel), _v$4 = access(props.id), _v$5 = access(props.name), _v$6 = props.computeTextStyle?.(getFlags), _v$7 = getFlags().isDisabled, _v$8 = access(props.ariaLabel), _v$9 = getFlags().isDisabled || void 0;
+				_v$ !== _p$.e && setStyleProperty(_el$, "gap", _p$.e = _v$);
+				_v$2 !== _p$.t && setStyleProperty(_el$, "padding", _p$.t = _v$2);
+				_v$3 !== _p$.a && setAttribute(_el$, "aria-label", _p$.a = _v$3);
+				_v$4 !== _p$.o && setAttribute(_el$2, "id", _p$.o = _v$4);
+				_v$5 !== _p$.i && setAttribute(_el$2, "name", _p$.i = _v$5);
+				_p$.n = style(_el$2, _v$6, _p$.n);
+				_v$7 !== _p$.s && (_el$2.readOnly = _p$.s = _v$7);
+				_v$8 !== _p$.h && setAttribute(_el$2, "aria-label", _p$.h = _v$8);
+				_v$9 !== _p$.r && setAttribute(_el$2, "aria-disabled", _p$.r = _v$9);
+				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
+			});
+			effect(() => _el$2.value = textSignal[0]());
+			return _el$;
+		})()]
+	}));
+};
+delegateEvents([
+	"pointerdown",
+	"input",
+	"keydown",
+	"click"
+]);
+//#endregion
+export { TagInput };
+
+//# sourceMappingURL=TagInput.js.map

package/dist/Fundamentals/Input/TagInput/TagInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagInput.js","names":["Index","Show","createMemo","SignalMirror","access","accessSignal","InteractionWrapper","TagInputProps","styles","DEFAULT_TAG_INPUT_GAP","DEFAULT_TAG_INPUT_PADDING","TagInput","props","valueSignal","fieldRef","HTMLInputElement","tagRefs","HTMLElement","textSignal","createOptional","getIsDisabled","isDisabled","getTags","getIsEmpty","length","setTags","tags","onTagsChange","focusTag","index","focus","focusField","addTag","text","tag","computeTag","trim","removeTag","filter","_","position","handleFieldKeyDown","e","KeyboardEvent","key","preventDefault","handleTagKeyDown","ctrlKey","metaKey","altKey","_$createComponent","_$mergeProps","extraFlags","isEmpty","hasTags","renderControl","setElementRef","getFlags","_$memo","renderContent","_el$","_tmpl$2","_el$2","firstChild","$$pointerdown","target","currentTarget","_$className","tagInputRoot","_$insert","each","children","getTag","setTagRef","getTagFlags","_el$4","_tmpl$3","$$keydown","$$click","_$use","element","tagInputTag","renderTag","_$effect","_p$","_v$0","computeTagAriaLabel","_v$1","undefined","_$setAttribute","t","$$input","value","tagInputField","when","renderPlaceholder","_el$3","_tmpl$","tagInputPlaceholder","_v$","gap","_v$2","padding","_v$3","ariaLabel","_v$4","id","_v$5","name","_v$6","computeTextStyle","_v$7","_v$8","_v$9","_$setStyleProperty","a","o","i","n","_$style","s","readOnly","h","r","_$delegateEvents"],"sources":["../../../../src/Fundamentals/Input/TagInput/TagInput.tsx"],"sourcesContent":["import { Index, Show, createMemo } from \"solid-js\";\r\n\r\nimport { SignalMirror } from \"../../../Abstracts/SignalMirror/SignalMirror\";\r\nimport { access, accessSignal } from \"../../../Utils/propUtils\";\r\nimport { InteractionWrapper } from \"../../InteractionWrapper/InteractionWrapper\";\r\nimport type { TagInputProps } from \"./TagInput.types\";\r\n\r\nimport * as styles from \"./TagInput.css\";\r\n\r\nconst DEFAULT_TAG_INPUT_GAP = 5;\r\nconst DEFAULT_TAG_INPUT_PADDING = 0;\r\n\r\nexport const TagInput = (props: TagInputProps) => {\r\n    const valueSignal = accessSignal(() => props.valueSignal);\r\n\r\n    let fieldRef: HTMLInputElement | undefined;\r\n    let tagRefs: (HTMLElement | undefined)[] = [];\r\n\r\n    const textSignal = SignalMirror.createOptional(() => props.textSignal, \"\");\r\n\r\n    const getIsDisabled = createMemo(() => access(props.isDisabled) ?? false);\r\n\r\n    const getTags = () => valueSignal[0]();\r\n\r\n    const getIsEmpty = createMemo(() => textSignal[0]().length < 1);\r\n\r\n    const setTags = (tags: string[]) => {\r\n        valueSignal[1](() => tags);\r\n\r\n        void props.onTagsChange?.(tags);\r\n    };\r\n\r\n    const focusTag = (index: number) => {\r\n        tagRefs[index]?.focus();\r\n    };\r\n\r\n    const focusField = () => {\r\n        fieldRef?.focus();\r\n    };\r\n\r\n    const addTag = () => {\r\n        const text = textSignal[0]();\r\n        const tag = props.computeTag ? props.computeTag(text) : text.trim();\r\n\r\n        if (!tag) return;\r\n\r\n        setTags([...getTags(), tag]);\r\n        textSignal[1](\"\");\r\n    };\r\n\r\n    const removeTag = (index: number) => {\r\n        const tags = getTags();\r\n\r\n        setTags(tags.filter((_, position) => position !== index));\r\n\r\n        if (index > 0) {\r\n            focusTag(index - 1);\r\n            return;\r\n        }\r\n\r\n        if (tags.length > 1) {\r\n            focusTag(0);\r\n            return;\r\n        }\r\n\r\n        focusField();\r\n    };\r\n\r\n    const handleFieldKeyDown = (e: KeyboardEvent) => {\r\n        if (getIsDisabled()) return;\r\n\r\n        if (e.key === \"Enter\") {\r\n            e.preventDefault();\r\n            addTag();\r\n            return;\r\n        }\r\n\r\n        if (!getIsEmpty() || getTags().length < 1) return;\r\n\r\n        if (e.key === \"Backspace\" || e.key === \"ArrowLeft\") {\r\n            e.preventDefault();\r\n            focusTag(getTags().length - 1);\r\n        }\r\n    };\r\n\r\n    const handleTagKeyDown = (e: KeyboardEvent, index: number) => {\r\n        if (getIsDisabled()) return;\r\n\r\n        if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {\r\n            focusField();\r\n            return;\r\n        }\r\n\r\n        if (e.key === \"Backspace\" || e.key === \"Delete\") {\r\n            e.preventDefault();\r\n            removeTag(index);\r\n            return;\r\n        }\r\n\r\n        if (e.key === \"ArrowLeft\" && index > 0) {\r\n            e.preventDefault();\r\n            focusTag(index - 1);\r\n            return;\r\n        }\r\n\r\n        if (e.key === \"ArrowRight\") {\r\n            e.preventDefault();\r\n\r\n            if (index < getTags().length - 1) {\r\n                focusTag(index + 1);\r\n                return;\r\n            }\r\n\r\n            focusField();\r\n        }\r\n    };\r\n\r\n    return (\r\n        <InteractionWrapper\r\n            {...props}\r\n            extraFlags={() => ({ isEmpty: getIsEmpty(), hasTags: getTags().length > 0 })}\r\n            renderControl={(setElementRef, getFlags) => (\r\n                <>\r\n                    {props.renderContent?.(getFlags)}\r\n\r\n                    <div\r\n                        class={styles.tagInputRoot}\r\n                        style={{\r\n                            gap: `${access(props.gap) ?? DEFAULT_TAG_INPUT_GAP}px`,\r\n                            padding: `${access(props.padding) ?? DEFAULT_TAG_INPUT_PADDING}px`,\r\n                        }}\r\n                        role=\"group\"\r\n                        aria-label={access(props.ariaLabel)}\r\n                        onPointerDown={(e) => {\r\n                            if (e.target !== e.currentTarget) return;\r\n\r\n                            e.preventDefault();\r\n                            focusField();\r\n                        }}\r\n                    >\r\n                        <Index each={getTags()}>\r\n                            {(getTag, index) => (\r\n                                <InteractionWrapper\r\n                                    isDisabled={() => getFlags().isDisabled ?? false}\r\n                                    renderControl={(setTagRef, getTagFlags) => (\r\n                                        <button\r\n                                            type=\"button\"\r\n                                            ref={(element) => {\r\n                                                tagRefs[index] = element;\r\n                                                setTagRef(element);\r\n                                            }}\r\n                                            class={styles.tagInputTag}\r\n                                            tabindex={-1}\r\n                                            aria-label={props.computeTagAriaLabel?.(getTag()) ?? getTag()}\r\n                                            aria-disabled={getTagFlags().isDisabled || undefined}\r\n                                            onClick={() => {\r\n                                                if (getTagFlags().isDisabled) return;\r\n\r\n                                                removeTag(index);\r\n                                            }}\r\n                                            onKeyDown={(e) => handleTagKeyDown(e, index)}\r\n                                        >\r\n                                            {props.renderTag(getTag, getTagFlags)}\r\n                                        </button>\r\n                                    )}\r\n                                />\r\n                            )}\r\n                        </Index>\r\n\r\n                        <input\r\n                            ref={(element) => {\r\n                                fieldRef = element;\r\n                                setElementRef(element);\r\n                            }}\r\n                            id={access(props.id)}\r\n                            type=\"text\"\r\n                            name={access(props.name)}\r\n                            class={styles.tagInputField}\r\n                            style={props.computeTextStyle?.(getFlags)}\r\n                            value={textSignal[0]()}\r\n                            readOnly={getFlags().isDisabled}\r\n                            aria-label={access(props.ariaLabel)}\r\n                            aria-disabled={getFlags().isDisabled || undefined}\r\n                            onInput={(e) => textSignal[1](e.currentTarget.value)}\r\n                            onKeyDown={handleFieldKeyDown}\r\n                        />\r\n\r\n                        <Show when={props.renderPlaceholder && getIsEmpty() && getTags().length < 1}>\r\n                            <div class={styles.tagInputPlaceholder}>{props.renderPlaceholder!(getFlags)}</div>\r\n                        </Show>\r\n                    </div>\r\n                </>\r\n            )}\r\n        />\r\n    );\r\n};\r\n"],"mappings":"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"}

package/dist/Fundamentals/Input/TextArea/TextArea.js

@@ -0,0 +1,8 @@
+import { TextField } from "../TextField/TextField.js";
+import { createComponent, mergeProps } from "solid-js/web";
+//#region src/Fundamentals/Input/TextArea/TextArea.tsx
+var TextArea = (props) => createComponent(TextField, mergeProps(props, { element: "textarea" }));
+//#endregion
+export { TextArea };
+
+//# sourceMappingURL=TextArea.js.map

package/dist/Fundamentals/Input/TextArea/TextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","names":["TextField","TextAreaProps","TextArea","props","_$createComponent","_$mergeProps","element"],"sources":["../../../../src/Fundamentals/Input/TextArea/TextArea.tsx"],"sourcesContent":["import { TextField } from \"../TextField/TextField\";\nimport type { TextAreaProps } from \"./TextArea.types\";\n\nexport const TextArea = (props: TextAreaProps) => <TextField {...props} element={\"textarea\"} />;\n"],"mappings":";;;AAGA,IAAaE,YAAYC,UAAoBC,gBAAMJ,WAASK,WAAKF,OAAK,EAAEG,SAAS,WAAU,CAAA,CAAA"}

package/dist/Fundamentals/Input/TextField/TextField.css.js

@@ -0,0 +1,10 @@
+/* empty css                             */
+//#region src/Fundamentals/Input/TextField/TextField.css.ts
+var textFieldPlaceholder = "f7abf70";
+var textFieldAdornment = "f7abf71";
+var textFieldElement = "f7abf72";
+var textFieldTextArea = "f7abf73";
+//#endregion
+export { textFieldAdornment, textFieldElement, textFieldPlaceholder, textFieldTextArea };
+
+//# sourceMappingURL=TextField.css.js.map

package/dist/Fundamentals/Input/TextField/TextField.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.css.js","names":[],"sources":["../../../../src/Fundamentals/Input/TextField/TextField.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\n\nexport const textFieldPlaceholder = style({\n    position: \"absolute\",\n    inset: 0,\n    pointerEvents: \"none\",\n});\n\nexport const textFieldAdornment = style({\n    position: \"absolute\",\n    top: 0,\n    bottom: 0,\n    display: \"flex\",\n    alignItems: \"center\",\n});\n\nexport const textFieldElement = style({\n    appearance: \"none\",\n    MozAppearance: \"textfield\",\n    position: \"absolute\",\n    inset: 0,\n    width: \"auto !important\",\n    height: \"auto !important\",\n    minWidth: \"0 !important\",\n    margin: \"0 !important\",\n    border: \"none !important\",\n    borderRadius: \"0 !important\",\n    background: \"transparent !important\",\n    boxShadow: \"none !important\",\n    font: \"inherit\",\n    color: \"inherit\",\n    pointerEvents: \"all\",\n    userSelect: \"text\",\n    cursor: \"text !important\",\n\n    selectors: {\n        \"&::-webkit-outer-spin-button, &::-webkit-inner-spin-button\": {\n            appearance: \"none\",\n            margin: 0,\n        },\n        \"&[aria-disabled='true']\": {\n            caretColor: \"transparent !important\",\n            cursor: \"not-allowed !important\",\n        },\n    },\n});\n\nexport const textFieldTextArea = style({\n    resize: \"none\",\n    overflowX: \"hidden\",\n});\n"],"mappings":""}

package/dist/Fundamentals/Input/TextField/TextField.js

@@ -0,0 +1,351 @@
+import { access } from "../../../Utils/propUtils.js";
+import { TextSync } from "../../../Abstracts/TextSync/TextSync.js";
+import { LabelUtils } from "../Label/Label.utils.js";
+import { InteractionWrapper } from "../../InteractionWrapper/InteractionWrapper.js";
+import { FormFieldUtils } from "../FormField/FormField.utils.js";
+import { textFieldElement, textFieldTextArea } from "./TextField.css.js";
+import { createEffect, createMemo, createSignal, onCleanup } from "solid-js";
+import { CSSUtils, MathUtils, StringUtils } from "@thewaver/ss-utils";
+import { Dynamic, className, createComponent, effect, insert, memo, mergeProps, setStyleProperty, style, template, use } from "solid-js/web";
+//#region src/Fundamentals/Input/TextField/TextField.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var DEFAULT_TEXT_FIELD_TYPE = "text";
+var DEFAULT_TEXT_FIELD_PADDING = 0;
+var DEFAULT_TEXT_FIELD_GAP = 0;
+var DEFAULT_TEXT_FIELD_MIN_ROWS = 2;
+var FALLBACK_LINE_HEIGHT_RATIO = 1.2;
+var createAdornmentWidth = (getRef) => {
+	const [getWidth, setWidth] = createSignal(0);
+	createEffect(() => {
+		const ref = getRef();
+		if (!ref) {
+			setWidth(0);
+			return;
+		}
+		setWidth(ref.offsetWidth);
+		const observer = new ResizeObserver(([entry]) => {
+			setWidth(entry.borderBoxSize[0].inlineSize);
+		});
+		observer.observe(ref);
+		onCleanup(() => {
+			observer.disconnect();
+		});
+	});
+	return getWidth;
+};
+var measureContentHeight = (element, minRows, maxRows) => {
+	const style = getComputedStyle(element);
+	const lineHeight = parseFloat(style.lineHeight) || parseFloat(style.fontSize) * FALLBACK_LINE_HEIGHT_RATIO;
+	const framing = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
+	element.style.bottom = "auto";
+	const contentHeight = element.scrollHeight;
+	element.style.bottom = "";
+	const floor = minRows * lineHeight + framing;
+	const ceiling = maxRows === void 0 ? Number.POSITIVE_INFINITY : maxRows * lineHeight + framing;
+	return MathUtils.clamp(contentHeight, floor, ceiling);
+};
+var createAutoHeight = (getRef, getIsEnabled, getMinRows, getMaxRows, getValue) => {
+	const [getHeight, setHeight] = createSignal(0);
+	const measure = (element) => {
+		setHeight(measureContentHeight(element, getMinRows(), getMaxRows()));
+	};
+	createEffect(() => {
+		const ref = getRef();
+		if (!ref || !getIsEnabled()) {
+			setHeight(0);
+			return;
+		}
+		getValue();
+		getMinRows();
+		getMaxRows();
+		measure(ref);
+	});
+	createEffect(() => {
+		const ref = getRef();
+		if (!ref || !getIsEnabled()) return;
+		let lastWidth = ref.clientWidth;
+		const observer = new ResizeObserver(([entry]) => {
+			const width = entry.contentBoxSize[0].inlineSize;
+			if (width === lastWidth) return;
+			lastWidth = width;
+			measure(ref);
+		});
+		observer.observe(ref);
+		onCleanup(() => {
+			observer.disconnect();
+		});
+	});
+	return getHeight;
+};
+var TextFieldElement = (props) => {
+	const getAriaLabel = LabelUtils.resolveAriaLabel(props.ariaLabel === void 0 ? void 0 : () => access(props.ariaLabel));
+	const getAriaDescribedBy = FormFieldUtils.resolveAriaDescribedBy();
+	const [getElementRef, setElementRef] = createSignal();
+	const getIsDisabled = () => access(props.flags).isDisabled ?? false;
+	const getIsReadOnly = () => access(props.flags).isReadOnly;
+	const getIsTextArea = () => access(props.element) === "textarea";
+	const getIsAutoSizing = () => getIsTextArea() && (access(props.isAutoSizing) ?? false);
+	const getType = () => getIsTextArea() ? void 0 : access(props.type) ?? DEFAULT_TEXT_FIELD_TYPE;
+	const getIsSpinButton = () => access(props.isSpinButton) ?? false;
+	const getValueNow = () => {
+		const parsed = Number(access(props.value));
+		return access(props.value) !== "" && Number.isFinite(parsed) ? parsed : void 0;
+	};
+	const getOverflowY = () => {
+		if (!getIsTextArea()) return void 0;
+		return getIsAutoSizing() && access(props.maxRows) === void 0 ? "hidden" : "auto";
+	};
+	const { handleInput, handleCompositionStart, handleCompositionEnd } = TextSync.createValueSync(getElementRef, () => access(props.value), {
+		onInput: (value) => {
+			props.onInput?.(value);
+		},
+		computeMaskedText: props.computeMaskedText
+	});
+	return [
+		memo(() => props.renderContent(() => access(props.flags))),
+		memo(() => memo(() => !!props.renderPlaceholder)() && (() => {
+			var _el$ = _tmpl$();
+			className(_el$, "f7abf70");
+			insert(_el$, () => props.renderPlaceholder(() => access(props.flags), access(props.placeholderHint)));
+			effect((_$p) => style(_el$, access(props.textInset), _$p));
+			return _el$;
+		})()),
+		createComponent(Dynamic, {
+			get component() {
+				return access(props.element);
+			},
+			get id() {
+				return access(props.id);
+			},
+			ref: (element) => {
+				setElementRef(element);
+				props.ref?.(element);
+			},
+			get type() {
+				return getType();
+			},
+			get rows() {
+				return getIsAutoSizing() ? 1 : void 0;
+			},
+			get name() {
+				return access(props.name);
+			},
+			"class": textFieldElement,
+			get classList() {
+				return { [textFieldTextArea]: getIsTextArea() };
+			},
+			get style() {
+				return {
+					...access(props.textInset),
+					...props.computeTextStyle?.(() => access(props.flags)),
+					"overflow-y": getOverflowY()
+				};
+			},
+			get autocomplete() {
+				return access(props.autoComplete);
+			},
+			get inputMode() {
+				return access(props.inputMode);
+			},
+			get min() {
+				return memo(() => getType() === "number")() ? access(props.min) : void 0;
+			},
+			get max() {
+				return memo(() => getType() === "number")() ? access(props.max) : void 0;
+			},
+			get step() {
+				return memo(() => getType() === "number")() ? access(props.step) : void 0;
+			},
+			get readOnly() {
+				return getIsDisabled() || getIsReadOnly();
+			},
+			get role() {
+				return getIsSpinButton() ? "spinbutton" : void 0;
+			},
+			get ["aria-label"]() {
+				return getAriaLabel();
+			},
+			get ["aria-describedby"]() {
+				return getAriaDescribedBy();
+			},
+			get ["aria-valuenow"]() {
+				return memo(() => !!getIsSpinButton())() ? getValueNow() : void 0;
+			},
+			get ["aria-valuemin"]() {
+				return memo(() => !!getIsSpinButton())() ? access(props.min) : void 0;
+			},
+			get ["aria-valuemax"]() {
+				return memo(() => !!getIsSpinButton())() ? access(props.max) : void 0;
+			},
+			get ["aria-disabled"]() {
+				return getIsDisabled() || void 0;
+			},
+			get ["aria-readonly"]() {
+				return getIsReadOnly() || void 0;
+			},
+			get ["aria-invalid"]() {
+				return access(props.flags).hasError || void 0;
+			},
+			onInput: (e) => handleInput(e.currentTarget),
+			onCompositionStart: handleCompositionStart,
+			onCompositionEnd: (e) => handleCompositionEnd(e.currentTarget),
+			onKeyDown: (e) => {
+				if (getIsDisabled()) return;
+				props.onKeyDown?.(e);
+			},
+			onBlur: () => {
+				if (getIsDisabled()) return;
+				props.onBlur?.();
+			},
+			onMouseEnter: (e) => {
+				if (getIsDisabled()) return;
+				props.onMouseEnter?.(e);
+			},
+			onMouseLeave: (e) => {
+				if (getIsDisabled()) return;
+				props.onMouseLeave?.(e);
+			}
+		}),
+		memo(() => memo(() => !!props.renderLeading)() && (() => {
+			var _el$2 = _tmpl$();
+			var _ref$ = props.setLeadingRef;
+			typeof _ref$ === "function" ? use(_ref$, _el$2) : props.setLeadingRef = _el$2;
+			className(_el$2, "f7abf71");
+			insert(_el$2, () => props.renderLeading(() => access(props.flags)));
+			effect((_$p) => setStyleProperty(_el$2, "left", `${access(props.spreadPadding).paddingLeft}px`));
+			return _el$2;
+		})()),
+		memo(() => memo(() => !!props.renderTrailing)() && (() => {
+			var _el$3 = _tmpl$();
+			var _ref$2 = props.setTrailingRef;
+			typeof _ref$2 === "function" ? use(_ref$2, _el$3) : props.setTrailingRef = _el$3;
+			className(_el$3, "f7abf71");
+			insert(_el$3, () => props.renderTrailing(() => access(props.flags)));
+			effect((_$p) => setStyleProperty(_el$3, "right", `${access(props.spreadPadding).paddingRight}px`));
+			return _el$3;
+		})())
+	];
+};
+var TextField = (props) => {
+	const [getControlRef, setControlRef] = createSignal();
+	const [getLeadingRef, setLeadingRef] = createSignal();
+	const [getTrailingRef, setTrailingRef] = createSignal();
+	const getLeadingWidth = createAdornmentWidth(getLeadingRef);
+	const getTrailingWidth = createAdornmentWidth(getTrailingRef);
+	const getIsAutoSizing = createMemo(() => access(props.element) === "textarea" && (access(props.isAutoSizing) ?? false));
+	const getMinRows = () => access(props.minRows) ?? DEFAULT_TEXT_FIELD_MIN_ROWS;
+	const getMaxRows = () => access(props.maxRows);
+	const getMinHeight = createAutoHeight(getControlRef, getIsAutoSizing, getMinRows, getMaxRows, () => props.valueSignal[0]());
+	const getSpreadPadding = createMemo(() => {
+		const padding = access(props.padding) ?? DEFAULT_TEXT_FIELD_PADDING;
+		return typeof padding === "number" ? CSSUtils.spreadPadding(padding) : padding;
+	});
+	const getGap = () => access(props.gap) ?? DEFAULT_TEXT_FIELD_GAP;
+	const computeInset = (edge, adornmentWidth) => edge + (adornmentWidth ? adornmentWidth + getGap() : 0);
+	const getLeadingInset = createMemo(() => computeInset(getSpreadPadding().paddingLeft, getLeadingWidth()));
+	const getTrailingInset = createMemo(() => computeInset(getSpreadPadding().paddingRight, getTrailingWidth()));
+	const getTextInset = createMemo(() => CSSUtils.spreadableToStyle({
+		...getSpreadPadding(),
+		paddingLeft: getLeadingInset(),
+		paddingRight: getTrailingInset()
+	}, StringUtils.camelToKebabCase));
+	return createComponent(InteractionWrapper, mergeProps(props, {
+		extraFlags: () => ({
+			isEmpty: props.valueSignal[0]() === "",
+			isReadOnly: access(props.isReadOnly) ?? false
+		}),
+		minWidth: () => getLeadingInset() + getTrailingInset(),
+		minHeight: getMinHeight,
+		renderControl: (setElementRef, getFlags) => createComponent(TextFieldElement, {
+			ref: (element) => {
+				setElementRef(element);
+				setControlRef(element);
+			},
+			get id() {
+				return props.id;
+			},
+			get element() {
+				return props.element;
+			},
+			get type() {
+				return props.type;
+			},
+			get name() {
+				return props.name;
+			},
+			get ariaLabel() {
+				return props.ariaLabel;
+			},
+			get isSpinButton() {
+				return props.isSpinButton;
+			},
+			get autoComplete() {
+				return props.autoComplete;
+			},
+			get inputMode() {
+				return props.inputMode;
+			},
+			get computeMaskedText() {
+				return props.computeMaskedText;
+			},
+			get placeholderHint() {
+				return props.placeholderHint;
+			},
+			get min() {
+				return props.min;
+			},
+			get max() {
+				return props.max;
+			},
+			get step() {
+				return props.step;
+			},
+			isAutoSizing: getIsAutoSizing,
+			minRows: getMinRows,
+			get maxRows() {
+				return props.maxRows;
+			},
+			flags: getFlags,
+			value: () => props.valueSignal[0](),
+			textInset: getTextInset,
+			spreadPadding: getSpreadPadding,
+			setLeadingRef,
+			setTrailingRef,
+			get computeTextStyle() {
+				return props.computeTextStyle;
+			},
+			get renderContent() {
+				return props.renderContent;
+			},
+			get renderPlaceholder() {
+				return props.renderPlaceholder;
+			},
+			get renderLeading() {
+				return props.renderLeading;
+			},
+			get renderTrailing() {
+				return props.renderTrailing;
+			},
+			onInput: (value) => {
+				props.valueSignal[1](value);
+				props.onInput?.(value);
+			},
+			get onKeyDown() {
+				return props.onKeyDown;
+			},
+			get onBlur() {
+				return props.onBlur;
+			},
+			get onMouseEnter() {
+				return props.onMouseEnter;
+			},
+			get onMouseLeave() {
+				return props.onMouseLeave;
+			}
+		})
+	}));
+};
+//#endregion
+export { TextField };
+
+//# sourceMappingURL=TextField.js.map