solid-tiny-ui 0.4.0 → 0.6.0

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

@@ -0,0 +1,76 @@
+import { createClassStyles } from "../../../utils/index.js";
+import { Flex } from "../../../layout/flex/index.js";
+import "../../../layout/index.js";
+import { Checkbox } from "../checkbox/checkbox.js";
+import "../checkbox/index.js";
+import { CheckboxGroupCore } from "../../../primitives/checkbox-group/index.js";
+import { createComponent, memo, mergeProps } from "solid-js/web";
+import { For as For$1, splitProps } from "solid-js";
+import { combineStyle } from "solid-tiny-utils";
+
+//#region src/components/form-components/checkbox-group/checkbox-group.tsx
+function CheckboxGroup(props) {
+	const [local, others] = splitProps(props, [
+		"options",
+		"value",
+		"onChange",
+		"disabled",
+		"name",
+		"classNames",
+		"styles"
+	]);
+	const [classes, styles] = createClassStyles(() => local.classNames, () => local.styles, () => ({ disabled: local.disabled ?? false }));
+	return createComponent(CheckboxGroupCore, {
+		get disabled() {
+			return local.disabled;
+		},
+		get name() {
+			return local.name;
+		},
+		get onChange() {
+			return local.onChange;
+		},
+		get selectValues() {
+			return local.value;
+		},
+		children: (state, actions) => createComponent(Flex, mergeProps({
+			get ["class"]() {
+				return classes().root;
+			},
+			get ["data-disabled"]() {
+				return state.disabled;
+			},
+			gap: "md",
+			get style() {
+				return combineStyle({}, styles().root);
+			}
+		}, others, { get children() {
+			return createComponent(For$1, {
+				get each() {
+					return local.options;
+				},
+				children: (o) => createComponent(Checkbox, {
+					get checked() {
+						return state.selectValues.includes(o.value);
+					},
+					get disabled() {
+						return state.disabled || o.disabled;
+					},
+					get name() {
+						return state.name;
+					},
+					onChange: (c) => actions.toggleValue(o.value, c),
+					get value() {
+						return String(o.value);
+					},
+					get children() {
+						return o.label;
+					}
+				})
+			});
+		} }))
+	});
+}
+
+//#endregion
+export { CheckboxGroup };

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

@@ -0,0 +1,34 @@
+import { createClassStyles } from "../../../utils/index.jsx";
+import { Flex } from "../../../layout/flex/index.jsx";
+import "../../../layout/index.jsx";
+import { Checkbox } from "../checkbox/checkbox.jsx";
+import "../checkbox/index.jsx";
+import { CheckboxGroupCore } from "../../../primitives/checkbox-group/index.jsx";
+import { For, splitProps } from "solid-js";
+import { combineStyle } from "solid-tiny-utils";
+
+//#region src/components/form-components/checkbox-group/checkbox-group.tsx
+function CheckboxGroup(props) {
+	const [local, others] = splitProps(props, [
+		"options",
+		"value",
+		"onChange",
+		"disabled",
+		"name",
+		"classNames",
+		"styles"
+	]);
+	const [classes, styles] = createClassStyles(() => local.classNames, () => local.styles, () => ({ disabled: local.disabled ?? false }));
+	return <CheckboxGroupCore disabled={local.disabled} name={local.name} onChange={local.onChange} selectValues={local.value}>
+      {(state, actions) => <Flex class={classes().root} data-disabled={state.disabled} gap="md" style={combineStyle({}, styles().root)} {...others}>
+          <For each={local.options}>
+            {(o) => <Checkbox checked={state.selectValues.includes(o.value)} disabled={state.disabled || o.disabled} name={state.name} onChange={(c) => actions.toggleValue(o.value, c)} value={String(o.value)}>
+                {o.label}
+              </Checkbox>}
+          </For>
+        </Flex>}
+    </CheckboxGroupCore>;
+}
+
+//#endregion
+export { CheckboxGroup };

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

@@ -0,0 +1 @@
+import { CheckboxGroup, CheckboxOption } from "./checkbox-group.js";

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

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

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

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

