solid-tiny-ui 0.5.0 → 0.6.0

package/dist/components/form-components/password-input/password-input.js

@@ -0,0 +1,95 @@
+import { EyeLine } from "../../../icons/eye-line.js";
+import { EyeOffLine } from "../../../icons/eye-off-line.js";
+import "../../../icons/index.js";
+import { createClassStyles, extraAriasAndDatasets } from "../../../utils/index.js";
+import password_input_default from "../../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/form-components/password-input/password-input.js";
+import { className, createComponent, delegateEvents, effect, insert, memo, mergeProps, setAttribute, spread, style, template } from "solid-js/web";
+import { createSignal } from "solid-js";
+import { combineClass, combineStyle, dataIf, mountStyle } from "solid-tiny-utils";
+
+//#region src/components/form-components/password-input/password-input.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div><input><button type=button>`);
+function PasswordInput(props) {
+	mountStyle(password_input_default, "tiny-password-input");
+	const [visible, setVisible] = createSignal(false);
+	const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles, () => ({
+		disabled: props.disabled ?? false,
+		invalid: props.invalid ?? false,
+		size: props.size || "medium",
+		visible: visible()
+	}));
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter") {
+			props.onPressEnter?.(e);
+			e.currentTarget.blur();
+		}
+	};
+	return (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+		spread(_el$2, mergeProps(() => extraAriasAndDatasets(props), {
+			get ["class"]() {
+				return combineClass("tiny-password-input", classes().input);
+			},
+			get disabled() {
+				return props.disabled;
+			},
+			get id() {
+				return props.id;
+			},
+			get name() {
+				return props.name;
+			},
+			"onInput": (e) => {
+				props.onChange?.(e.currentTarget.value);
+			},
+			"onKeyDown": handleKeyDown,
+			get placeholder() {
+				return props.placeholder;
+			},
+			get style() {
+				return combineStyle({}, styles().input);
+			},
+			get type() {
+				return visible() ? "text" : "password";
+			},
+			get value() {
+				return props.value;
+			}
+		}), false, false);
+		_el$3.$$click = () => setVisible(!visible());
+		insert(_el$3, (() => {
+			var _c$ = memo(() => !!visible());
+			return () => _c$() ? createComponent(EyeOffLine, {}) : createComponent(EyeLine, {});
+		})());
+		effect((_p$) => {
+			var _v$ = combineClass("tiny-password-input-wrapper", classes().wrapper), _v$2 = dataIf(props.disabled ?? false), _v$3 = dataIf(props.invalid ?? false), _v$4 = props.size || "medium", _v$5 = combineStyle({ width: props.width }, styles().wrapper), _v$6 = visible() ? "Hide password" : "Show password", _v$7 = combineClass("tiny-password-input-toggle", classes().toggle), _v$8 = dataIf(props.disabled ?? false), _v$9 = props.disabled, _v$0 = combineStyle({}, styles().toggle);
+			_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "data-disabled", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$, "data-invalid", _p$.a = _v$3);
+			_v$4 !== _p$.o && setAttribute(_el$, "data-size", _p$.o = _v$4);
+			_p$.i = style(_el$, _v$5, _p$.i);
+			_v$6 !== _p$.n && setAttribute(_el$3, "aria-label", _p$.n = _v$6);
+			_v$7 !== _p$.s && className(_el$3, _p$.s = _v$7);
+			_v$8 !== _p$.h && setAttribute(_el$3, "data-disabled", _p$.h = _v$8);
+			_v$9 !== _p$.r && (_el$3.disabled = _p$.r = _v$9);
+			_p$.d = style(_el$3, _v$0, _p$.d);
+			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
+		});
+		return _el$;
+	})();
+}
+delegateEvents(["click"]);
+
+//#endregion
+export { PasswordInput };

package/dist/components/form-components/password-input/password-input.jsx

