chop-logic-components 4.0.1 → 4.0.3

package/dist/components/molecules/select/combobox/Combobox.css

@@ -1 +1 @@
-.cl-select-combobox{text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--cl-m-gap);padding:var(--cl-m-gap);border:var(--cl-light-border);border-radius:var(--cl-border-radius);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;background-color:var(--cl-surface-a10)}.cl-select-combobox>span:nth-child(1){color:var(--cl-base-font-color);overflow:hidden;text-overflow:ellipsis;font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);font-weight:400;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media(min-width:640px){.cl-select-combobox>span:nth-child(1){font-size:var(--cl-typography-base-tablet)}}@media(min-width:1024px){.cl-select-combobox>span:nth-child(1){font-size:var(--cl-typography-base-desktop)}}.cl-select-combobox:focus-visible{outline:var(--cl-outline-border);outline-offset:2px}.cl-select-combobox[disabled]{pointer-events:none;opacity:.5}.cl-select-combobox__icon{transition:transform .3s ease}.cl-select-combobox__icon_opened{transform:rotate(180deg)}
+.cl-select-combobox{text-align:left;cursor:pointer;justify-content:space-between;align-items:center;gap:var(--cl-m-gap);padding:var(--cl-m-gap);border:var(--cl-light-border);border-radius:var(--cl-border-radius);white-space:nowrap;text-overflow:ellipsis;background-color:var(--cl-surface-a10);display:flex;overflow:hidden}.cl-select-combobox>span:first-child{color:var(--cl-base-font-color);text-overflow:ellipsis;font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;line-height:1.5;overflow:hidden}@media (width>=640px){.cl-select-combobox>span:first-child{font-size:var(--cl-typography-base-tablet)}}@media (width>=1024px){.cl-select-combobox>span:first-child{font-size:var(--cl-typography-base-desktop)}}.cl-select-combobox:focus-visible{outline:var(--cl-outline-border);outline-offset:2px}.cl-select-combobox[disabled]{pointer-events:none;opacity:.5}.cl-select-combobox__icon{transition:transform .3s}.cl-select-combobox__icon_opened{transform:rotate(180deg)}

package/dist/components/molecules/select/combobox/Combobox2.js

@@ -0,0 +1,31 @@
+import { getClassName as e } from "../../../../utils/get-class-name.js";
+import { ElementSize as t } from "../../../../enums/element-size.js";
+import { IconName as n } from "../../../../enums/icon-name.js";
+import r from "../../../atoms/icon/Icon2.js";
+import './Combobox.css';/* empty css         */
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/molecules/select/combobox/Combobox.tsx
+var o = ({ opened: o, onClick: s, comboboxId: c, dropdownId: l, selected: u, name: d, placeholder: f, disabled: p, required: m }) => {
+	let h = e(["cl-select-combobox__icon", { "cl-select-combobox__icon_opened": o }]);
+	return /* @__PURE__ */ a("button", {
+		type: "button",
+		name: d,
+		value: u?.id,
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-expanded": o,
+		"aria-controls": l,
+		id: c,
+		onClick: s,
+		disabled: p,
+		"aria-required": m,
+		className: "cl-select-combobox",
+		children: [u?.label ? /* @__PURE__ */ i("span", { children: u?.label }) : /* @__PURE__ */ i("span", { children: f }), /* @__PURE__ */ i(r, {
+			name: n.ChevronDown,
+			className: h,
+			size: t.Small
+		})]
+	});
+};
+//#endregion
+export { o as SelectCombobox };

package/dist/components/molecules/select/dropdown/Dropdown.css