package/dist/components/{combobox → form-components/combobox}/combobox.d.ts

@@ -1,7 +1,7 @@
-import { ClassNames, Styles } from "../../utils/types.js";
-import * as solid_js9 from "solid-js";
+import { ClassNames, Styles } from "../../../utils/types.js";
+import * as solid_js50 from "solid-js";
 
-//#region src/components/combobox/combobox.d.ts
+//#region src/components/form-components/combobox/combobox.d.ts
 interface ComboboxProps<T extends {
   label: string;
   value: unknown;
@@ -15,11 +15,13 @@ interface ComboboxProps<T extends {
   placeholder?: string;
   size?: "small" | "medium" | "large";
   disabled?: boolean;
+  id?: string;
+  name?: string;
 }
 declare function Combobox<T extends {
   label: string;
   value: unknown;
   disabled?: boolean;
-}>(props: ComboboxProps<T>): solid_js9.JSX.Element;
+}>(props: ComboboxProps<T>): solid_js50.JSX.Element;
 //#endregion
 export { Combobox, ComboboxProps };

package/dist/components/{combobox → form-components/combobox}/combobox.js

@@ -1,15 +1,15 @@
-import { createClassStyles } from "../../utils/index.js";
-import combobox_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/combobox/combobox.js";
-import { ArrowDownSLine } from "../../icons/arrow-down-s-line.js";
-import "../../icons/index.js";
-import { Listbox } from "../../primitives/listbox/listbox.js";
-import "../../primitives/listbox/index.js";
-import { Popover } from "../popover/index.js";
+import { ArrowDownSLine } from "../../../icons/arrow-down-s-line.js";
+import "../../../icons/index.js";
+import { createClassStyles } from "../../../utils/index.js";
+import { Listbox } from "../../../primitives/listbox/listbox.js";
+import "../../../primitives/listbox/index.js";
+import combobox_default from "../../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/form-components/combobox/combobox.js";
+import { Popover } from "../../popover/index.js";
 import { className, createComponent, effect, insert, setAttribute, style, template } from "solid-js/web";
-import { For, createMemo, createSignal } from "solid-js";
+import { For as For$1, createMemo, createSignal } from "solid-js";
 import { combineClass, combineStyle, createWatch, dataIf, mountStyle } from "solid-tiny-utils";
 