@@ -0,0 +1,36 @@
+import { EyeLine } from "../../../icons/eye-line.jsx";
+import { EyeOffLine } from "../../../icons/eye-off-line.jsx";
+import "../../../icons/index.jsx";
+import { createClassStyles, extraAriasAndDatasets } from "../../../utils/index.jsx";
+import password_input_default from "../../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/form-components/password-input/password-input.jsx";
+import { createSignal } from "solid-js";
+import { combineClass, combineStyle, dataIf, mountStyle } from "solid-tiny-utils";
+
+//#region src/components/form-components/password-input/password-input.tsx
+function PasswordInput(props) {
+	mountStyle(password_input_default, "tiny-password-input");
+	const [visible, setVisible] = createSignal(false);
+	const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles, () => ({
+		disabled: props.disabled ?? false,
+		invalid: props.invalid ?? false,
+		size: props.size || "medium",
+		visible: visible()
+	}));
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter") {
+			props.onPressEnter?.(e);
+			e.currentTarget.blur();
+		}
+	};
+	return <div class={combineClass("tiny-password-input-wrapper", classes().wrapper)} data-disabled={dataIf(props.disabled ?? false)} data-invalid={dataIf(props.invalid ?? false)} data-size={props.size || "medium"} style={combineStyle({ width: props.width }, styles().wrapper)}>
+      <input {...extraAriasAndDatasets(props)} class={combineClass("tiny-password-input", classes().input)} disabled={props.disabled} id={props.id} name={props.name} onInput={(e) => {
+		props.onChange?.(e.currentTarget.value);
+	}} onKeyDown={handleKeyDown} placeholder={props.placeholder} style={combineStyle({}, styles().input)} type={visible() ? "text" : "password"} value={props.value} />
+      <button aria-label={visible() ? "Hide password" : "Show password"} class={combineClass("tiny-password-input-toggle", classes().toggle)} data-disabled={dataIf(props.disabled ?? false)} disabled={props.disabled} onClick={() => setVisible(!visible())} style={combineStyle({}, styles().toggle)} type="button">
+        {visible() ? <EyeOffLine /> : <EyeLine />}
+      </button>
+    </div>;
+}
+
+//#endregion
+export { PasswordInput };

package/dist/components/form-components/radio-group/index.d.ts

@@ -0,0 +1 @@
+import { RadioGroup, RadioOption } from "./radio-group.js";

package/dist/components/form-components/radio-group/index.js

@@ -0,0 +1 @@
+import { RadioGroup } from "./radio-group.js";

package/dist/components/form-components/radio-group/index.jsx

@@ -0,0 +1 @@
+import { RadioGroup } from "./radio-group.jsx";

package/dist/components/form-components/radio-group/radio-group.d.ts

@@ -0,0 +1,26 @@
+import { ClassNames, OmitComponentProps, Styles } from "../../../utils/types.js";
+import { Flex } from "../../../layout/flex/index.js";
+import "../../../layout/index.js";
+import { JSX } from "solid-js/jsx-runtime";
+
+//#region src/components/form-components/radio-group/radio-group.d.ts
+interface RadioOption<T> {
+  label: JSX.Element;
+  value: T;
+  disabled?: boolean;
+}
+declare function RadioGroup<T extends string | number>(props: {
+  options?: RadioOption<T>[];
+  value?: T;
+  onChange?: (value: T) => void;
+  name?: string;
+  disabled?: boolean;
+  classNames?: ClassNames<"root" | "item" | "circle" | "label", {
+    disabled: boolean;
+  }>;
+  styles?: Styles<"root" | "item" | "circle" | "label", {
+    disabled: boolean;
+  }>;
+} & OmitComponentProps<typeof Flex, "children">): JSX.Element;
+//#endregion
+export { RadioGroup, RadioOption };

package/dist/components/form-components/radio-group/radio-group.js