@@ -1 +1 @@
-.cl-select-dropdown{visibility:hidden;opacity:0;transition:visibility 0s,opacity .3s linear;position:absolute;background:var(--cl-base-background-color);margin:0;padding:0;list-style:none;z-index:var(--cl-z-index-popup);width:100%;border:var(--cl-light-border);border-radius:var(--cl-border-radius);box-shadow:var(--cl-box-shadow);overflow-y:auto;max-height:180px;left:0;top:76px;background-color:var(--cl-surface-a10)}@media screen and (min-width:640px){.cl-select-dropdown{top:82px;max-height:220px}}@media screen and (min-width:1024px){.cl-select-dropdown{top:88px;max-height:260px}}.cl-select-dropdown_opened{visibility:visible;opacity:1}
+.cl-select-dropdown{visibility:hidden;opacity:0;background:var(--cl-base-background-color);z-index:var(--cl-z-index-popup);border:var(--cl-light-border);border-radius:var(--cl-border-radius);width:100%;box-shadow:var(--cl-box-shadow);background-color:var(--cl-surface-a10);max-height:180px;margin:0;padding:0;list-style:none;transition:visibility,opacity .3s linear;position:absolute;top:76px;left:0;overflow-y:auto}@media screen and (width>=640px){.cl-select-dropdown{max-height:220px;top:82px}}@media screen and (width>=1024px){.cl-select-dropdown{max-height:260px;top:88px}}.cl-select-dropdown_opened{visibility:visible;opacity:1}

package/dist/components/molecules/select/dropdown/Dropdown2.js

@@ -0,0 +1,31 @@
+import { getClassName as e } from "../../../../utils/get-class-name.js";
+import { moveFocusOnElementById as t } from "../../../../utils/move-focus-on-element-by-id.js";
+import { handleDropdownListKeyPress as n } from "../../../../utils/handle-dropdown-list-key-press.js";
+import './Dropdown.css';/* empty css         */
+import { SelectOption as r } from "../option/Option2.js";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/molecules/select/dropdown/Dropdown.tsx
+var a = ({ options: a, opened: o, onClose: s, onSelect: c, dropdownId: l, comboboxId: u, selected: d, onClear: f }) => {
+	let p = (e) => {
+		c(e), s(), t(u);
+	};
+	return /* @__PURE__ */ i("ul", {
+		role: "listbox",
+		id: l,
+		tabIndex: -1,
+		onKeyDown: (e) => n({
+			e,
+			options: a,
+			onClose: s
+		}),
+		className: e(["cl-select-dropdown", { "cl-select-dropdown_opened": o }]),
+		children: a.map((e) => /* @__PURE__ */ i(r, {
+			value: e,
+			onSelect: () => p(e.id),
+			onClear: f,
+			selected: e.id === d?.id
+		}, e.id))
+	});
+};
+//#endregion
+export { a as SelectDropdown };

package/dist/components/molecules/select/option/Option.css

@@ -1 +1 @@
-.cl-select-option{padding:var(--cl-m-gap);cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:var(--cl-m-gap);color:var(--cl-base-font-color);font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);font-weight:400;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media(min-width:640px){.cl-select-option{font-size:var(--cl-typography-base-tablet)}}@media(min-width:1024px){.cl-select-option{font-size:var(--cl-typography-base-desktop)}}.cl-select-option:hover,.cl-select-option:active{text-shadow:var(--cl-text-shadow)}.cl-select-option:focus-visible{outline:var(--cl-outline-border);outline-offset:-4px}.cl-select-option svg{color:var(--cl-base-font-color);width:var(--cl-icon-size);height:var(--cl-icon-size)}.cl-select-option_selected svg{color:var(--cl-accent-a0)}.cl-select-option_multi{justify-content:flex-start}
+.cl-select-option{padding:var(--cl-m-gap);cursor:pointer;justify-content:space-between;align-items:baseline;gap:var(--cl-m-gap);color:var(--cl-base-font-color);font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;line-height:1.5;display:flex}@media (width>=640px){.cl-select-option{font-size:var(--cl-typography-base-tablet)}}@media (width>=1024px){.cl-select-option{font-size:var(--cl-typography-base-desktop)}}.cl-select-option:hover,.cl-select-option:active{text-shadow:var(--cl-text-shadow)}.cl-select-option:focus-visible{outline:var(--cl-outline-border);outline-offset:-4px}.cl-select-option svg{color:var(--cl-base-font-color);width:var(--cl-icon-size);height:var(--cl-icon-size)}.cl-select-option_selected svg{color:var(--cl-accent-a0)}.cl-select-option_multi{justify-content:flex-start}