-//#region src/components/combobox/combobox.tsx
+//#region src/components/form-components/combobox/combobox.tsx
 /** biome-ignore-all lint/complexity/noBannedTypes: I need Function */
 var _tmpl$ = /* @__PURE__ */ template(`<div><input autocomplete=off readonly role=combobox tabindex=-1 type=search style=height:100%;width:100%><div class=tiny-combobox__suffix>`);
 function Combobox(props) {
@@ -30,15 +30,17 @@ function Combobox(props) {
 			var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
 			insert(_el$3, createComponent(ArrowDownSLine, {}));
 			effect((_p$) => {
-				var _v$ = combineClass("tiny-combobox__trigger tiny-combobox-vars", classes().trigger), _v$2 = dataIf(props.disabled ?? false), _v$3 = dataIf(state.open), _v$4 = props.size ?? "medium", _v$5 = combineStyle({}, styles().trigger), _v$6 = state.open, _v$7 = props.placeholder, _v$8 = combineStyle({}, styles().suffix);
+				var _v$ = combineClass("tiny-combobox__trigger", classes().trigger), _v$2 = dataIf(props.disabled ?? false), _v$3 = dataIf(state.open), _v$4 = props.size ?? "medium", _v$5 = combineStyle({}, styles().trigger), _v$6 = state.open, _v$7 = props.id, _v$8 = props.name, _v$9 = props.placeholder, _v$0 = combineStyle({}, styles().suffix);
 				_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-open", _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$2, "aria-expanded", _p$.n = _v$6);
-				_v$7 !== _p$.s && setAttribute(_el$2, "placeholder", _p$.s = _v$7);
-				_p$.h = style(_el$3, _v$8, _p$.h);
+				_v$7 !== _p$.s && setAttribute(_el$2, "id", _p$.s = _v$7);
+				_v$8 !== _p$.h && setAttribute(_el$2, "name", _p$.h = _v$8);
+				_v$9 !== _p$.r && setAttribute(_el$2, "placeholder", _p$.r = _v$9);
+				_p$.d = style(_el$3, _v$0, _p$.d);
 				return _p$;
 			}, {
 				e: void 0,
@@ -48,7 +50,9 @@ function Combobox(props) {
 				i: void 0,
 				n: void 0,
 				s: void 0,
-				h: void 0
+				h: void 0,
+				r: void 0,
+				d: void 0
 			});
 			effect(() => _el$2.value = label());
 			return _el$;
@@ -72,7 +76,7 @@ function Combobox(props) {
 						return combineStyle({ "--tiny-combobox-trigger-width": `${state.refTrigger?.offsetWidth}px` }, styles().options);
 					},
 					get children() {
-						return createComponent(For, {
+						return createComponent(For$1, {
 							get each() {
 								return props.options;
 							},

package/dist/components/{combobox → form-components/combobox}/combobox.jsx

@@ -1,14 +1,14 @@
-import { createClassStyles } from "../../utils/index.jsx";
-import combobox_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/combobox/combobox.jsx";
-import { ArrowDownSLine } from "../../icons/arrow-down-s-line.jsx";
-import "../../icons/index.jsx";
-import { Listbox } from "../../primitives/listbox/listbox.jsx";
-import "../../primitives/listbox/index.jsx";
-import { Popover } from "../popover/index.jsx";
+import { ArrowDownSLine } from "../../../icons/arrow-down-s-line.jsx";
+import "../../../icons/index.jsx";
+import { createClassStyles } from "../../../utils/index.jsx";
+import { Listbox } from "../../../primitives/listbox/listbox.jsx";
+import "../../../primitives/listbox/index.jsx";
+import combobox_default from "../../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/form-components/combobox/combobox.jsx";
+import { Popover } from "../../popover/index.jsx";
 import { For, createMemo, createSignal } from "solid-js";
 import { combineClass, combineStyle, createWatch, dataIf, mountStyle } from "solid-tiny-utils";
 
-//#region src/components/combobox/combobox.tsx
+//#region src/components/form-components/combobox/combobox.tsx
 /** biome-ignore-all lint/complexity/noBannedTypes: I need Function */
 function Combobox(props) {
 	mountStyle(combobox_default, "tiny-combobox");
@@ -24,8 +24,8 @@ function Combobox(props) {
 	return <Popover placement="bottom" trigger="click">
       {(state, acts) => <>
           <Popover.Trigger>
-            <div class={combineClass("tiny-combobox__trigger tiny-combobox-vars", classes().trigger)} data-disabled={dataIf(props.disabled ?? false)} data-open={dataIf(state.open)} data-size={props.size ?? "medium"} style={combineStyle({}, styles().trigger)}>
-              <input aria-expanded={state.open} autocomplete="off" placeholder={props.placeholder} readonly role="combobox" style={{
+            <div class={combineClass("tiny-combobox__trigger", classes().trigger)} data-disabled={dataIf(props.disabled ?? false)} data-open={dataIf(state.open)} data-size={props.size ?? "medium"} style={combineStyle({}, styles().trigger)}>
+              <input aria-expanded={state.open} autocomplete="off" id={props.id} name={props.name} placeholder={props.placeholder} readonly role="combobox" style={{
 		height: "100%",
 		width: "100%"
 	}} tabIndex={-1} type="search" value={label()} />

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

@@ -0,0 +1,19 @@
+import { Checkbox } from "./checkbox/checkbox.js";
+import "./checkbox/index.js";
+import { CheckboxGroup, CheckboxOption } from "./checkbox-group/checkbox-group.js";
+import "./checkbox-group/index.js";
+import { Combobox, ComboboxProps } from "./combobox/combobox.js";
+import "./combobox/index.js";
+import { NumberInput, NumberInputProps } from "./number-input/number-input.js";
+import "./number-input/index.js";
+import { PasswordInput, PasswordInputProps } from "./password-input/password-input.js";
+import "./password-input/index.js";
+import { RadioGroup, RadioOption } from "./radio-group/radio-group.js";
+import "./radio-group/index.js";
+import { Switcher } from "./switcher/switcher.js";
+import "./switcher/index.js";
+import { TextField, TextFieldProps } from "./text-field/text-field.js";
+import "./text-field/index.js";
+import { Textarea } from "./textarea/textarea.js";
+import "./textarea/index.js";
+import { TimePicker } from "./time-picker/index.js";

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

@@ -0,0 +1,19 @@
+import { Checkbox } from "./checkbox/checkbox.js";
+import "./checkbox/index.js";
+import { CheckboxGroup } from "./checkbox-group/checkbox-group.js";
+import "./checkbox-group/index.js";
+import { Combobox } from "./combobox/combobox.js";
+import "./combobox/index.js";
+import { NumberInput } from "./number-input/number-input.js";
+import "./number-input/index.js";
+import { PasswordInput } from "./password-input/password-input.js";
+import "./password-input/index.js";
+import { RadioGroup } from "./radio-group/radio-group.js";
+import "./radio-group/index.js";
+import { Switcher } from "./switcher/switcher.js";
+import "./switcher/index.js";
+import { TextField } from "./text-field/text-field.js";
+import "./text-field/index.js";
+import { Textarea } from "./textarea/textarea.js";
+import "./textarea/index.js";
+import { TimePicker } from "./time-picker/index.js";

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

@@ -0,0 +1,19 @@
+import { Checkbox } from "./checkbox/checkbox.jsx";
+import "./checkbox/index.jsx";
+import { CheckboxGroup } from "./checkbox-group/checkbox-group.jsx";
+import "./checkbox-group/index.jsx";
+import { Combobox } from "./combobox/combobox.jsx";
+import "./combobox/index.jsx";
+import { NumberInput } from "./number-input/number-input.jsx";
+import "./number-input/index.jsx";
+import { PasswordInput } from "./password-input/password-input.jsx";
+import "./password-input/index.jsx";
+import { RadioGroup } from "./radio-group/radio-group.jsx";
+import "./radio-group/index.jsx";
+import { Switcher } from "./switcher/switcher.jsx";
+import "./switcher/index.jsx";
+import { TextField } from "./text-field/text-field.jsx";
+import "./text-field/index.jsx";
+import { Textarea } from "./textarea/textarea.jsx";
+import "./textarea/index.jsx";
+import { TimePicker } from "./time-picker/index.jsx";

package/dist/components/form-components/number-input/index.d.ts

@@ -0,0 +1 @@
+import { NumberInput, NumberInputProps } from "./number-input.js";

package/dist/components/form-components/number-input/index.js

@@ -0,0 +1 @@
+import { NumberInput } from "./number-input.js";

package/dist/components/form-components/number-input/index.jsx

@@ -0,0 +1 @@
+import { NumberInput } from "./number-input.jsx";

package/dist/components/form-components/number-input/number-input.d.ts

@@ -0,0 +1,33 @@
+import { ClassNames, Styles } from "../../../utils/types.js";
+import { JSX } from "solid-js";
+
+//#region src/components/form-components/number-input/number-input.d.ts
+interface NumberInputProps<Nullable extends boolean> {
+  value?: number;
+  placeholder?: string;
+  disabled?: boolean;
+  onChange?: (value: Nullable extends true ? number | null : number) => void;
+  onPressEnter?: (e: KeyboardEvent) => void;
+  size?: "small" | "medium" | "large";
+  id?: string;
+  name?: string;
+  min?: number;
+  max?: number;
+  step?: number;
+  nullable?: Nullable;
+  invalid?: boolean;
+  width?: JSX.CSSProperties["width"];
+  classNames?: ClassNames<"wrapper" | "input", {
+    disabled: boolean;
+    invalid: boolean;
+    size: "small" | "medium" | "large";
+  }>;
+  styles?: Styles<"wrapper" | "input", {
+    disabled: boolean;
+    invalid: boolean;
+    size: "small" | "medium" | "large";
+  }>;
+}
+declare function NumberInput<Nullable extends boolean = false>(props: NumberInputProps<Nullable>): JSX.Element;
+//#endregion
+export { NumberInput, NumberInputProps };

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

@@ -0,0 +1,113 @@
+import { createClassStyles, extraAriasAndDatasets } from "../../../utils/index.js";
+import number_input_default from "../../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/form-components/number-input/number-input.js";
+import { className, effect, mergeProps, setAttribute, spread, style, template } from "solid-js/web";
+import { createMemo, createSignal } from "solid-js";
+import { combineClass, combineStyle, createWatch, dataIf, isDefined, isUndefined, mountStyle } from "solid-tiny-utils";
+
+//#region src/components/form-components/number-input/number-input.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div><input>`);
+function NumberInput(props) {
+	mountStyle(number_input_default, "tiny-number-input");
+	const [invalid, setInvalid] = createSignal(false);
+	const [inputVal, setInputVal] = createSignal(null);
+	const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles, () => ({
+		disabled: props.disabled ?? false,
+		invalid: invalid(),
+		size: props.size || "medium"
+	}));
+	const handleInput = (e) => {
+		const value = e.currentTarget.value;
+		if (value === "") {
+			setInputVal(null);
+			return;
+		}
+		const numValue = Number(value);
+		if (!Number.isNaN(numValue)) setInputVal(numValue);
+	};
+	const handleBlur = (e) => {
+		const target = e.currentTarget;
+		if (target.value === "") if (props.nullable) setInputVal(null);
+		else {
+			setInputVal(props.min ?? 0);
+			target.value = String(inputVal());
+		}
+	};
+	const isValueInRange = createMemo(() => {
+		const v = inputVal();
+		if (isUndefined(v) || v === null) return true;
+		if (isDefined(props.min) && v < props.min) return false;
+		if (isDefined(props.max) && v > props.max) return false;
+		return true;
+	});
+	createWatch(() => [props.invalid, isValueInRange()], ([invalid$1, isInRange]) => {
+		setInvalid(!!invalid$1 || !isInRange);
+	});
+	createWatch(() => [inputVal(), invalid()], ([val, invalid$1]) => {
+		if (!invalid$1 && val !== props.value) if (props.nullable) props.onChange?.(val);
+		else props.onChange?.(val === null ? props.min ?? 0 : val);
+	}, { defer: true });
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter") {
+			props.onPressEnter?.(e);
+			e.currentTarget.blur();
+		}
+	};
+	return (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+		spread(_el$2, mergeProps(() => extraAriasAndDatasets(props), {
+			get ["class"]() {
+				return combineClass("tiny-number-input", classes().input);
+			},
+			get disabled() {
+				return props.disabled;
+			},
+			get id() {
+				return props.id;
+			},
+			get max() {
+				return props.max;
+			},
+			get min() {
+				return props.min;
+			},
+			get name() {
+				return props.name;
+			},
+			"onBlur": handleBlur,
+			"onInput": handleInput,
+			"onKeyDown": handleKeyDown,
+			get placeholder() {
+				return props.placeholder;
+			},
+			get step() {
+				return props.step;
+			},
+			get style() {
+				return combineStyle({}, styles().input);
+			},
+			"type": "number",
+			get value() {
+				return props.value;
+			}
+		}), false, false);
+		effect((_p$) => {
+			var _v$ = combineClass("tiny-number-input-wrapper", classes().wrapper), _v$2 = dataIf(props.disabled ?? false), _v$3 = dataIf(invalid()), _v$4 = props.size || "medium", _v$5 = combineStyle({ width: props.width }, styles().wrapper);
+			_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);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0
+		});
+		return _el$;
+	})();
+}
+
+//#endregion
+export { NumberInput };

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

@@ -0,0 +1,59 @@
+import { createClassStyles, extraAriasAndDatasets } from "../../../utils/index.jsx";
+import number_input_default from "../../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/form-components/number-input/number-input.jsx";
+import { createMemo, createSignal } from "solid-js";
+import { combineClass, combineStyle, createWatch, dataIf, isDefined, isUndefined, mountStyle } from "solid-tiny-utils";
+
+//#region src/components/form-components/number-input/number-input.tsx
+function NumberInput(props) {
+	mountStyle(number_input_default, "tiny-number-input");
+	const [invalid, setInvalid] = createSignal(false);
+	const [inputVal, setInputVal] = createSignal(null);
+	const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles, () => ({
+		disabled: props.disabled ?? false,
+		invalid: invalid(),
+		size: props.size || "medium"
+	}));
+	const handleInput = (e) => {
+		const value = e.currentTarget.value;
+		if (value === "") {
+			setInputVal(null);
+			return;
+		}
+		const numValue = Number(value);
+		if (!Number.isNaN(numValue)) setInputVal(numValue);
+	};
+	const handleBlur = (e) => {
+		const target = e.currentTarget;
+		if (target.value === "") if (props.nullable) setInputVal(null);
+		else {
+			setInputVal(props.min ?? 0);
+			target.value = String(inputVal());
+		}
+	};
+	const isValueInRange = createMemo(() => {
+		const v = inputVal();
+		if (isUndefined(v) || v === null) return true;
+		if (isDefined(props.min) && v < props.min) return false;
+		if (isDefined(props.max) && v > props.max) return false;
+		return true;
+	});
+	createWatch(() => [props.invalid, isValueInRange()], ([invalid$1, isInRange]) => {
+		setInvalid(!!invalid$1 || !isInRange);
+	});
+	createWatch(() => [inputVal(), invalid()], ([val, invalid$1]) => {
+		if (!invalid$1 && val !== props.value) if (props.nullable) props.onChange?.(val);
+		else props.onChange?.(val === null ? props.min ?? 0 : val);
+	}, { defer: true });
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter") {
+			props.onPressEnter?.(e);
+			e.currentTarget.blur();
+		}
+	};
+	return <div class={combineClass("tiny-number-input-wrapper", classes().wrapper)} data-disabled={dataIf(props.disabled ?? false)} data-invalid={dataIf(invalid())} data-size={props.size || "medium"} style={combineStyle({ width: props.width }, styles().wrapper)}>
+      <input {...extraAriasAndDatasets(props)} class={combineClass("tiny-number-input", classes().input)} disabled={props.disabled} id={props.id} max={props.max} min={props.min} name={props.name} onBlur={handleBlur} onInput={handleInput} onKeyDown={handleKeyDown} placeholder={props.placeholder} step={props.step} style={combineStyle({}, styles().input)} type="number" value={props.value} />
+    </div>;
+}
+
+//#endregion
+export { NumberInput };

package/dist/components/form-components/password-input/index.d.ts

@@ -0,0 +1 @@
+import { PasswordInput, PasswordInputProps } from "./password-input.js";

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

@@ -0,0 +1 @@
+import { PasswordInput } from "./password-input.js";

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

@@ -0,0 +1 @@
+import { PasswordInput } from "./password-input.jsx";

package/dist/components/form-components/password-input/password-input.d.ts

@@ -0,0 +1,31 @@
+import { ClassNames, Styles } from "../../../utils/types.js";
+import { JSX } from "solid-js";
+
+//#region src/components/form-components/password-input/password-input.d.ts
+interface PasswordInputProps {
+  value?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  onChange?: (value: string) => void;
+  onPressEnter?: (e: KeyboardEvent) => void;
+  size?: "small" | "medium" | "large";
+  id?: string;
+  name?: string;
+  width?: JSX.CSSProperties["width"];
+  invalid?: boolean;
+  classNames?: ClassNames<"wrapper" | "input" | "toggle", {
+    disabled: boolean;
+    invalid: boolean;
+    size: "small" | "medium" | "large";
+    visible: boolean;
+  }>;
+  styles?: Styles<"wrapper" | "input" | "toggle", {
+    disabled: boolean;
+    invalid: boolean;
+    size: "small" | "medium" | "large";
+    visible: boolean;
+  }>;
+}
+declare function PasswordInput(props: PasswordInputProps): JSX.Element;
+//#endregion
+export { PasswordInput, PasswordInputProps };