@@ -0,0 +1,118 @@
+import { createClassStyles } from "../../../utils/index.js";
+import { Flex } from "../../../layout/flex/index.js";
+import "../../../layout/index.js";
+import { RadioGroupCore } from "../../../primitives/radio-group/index.js";
+import "../../../primitives/index.js";
+import radio_group_default from "../../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/form-components/radio-group/radio-group.js";
+import { className, createComponent, effect, insert, mergeProps, style, template } from "solid-js/web";
+import { For as For$1, splitProps } from "solid-js";
+import { combineClass, combineStyle, dataIf, mountStyle } from "solid-tiny-utils";
+
+//#region src/components/form-components/radio-group/radio-group.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<span>`);
+function RadioGroup(props) {
+	mountStyle(radio_group_default, "tiny-radio-group");
+	const [local, others] = splitProps(props, [
+		"options",
+		"value",
+		"onChange",
+		"name",
+		"disabled",
+		"class",
+		"classNames",
+		"styles"
+	]);
+	const [classes, styles] = createClassStyles(() => local.classNames, () => local.styles, () => ({ disabled: local.disabled ?? false }));
+	return createComponent(RadioGroupCore, {
+		get disabled() {
+			return local.disabled;
+		},
+		get name() {
+			return local.name;
+		},
+		get onChange() {
+			return local.onChange;
+		},
+		get value() {
+			return local.value;
+		},
+		children: (rootState) => createComponent(Flex, mergeProps({
+			get ["class"]() {
+				return combineClass("tiny-radio-group", classes().root, local.class);
+			},
+			get ["data-disabled"]() {
+				return dataIf(rootState.disabled);
+			},
+			gap: "md",
+			get style() {
+				return combineStyle({}, styles().root);
+			}
+		}, others, { get children() {
+			return createComponent(For$1, {
+				get each() {
+					return local.options;
+				},
+				children: (o) => createComponent(RadioGroupCore.Item, {
+					get disabled() {
+						return o.disabled;
+					},
+					get value() {
+						return o.value;
+					},
+					children: (itemState) => {
+						const [itemClasses, itemStyles] = createClassStyles(() => local.classNames, () => local.styles, () => ({ disabled: itemState.disabled }));
+						return createComponent(RadioGroupCore.ItemLabel, {
+							get ["class"]() {
+								return combineClass("tiny-radio-item", itemClasses().item);
+							},
+							get ["data-checked"]() {
+								return dataIf(itemState.checked);
+							},
+							get ["data-disabled"]() {
+								return dataIf(itemState.disabled);
+							},
+							get style() {
+								return combineStyle({}, itemStyles().item);
+							},
+							get children() {
+								return [
+									createComponent(RadioGroupCore.ItemInput, {}),
+									(() => {
+										var _el$ = _tmpl$();
+										effect((_p$) => {
+											var _v$ = combineClass("tiny-radio-circle", itemClasses().circle), _v$2 = combineStyle({}, itemStyles().circle);
+											_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+											_p$.t = style(_el$, _v$2, _p$.t);
+											return _p$;
+										}, {
+											e: void 0,
+											t: void 0
+										});
+										return _el$;
+									})(),
+									(() => {
+										var _el$2 = _tmpl$();
+										insert(_el$2, () => o.label);
+										effect((_p$) => {
+											var _v$3 = combineClass("tiny-radio-label", itemClasses().label), _v$4 = combineStyle({}, itemStyles().label);
+											_v$3 !== _p$.e && className(_el$2, _p$.e = _v$3);
+											_p$.t = style(_el$2, _v$4, _p$.t);
+											return _p$;
+										}, {
+											e: void 0,
+											t: void 0
+										});
+										return _el$2;
+									})()
+								];
+							}
+						});
+					}
+				})
+			});
+		} }))
+	});
+}
+
+//#endregion
+export { RadioGroup };

package/dist/components/form-components/radio-group/radio-group.jsx