package/dist/components/molecules/select/option/Option2.js

@@ -0,0 +1,36 @@
+import { getClassName as e } from "../../../../utils/get-class-name.js";
+import { ElementSize as t } from "../../../../enums/element-size.js";
+import { IconName as n } from "../../../../enums/icon-name.js";
+import r from "../../../atoms/icon/Icon2.js";
+import './Option.css';/* empty css       */
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/molecules/select/option/Option.tsx
+var o = ({ value: o, selected: s, onSelect: c, onClear: l }) => {
+	let { id: u, label: d } = o, f = e(["cl-select-option", { "cl-select-option_selected": s }]), p = (e) => {
+		s ? l() : c(e);
+	}, m = (e) => (t) => {
+		switch (t.key) {
+			case " ":
+			case "SpaceBar":
+			case "Enter":
+				t.preventDefault(), p(e);
+				break;
+			default: break;
+		}
+	};
+	return /* @__PURE__ */ a("li", {
+		id: u,
+		role: "option",
+		"aria-selected": s,
+		tabIndex: 0,
+		onKeyDown: m(u),
+		onClick: () => p(u),
+		className: f,
+		children: [/* @__PURE__ */ i("span", { children: d }), s && /* @__PURE__ */ i(r, {
+			name: n.Check,
+			size: t.Small
+		})]
+	});
+};
+//#endregion
+export { o as SelectOption };

package/dist/components/molecules/switch/Switch.controller.js

