@arthurzakharov/ui-kit 1.3.8 → 1.4.0

package/dist/control.component-B9Ao9mfl.js

@@ -1,557 +0,0 @@
-import { Box as oe } from "./components/control/components/box/box.component.js";
-import { Button as te } from "./components/control/components/button/button.component.js";
-import { jsx as e, jsxs as T } from "react/jsx-runtime";
-import { useRef as A, useState as G, useEffect as U, useMemo as ne } from "react";
-import { useHover as Y, useToggle as L, useBoolean as P, useResizeObserver as ae, useOnClickOutside as le } from "usehooks-ts";
-import S from "clsx";
-import { ButtonText as re } from "./components/control/components/button-text/button-text.component.js";
-import { useChoice as Z } from "./components/control/hooks/useChoice/useChoice.hook.js";
-import { getChoiceId as J, clickHasNode as ie } from "./components/control/utils/functions/functions.util.js";
-import { Converter as ee } from "./utils/converter/converter.util.js";
-import { Choice as se } from "./components/control/components/choice/choice.component.js";
-import { ChevronDown as ce, Search as de } from "lucide-react";
-import { HiddenInput as ue } from "./components/control/components/hidden-input/hidden-input.component.js";
-import { I as he } from "./input.component-C5xcmnfu.js";
-import { Label as Ce } from "./components/control/components/label/label.component.js";
-import { RadioLabel as me } from "./components/control/components/radio-label/radio-label.component.js";
-import { RadioText as pe } from "./components/control/components/radio-text/radio-text.component.js";
-import { Status as _e } from "./components/control/components/status/status.component.js";
-import { Animation as X } from "./animations/animation.component.js";
-import { Svg as xe } from "./utils/svg/svg.component.js";
-import './assets/control-Dk23qyF8.css';const be = "_ButtonCard_1qq7t_1", fe = "_ButtonCardIcon_1qq7t_10", Be = "_ButtonCardIconTop_1qq7t_14", ve = "_ButtonCardText_1qq7t_21", Te = "_ButtonCardIconLeft_1qq7t_25", z = {
-  ButtonCard: be,
-  ButtonCardIcon: fe,
-  ButtonCardIconTop: Be,
-  ButtonCardText: ve,
-  ButtonCardIconLeft: Te
-}, we = (h) => {
-  const {
-    children: f,
-    onClick: p,
-    onFocus: _,
-    onBlur: a,
-    icon: o = null,
-    iconPosition: l = "top",
-    active: r = !1,
-    disabled: C = !1,
-    preventDefault: n = !1,
-    blurAfterClick: d = !1
-  } = h, x = A(null), c = Y(x), [u, i] = L(!1);
-  return /* @__PURE__ */ e(t.Box, { ref: x, checked: r || c, state: "idle", focused: u, children: /* @__PURE__ */ T(
-    "button",
-    {
-      type: "button",
-      disabled: C,
-      className: S(z.ButtonCard, {
-        [z.ButtonCardIconTop]: l === "top",
-        [z.ButtonCardIconLeft]: l === "left"
-      }),
-      onClick: (s) => {
-        n && s.preventDefault(), d && s.currentTarget.blur(), p?.call(null);
-      },
-      onFocus: () => {
-        i(), _?.call(null);
-      },
-      onBlur: () => {
-        i(), a?.call(null);
-      },
-      children: [
-        /* @__PURE__ */ e(xe, { icon: o, className: z.ButtonCardIcon }),
-        /* @__PURE__ */ e(
-          t.RadioText,
-          {
-            oneLine: !0,
-            size: "lg",
-            checked: r,
-            color: C ? "secondary" : "primary",
-            className: z.ButtonCardText,
-            children: f
-          }
-        )
-      ]
-    }
-  ) });
-}, ge = "_ButtonRadio_1rilo_1", Re = "_ButtonRadioRow_1rilo_14", De = "_ButtonRadioWrap_1rilo_23", Ie = "_ButtonRadioContent_1rilo_32", Ne = "_ButtonRadioText_1rilo_42", ke = "_ButtonRadioHint_1rilo_50", R = {
-  ButtonRadio: ge,
-  ButtonRadioRow: Re,
-  ButtonRadioWrap: De,
-  ButtonRadioContent: Ie,
-  ButtonRadioText: Ne,
-  ButtonRadioHint: ke
-}, ye = (h) => {
-  const {
-    children: f,
-    onClick: p,
-    onFocus: _,
-    onBlur: a,
-    info: o,
-    active: l = !1,
-    disabled: r = !1,
-    preventDefault: C = !1,
-    blurAfterClick: n = !1
-  } = h, d = A(null), x = Y(d), [c, u] = L(!1);
-  return /* @__PURE__ */ e(t.Box, { ref: d, checked: l || x, state: "idle", focused: c, children: /* @__PURE__ */ e(
-    "button",
-    {
-      type: "button",
-      disabled: r,
-      className: R.ButtonRadio,
-      onClick: (i) => {
-        C && i.preventDefault(), n && i.currentTarget.blur(), p?.call(null);
-      },
-      onFocus: () => {
-        u(), _?.call(null);
-      },
-      onBlur: () => {
-        u(), a?.call(null);
-      },
-      children: /* @__PURE__ */ T("div", { className: R.ButtonRadioWrap, children: [
-        /* @__PURE__ */ e(t.Status, { state: l ? "success" : "idle" }),
-        /* @__PURE__ */ T("div", { className: R.ButtonRadioContent, children: [
-          /* @__PURE__ */ T("div", { className: R.ButtonRadioRow, children: [
-            /* @__PURE__ */ e(t.RadioText, { oneLine: !0, size: "lg", checked: l, color: r ? "secondary" : "primary", children: f }),
-            o?.text ? /* @__PURE__ */ e("span", { className: R.ButtonRadioText, children: o.text }) : null
-          ] }),
-          (o?.hintLeft || o?.hintRight) && /* @__PURE__ */ T("div", { className: R.ButtonRadioRow, children: [
-            /* @__PURE__ */ e("span", { className: R.ButtonRadioHint, children: o.hintLeft }),
-            /* @__PURE__ */ e("span", { className: R.ButtonRadioHint, children: o.hintRight })
-          ] })
-        ] })
-      ] })
-    }
-  ) });
-}, Le = "_CardImage_dw1xq_1", Se = "_CardImageContent_dw1xq_13", ze = "_CardImageTop_dw1xq_27", He = "_CardImageWrap_dw1xq_32", Fe = "_CardImageBottom_dw1xq_43", H = {
-  CardImage: Le,
-  CardImageContent: Se,
-  CardImageTop: ze,
-  CardImageWrap: He,
-  CardImageBottom: Fe
-}, Ae = (h) => {
-  const { sprite: f, choices: p, state: _ = "idle", id: a, value: o, disabled: l, onChange: r } = h, { type: C, onChoiceChange: n } = Z(o, a, r);
-  return /* @__PURE__ */ e("div", { className: H.CardImage, children: p.map((d, x, c) => {
-    const u = J(a, d.value, x);
-    return /* @__PURE__ */ e(
-      t.RadioLabel,
-      {
-        id: u,
-        value: o,
-        state: _,
-        choice: d,
-        choices: c,
-        children: ({ focused: i, hovered: s, checked: b, state: w }) => /* @__PURE__ */ e(t.Box, { state: w, checked: b, focused: i, children: /* @__PURE__ */ T("div", { className: H.CardImageContent, children: [
-          /* @__PURE__ */ e(
-            t.HiddenInput,
-            {
-              type: C,
-              id: u,
-              name: a,
-              value: d.value,
-              checked: b,
-              disabled: l,
-              onChange: () => n(d.value)
-            }
-          ),
-          /* @__PURE__ */ e("div", { className: H.CardImageTop, children: /* @__PURE__ */ e(
-            "div",
-            {
-              "data-image": d.icon,
-              style: { backgroundImage: `url(${f})` },
-              className: H.CardImageWrap
-            }
-          ) }),
-          /* @__PURE__ */ T("div", { className: H.CardImageBottom, children: [
-            /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-              t.Choice,
-              {
-                type: C,
-                state: w,
-                checked: b,
-                focused: i,
-                hovered: s,
-                disabled: l
-              }
-            ) }),
-            /* @__PURE__ */ e(t.RadioText, { size: "md", checked: b, children: d.label })
-          ] })
-        ] }) })
-      },
-      u
-    );
-  }) });
-}, $e = "_CardText_1eht8_1", qe = "_CardTextLabel_1eht8_9", Oe = "_CardTextChoice_1eht8_24", j = {
-  CardText: $e,
-  CardTextLabel: qe,
-  CardTextChoice: Oe
-}, We = (h) => {
-  const { choices: f, state: p = "idle", id: _, value: a, disabled: o = !1, onChange: l } = h, { type: r, onChoiceChange: C } = Z(a, _, l);
-  return /* @__PURE__ */ e("div", { className: j.CardText, children: f.map((n, d, x) => {
-    const c = J(_, n.value, d);
-    return /* @__PURE__ */ e(
-      t.RadioLabel,
-      {
-        id: c,
-        value: a,
-        state: p,
-        choice: n,
-        choices: x,
-        children: ({ focused: u, hovered: i, checked: s, state: b }) => /* @__PURE__ */ e(t.Box, { state: b, checked: s, focused: u, children: /* @__PURE__ */ T("div", { className: j.CardTextLabel, children: [
-          /* @__PURE__ */ e(
-            t.HiddenInput,
-            {
-              type: r,
-              id: c,
-              name: _,
-              value: n.value,
-              checked: s,
-              disabled: o,
-              onChange: (w, B) => C(n.value, B)
-            }
-          ),
-          /* @__PURE__ */ e("div", { className: j.CardTextChoice, children: /* @__PURE__ */ e(
-            t.Choice,
-            {
-              type: r,
-              state: b,
-              checked: s,
-              focused: u,
-              hovered: i,
-              disabled: o
-            }
-          ) }),
-          /* @__PURE__ */ e(t.RadioText, { size: "lg", checked: s, children: n.label })
-        ] }) })
-      },
-      c
-    );
-  }) });
-}, Pe = "_Checkbox_1ez0v_1", Ve = "_CheckboxChoice_1ez0v_14", Me = "_CheckboxContent_1ez0v_20", Ee = "_CheckboxContentTextBody_1ez0v_39", Ge = "_CheckboxContentTextBodySmall_1ez0v_44", F = {
-  Checkbox: Pe,
-  CheckboxChoice: Ve,
-  CheckboxContent: Me,
-  CheckboxContentTextBody: Ee,
-  CheckboxContentTextBodySmall: Ge
-}, je = (h) => {
-  const {
-    children: f,
-    state: p = "idle",
-    icon: _ = "md",
-    text: a = "body-small",
-    id: o,
-    value: l,
-    disabled: r = !1,
-    onChange: C,
-    onFocus: n,
-    onBlur: d
-  } = h, [x, c] = L(!1), [u, i] = L(!1), s = (I) => {
-    r || x || (I.preventDefault(), C(!l, o));
-  }, b = (I) => {
-    r || (I.stopPropagation(), C(!l, o));
-  }, w = () => {
-    r || (c(), n?.call(null, o));
-  }, B = () => {
-    r || (c(), d?.call(null, o));
-  };
-  return /* @__PURE__ */ T(
-    "label",
-    {
-      htmlFor: o,
-      className: F.Checkbox,
-      onClick: s,
-      onFocus: w,
-      onBlur: B,
-      onMouseEnter: () => i(),
-      onMouseLeave: () => i(),
-      children: [
-        /* @__PURE__ */ e(
-          t.HiddenInput,
-          {
-            type: "checkbox",
-            id: o,
-            name: o,
-            value: ee.Boolean.ToBooleanString(l),
-            checked: l,
-            disabled: r,
-            onChange: b
-          }
-        ),
-        /* @__PURE__ */ e("div", { className: F.CheckboxChoice, children: /* @__PURE__ */ e(
-          t.Choice,
-          {
-            type: "checkbox",
-            size: _,
-            state: p,
-            checked: l,
-            focused: x,
-            hovered: u,
-            disabled: r
-          }
-        ) }),
-        /* @__PURE__ */ e(
-          "div",
-          {
-            className: S(F.CheckboxContent, {
-              [F.CheckboxContentTextBody]: a === "body",
-              [F.CheckboxContentTextBodySmall]: a === "body-small"
-            }),
-            children: f
-          }
-        )
-      ]
-    }
-  );
-}, Ke = "_Dropdown_1bylm_1", Je = "_DropdownBorder_1bylm_17", Qe = "_DropdownContent_1bylm_28", Ue = "_DropdownChevron_1bylm_39", Xe = "_DropdownChevronWrap_1bylm_53", Ye = "_DropdownBox_1bylm_69", Ze = "_DropdownBoxVisible_1bylm_75", eo = "_DropdownBoxHidden_1bylm_79", oo = "_DropdownSearch_1bylm_83", to = "_DropdownSearchVisible_1bylm_89", no = "_DropdownSearchHidden_1bylm_93", ao = "_DropdownClose_1bylm_97", lo = "_DropdownInput_1bylm_106", ro = "_DropdownGlass_1bylm_120", io = "_DropdownChoices_1bylm_131", so = "_DropdownChoice_1bylm_131", co = "_DropdownChoiceNoResult_1bylm_151", v = {
-  Dropdown: Ke,
-  DropdownBorder: Je,
-  DropdownContent: Qe,
-  DropdownChevron: Ue,
-  DropdownChevronWrap: Xe,
-  DropdownBox: Ye,
-  DropdownBoxVisible: Ze,
-  DropdownBoxHidden: eo,
-  DropdownSearch: oo,
-  DropdownSearchVisible: to,
-  DropdownSearchHidden: no,
-  DropdownClose: ao,
-  DropdownInput: lo,
-  DropdownGlass: ro,
-  DropdownChoices: io,
-  DropdownChoice: so,
-  DropdownChoiceNoResult: co
-}, uo = (h) => {
-  const { choices: f = [], value: p = [], isSearchHidden: _ = !1, multiple: a = !1, onChange: o, onOpen: l, onClose: r } = h, C = h.label || "", n = h.placeholder || "Wählen Sie Ihre private Krankenversicherung...", d = h.noResult || "Keine Versicherung gefunden.", x = h.closeButton || "Schließen", c = A(null), u = A(null), i = A(null), { value: s, setFalse: b, toggle: w } = P(!1), [B, I] = G(""), [N, $] = G({ width: 0, height: 0 }), [y, q] = G([]);
-  ae({
-    ref: u,
-    onResize: (m) => $({ width: m.width || 0, height: m.height || 0 })
-  }), le(u, (m) => {
-    ie(m, c) || (a && o(y), b());
-  }), U(() => q(Array.isArray(p) ? p : []), [p]), U(() => {
-    s && N.width && N.height ? (i.current?.focus(), l?.call(null, N.height, N.width)) : r?.call(null);
-  }, [s, N]);
-  const V = (m, k) => {
-    q((g) => g.some(({ value: E }) => E === m) ? g.filter(({ value: E }) => E !== m) : [...g, { value: m, label: k }]);
-  }, M = () => {
-    b(), o(y);
-  }, O = ne(
-    () => f.filter(({ label: m }) => m.toLowerCase().includes(B.toLowerCase())),
-    [B, f]
-  );
-  return /* @__PURE__ */ T("div", { className: v.Dropdown, children: [
-    /* @__PURE__ */ e(t.Box, { ref: c, onClick: w, children: /* @__PURE__ */ T("div", { className: v.DropdownBorder, children: [
-      /* @__PURE__ */ T("div", { className: v.DropdownContent, children: [
-        /* @__PURE__ */ e(t.Label, { position: "active", children: C }),
-        /* @__PURE__ */ e(t.RadioText, { size: "lg", checked: !0, oneLine: !0, children: ee.Answer.FromArrayToMultiple(y.map(({ label: m }) => m)) || n })
-      ] }),
-      /* @__PURE__ */ e("div", { className: v.DropdownChevronWrap, children: /* @__PURE__ */ e(ce, { "data-open": s, className: v.DropdownChevron }) })
-    ] }) }),
-    /* @__PURE__ */ e(t.Box, { ref: u, className: s ? v.DropdownBoxVisible : v.DropdownBoxHidden, children: /* @__PURE__ */ T("div", { className: v.DropdownBox, children: [
-      /* @__PURE__ */ T("div", { className: S(v.DropdownSearch, _ ? v.DropdownSearchHidden : v.DropdownSearchVisible), children: [
-        /* @__PURE__ */ e(
-          "input",
-          {
-            ref: i,
-            value: B,
-            type: "text",
-            className: v.DropdownInput,
-            onChange: (m) => I(m.target.value)
-          }
-        ),
-        /* @__PURE__ */ e(de, { className: v.DropdownGlass })
-      ] }),
-      /* @__PURE__ */ e("ul", { className: v.DropdownChoices, children: O.length ? O.map(({ value: m, label: k }, g) => /* @__PURE__ */ T(
-        "li",
-        {
-          className: v.DropdownChoice,
-          onClick: () => {
-            a ? V(m, k) : (b(), o([{ value: m, label: k }]));
-          },
-          children: [
-            a && /* @__PURE__ */ e(
-              t.Choice,
-              {
-                type: "checkbox",
-                checked: y.some((Q) => Q.value === m)
-              }
-            ),
-            /* @__PURE__ */ e(t.RadioText, { size: "lg", checked: !1, children: k })
-          ]
-        },
-        m + g
-      )) : /* @__PURE__ */ e("li", { className: S(v.DropdownChoice, v.DropdownChoiceNoResult), children: /* @__PURE__ */ e(t.RadioText, { size: "lg", checked: !1, children: d }) }) }),
-      a && /* @__PURE__ */ e("div", { className: v.DropdownClose, children: /* @__PURE__ */ e(t.Button, { color: "primary", size: "sm", type: "button", onClick: () => M(), children: x }) })
-    ] }) })
-  ] });
-}, ho = "_Radio_1wc8m_1", Co = "_RadioOrientationHorizontal_1wc8m_5", mo = "_RadioOrientationVertical_1wc8m_10", po = "_RadioLabel_1wc8m_15", W = {
-  Radio: ho,
-  RadioOrientationHorizontal: Co,
-  RadioOrientationVertical: mo,
-  RadioLabel: po
-}, _o = (h) => {
-  const { orientation: f, choices: p, state: _ = "idle", icon: a = "md", id: o, value: l, disabled: r = !1, onChange: C } = h;
-  return /* @__PURE__ */ e(
-    "div",
-    {
-      className: S(W.Radio, {
-        [W.RadioOrientationHorizontal]: f === "horizontal",
-        [W.RadioOrientationVertical]: f === "vertical"
-      }),
-      children: p.map((n, d, x) => {
-        const c = J(o, n.value, d);
-        return /* @__PURE__ */ e(
-          t.RadioLabel,
-          {
-            id: c,
-            value: l,
-            state: _,
-            choice: n,
-            choices: x,
-            children: ({ focused: u, hovered: i, checked: s, state: b }) => /* @__PURE__ */ T("div", { className: W.RadioLabel, children: [
-              /* @__PURE__ */ e(
-                t.Choice,
-                {
-                  type: "radio",
-                  size: a,
-                  state: b,
-                  checked: s,
-                  focused: u,
-                  hovered: i,
-                  disabled: r
-                }
-              ),
-              /* @__PURE__ */ e(
-                t.HiddenInput,
-                {
-                  type: "radio",
-                  id: c,
-                  value: n.value,
-                  name: o,
-                  checked: s,
-                  disabled: r,
-                  onChange: () => C(n.value, o)
-                }
-              ),
-              /* @__PURE__ */ e(t.RadioText, { size: "lg", checked: s, children: n.label })
-            ] })
-          },
-          c
-        );
-      })
-    }
-  );
-}, xo = "_Text_biltz_1", bo = "_TextContent_biltz_14", fo = "_TextLabel_biltz_26", Bo = "_TextLabelIdle_biltz_32", vo = "_TextLabelActive_biltz_37", To = "_TextPlaceholder_biltz_42", wo = "_TextPlaceholderText_biltz_49", go = "_TextErrorMessage_biltz_57", D = {
-  Text: xo,
-  TextContent: bo,
-  TextLabel: fo,
-  TextLabelIdle: Bo,
-  TextLabelActive: vo,
-  TextPlaceholder: To,
-  TextPlaceholderText: wo,
-  TextErrorMessage: go
-}, Ro = (h) => {
-  const {
-    label: f,
-    message: p = "",
-    placeholder: _ = "",
-    dateMask: a = !1,
-    maxLength: o,
-    state: l = "idle",
-    type: r = "text",
-    id: C,
-    value: n,
-    disabled: d = !1,
-    onChange: x,
-    onFocus: c,
-    onBlur: u
-  } = h, { value: i, setTrue: s, setFalse: b } = P(!0), { value: w, setTrue: B, setFalse: I } = P(!0), [N, $] = L(), y = !i || !!n, q = !!_ && !i && !n && !w, V = !!p && l === "error", M = () => {
-    B(), b();
-  }, O = () => {
-    n || (I(), s());
-  }, m = (g) => {
-    n || b(), $(), c?.call(null, g);
-  }, k = (g) => {
-    n || s(), $(), u?.call(null, g);
-  };
-  return /* @__PURE__ */ T("div", { className: D.Text, children: [
-    /* @__PURE__ */ e(t.Box, { state: l, focused: N, children: /* @__PURE__ */ T("label", { htmlFor: C, className: D.TextContent, children: [
-      /* @__PURE__ */ e("div", { className: S(D.TextLabel, y ? D.TextLabelActive : D.TextLabelIdle), children: /* @__PURE__ */ e(t.Label, { position: i ? "idle" : "active", state: i ? "idle" : l, children: f }) }),
-      /* @__PURE__ */ e(X.FadeScale, { name: "text-placeholder", condition: q, className: D.TextPlaceholder, children: /* @__PURE__ */ e("span", { className: D.TextPlaceholderText, children: _ }) }),
-      /* @__PURE__ */ e(
-        t.Input,
-        {
-          dateMask: a,
-          maxLength: o,
-          disabled: d,
-          type: r,
-          id: C,
-          value: n,
-          onChange: x,
-          onAutofill: M,
-          onAutofillCancel: O,
-          onFocus: m,
-          onBlur: k
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ e(X.FadeSlide, { flex: !0, name: "text-message", condition: V, children: /* @__PURE__ */ e("span", { className: D.TextErrorMessage, children: p }) })
-  ] });
-}, Do = "_Textarea_1eevb_1", K = {
-  Textarea: Do,
-  "autofill-start": "_autofill-start_1eevb_1",
-  "autofill-cancel": "_autofill-cancel_1eevb_1"
-}, Io = (h) => {
-  const { state: f = "idle", placeholder: p = "", rows: _ = 5, id: a, value: o, disabled: l = !1, onChange: r, onFocus: C, onBlur: n } = h, { value: d, setTrue: x, setFalse: c } = P(!0), [u, i] = L(!1), s = (B) => {
-    B.animationName === K["autofill-start"] && c(), B.animationName === K["autofill-cancel"] && !o && x();
-  }, b = (B) => {
-    o || c(), i(), C?.call(null, B);
-  }, w = (B) => {
-    o || x(), i(), n?.call(null, B);
-  };
-  return /* @__PURE__ */ e(t.Box, { state: f, focused: u, children: /* @__PURE__ */ e(
-    "textarea",
-    {
-      "data-testid": "textarea",
-      "data-is-idle": d,
-      disabled: l,
-      id: a,
-      rows: _,
-      placeholder: p,
-      value: o,
-      className: K.Textarea,
-      onChange: (B) => r(B.target.value, a, "keyboard"),
-      onAnimationStart: s,
-      onFocus: () => b(a),
-      onBlur: () => w(a)
-    }
-  ) });
-}, t = {
-  Box: oe,
-  Button: te,
-  ButtonCard: we,
-  ButtonRadio: ye,
-  ButtonText: re,
-  CardImage: Ae,
-  CardText: We,
-  Checkbox: je,
-  Choice: se,
-  Dropdown: uo,
-  HiddenInput: ue,
-  Input: he,
-  Label: Ce,
-  Radio: _o,
-  RadioLabel: me,
-  RadioText: pe,
-  Status: _e,
-  Text: Ro,
-  Textarea: Io
-};
-export {
-  we as B,
-  t as C,
-  uo as D,
-  _o as R,
-  Ro as T,
-  ye as a,
-  Ae as b,
-  We as c,
-  je as d,
-  Io as e
-};