@@ -0,0 +1,45 @@
+import { createClassStyles } from "../../../utils/index.jsx";
+import { Flex } from "../../../layout/flex/index.jsx";
+import "../../../layout/index.jsx";
+import { RadioGroupCore } from "../../../primitives/radio-group/index.jsx";
+import "../../../primitives/index.jsx";
+import radio_group_default from "../../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/form-components/radio-group/radio-group.jsx";
+import { For, splitProps } from "solid-js";
+import { combineClass, combineStyle, dataIf, mountStyle } from "solid-tiny-utils";
+
+//#region src/components/form-components/radio-group/radio-group.tsx
+function RadioGroup(props) {
+	mountStyle(radio_group_default, "tiny-radio-group");
+	const [local, others] = splitProps(props, [
+		"options",
+		"value",
+		"onChange",
+		"name",
+		"disabled",
+		"class",
+		"classNames",
+		"styles"
+	]);
+	const [classes, styles] = createClassStyles(() => local.classNames, () => local.styles, () => ({ disabled: local.disabled ?? false }));
+	return <RadioGroupCore disabled={local.disabled} name={local.name} onChange={local.onChange} value={local.value}>
+      {(rootState) => <Flex class={combineClass("tiny-radio-group", classes().root, local.class)} data-disabled={dataIf(rootState.disabled)} gap="md" style={combineStyle({}, styles().root)} {...others}>
+          <For each={local.options}>
+            {(o) => <RadioGroupCore.Item disabled={o.disabled} value={o.value}>
+                {(itemState) => {
+		const [itemClasses, itemStyles] = createClassStyles(() => local.classNames, () => local.styles, () => ({ disabled: itemState.disabled }));
+		return <RadioGroupCore.ItemLabel class={combineClass("tiny-radio-item", itemClasses().item)} data-checked={dataIf(itemState.checked)} data-disabled={dataIf(itemState.disabled)} style={combineStyle({}, itemStyles().item)}>
+                      <RadioGroupCore.ItemInput />
+                      <span class={combineClass("tiny-radio-circle", itemClasses().circle)} style={combineStyle({}, itemStyles().circle)} />
+                      <span class={combineClass("tiny-radio-label", itemClasses().label)} style={combineStyle({}, itemStyles().label)}>
+                        {o.label}
+                      </span>
+                    </RadioGroupCore.ItemLabel>;
+	}}
+              </RadioGroupCore.Item>}
+          </For>
+        </Flex>}
+    </RadioGroupCore>;
+}
+
+//#endregion
+export { RadioGroup };

package/dist/components/form-components/switcher/index.d.ts

@@ -0,0 +1 @@
+import { Switcher } from "./switcher.js";

package/dist/components/form-components/switcher/index.js

@@ -0,0 +1 @@
+import { Switcher } from "./switcher.js";

package/dist/components/form-components/switcher/index.jsx

@@ -0,0 +1 @@
+import { Switcher } from "./switcher.jsx";

package/dist/components/form-components/switcher/switcher.d.ts

@@ -0,0 +1,23 @@
+import { ClassNames, Styles } from "../../../utils/types.js";
+import { JSX } from "solid-js";
+
+//#region src/components/form-components/switcher/switcher.d.ts
+declare function Switcher(props: {
+  checked?: boolean;
+  disabled?: boolean;
+  onChange?: (checked: boolean) => void;
+  children?: JSX.Element;
+  id?: string;
+  name?: string;
+  value?: string;
+  classNames?: ClassNames<"root" | "track" | "thumb" | "label", {
+    checked: boolean;
+    disabled: boolean;
+  }>;
+  styles?: Styles<"root" | "track" | "thumb" | "label", {
+    checked: boolean;
+    disabled: boolean;
+  }>;
+}): JSX.Element;
+//#endregion
+export { Switcher };

package/dist/components/form-components/switcher/switcher.js

@@ -0,0 +1,92 @@
+import { createClassStyles } from "../../../utils/index.js";
+import { CheckboxCore } from "../../../primitives/checkbox/index.js";
+import "../../../primitives/index.js";
+import switcher_default from "../../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/form-components/switcher/switcher.js";
+import { className, createComponent, effect, insert, style, template } from "solid-js/web";
+import { children } from "solid-js";
+import { combineClass, combineStyle, dataIf, mountStyle } from "solid-tiny-utils";
+
+//#region src/components/form-components/switcher/switcher.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div><div>`), _tmpl$2 = /* @__PURE__ */ template(`<span>`);
+function Switcher(props) {
+	mountStyle(switcher_default, "tiny-switcher");
+	const label = children(() => props.children);
+	return createComponent(CheckboxCore, {
+		get checked() {
+			return props.checked;
+		},
+		get disabled() {
+			return props.disabled;
+		},
+		get name() {
+			return props.name;
+		},
+		get onChange() {
+			return props.onChange;
+		},
+		get value() {
+			return props.value;
+		},
+		children: (state) => {
+			const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles, () => ({
+				checked: state.checked,
+				disabled: state.disabled
+			}));
+			return createComponent(CheckboxCore.Label, {
+				get ["class"]() {
+					return combineClass("tiny-switcher", classes().root);
+				},
+				get ["data-checked"]() {
+					return dataIf(state.checked);
+				},
+				get ["data-disabled"]() {
+					return dataIf(state.disabled);
+				},
+				get style() {
+					return combineStyle({}, styles().root);
+				},
+				get children() {
+					return [
+						createComponent(CheckboxCore.Input, { get id() {
+							return props.id;
+						} }),
+						(() => {
+							var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+							effect((_p$) => {
+								var _v$ = combineClass("tiny-switcher-track", classes().track), _v$2 = combineStyle({}, styles().track), _v$3 = combineClass("tiny-switcher-thumb", classes().thumb), _v$4 = combineStyle({}, styles().thumb);
+								_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+								_p$.t = style(_el$, _v$2, _p$.t);
+								_v$3 !== _p$.a && className(_el$2, _p$.a = _v$3);
+								_p$.o = style(_el$2, _v$4, _p$.o);
+								return _p$;
+							}, {
+								e: void 0,
+								t: void 0,
+								a: void 0,
+								o: void 0
+							});
+							return _el$;
+						})(),
+						(() => {
+							var _el$3 = _tmpl$2();
+							insert(_el$3, label);
+							effect((_p$) => {
+								var _v$5 = combineClass("tiny-switcher-label", classes().label), _v$6 = combineStyle({}, styles().label);
+								_v$5 !== _p$.e && className(_el$3, _p$.e = _v$5);
+								_p$.t = style(_el$3, _v$6, _p$.t);
+								return _p$;
+							}, {
+								e: void 0,
+								t: void 0
+							});
+							return _el$3;
+						})()
+					];
+				}
+			});
+		}
+	});
+}
+
+//#endregion
+export { Switcher };

