chop-logic-components 3.7.2 → 4.0.0

package/dist/components/molecules/search/Search.controller.js

@@ -0,0 +1,42 @@
+import { useState as y, useRef as s, useEffect as E, useCallback as r } from "react";
+import { useDebounce as B } from "../../../hooks/use-debounce/use-debounce.js";
+function x({
+  onSearch: o,
+  onClear: i,
+  maxLength: S = 50,
+  minLength: b = 1,
+  searchMode: c = "automatic",
+  debounceDelay: d = 500
+}) {
+  const [e, h] = y(""), f = c === "manual", g = !f, p = e.length > 0, a = e.length >= b && e.trim().length > 0 && e.length <= S, u = B(e, d), n = s(o), V = s(c), m = s(a);
+  n.current = o, V.current = c, m.current = a, E(() => {
+    u.trim().length > 0 && V.current === "automatic" && m.current && n.current?.(u);
+  }, [u]);
+  const C = r((t) => {
+    const R = t.target.value;
+    h(R);
+  }, []), l = r(() => {
+    h(""), i?.();
+  }, [i]), k = r(() => {
+    n.current?.(e);
+  }, [e]), D = r(
+    (t) => {
+      t.key === "Enter" ? (t.preventDefault(), n.current && n.current(e)) : t.key === "Escape" && (t.preventDefault(), l());
+    },
+    [l, e]
+  );
+  return {
+    searchValue: e,
+    isSearchButtonVisible: f,
+    isLabelIconVisible: g,
+    isClearButtonVisible: p,
+    isSearchValueValid: a,
+    handleChange: C,
+    handleClear: l,
+    handleSearchClick: k,
+    handleKeyDown: D
+  };
+}
+export {
+  x as useSearchController
+};

package/dist/components/molecules/search/Search.css

@@ -0,0 +1 @@
+.cl-search{display:flex;flex-direction:column;gap:var(--cl-m-gap);width:100%}.cl-search input[type=search]::-webkit-search-decoration,.cl-search input[type=search]::-webkit-search-cancel-button,.cl-search input[type=search]::-webkit-search-results-button,.cl-search input[type=search]::-webkit-search-results-decoration{display:none;-webkit-appearance:none}.cl-search input[type=search]::-ms-clear,.cl-search input[type=search]::-ms-reveal{display:none;width:0;height:0}.cl-search input:placeholder-shown+span{display:inline-block}

package/dist/components/molecules/search/Search.js