@@ -1,33 +1,33 @@
-import { useContext as I, useState as d, useRef as s, useCallback as i } from "react";
-import { getSwitchInitialValue as g } from "./Switch.helpers.js";
-import { FormContext as k } from "../../contexts/form/FormContext.js";
-import { useResetFormInput as F } from "../../../hooks/use-reset-form-input/use-reset-form-input.js";
-function S({
-  name: e,
-  defaultChecked: p,
-  onChange: l
-}) {
-  const { onChangeFormInput: a, initialValues: C } = I(k), n = g({ initialValues: C, name: e, defaultChecked: p }), [r, f] = d(n), o = s(a), u = s(n), h = s(l);
-  o.current = a, u.current = n, h.current = l;
-  const c = i(
-    (t) => {
-      f(t), h.current?.(t), o.current?.({ name: e, value: t });
-    },
-    [e]
-  ), m = i(
-    (t) => {
-      (t.key === " " || t.key === "Enter") && (t.preventDefault(), c(!r));
-    },
-    [r, c]
-  ), R = i(() => {
-    f(u.current), o.current?.({ name: e, value: u.current });
-  }, [e]);
-  return F(R), {
-    checked: r,
-    handleChange: c,
-    handleKeyDown: m
-  };
+import { FormContext as e } from "../../contexts/form/FormContext.js";
+import { useResetFormInput as t } from "../../../hooks/use-reset-form-input/use-reset-form-input.js";
+import { getSwitchInitialValue as n } from "./Switch.helpers.js";
+import { useCallback as r, useContext as i, useRef as a, useState as o } from "react";
+//#region src/components/molecules/switch/Switch.controller.ts
+function s({ name: s, defaultChecked: c, onChange: l }) {
+	let { onChangeFormInput: u, initialValues: d } = i(e), f = n({
+		initialValues: d,
+		name: s,
+		defaultChecked: c
+	}), [p, m] = o(f), h = a(u), g = a(f), _ = a(l);
+	h.current = u, g.current = f, _.current = l;
+	let v = r((e) => {
+		m(e), _.current?.(e), h.current?.({
+			name: s,
+			value: e
+		});
+	}, [s]), y = r((e) => {
+		(e.key === " " || e.key === "Enter") && (e.preventDefault(), v(!p));
+	}, [p, v]);
+	return t(r(() => {
+		m(g.current), h.current?.({
+			name: s,
+			value: g.current
+		});
+	}, [s])), {
+		checked: p,
+		handleChange: v,
+		handleKeyDown: y
+	};
 }
-export {
-  S as useSwitchController
-};
+//#endregion
+export { s as useSwitchController };

package/dist/components/molecules/switch/Switch.css

@@ -1 +1 @@
-.cl-switch{display:inline-flex;justify-content:flex-start;align-items:center;gap:var(--cl-l-gap);padding:var(--cl-m-gap);border:none;background:none;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .2s ease;border-radius:var(--cl-border-radius);outline:none;background-position:center}.cl-switch:hover{text-shadow:var(--cl-text-shadow)}.cl-switch:focus-visible{outline:var(--cl-outline-border)}.cl-switch__input{position:absolute;opacity:0;pointer-events:none}.cl-switch__label{color:var(--cl-base-font-color);font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);font-weight:400;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media(min-width:640px){.cl-switch__label{font-size:var(--cl-typography-base-tablet)}}@media(min-width:1024px){.cl-switch__label{font-size:var(--cl-typography-base-desktop)}}.cl-switch__track{position:relative;width:52px;height:28px;background-color:var(--cl-surface-a10);border-radius:14px;transition:background-color .2s ease;order:3;flex-shrink:0}.cl-switch__checked .cl-switch__track{background-color:var(--cl-accent-a0)}.cl-switch__thumb{position:absolute;top:2px;left:2px;width:var(--cl-thumb-size);height:var(--cl-thumb-size);background-color:var(--cl-base-background-color);border-radius:50%;box-shadow:var(--cl-box-shadow);transition:transform .2s ease}.cl-switch__checked .cl-switch__thumb{transform:translate(24px)}.cl-switch__indicator{color:var(--cl-accent-a0);text-transform:uppercase;display:inline-block;width:var(--cl-thumb-size);text-align:center;font-family:var(--cl-core-font);font-size:var(--cl-typography-small-mobile);font-weight:400;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media(min-width:640px){.cl-switch__indicator{font-size:var(--cl-typography-small-tablet)}}@media(min-width:1024px){.cl-switch__indicator{font-size:var(--cl-typography-small-desktop)}}.cl-switch_disabled{pointer-events:none;opacity:.5}
+.cl-switch{justify-content:flex-start;align-items:center;gap:var(--cl-l-gap);padding:var(--cl-m-gap);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:var(--cl-border-radius);background:50%;border:none;outline:none;transition:all .2s;display:inline-flex}.cl-switch:hover{text-shadow:var(--cl-text-shadow)}.cl-switch:focus-visible{outline:var(--cl-outline-border)}.cl-switch__input{opacity:0;pointer-events:none;position:absolute}.cl-switch__label{color:var(--cl-base-font-color);font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;line-height:1.5}@media (width>=640px){.cl-switch__label{font-size:var(--cl-typography-base-tablet)}}@media (width>=1024px){.cl-switch__label{font-size:var(--cl-typography-base-desktop)}}.cl-switch__track{background-color:var(--cl-surface-a10);border-radius:14px;flex-shrink:0;order:3;width:52px;height:28px;transition:background-color .2s;position:relative}.cl-switch__checked .cl-switch__track{background-color:var(--cl-accent-a0)}.cl-switch__thumb{width:var(--cl-thumb-size);height:var(--cl-thumb-size);background-color:var(--cl-base-background-color);box-shadow:var(--cl-box-shadow);border-radius:50%;transition:transform .2s;position:absolute;top:2px;left:2px}.cl-switch__checked .cl-switch__thumb{transform:translate(24px)}.cl-switch__indicator{color:var(--cl-accent-a0);text-transform:uppercase;width:var(--cl-thumb-size);text-align:center;font-family:var(--cl-core-font);font-size:var(--cl-typography-small-mobile);letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;line-height:1.5;display:inline-block}@media (width>=640px){.cl-switch__indicator{font-size:var(--cl-typography-small-tablet)}}@media (width>=1024px){.cl-switch__indicator{font-size:var(--cl-typography-small-desktop)}}.cl-switch_disabled{pointer-events:none;opacity:.5}

package/dist/components/molecules/switch/Switch.helpers.js

@@ -1,10 +1,6 @@
-function e({
-  defaultChecked: r,
-  initialValues: t,
-  name: o
-}) {
-  return t?.[o] !== void 0 ? !!t?.[o] : !!r;
+//#region src/components/molecules/switch/Switch.helpers.ts
+function e({ defaultChecked: e, initialValues: t, name: n }) {
+	return t?.[n] === void 0 ? !!e : !!t?.[n];
 }
-export {
-  e as getSwitchInitialValue
-};
+//#endregion
+export { e as getSwitchInitialValue };

package/dist/components/molecules/switch/Switch2.js

@@ -0,0 +1,58 @@
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import { useSwitchController as t } from "./Switch.controller.js";
+import './Switch.css';/* empty css       */
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/molecules/switch/Switch.tsx
+var i = ({ checked: i, onChange: a, label: o, disabled: s = !1, className: c, id: l, name: u, value: d = "on", hasIndicator: f }) => {
+	let { checked: p, handleChange: m, handleKeyDown: h } = t({
+		name: u,
+		defaultChecked: i,
+		onChange: a
+	}), g = e([
+		"cl-switch",
+		c,
+		{
+			"cl-switch__checked": p,
+			"cl-switch_disabled": s
+		}
+	]), _ = () => {
+		s || m(!p);
+	};
+	return /* @__PURE__ */ r("div", {
+		role: "switch",
+		"aria-checked": p,
+		"aria-label": o,
+		tabIndex: s ? -1 : 0,
+		className: g,
+		onClick: _,
+		onKeyDown: h,
+		id: l,
+		children: [
+			/* @__PURE__ */ n("input", {
+				type: "checkbox",
+				name: u,
+				value: d,
+				checked: p,
+				disabled: s,
+				className: "cl-switch__input",
+				readOnly: !0,
+				"data-testid": "switch-input"
+			}),
+			/* @__PURE__ */ n("span", {
+				className: "cl-switch__label",
+				children: o
+			}),
+			f && /* @__PURE__ */ n("span", {
+				className: "cl-switch__indicator",
+				"aria-hidden": "true",
+				children: p ? "On" : "Off"
+			}),
+			/* @__PURE__ */ n("span", {
+				className: "cl-switch__track",
+				children: /* @__PURE__ */ n("span", { className: "cl-switch__thumb" })
+			})
+		]
+	});
+};
+//#endregion
+export { i as default };

package/dist/components/molecules/text-input/TextInput.controller.js

@@ -1,36 +1,47 @@
-import { useContext as T, useState as l, useRef as p, useCallback as P } from "react";
-import { getTextInputInitialValue as b, validateTextInputValue as k } from "./TextInput.helpers.js";
-import { FormContext as j } from "../../contexts/form/FormContext.js";
-import { useResetFormInput as q } from "../../../hooks/use-reset-form-input/use-reset-form-input.js";
-function D({
-  name: t,
-  defaultValue: v,
-  onChange: f,
-  onClear: h,
-  required: m,
-  validator: C
-}) {
-  const { onChangeFormInput: e, initialValues: g } = T(j), n = b({ initialValues: g, defaultValue: v, name: t }), [I, o] = l(n), [V, r] = l(!0), [s, x] = l(!1), i = p(e), u = p(n);
-  i.current = e, u.current = n;
-  const w = (c) => {
-    const a = c.target.value, d = k({ value: a, required: m, validator: C });
-    o(a), r(d), e?.({ name: t, value: a, valid: d }), f?.(c);
-  }, R = () => {
-    o(""), r(!0), e?.({ name: t, value: "", valid: !0 }), h?.();
-  }, F = P(() => {
-    o(u.current), r(!0), i.current?.({ name: t, value: u.current, valid: !0 });
-  }, [t]), S = () => {
-    x(!s);
-  };
-  return q(F), {
-    value: I,
-    valid: V,
-    passwordShown: s,
-    handleChange: w,
-    handleClear: R,
-    togglePassword: S
-  };
+import { FormContext as e } from "../../contexts/form/FormContext.js";
+import { useResetFormInput as t } from "../../../hooks/use-reset-form-input/use-reset-form-input.js";
+import { getTextInputInitialValue as n, validateTextInputValue as r } from "./TextInput.helpers.js";
+import { useCallback as i, useContext as a, useRef as o, useState as s } from "react";
+//#region src/components/molecules/text-input/TextInput.controller.ts
+function c({ name: c, defaultValue: l, onChange: u, onClear: d, required: f, validator: p }) {
+	let { onChangeFormInput: m, initialValues: h } = a(e), g = n({
+		initialValues: h,
+		defaultValue: l,
+		name: c
+	}), [_, v] = s(g), [y, b] = s(!0), [x, S] = s(!1), C = o(m), w = o(g);
+	return C.current = m, w.current = g, t(i(() => {
+		v(w.current), b(!0), C.current?.({
+			name: c,
+			value: w.current,
+			valid: !0
+		});
+	}, [c])), {
+		value: _,
+		valid: y,
+		passwordShown: x,
+		handleChange: (e) => {
+			let t = e.target.value, n = r({
+				value: t,
+				required: f,
+				validator: p
+			});
+			v(t), b(n), m?.({
+				name: c,
+				value: t,
+				valid: n
+			}), u?.(e);
+		},
+		handleClear: () => {
+			v(""), b(!0), m?.({
+				name: c,
+				value: "",
+				valid: !0
+			}), d?.();
+		},
+		togglePassword: () => {
+			S(!x);
+		}
+	};
 }
-export {
-  D as useTextInputController
-};
+//#endregion
+export { c as useTextInputController };

package/dist/components/molecules/text-input/TextInput.css

@@ -1 +1 @@
-.cl-text-input{display:flex;flex-direction:column;gap:var(--cl-m-gap);width:100%}.cl-text-input__error-message{position:absolute;right:0;top:44px}@media screen and (min-width:640px){.cl-text-input__error-message{top:48px}}@media screen and (min-width:1024px){.cl-text-input__error-message{top:52px}}
+.cl-text-input{gap:var(--cl-m-gap);flex-direction:column;width:100%;display:flex}.cl-text-input__error-message{position:absolute;top:44px;right:0}@media screen and (width>=640px){.cl-text-input__error-message{top:48px}}@media screen and (width>=1024px){.cl-text-input__error-message{top:52px}}

package/dist/components/molecules/text-input/TextInput.helpers.js

@@ -1,18 +1,9 @@
-function r({
-  value: e,
-  required: n,
-  validator: t
-}) {
-  return n && !t && !e.length ? !1 : t && typeof t == "function" ? t(e) : t && typeof t == "object" ? new RegExp(t.regexp, t?.flags).test(e) : !0;
+//#region src/components/molecules/text-input/TextInput.helpers.ts
+function e({ value: e, required: t, validator: n }) {
+	return t && !n && !e.length ? !1 : n && typeof n == "function" ? n(e) : n && typeof n == "object" ? new RegExp(n.regexp, n?.flags).test(e) : !0;
 }
-function f({
-  name: e,
-  initialValues: n,
-  defaultValue: t
-}) {
-  return n?.[e] ? n[e].toString() : t && typeof t == "string" ? t : "";
+function t({ name: e, initialValues: t, defaultValue: n }) {
+	return t?.[e] ? t[e].toString() : n && typeof n == "string" ? n : "";
 }
-export {
-  f as getTextInputInitialValue,
-  r as validateTextInputValue
-};
+//#endregion
+export { t as getTextInputInitialValue, e as validateTextInputValue };

package/dist/components/molecules/text-input/TextInput2.js

@@ -0,0 +1,7 @@
+import e from "./TextInputStateful.js";
+import t from "./TextInputStateless.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/molecules/text-input/TextInput.tsx
+var r = (r) => r.stateless ? /* @__PURE__ */ n(t, { ...r }) : /* @__PURE__ */ n(e, { ...r });
+//#endregion
+export { r as default };

package/dist/components/molecules/text-input/TextInputButtons.js

@@ -1,37 +1,20 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import n from "../../atoms/button/Button.js";
-import { IconName as o } from "../../../enums/icon-name.js";
-import { ButtonView as r } from "../../../enums/button-view.js";
-const I = ({
-  clearable: i,
-  isPasswordButtonVisible: l,
-  handleClear: m,
-  togglePassword: p,
-  passwordShown: s,
-  label: f,
-  disabled: e
-}) => /* @__PURE__ */ a("span", { children: [
-  i && /* @__PURE__ */ t(
-    n,
-    {
-      view: r.Inner,
-      onClick: m,
-      label: `Clear input for ${f}`,
-      icon: o.Delete,
-      disabled: e
-    }
-  ),
-  l && /* @__PURE__ */ t(
-    n,
-    {
-      onClick: p,
-      view: r.Inner,
-      label: "Toggle password visibility",
-      icon: s ? o.EyeOff : o.Eye,
-      disabled: e
-    }
-  )
-] });
-export {
-  I as default
-};
+import { ButtonView as e } from "../../../enums/button-view.js";
+import { IconName as t } from "../../../enums/icon-name.js";
+import n from "../../atoms/button/Button2.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/molecules/text-input/TextInputButtons.tsx
+var a = ({ clearable: a, isPasswordButtonVisible: o, handleClear: s, togglePassword: c, passwordShown: l, label: u, disabled: d }) => /* @__PURE__ */ i("span", { children: [a && /* @__PURE__ */ r(n, {
+	view: e.Inner,
+	onClick: s,
+	label: `Clear input for ${u}`,
+	icon: t.Delete,
+	disabled: d
+}), o && /* @__PURE__ */ r(n, {
+	onClick: c,
+	view: e.Inner,
+	label: "Toggle password visibility",
+	icon: l ? t.EyeOff : t.Eye,
+	disabled: d
+})] });
+//#endregion
+export { a as default };

package/dist/components/molecules/text-input/TextInputStateful.js

@@ -1,92 +1,63 @@
-import { jsxs as f, jsx as e } from "react/jsx-runtime";
-import { getClassName as M } from "../../../utils/get-class-name.js";
-import { useTextInputController as V } from "./TextInput.controller.js";
-import './TextInput.css';/* empty css              */
-import k from "./TextInputButtons.js";
-import { useElementIds as z } from "../../../hooks/use-element-ids/use-element-ids.js";
-import A from "../../atoms/label/Label.js";
-import D from "../../atoms/input/Input.js";
-import F from "../../atoms/error-message/ErrorMessage.js";
-const Y = ({
-  name: r,
-  label: s,
-  errorMessage: u,
-  defaultValue: d,
-  onChange: c,
-  onBlur: x,
-  onFocus: g,
-  onClear: h,
-  validator: I,
-  maxLength: C,
-  id: v,
-  tabIndex: w,
-  placeholder: T = "Type here...",
-  disabled: o = !1,
-  required: t = !1,
-  clearable: N = !0,
-  readOnly: a = !1,
-  autoComplete: j = "off",
-  type: n = "text",
-  className: B,
-  style: E
-}) => {
-  const { value: P, valid: i, handleChange: S, handleClear: _, passwordShown: l, togglePassword: b } = V({
-    defaultValue: d,
-    name: r,
-    onChange: c,
-    onClear: h,
-    required: t,
-    validator: I
-  }), { elementId: m, errorId: p } = z(v), y = n === "password", L = M(["cl-text-input", B]);
-  return /* @__PURE__ */ f("div", { style: E, className: L, children: [
-    /* @__PURE__ */ e(A, { label: s, required: t, inputId: m }),
-    /* @__PURE__ */ f(
-      D,
-      {
-        id: m,
-        name: r,
-        type: l ? "text" : n,
-        disabled: o,
-        placeholder: T,
-        required: t,
-        readOnly: a,
-        autoComplete: j,
-        "aria-invalid": !i,
-        "aria-errormessage": p,
-        "aria-readonly": a,
-        value: P,
-        onChange: S,
-        maxLength: C,
-        onBlur: x,
-        onFocus: g,
-        tabIndex: w,
-        children: [
-          /* @__PURE__ */ e(
-            k,
-            {
-              clearable: N,
-              isPasswordButtonVisible: y,
-              handleClear: _,
-              togglePassword: b,
-              passwordShown: l,
-              label: s,
-              disabled: o
-            }
-          ),
-          /* @__PURE__ */ e(
-            F,
-            {
-              errorId: p,
-              message: u,
-              visible: !i,
-              className: "cl-text-input__error-message"
-            }
-          )
-        ]
-      }
-    )
-  ] });
-};
-export {
-  Y as default
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import t from "../../atoms/error-message/ErrorMessage2.js";
+import n from "../../atoms/input/Input2.js";
+import r from "../../atoms/label/Label2.js";
+import { useElementIds as i } from "../../../hooks/use-element-ids/use-element-ids.js";
+import { useTextInputController as a } from "./TextInput.controller.js";
+import './TextInput.css';/* empty css          */
+import o from "./TextInputButtons.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/molecules/text-input/TextInputStateful.tsx
+var l = ({ name: l, label: u, errorMessage: d, defaultValue: f, onChange: p, onBlur: m, onFocus: h, onClear: g, validator: _, maxLength: v, id: y, tabIndex: b, placeholder: x = "Type here...", disabled: S = !1, required: C = !1, clearable: w = !0, readOnly: T = !1, autoComplete: E = "off", type: D = "text", className: O, style: k }) => {
+	let { value: A, valid: j, handleChange: M, handleClear: N, passwordShown: P, togglePassword: F } = a({
+		defaultValue: f,
+		name: l,
+		onChange: p,
+		onClear: g,
+		required: C,
+		validator: _
+	}), { elementId: I, errorId: L } = i(y), R = D === "password";
+	return /* @__PURE__ */ c("div", {
+		style: k,
+		className: e(["cl-text-input", O]),
+		children: [/* @__PURE__ */ s(r, {
+			label: u,
+			required: C,
+			inputId: I
+		}), /* @__PURE__ */ c(n, {
+			id: I,
+			name: l,
+			type: P ? "text" : D,
+			disabled: S,
+			placeholder: x,
+			required: C,
+			readOnly: T,
+			autoComplete: E,
+			"aria-invalid": !j,
+			"aria-errormessage": L,
+			"aria-readonly": T,
+			value: A,
+			onChange: M,
+			maxLength: v,
+			onBlur: m,
+			onFocus: h,
+			tabIndex: b,
+			children: [/* @__PURE__ */ s(o, {
+				clearable: w,
+				isPasswordButtonVisible: R,
+				handleClear: N,
+				togglePassword: F,
+				passwordShown: P,
+				label: u,
+				disabled: S
+			}), /* @__PURE__ */ s(t, {
+				errorId: L,
+				message: d,
+				visible: !j,
+				className: "cl-text-input__error-message"
+			})]
+		})]
+	});
 };
+//#endregion
+export { l as default };