package/dist/components/form-components/switcher/switcher.jsx

@@ -0,0 +1,32 @@
+import { createClassStyles } from "../../../utils/index.jsx";
+import { CheckboxCore } from "../../../primitives/checkbox/index.jsx";
+import "../../../primitives/index.jsx";
+import switcher_default from "../../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/form-components/switcher/switcher.jsx";
+import { children } from "solid-js";
+import { combineClass, combineStyle, dataIf, mountStyle } from "solid-tiny-utils";
+
+//#region src/components/form-components/switcher/switcher.tsx
+function Switcher(props) {
+	mountStyle(switcher_default, "tiny-switcher");
+	const label = children(() => props.children);
+	return <CheckboxCore checked={props.checked} disabled={props.disabled} name={props.name} onChange={props.onChange} value={props.value}>
+      {(state) => {
+		const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles, () => ({
+			checked: state.checked,
+			disabled: state.disabled
+		}));
+		return <CheckboxCore.Label class={combineClass("tiny-switcher", classes().root)} data-checked={dataIf(state.checked)} data-disabled={dataIf(state.disabled)} style={combineStyle({}, styles().root)}>
+            <CheckboxCore.Input id={props.id} />
+            <div class={combineClass("tiny-switcher-track", classes().track)} style={combineStyle({}, styles().track)}>
+              <div class={combineClass("tiny-switcher-thumb", classes().thumb)} style={combineStyle({}, styles().thumb)} />
+            </div>
+            <span class={combineClass("tiny-switcher-label", classes().label)} style={combineStyle({}, styles().label)}>
+              {label()}
+            </span>
+          </CheckboxCore.Label>;
+	}}
+    </CheckboxCore>;
+}
+
+//#endregion
+export { Switcher };

package/dist/components/form-components/text-field/index.d.ts

@@ -0,0 +1 @@
+import { TextField, TextFieldProps } from "./text-field.js";

package/dist/components/form-components/text-field/index.js

@@ -0,0 +1 @@
+import { TextField } from "./text-field.js";

package/dist/components/form-components/text-field/index.jsx

@@ -0,0 +1 @@
+import { TextField } from "./text-field.jsx";

package/dist/components/form-components/text-field/text-field.d.ts

@@ -0,0 +1,30 @@
+import { ClassNames, Styles } from "../../../utils/types.js";
+import { JSX } from "solid-js";
+
+//#region src/components/form-components/text-field/text-field.d.ts
+interface TextFieldProps {
+  value?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  onChange?: (value: string) => void;
+  onPressEnter?: (e: KeyboardEvent) => void;
+  size?: "small" | "medium" | "large";
+  id?: string;
+  name?: string;
+  prefix?: JSX.Element;
+  suffix?: JSX.Element;
+  invalid?: boolean;
+  classNames?: ClassNames<"root" | "input" | "prefix" | "suffix", {
+    disabled: boolean;
+    invalid: boolean;
+    size: "small" | "medium" | "large";
+  }>;
+  styles?: Styles<"root" | "input" | "prefix" | "suffix", {
+    disabled: boolean;
+    invalid: boolean;
+    size: "small" | "medium" | "large";
+  }>;
+}
+declare function TextField(props: TextFieldProps): JSX.Element;
+//#endregion
+export { TextField, TextFieldProps };