@@ -0,0 +1,112 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { getClassName as W } from "../../../utils/get-class-name.js";
+import { useRef as $ } from "react";
+import './Search.css';/* empty css           */
+import { useSearchController as z } from "./Search.controller.js";
+import { useElementIds as A } from "../../../hooks/use-element-ids/use-element-ids.js";
+import G from "../../atoms/label/Label.js";
+import { IconName as r } from "../../../enums/icon-name.js";
+import H from "../../atoms/input/Input.js";
+import u from "../../atoms/button/Button.js";
+import { ButtonView as f } from "../../../enums/button-view.js";
+const oe = ({
+  label: i,
+  onSearch: h,
+  onBlur: p,
+  onFocus: d,
+  onClear: C,
+  id: I,
+  tabIndex: S,
+  className: V,
+  maxLength: n = 50,
+  minLength: t = 1,
+  searchMode: b = "automatic",
+  name: v = "q",
+  placeholder: w = "Type to search...",
+  disabled: a = !1,
+  clearable: y = !0,
+  spellCheck: B = !1,
+  autoComplete: k = "off",
+  debounceDelay: D = 500,
+  required: l,
+  ...N
+}) => {
+  const { elementId: s } = A(I), o = $(null), j = W(["cl-search", V]), {
+    searchValue: x,
+    isSearchButtonVisible: K,
+    isLabelIconVisible: c,
+    isClearButtonVisible: P,
+    isSearchValueValid: R,
+    handleChange: g,
+    handleClear: q,
+    handleSearchClick: E,
+    handleKeyDown: F
+  } = z({
+    onSearch: h,
+    onClear: C,
+    maxLength: n,
+    minLength: t,
+    searchMode: b,
+    debounceDelay: D
+  }), T = () => {
+    q(), o.current && o.current.focus();
+  };
+  return /* @__PURE__ */ m("div", { ...N, className: j, children: [
+    /* @__PURE__ */ e(
+      G,
+      {
+        label: i,
+        required: !!l,
+        inputId: s,
+        icon: c ? r.Search : void 0,
+        iconPosition: c ? "left" : void 0
+      }
+    ),
+    /* @__PURE__ */ e(
+      H,
+      {
+        ref: o,
+        id: s,
+        name: v,
+        type: "search",
+        value: x,
+        onChange: g,
+        onKeyDown: F,
+        onBlur: p,
+        onFocus: d,
+        disabled: a,
+        placeholder: w,
+        autoComplete: k,
+        maxLength: n,
+        minLength: t,
+        spellCheck: B,
+        tabIndex: S,
+        required: l,
+        children: /* @__PURE__ */ m("span", { children: [
+          y && P && /* @__PURE__ */ e(
+            u,
+            {
+              view: f.Inner,
+              onClick: T,
+              label: `Clear search input for ${i}`,
+              icon: r.Delete
+            }
+          ),
+          K && /* @__PURE__ */ e(
+            u,
+            {
+              view: f.Inner,
+              onClick: E,
+              label: "Perform search",
+              icon: r.Search,
+              disabled: a || !R
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+};
+export {
+  oe as default
+};

package/dist/components/molecules/search/index.js

@@ -0,0 +1,3 @@
+export { default } from './Search.js';
+export * from './Search.js';
+import './Search.css';

package/dist/components/molecules/select/Select.controller.js

@@ -0,0 +1,32 @@
+import { useContext as I, useState as d, useRef as f, useCallback as x } from "react";
+import { getSelectInitialValue as b } from "./Select.helpers.js";
+import { FormContext as k } from "../../contexts/form/FormContext.js";
+import { useResetFormInput as w } from "../../../hooks/use-reset-form-input/use-reset-form-input.js";
+function y({
+  name: e,
+  defaultValue: m,
+  onChange: c,
+  options: u
+}) {
+  const { onChangeFormInput: t, initialValues: p } = I(k), n = b({ name: e, options: u, defaultValue: m, initialValues: p }), [a, o] = d(!1), [C, l] = d(n), i = f(t), r = f(n);
+  i.current = t, r.current = n;
+  const h = () => o(!1), R = () => o(!a), S = (v) => {
+    const s = u.find((F) => F.id === v);
+    l(s), c?.(s), t?.({ name: e, value: s?.id });
+  }, V = () => {
+    l(void 0), c?.(void 0);
+  }, g = x(() => {
+    o(!1), l(r.current), i.current?.({ name: e, value: r.current?.id });
+  }, [e]);
+  return w(g), {
+    selected: C,
+    opened: a,
+    handleClear: V,
+    handleClose: h,
+    handleToggle: R,
+    handleSelect: S
+  };
+}
+export {
+  y as useSelectController
+};

package/dist/components/molecules/select/Select.css

@@ -0,0 +1 @@
+.cl-select{position:relative;display:flex;justify-content:space-between;flex-direction:column;gap:var(--cl-m-gap);background:transparent}

package/dist/components/molecules/select/Select.helpers.js

@@ -0,0 +1,16 @@
+function d({
+  name: o,
+  options: n,
+  initialValues: t,
+  defaultValue: r
+}) {
+  let f;
+  if (t && Object.hasOwn(t, o)) {
+    const c = t[o];
+    f = c?.id ?? c;
+  }
+  return !t?.[o] && r && typeof r == "string" && (f = r), n.find((c) => c.id === f);
+}
+export {
+  d as getSelectInitialValue
+};

package/dist/components/molecules/select/Select.js

@@ -0,0 +1,64 @@
+import { jsxs as g, jsx as t } from "react/jsx-runtime";
+import { getClassName as y } from "../../../utils/get-class-name.js";
+import { useRef as N } from "react";
+import './Select.css';/* empty css           */
+import { SelectCombobox as j } from "./combobox/Combobox.js";
+import { SelectDropdown as w } from "./dropdown/Dropdown.js";
+import { useSelectController as E } from "./Select.controller.js";
+import { useElementIds as K } from "../../../hooks/use-element-ids/use-element-ids.js";
+import { useClickOutside as O } from "../../../hooks/use-click-outside/use-click-outside.js";
+import { useKeyPress as P } from "../../../hooks/use-key-press/use-key-press.js";
+import v from "../../atoms/label/Label.js";
+const M = ({
+  options: s,
+  onChange: a,
+  name: r,
+  label: i,
+  defaultValue: p,
+  id: f,
+  placeholder: C = "Not selected",
+  required: m = !1,
+  disabled: u = !1,
+  className: b,
+  ...x
+}) => {
+  const e = N(null), { elementId: o, dropdownId: c } = K(f), { handleClear: I, handleClose: l, handleSelect: S, handleToggle: h, selected: n, opened: d } = E({
+    options: s,
+    onChange: a,
+    defaultValue: p,
+    name: r
+  }), k = y(["cl-select", b]);
+  return O({ ref: e, onClickOutsideHandler: l }), P({ keyCode: "Escape", ref: e, onKeyPress: l }), /* @__PURE__ */ g("div", { ref: e, ...x, className: k, children: [
+    /* @__PURE__ */ t(v, { label: i, required: m, inputId: o }),
+    /* @__PURE__ */ t(
+      j,
+      {
+        name: r,
+        opened: d,
+        comboboxId: o,
+        dropdownId: c,
+        onClick: h,
+        selected: n,
+        placeholder: C,
+        disabled: u,
+        required: m
+      }
+    ),
+    /* @__PURE__ */ t(
+      w,
+      {
+        options: s,
+        selected: n,
+        opened: d,
+        onClose: l,
+        dropdownId: c,
+        comboboxId: o,
+        onSelect: S,
+        onClear: I
+      }
+    )
+  ] });
+};
+export {
+  M as default
+};

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

@@ -0,0 +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)}

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

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

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

@@ -0,0 +1,3 @@
+export { default } from './Combobox.js';
+export * from './Combobox.js';
+import './Combobox.css';

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

@@ -0,0 +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}

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

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

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

@@ -0,0 +1,3 @@
+export { default } from './Dropdown.js';
+export * from './Dropdown.js';
+import './Dropdown.css';

package/dist/components/molecules/select/index.js

@@ -0,0 +1,3 @@
+export { default } from './Select.js';
+export * from './Select.js';
+import './Select.css';

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

@@ -0,0 +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}

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

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

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

@@ -0,0 +1,3 @@
+export { default } from './Option.js';
+export * from './Option.js';
+import './Option.css';

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

@@ -0,0 +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
+  };
+}
+export {
+  S as useSwitchController
+};

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

@@ -0,0 +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}

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

@@ -0,0 +1,10 @@
+function e({
+  defaultChecked: r,
+  initialValues: t,
+  name: o
+}) {
+  return t?.[o] !== void 0 ? !!t?.[o] : !!r;
+}
+export {
+  e as getSwitchInitialValue
+};

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

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

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

@@ -0,0 +1,3 @@
+export { default } from './Switch.js';
+export * from './Switch.js';
+import './Switch.css';

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

@@ -0,0 +1,36 @@
+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
+  };
+}
+export {
+  D as useTextInputController
+};

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

@@ -0,0 +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}}

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

@@ -0,0 +1,18 @@
+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;
+}
+function f({
+  name: e,
+  initialValues: n,
+  defaultValue: t
+}) {
+  return n?.[e] ? n[e].toString() : t && typeof t == "string" ? t : "";
+}
+export {
+  f as getTextInputInitialValue,
+  r as validateTextInputValue
+};

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

@@ -0,0 +1,7 @@
+import { jsx as e } from "react/jsx-runtime";
+import r from "./TextInputStateful.js";
+import u from "./TextInputStateless.js";
+const o = (t) => t.stateless ? /* @__PURE__ */ e(u, { ...t }) : /* @__PURE__ */ e(r, { ...t });
+export {
+  o as default
+};