react-component-kit-ui 0.0.0-stage → 0.1.0

package/dist/chunks/TagsAutocompleteInput-BdbVqPbF.js

@@ -0,0 +1,467 @@
+"use client";
+import { jsx as e, Fragment as g, jsxs as c } from "react/jsx-runtime";
+import { useRef as b, useEffect as y } from "react";
+function C({ label: l, initialChips: r = [], name: d, placeholder: t = "Add tag..." }) {
+  const o = b(!1);
+  return y(() => {
+    o.current || (o.current = !0, document.querySelectorAll("[data-chip-input]").forEach((s) => {
+      const a = s.querySelector("[data-chip-list]"), n = s.querySelector("[data-chip-field]"), i = (u) => {
+        if (!u.trim() || !a) return;
+        const f = document.createElement("span");
+        f.className = "chip", f.innerHTML = `${u}<button type="button" aria-label="Remove ${u}" data-remove-chip>×</button>`;
+        const h = document.createElement("input");
+        h.type = "hidden", h.name = "chips[]", h.value = u, f.appendChild(h), a.appendChild(f), n.value = "", n.placeholder = "";
+      };
+      n == null || n.addEventListener("keydown", (u) => {
+        u.key === "Enter" && (u.preventDefault(), i(n.value)), u.key === "Backspace" && !n.value && (a != null && a.lastElementChild) && (a.removeChild(a.lastElementChild), a.children.length === 0 && (n.placeholder = "Add tag..."));
+      }), s.addEventListener("click", (u) => {
+        var h;
+        const f = u.target;
+        f.hasAttribute("data-remove-chip") && ((h = f.closest(".chip")) == null || h.remove(), (a == null ? void 0 : a.children.length) === 0 && (n.placeholder = "Add tag..."));
+      });
+    }));
+  }, []), /* @__PURE__ */ e(g, { children: /* @__PURE__ */ c("div", { className: "chip-input-container", "data-rk-36ed34": "", children: [
+    l && /* @__PURE__ */ e("label", { className: "chip-input-label", "data-rk-36ed34": "", children: l }),
+    /* @__PURE__ */ c("div", { className: "chip-input", "data-chip-input": !0, "data-rk-36ed34": "", children: [
+      /* @__PURE__ */ e("div", { className: "chip-input__list", "data-chip-list": !0, "data-rk-36ed34": "", children: r.map((s, a) => /* @__PURE__ */ c("span", { className: "chip", "data-rk-36ed34": "", children: [
+        s,
+        /* @__PURE__ */ e("button", { type: "button", "aria-label": `Remove ${s}`, "data-remove-chip": !0, "data-rk-36ed34": "", children: "×" }),
+        /* @__PURE__ */ e("input", { type: "hidden", name: `${d}[]`, defaultValue: s, "data-rk-36ed34": "" })
+      ] }, a)) }),
+      /* @__PURE__ */ e("input", { type: "text", className: "chip-input__field", placeholder: r.length > 0 ? "" : t, "data-chip-field": !0, "data-rk-36ed34": "" })
+    ] })
+  ] }) });
+}
+function L({ label: l, id: r, value: d = "#6366f1", name: t }) {
+  const o = b(!1);
+  return y(() => {
+    o.current || (o.current = !0, document.querySelectorAll(".color-input").forEach((s) => {
+      const a = s.closest(".color-picker-wrap"), n = a == null ? void 0 : a.querySelector("[data-color-value]");
+      s.addEventListener("input", (i) => {
+        n && (n.textContent = i.target.value);
+      });
+    }));
+  }, []), /* @__PURE__ */ e(g, { children: /* @__PURE__ */ c("div", { className: "color-picker-wrap", "data-rk-e8d0de": "", children: [
+    /* @__PURE__ */ c("div", { className: "color-input-container", "data-rk-e8d0de": "", children: [
+      /* @__PURE__ */ e("input", { type: "color", className: "color-input", id: r, name: t, defaultValue: d, "data-rk-e8d0de": "" }),
+      /* @__PURE__ */ e("label", { htmlFor: r, className: "color-label", "data-rk-e8d0de": "", children: l })
+    ] }),
+    /* @__PURE__ */ e("span", { className: "color-value", "data-color-value": !0, "data-rk-e8d0de": "", children: d })
+  ] }) });
+}
+function A({ label: l, id: r, symbol: d = "$", value: t = 0, name: o, step: s = 0.01 }) {
+  return /* @__PURE__ */ e(g, { children: /* @__PURE__ */ c("div", { className: "curr-input-container", "data-rk-a847a3": "", children: [
+    /* @__PURE__ */ e("label", { htmlFor: r, className: "curr-label", "data-rk-a847a3": "", children: l }),
+    /* @__PURE__ */ c("div", { className: "curr-wrap", "data-rk-a847a3": "", children: [
+      /* @__PURE__ */ e("span", { className: "curr-symbol", "data-rk-a847a3": "", children: d }),
+      /* @__PURE__ */ e("input", { type: "number", id: r, name: o, step: s, defaultValue: t.toFixed(2), className: "curr-field", "data-rk-a847a3": "" })
+    ] })
+  ] }) });
+}
+function q({ label: l, id: r, name: d, checked: t = !1 }) {
+  return /* @__PURE__ */ e(g, { children: /* @__PURE__ */ c("label", { className: "cyber-check", htmlFor: r, "data-rk-43f10f": "", children: [
+    /* @__PURE__ */ e("input", { type: "checkbox", id: r, name: d, defaultChecked: t, "data-rk-43f10f": "" }),
+    /* @__PURE__ */ e("span", { className: "checkmark", "aria-hidden": "true", "data-rk-43f10f": "" }),
+    /* @__PURE__ */ e("span", { className: "cyber-text", "data-rk-43f10f": "", children: l })
+  ] }) });
+}
+function $({ label: l = "Drag files here or browse", id: r, name: d, accept: t, multiple: o = !1 }) {
+  const s = b(!1);
+  return y(() => {
+    s.current || (s.current = !0, document.querySelectorAll("[data-upload-zone]").forEach((a) => {
+      const n = a.querySelector("[data-upload-input]");
+      a.addEventListener("click", () => n.click()), a.addEventListener("dragover", (i) => {
+        i.preventDefault(), a.classList.add("upload-zone--dragging");
+      }), ["dragleave", "drop"].forEach((i) => {
+        a.addEventListener(i, () => a.classList.remove("upload-zone--dragging"));
+      }), a.addEventListener("drop", (i) => {
+        var u;
+        i.preventDefault(), (u = i.dataTransfer) != null && u.files && (n.files = i.dataTransfer.files, n.dispatchEvent(new Event("change")));
+      });
+    }));
+  }, []), /* @__PURE__ */ e(g, { children: /* @__PURE__ */ c("div", { className: "upload-zone", "data-upload-zone": !0, "data-rk-e188c4": "", children: [
+    /* @__PURE__ */ e("div", { className: "upload-zone__icon", "aria-hidden": "true", "data-rk-e188c4": "", children: /* @__PURE__ */ c("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "data-rk-e188c4": "", children: [
+      /* @__PURE__ */ e("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", "data-rk-e188c4": "" }),
+      /* @__PURE__ */ e("polyline", { points: "17 8 12 3 7 8", "data-rk-e188c4": "" }),
+      /* @__PURE__ */ e("line", { x1: "12", y1: "3", x2: "12", y2: "15", "data-rk-e188c4": "" })
+    ] }) }),
+    /* @__PURE__ */ e("p", { className: "upload-zone__text", "data-rk-e188c4": "", children: l.split("browse").map((a, n) => n === 0 ? /* @__PURE__ */ c("span", { "data-rk-e188c4": "", children: [
+      a,
+      " ",
+      /* @__PURE__ */ e("span", { className: "upload-zone__link", "data-rk-e188c4": "", children: "browse" })
+    ] }) : a) }),
+    /* @__PURE__ */ e("input", { type: "file", id: r, name: d, accept: t, multiple: o, hidden: !0, className: "upload-zone__input", "data-upload-input": !0, "data-rk-e188c4": "" })
+  ] }) });
+}
+function F({ id: l, errorMessage: r, value: d = "", placeholder: t, name: o }) {
+  return /* @__PURE__ */ e(g, { children: /* @__PURE__ */ c("div", { className: "error-wrap", "data-rk-3b29fa": "", children: [
+    /* @__PURE__ */ e("input", { type: "text", id: l, name: o, defaultValue: d, placeholder: t, className: "input-error", "aria-invalid": "true", "aria-describedby": `${l}-error`, "data-rk-3b29fa": "" }),
+    /* @__PURE__ */ e("span", { id: `${l}-error`, className: "error-msg", "aria-live": "polite", "data-rk-3b29fa": "", children: r })
+  ] }) });
+}
+function T({ id: l, placeholder: r = "Password", name: d, required: t = !1 }) {
+  const o = b(!1);
+  return y(() => {
+    o.current || (o.current = !0, document.querySelectorAll(".pass-wrap").forEach((s) => {
+      const a = s.querySelector("[data-pwd-toggle]"), n = s.querySelector("[data-pwd-input]");
+      a && n && a.addEventListener("click", () => {
+        const i = n.type === "password";
+        n.type = i ? "text" : "password", a.textContent = i ? "🙈" : "👁️";
+      });
+    }));
+  }, []), /* @__PURE__ */ e(g, { children: /* @__PURE__ */ c("div", { className: "pass-wrap", "data-rk-1ae42d": "", children: [
+    /* @__PURE__ */ e("input", { type: "password", id: l, name: d, placeholder: r, required: t, className: "pass-input", "data-pwd-input": !0, "data-rk-1ae42d": "" }),
+    /* @__PURE__ */ e("button", { type: "button", className: "toggle-pass", "aria-label": "Toggle password visibility", "data-pwd-toggle": !0, "data-rk-1ae42d": "", children: "👁️" })
+  ] }) });
+}
+function w(...l) {
+  const r = [], d = (t) => {
+    if (t) {
+      if (typeof t == "string" || typeof t == "number") r.push(String(t));
+      else if (Array.isArray(t)) t.forEach(d);
+      else if (typeof t == "object")
+        for (const [o, s] of Object.entries(t)) s && r.push(o);
+    }
+  };
+  return l.forEach(d), r.join(" ");
+}
+function R({
+  label: l,
+  forId: r,
+  helpText: d,
+  error: t,
+  required: o = !1,
+  children: s
+}) {
+  return /* @__PURE__ */ e(g, { children: /* @__PURE__ */ c("div", { className: w(["form-group", { "form-group--error": t }]), "data-rk-ec85ff": "", children: [
+    /* @__PURE__ */ e("div", { className: "form-group__header", "data-rk-ec85ff": "", children: /* @__PURE__ */ c("label", { htmlFor: r, className: "form-group__label", "data-rk-ec85ff": "", children: [
+      l,
+      o && /* @__PURE__ */ e("span", { className: "form-group__req", "aria-hidden": "true", "data-rk-ec85ff": "", children: "*" })
+    ] }) }),
+    /* @__PURE__ */ e("div", { className: "form-group__content", "data-rk-ec85ff": "", children: s }),
+    t ? /* @__PURE__ */ e("p", { className: "form-group__error", id: `${r}-error`, role: "alert", "data-rk-ec85ff": "", children: t }) : d ? /* @__PURE__ */ e("p", { className: "form-group__help", id: `${r}-help`, "data-rk-ec85ff": "", children: d }) : null
+  ] }) });
+}
+function j({ label: l, id: r, name: d, min: t = 0, max: o = 100, value: s = 50, step: a = 1 }) {
+  const n = b(!1);
+  return y(() => {
+    n.current || (n.current = !0, document.querySelectorAll("[data-slider-input]").forEach((i) => {
+      var f;
+      const u = (f = i.closest(".slider-container")) == null ? void 0 : f.querySelector("[data-slider-value]");
+      i.addEventListener("input", (h) => {
+        u && (u.textContent = h.target.value);
+      });
+    }));
+  }, []), /* @__PURE__ */ e(g, { children: /* @__PURE__ */ c("div", { className: "slider-container", "data-rk-0cd7ec": "", children: [
+    l && /* @__PURE__ */ c("div", { className: "slider-header", "data-rk-0cd7ec": "", children: [
+      /* @__PURE__ */ e("label", { htmlFor: r, "data-rk-0cd7ec": "", children: l }),
+      " ",
+      /* @__PURE__ */ e("span", { "data-slider-value": !0, "data-rk-0cd7ec": "", children: s })
+    ] }),
+    /* @__PURE__ */ e("input", { type: "range", className: "glass-slider", id: r, name: d, min: t, max: o, step: a, defaultValue: s, "data-slider-input": !0, "data-rk-0cd7ec": "" })
+  ] }) });
+}
+function D({ label: l, id: r, rows: d = 4, placeholder: t = "Start typing...", name: o, required: s = !1 }) {
+  return /* @__PURE__ */ e(g, { children: /* @__PURE__ */ c("div", { className: "glass-textarea-wrap", "data-rk-3bd942": "", children: [
+    /* @__PURE__ */ e("label", { htmlFor: r, className: "glass-label", "data-rk-3bd942": "", children: l }),
+    /* @__PURE__ */ e("textarea", { id: r, name: o, rows: d, placeholder: t, required: s, className: "glass-textarea", "data-rk-3bd942": "" })
+  ] }) });
+}
+function M({ label: l, id: r, name: d, checked: t = !1 }) {
+  return /* @__PURE__ */ e(g, { children: /* @__PURE__ */ c("div", { className: "neu-switch-wrapper", "data-rk-3cc0c3": "", children: [
+    /* @__PURE__ */ c("label", { className: "neu-switch", "data-rk-3cc0c3": "", children: [
+      /* @__PURE__ */ e("input", { type: "checkbox", id: r, name: d, defaultChecked: t, "data-rk-3cc0c3": "" }),
+      /* @__PURE__ */ e("span", { className: "slider", "data-rk-3cc0c3": "" })
+    ] }),
+    l && /* @__PURE__ */ e("label", { htmlFor: r, className: "neu-label", "data-rk-3cc0c3": "", children: l })
+  ] }) });
+}
+function B({ label: l, id: r, length: d = 4, name: t = "otp" }) {
+  const o = b(!1);
+  return y(() => {
+    o.current || (o.current = !0, document.querySelectorAll("[data-otp-group]").forEach((s) => {
+      const a = s.querySelectorAll("input");
+      a.forEach((n, i) => {
+        n.addEventListener("input", (u) => {
+          u.target.value && i < a.length - 1 && a[i + 1].focus();
+        }), n.addEventListener("keydown", (u) => {
+          u.key === "Backspace" && !n.value && i > 0 && a[i - 1].focus();
+        }), n.addEventListener("paste", (u) => {
+          var h;
+          u.preventDefault();
+          const f = ((h = u.clipboardData) == null ? void 0 : h.getData("text").slice(0, a.length).split("")) || [];
+          f.forEach((m, p) => {
+            a[p] && (a[p].value = m);
+          }), a[f.length - 1] && a[f.length - 1].focus();
+        });
+      });
+    }));
+  }, []), /* @__PURE__ */ e(g, { children: /* @__PURE__ */ c("div", { className: "otp-container", "data-rk-a692f6": "", children: [
+    l && /* @__PURE__ */ e("label", { className: "otp-label", "data-rk-a692f6": "", children: l }),
+    /* @__PURE__ */ e("div", { className: "otp-wrap", "data-otp-group": !0, "data-rk-a692f6": "", children: Array.from({ length: d }).map((s, a) => /* @__PURE__ */ e("input", { type: "text", inputMode: "numeric", maxLength: 1, pattern: "[0-9]*", autoComplete: "one-time-code", id: `${r}-${a}`, name: `${t}[]`, className: "otp-field", "data-otp-index": a, "data-rk-a692f6": "" }, a)) })
+  ] }) });
+}
+function G({ name: l = "rating", maxRating: r = 5, idPrefix: d = "star", initialValue: t = 0 }) {
+  return /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e("div", { className: "rating-stars", "data-rating-group": !0, "data-rk-fddc65": "", children: Array.from({ length: r }).map((o, s) => {
+    const a = r - s;
+    return /* @__PURE__ */ c(g, { children: [
+      /* @__PURE__ */ e("input", { type: "radio", name: l, id: `${d}-${a}`, defaultValue: a, defaultChecked: t === a, className: "rating-stars__input", "data-rk-fddc65": "" }),
+      /* @__PURE__ */ e("label", { htmlFor: `${d}-${a}`, className: "rating-stars__star", "aria-label": `${a} stars`, "data-rk-fddc65": "", children: /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "data-rk-fddc65": "", children: /* @__PURE__ */ e("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2", "data-rk-fddc65": "" }) }) })
+    ] });
+  }) }) });
+}
+function P({ id: l, placeholder: r = "Search...", name: d }) {
+  return /* @__PURE__ */ e(g, { children: /* @__PURE__ */ c("div", { className: "search-box", "data-rk-85c2fd": "", children: [
+    /* @__PURE__ */ e("input", { type: "search", id: l, name: d, placeholder: r, className: "search-input", "aria-label": "Search content", "data-rk-85c2fd": "" }),
+    /* @__PURE__ */ e("button", { type: "button", "aria-label": "Submit search", className: "search-btn", "data-rk-85c2fd": "", children: /* @__PURE__ */ c("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "data-rk-85c2fd": "", children: [
+      /* @__PURE__ */ e("circle", { cx: "11", cy: "11", r: "8", "data-rk-85c2fd": "" }),
+      /* @__PURE__ */ e("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65", "data-rk-85c2fd": "" })
+    ] }) })
+  ] }) });
+}
+function V({ name: l, options: r = [], idPrefix: d = "seg" }) {
+  return /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e("div", { className: "segmented", "data-rk-260788": "", children: r.map((t, o) => /* @__PURE__ */ c("div", { className: "segmented-item", "data-rk-260788": "", children: [
+    /* @__PURE__ */ e("input", { type: "radio", name: l, id: `${d}-${o}`, defaultValue: t.value, defaultChecked: t.checked, className: "segmented-input", "data-rk-260788": "" }),
+    /* @__PURE__ */ e("label", { htmlFor: `${d}-${o}`, className: "segmented-label", "data-rk-260788": "", children: t.label })
+  ] }, o)) }) });
+}
+function I({ label: l = "Choose File", id: r, name: d, accept: t }) {
+  return /* @__PURE__ */ e(g, { children: /* @__PURE__ */ c("label", { className: "file-btn", htmlFor: r, "data-rk-908bfa": "", children: [
+    /* @__PURE__ */ e("input", { type: "file", id: r, name: d, accept: t, className: "file-btn__input", "data-rk-908bfa": "" }),
+    /* @__PURE__ */ e("span", { className: "file-btn__label", "data-rk-908bfa": "", children: l })
+  ] }) });
+}
+function S(...l) {
+  const r = [], d = (t) => {
+    if (t) {
+      if (typeof t == "string" || typeof t == "number") r.push(String(t));
+      else if (Array.isArray(t)) t.forEach(d);
+      else if (typeof t == "object")
+        for (const [o, s] of Object.entries(t)) s && r.push(o);
+    }
+  };
+  return l.forEach(d), r.join(" ");
+}
+function W({
+  name: l = "toggle-options",
+  options: r = [
+    { label: "Weekly", value: "week" },
+    { label: "Monthly", value: "month" },
+    { label: "Yearly", value: "year" }
+  ],
+  defaultValue: d = "month",
+  size: t = "md"
+}) {
+  const o = b(!1);
+  return y(() => {
+    if (o.current) return;
+    o.current = !0;
+    function s() {
+      document.querySelectorAll("[data-toggle-group]").forEach((a) => {
+        const n = a.querySelector("[data-toggle-slider]"), i = a.querySelectorAll("[data-toggle-radio]");
+        if (!n || i.length === 0) return;
+        function u() {
+          const f = a.querySelector("[data-toggle-radio]:checked");
+          if (!f) return;
+          const h = f.closest(".glass-toggle-group__item");
+          if (!h) return;
+          const m = a.getBoundingClientRect(), p = h.getBoundingClientRect(), k = p.left - m.left;
+          n.style.width = `${p.width}px`, n.style.transform = `translateX(${k - 4}px)`;
+        }
+        i.forEach((f) => f.addEventListener("change", u)), u(), window.addEventListener("resize", u);
+      });
+    }
+    s();
+  }, []), /* @__PURE__ */ e(g, { children: /* @__PURE__ */ c("div", { className: S(["glass-toggle-group", `glass-toggle-group--${t}`]), role: "radiogroup", "data-toggle-group": !0, "data-rk-c99a88": "", children: [
+    /* @__PURE__ */ e("div", { className: "glass-toggle-group__slider", "data-toggle-slider": !0, "aria-hidden": "true", "data-rk-c99a88": "" }),
+    r.map((s, a) => {
+      const n = s.value === d;
+      return /* @__PURE__ */ c("label", { className: "glass-toggle-group__item", "data-rk-c99a88": "", children: [
+        /* @__PURE__ */ e("input", { type: "radio", name: l, defaultValue: s.value, defaultChecked: n, className: "glass-toggle-group__radio", "data-toggle-radio": !0, "data-rk-c99a88": "" }),
+        /* @__PURE__ */ c("span", { className: "glass-toggle-group__label", "data-rk-c99a88": "", children: [
+          s.icon && /* @__PURE__ */ e("span", { className: "glass-toggle-group__icon", dangerouslySetInnerHTML: { __html: s.icon }, "data-rk-c99a88": "" }),
+          s.label
+        ] })
+      ] }, a);
+    })
+  ] }) });
+}
+function z({
+  id: l = "password-input",
+  label: r = "Password",
+  name: d = "password",
+  placeholder: t = "Enter secure password",
+  required: o = !1
+}) {
+  const s = b(!1);
+  return y(() => {
+    if (s.current) return;
+    s.current = !0;
+    function a() {
+      document.querySelectorAll("[data-pwd-group]").forEach((n) => {
+        const i = n.querySelector("[data-pwd-input]"), u = n.querySelector("[data-pwd-toggle]"), f = n.querySelector("[data-pwd-status]");
+        if (!i || !u) return;
+        const h = u.querySelector(".eye-open"), m = u.querySelector(".eye-closed");
+        u.addEventListener("click", () => {
+          const p = i.type === "password";
+          i.type = p ? "text" : "password", h && m && (h.style.display = p ? "none" : "block", m.style.display = p ? "block" : "none");
+        }), i.addEventListener("input", () => {
+          const p = i.value;
+          let k = 0;
+          p.length >= 6 && k++, p.length >= 10 && k++, /[A-Z]/.test(p) && /[0-9]/.test(p) && k++, /[^A-Za-z0-9]/.test(p) && k++, n.setAttribute("data-level", String(k));
+          const v = ["Too weak", "Weak", "Fair", "Strong", "Secure & Robust"];
+          f && (f.textContent = v[k] || "Too weak");
+        });
+      });
+    }
+    a();
+  }, []), /* @__PURE__ */ e(g, { children: /* @__PURE__ */ c("div", { className: "pwd-group", "data-pwd-group": !0, "data-rk-7f0f04": "", children: [
+    /* @__PURE__ */ c("div", { className: "pwd-group__header", "data-rk-7f0f04": "", children: [
+      /* @__PURE__ */ e("label", { htmlFor: l, className: "pwd-group__label", "data-rk-7f0f04": "", children: r }),
+      /* @__PURE__ */ e("span", { className: "pwd-group__status", "data-pwd-status": !0, "data-rk-7f0f04": "", children: "Too weak" })
+    ] }),
+    /* @__PURE__ */ c("div", { className: "pwd-group__field", "data-rk-7f0f04": "", children: [
+      /* @__PURE__ */ e("input", { type: "password", id: l, name: d, placeholder: t, required: o, className: "pwd-group__input", "data-pwd-input": !0, autoComplete: "new-password", "data-rk-7f0f04": "" }),
+      /* @__PURE__ */ c("button", { type: "button", className: "pwd-group__toggle", "aria-label": "Toggle password visibility", "data-pwd-toggle": !0, "data-rk-7f0f04": "", children: [
+        /* @__PURE__ */ c("svg", { className: "eye-open", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "data-rk-7f0f04": "", children: [
+          /* @__PURE__ */ e("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z", "data-rk-7f0f04": "" }),
+          /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "3", "data-rk-7f0f04": "" })
+        ] }),
+        /* @__PURE__ */ c("svg", { className: "eye-closed", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { display: "none" }, "data-rk-7f0f04": "", children: [
+          /* @__PURE__ */ e("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24", "data-rk-7f0f04": "" }),
+          /* @__PURE__ */ e("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68", "data-rk-7f0f04": "" }),
+          /* @__PURE__ */ e("path", { d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61", "data-rk-7f0f04": "" }),
+          /* @__PURE__ */ e("line", { x1: "2", x2: "22", y1: "2", y2: "22", "data-rk-7f0f04": "" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ c("div", { className: "pwd-group__meter", "aria-hidden": "true", "data-rk-7f0f04": "", children: [
+      /* @__PURE__ */ e("div", { className: "pwd-group__segment", "data-seg": "1", "data-rk-7f0f04": "" }),
+      /* @__PURE__ */ e("div", { className: "pwd-group__segment", "data-seg": "2", "data-rk-7f0f04": "" }),
+      /* @__PURE__ */ e("div", { className: "pwd-group__segment", "data-seg": "3", "data-rk-7f0f04": "" }),
+      /* @__PURE__ */ e("div", { className: "pwd-group__segment", "data-seg": "4", "data-rk-7f0f04": "" })
+    ] })
+  ] }) });
+}
+function O({
+  id: l = "phone-number-input",
+  label: r = "Phone Number",
+  name: d = "phone",
+  placeholder: t = "612 345 678",
+  required: o = !1
+}) {
+  const s = [
+    { code: "+34", flag: "🇪🇸", name: "ES" },
+    { code: "+1", flag: "🇺🇸", name: "US" },
+    { code: "+44", flag: "🇬🇧", name: "UK" },
+    { code: "+49", flag: "🇩🇪", name: "DE" },
+    { code: "+33", flag: "🇫🇷", name: "FR" },
+    { code: "+52", flag: "🇲🇽", name: "MX" },
+    { code: "+54", flag: "🇦🇷", name: "AR" }
+  ];
+  return /* @__PURE__ */ e(g, { children: /* @__PURE__ */ c("div", { className: "phone-group", "data-rk-8315ab": "", children: [
+    /* @__PURE__ */ e("label", { htmlFor: l, className: "phone-group__label", "data-rk-8315ab": "", children: r }),
+    /* @__PURE__ */ c("div", { className: "phone-group__wrap", "data-rk-8315ab": "", children: [
+      /* @__PURE__ */ c("div", { className: "phone-group__prefix", "data-rk-8315ab": "", children: [
+        /* @__PURE__ */ e("select", { className: "phone-group__select", "aria-label": "Country calling code", name: `${d}_country`, "data-rk-8315ab": "", children: s.map((a, n) => /* @__PURE__ */ c("option", { value: a.code, "data-rk-8315ab": "", children: [
+          a.flag,
+          " ",
+          a.code
+        ] }, n)) }),
+        /* @__PURE__ */ e("span", { className: "phone-group__arrow", "aria-hidden": "true", "data-rk-8315ab": "", children: "▾" })
+      ] }),
+      /* @__PURE__ */ e("input", { type: "tel", id: l, name: d, placeholder: t, required: o, className: "phone-group__input", autoComplete: "tel-national", "data-rk-8315ab": "" })
+    ] })
+  ] }) });
+}
+function H({
+  id: l = "tags-autocomplete",
+  label: r = "Tags",
+  initialTags: d = ["React", "TypeScript"],
+  suggestions: t = ["React", "Tailwind", "Three.js", "SSR", "Vite", "GraphQL"],
+  placeholder: o = "Add tag & press Enter..."
+}) {
+  const s = b(!1);
+  return y(() => {
+    if (s.current) return;
+    s.current = !0;
+    function a() {
+      document.querySelectorAll("[data-tags-root]").forEach((n) => {
+        const i = n.querySelector("[data-tags-input]"), u = n.querySelector("[data-tags-list]"), f = n.querySelector("[data-tags-suggestions]");
+        if (!i || !u) return;
+        function h(m) {
+          const p = m.trim();
+          if (!p || Array.from(u.querySelectorAll(".tag-pill__name")).some(
+            (_) => {
+              var N;
+              return ((N = _.textContent) == null ? void 0 : N.toLowerCase()) === p.toLowerCase();
+            }
+          )) return;
+          const v = document.createElement("span");
+          v.className = "tag-pill", v.setAttribute("data-tag", p), v.innerHTML = `
+              <span class="tag-pill__name">${p}</span>
+              <button type="button" class="tag-pill__remove" aria-label="Remove tag ${p}" data-tag-remove>×</button>
+            `, u.appendChild(v), i.value = "";
+        }
+        u.addEventListener("click", (m) => {
+          const p = m.target;
+          if (p.matches("[data-tag-remove]")) {
+            const k = p.closest(".tag-pill");
+            k && k.remove();
+          }
+        }), i.addEventListener("keydown", (m) => {
+          if (m.key === "Enter" || m.key === ",")
+            m.preventDefault(), h(i.value);
+          else if (m.key === "Backspace" && !i.value) {
+            const p = u.querySelector(".tag-pill:last-child");
+            p && p.remove();
+          }
+        }), i.addEventListener("focus", () => {
+          f && (f.hidden = !1);
+        }), f && f.addEventListener("click", (m) => {
+          const p = m.target.closest("[data-sug-val]");
+          if (p) {
+            const k = p.getAttribute("data-sug-val");
+            k && h(k);
+          }
+        });
+      });
+    }
+    a();
+  }, []), /* @__PURE__ */ e(g, { children: /* @__PURE__ */ c("div", { className: "tags-field", "data-tags-root": !0, "data-rk-ba8ccd": "", children: [
+    /* @__PURE__ */ e("label", { htmlFor: l, className: "tags-field__label", "data-rk-ba8ccd": "", children: r }),
+    /* @__PURE__ */ c("div", { className: "tags-field__box", "data-tags-box": !0, "data-rk-ba8ccd": "", children: [
+      /* @__PURE__ */ e("div", { className: "tags-field__list", "data-tags-list": !0, "data-rk-ba8ccd": "", children: d.map((a, n) => /* @__PURE__ */ c("span", { className: "tag-pill", "data-tag": a, "data-rk-ba8ccd": "", children: [
+        /* @__PURE__ */ e("span", { className: "tag-pill__name", "data-rk-ba8ccd": "", children: a }),
+        /* @__PURE__ */ e("button", { type: "button", className: "tag-pill__remove", "aria-label": `Remove tag ${a}`, "data-tag-remove": !0, "data-rk-ba8ccd": "", children: "×" })
+      ] }, n)) }),
+      /* @__PURE__ */ e("input", { type: "text", id: l, placeholder: o, className: "tags-field__input", "data-tags-input": !0, autoComplete: "off", "data-rk-ba8ccd": "" })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "tags-field__suggestions", "data-tags-suggestions": !0, hidden: !0, "data-rk-ba8ccd": "", children: t.map((a, n) => /* @__PURE__ */ c("button", { type: "button", className: "sug-item", "data-sug-val": a, "data-rk-ba8ccd": "", children: [
+      "+ ",
+      a
+    ] }, n)) })
+  ] }) });
+}
+export {
+  C,
+  $ as D,
+  F as E,
+  T as F,
+  W as G,
+  M as N,
+  B as O,
+  z as P,
+  G as R,
+  P as S,
+  H as T,
+  L as a,
+  A as b,
+  q as c,
+  R as d,
+  j as e,
+  D as f,
+  O as g,
+  V as h,
+  I as i
+};