package/dist/components/form-components/text-field/text-field.js

@@ -0,0 +1,112 @@
+import { createClassStyles, extraAriasAndDatasets } from "../../../utils/index.js";
+import text_field_default from "../../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/form-components/text-field/text-field.js";
+import { className, createComponent, effect, insert, mergeProps, setAttribute, spread, style, template } from "solid-js/web";
+import { Show, children } from "solid-js";
+import { combineClass, combineStyle, dataIf, mountStyle } from "solid-tiny-utils";
+
+//#region src/components/form-components/text-field/text-field.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`), _tmpl$2 = /* @__PURE__ */ template(`<div><input>`);
+function TextField(props) {
+	mountStyle(text_field_default, "tiny-text-field");
+	const prefix = children(() => props.prefix);
+	const suffix = children(() => props.suffix);
+	const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles, () => ({
+		disabled: props.disabled ?? false,
+		invalid: props.invalid ?? false,
+		size: props.size || "medium"
+	}));
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter") {
+			props.onPressEnter?.(e);
+			e.currentTarget.blur();
+		}
+	};
+	return (() => {
+		var _el$ = _tmpl$2(), _el$3 = _el$.firstChild;
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return prefix();
+			},
+			get children() {
+				var _el$2 = _tmpl$();
+				insert(_el$2, prefix);
+				effect((_p$) => {
+					var _v$ = combineClass("tiny-text-field-prefix", classes().prefix), _v$2 = combineStyle({}, styles().prefix);
+					_v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+					_p$.t = style(_el$2, _v$2, _p$.t);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0
+				});
+				return _el$2;
+			}
+		}), _el$3);
+		spread(_el$3, mergeProps(() => extraAriasAndDatasets(props), {
+			get ["class"]() {
+				return combineClass("tiny-text-field-input", classes().input);
+			},
+			get disabled() {
+				return props.disabled;
+			},
+			get id() {
+				return props.id;
+			},
+			get name() {
+				return props.name;
+			},
+			"onInput": (e) => {
+				props.onChange?.(e.currentTarget.value);
+			},
+			"onKeyDown": handleKeyDown,
+			get placeholder() {
+				return props.placeholder;
+			},
+			get style() {
+				return combineStyle({}, styles().input);
+			},
+			"type": "text",
+			get value() {
+				return props.value;
+			}
+		}), false, false);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return suffix();
+			},
+			get children() {
+				var _el$4 = _tmpl$();
+				insert(_el$4, suffix);
+				effect((_p$) => {
+					var _v$3 = combineClass("tiny-text-field-suffix", classes().suffix), _v$4 = combineStyle({}, styles().suffix);
+					_v$3 !== _p$.e && className(_el$4, _p$.e = _v$3);
+					_p$.t = style(_el$4, _v$4, _p$.t);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0
+				});
+				return _el$4;
+			}
+		}), null);
+		effect((_p$) => {
+			var _v$5 = combineClass("tiny-text-field", classes().root), _v$6 = dataIf(props.disabled ?? false), _v$7 = dataIf(props.invalid ?? false), _v$8 = props.size || "medium", _v$9 = combineStyle({}, styles().root);
+			_v$5 !== _p$.e && className(_el$, _p$.e = _v$5);
+			_v$6 !== _p$.t && setAttribute(_el$, "data-disabled", _p$.t = _v$6);
+			_v$7 !== _p$.a && setAttribute(_el$, "data-invalid", _p$.a = _v$7);
+			_v$8 !== _p$.o && setAttribute(_el$, "data-size", _p$.o = _v$8);
+			_p$.i = style(_el$, _v$9, _p$.i);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0
+		});
+		return _el$;
+	})();
+}
+
+//#endregion
+export { TextField };