se-design 0.0.120 → 0.0.122

package/dist/index42.js

@@ -1,111 +1,71 @@
-var j = Object.defineProperty;
-var m = Object.getOwnPropertySymbols;
-var x = Object.prototype.hasOwnProperty, h = Object.prototype.propertyIsEnumerable;
-var b = (e, t, a) => t in e ? j(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a, I = (e, t) => {
-  for (var a in t || (t = {}))
-    x.call(t, a) && b(e, a, t[a]);
-  if (m)
-    for (var a of m(t))
-      h.call(t, a) && b(e, a, t[a]);
-  return e;
+var h = Object.defineProperty;
+var n = Object.getOwnPropertySymbols;
+var x = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
+var l = (r, e, t) => e in r ? h(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, i = (r, e) => {
+  for (var t in e || (e = {}))
+    x.call(e, t) && l(r, t, e[t]);
+  if (n)
+    for (var t of n(e))
+      b.call(e, t) && l(r, t, e[t]);
+  return r;
 };
-var S = (e, t) => {
-  var a = {};
-  for (var l in e)
-    x.call(e, l) && t.indexOf(l) < 0 && (a[l] = e[l]);
-  if (e != null && m)
-    for (var l of m(e))
-      t.indexOf(l) < 0 && h.call(e, l) && (a[l] = e[l]);
-  return a;
-};
-import n, { useRef as q, useEffect as $ } from "react";
+import a, { useState as w, useEffect as k } from "react";
+import { Icon as m } from "./index5.js";
 /* empty css         */
-const J = /* @__PURE__ */ n.memo((z) => {
-  var N = z, {
-    value: e,
-    onChange: t,
-    disabled: a = !1,
-    maxLength: l,
-    tag: y = "input",
-    error: s = !1,
-    errorMessage: B,
-    label: E,
-    placeholder: L,
-    suggestions: i = [],
-    customRenderSuggestions: o,
-    onSuggestionClick: v
-  } = N, _ = S(N, [
-    "value",
-    "onChange",
-    "disabled",
-    "maxLength",
-    "tag",
-    "error",
-    "errorMessage",
-    "label",
-    "placeholder",
-    "suggestions",
-    "customRenderSuggestions",
-    "onSuggestionClick"
-  ]);
-  const [d, f] = n.useState([...i]), [A, u] = n.useState(!1), p = q(null), F = n.useCallback((c) => {
-    const r = c.target.value;
-    if (o)
-      t(r, !1);
-    else if (t(r), r === "")
-      f([...i]);
-    else if (r) {
-      const V = i == null ? void 0 : i.filter((C) => {
-        var k;
-        return typeof C == "string" && C.toLowerCase().includes((k = r == null ? void 0 : r.toLowerCase()) != null ? k : "");
-      });
-      f([...V]);
+const o = {
+  toastBarCtn: "min-h-[45px] fixed top-0 w-full flex items-center justify-center flex-wrap z-[1200]",
+  success: "linear-gradient(90deg, var(--color-green-700) 0%, var(--color-green-400) 100%)",
+  error: "linear-gradient(90deg, var(--color-red-700) 0%, var(--color-red-500) 100%)",
+  info: "var(--color-gray-700)",
+  toastMessageCtn: "flex items-center gap-2",
+  toastMessage: "text-[var(--color-white)] text-center word-break",
+  closeIconCtn: "absolute right-[12px] cursor-pointer cursor-pointer hover:bg-[var(--color-gray-500)] rounded-full p-1"
+}, M = ({
+  toastBarCtnClassName: r = "",
+  type: e,
+  message: t = "",
+  shouldAutoClose: u = !1,
+  delay: d = 5e3,
+  onClose: s = () => {
+  },
+  containerStyle: f = {}
+}) => {
+  const [g, v] = w(!0);
+  k(() => {
+    if (u) {
+      const p = setTimeout(() => {
+        c();
+      }, d);
+      return () => clearTimeout(p);
     }
-  }, [t, i, o]);
-  $(() => {
-    f([...i]);
-  }, [i]), $(() => {
-    const c = (r) => {
-      p.current && !p.current.contains(r.target) && u(!1);
-    };
-    return document.addEventListener("mousedown", c), () => {
-      document.removeEventListener("mousedown", c);
-    };
   }, []);
-  const O = () => {
-    u(!0);
-  }, w = (c) => {
-    t(c, !0), u(!1), v && v(c);
+  const c = () => {
+    setTimeout(() => {
+      v(!1), setTimeout(() => {
+        s == null || s();
+      }, 300);
+    }, 300);
   };
-  return /* @__PURE__ */ n.createElement("div", {
-    className: "main-container-autocomplete-se-design",
-    ref: p
-  }, E && /* @__PURE__ */ n.createElement("label", {
-    className: "label-container"
-  }, E), /* @__PURE__ */ n.createElement(y, I({
-    value: e,
-    onChange: F,
-    onClick: O,
-    disabled: a,
-    className: `${s ? "input-container-error" : "input-container-default"} ${a ? "input-container-disabled" : ""}`,
-    maxLength: l,
-    placeholder: L
-  }, _)), A && d.length > 0 && /* @__PURE__ */ n.createElement("div", {
-    className: "suggestions-list"
-  }, o ? o(d, w) : d.map((c, r) => /* @__PURE__ */ n.createElement("div", {
-    key: r,
-    className: "suggestion-item",
-    onClick: () => w(c)
-  }, c))), /* @__PURE__ */ n.createElement("div", {
-    className: `${s ? "error-and-max-word" : "max-word-container"}`
-  }, s && /* @__PURE__ */ n.createElement("div", {
-    id: "error-message",
-    className: "error-message"
-  }, B), l && /* @__PURE__ */ n.createElement("div", {
-    className: "max-word"
-  }, e.length, "/", l)));
-});
+  return /* @__PURE__ */ a.createElement("div", {
+    className: `se-design-toast-bar ${r} ${o.toastBarCtn} ${g ? "show" : "hide"}`,
+    style: i({
+      background: o[e]
+    }, f)
+  }, /* @__PURE__ */ a.createElement("div", {
+    className: o.toastMessageCtn
+  }, /* @__PURE__ */ a.createElement(m, {
+    name: e === "info" ? "info" : "checked-circle",
+    stroke: "var(--color-white)"
+  }), /* @__PURE__ */ a.createElement("span", {
+    className: o.toastMessage
+  }, t)), /* @__PURE__ */ a.createElement(m, {
+    name: "close",
+    stroke: "var(--color-white)",
+    className: o.closeIconCtn,
+    onClick: c
+  }));
+};
 export {
-  J as AutoCompleteInput
+  M as ToastBar
 };
 //# sourceMappingURL=index42.js.map

package/dist/index42.js.map

@@ -1 +1 @@
-{"version":3,"file":"index42.js","sources":["../src/components/AutoCompleteInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport './style.scss';\n\nexport interface AutoCompleteInputProps {\n  value: string;\n  disabled?: boolean;\n  maxLength?: number;\n  onChange: (value: string, fromSuggestion?: boolean) => void;\n  tag?: string;\n  error?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  suggestions?: string[];\n  customRenderSuggestions?: (suggestions: any, handleSuggestionClick: (suggestion: string) => void) => any;\n  onSuggestionClick?: (suggestion: string) => void;\n}\n\nexport const AutoCompleteInput: React.FC<AutoCompleteInputProps> = React.memo(\n  ({\n    value,\n    onChange,\n    disabled = false,\n    maxLength,\n    tag = 'input',\n    error = false,\n    errorMessage,\n    label,\n    placeholder,\n    suggestions = [],\n    customRenderSuggestions,\n    onSuggestionClick,\n    ...props\n  }) => {\n    const [filteredSuggestions, setFilteredSuggestions] = React.useState<string[]>([...suggestions]);\n    const [isSuggestionBoxVisible, setSuggestionBoxVisible] = React.useState<boolean>(false);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const handleInputChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n\n        if (customRenderSuggestions) {\n          onChange(inputValue, false);\n        } else {\n          onChange(inputValue);\n          if (inputValue === '') {\n            setFilteredSuggestions([...suggestions]);\n          } else if (inputValue) {\n            const filtered = suggestions?.filter(\n              (suggestion) =>\n                typeof suggestion === 'string' && suggestion.toLowerCase().includes(inputValue?.toLowerCase() ?? '')\n            );\n            setFilteredSuggestions([...filtered]);\n          }\n        }\n      },\n      [onChange, suggestions, customRenderSuggestions]\n    );\n\n    useEffect(() => {\n      // if (customRenderSuggestions) {\n      setFilteredSuggestions([...suggestions]);\n      // }\n    }, [suggestions]);\n\n    useEffect(() => {\n      const handleClickOutside = (event: MouseEvent) => {\n        if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n          setSuggestionBoxVisible(false);\n        }\n      };\n\n      document.addEventListener('mousedown', handleClickOutside);\n      return () => {\n        document.removeEventListener('mousedown', handleClickOutside);\n      };\n    }, []);\n\n    const handleInputClick = () => {\n      setSuggestionBoxVisible(true);\n    };\n\n    const handleSuggestionClick = (suggestion: string) => {\n      onChange(suggestion, true);\n      setSuggestionBoxVisible(false);\n      onSuggestionClick && onSuggestionClick(suggestion);\n    };\n\n    return (\n      <div className=\"main-container-autocomplete-se-design\" ref={containerRef}>\n        {label && <label className=\"label-container\">{label}</label>}\n        {React.createElement(tag, {\n          value: value,\n          onChange: handleInputChange,\n          onClick: handleInputClick,\n          disabled,\n          className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''}`,\n          maxLength,\n          placeholder,\n          ...props\n        })}\n        {isSuggestionBoxVisible && filteredSuggestions.length > 0 && (\n          <div className=\"suggestions-list\">\n            {customRenderSuggestions\n              ? customRenderSuggestions(filteredSuggestions, handleSuggestionClick)\n              : filteredSuggestions.map((suggestion, index) => (\n                  <div key={index} className=\"suggestion-item\" onClick={() => handleSuggestionClick(suggestion)}>\n                    {suggestion}\n                  </div>\n                ))}\n          </div>\n        )}\n        <div className={`${error ? 'error-and-max-word' : 'max-word-container'}`}>\n          {error && (\n            <div id=\"error-message\" className=\"error-message\">\n              {errorMessage}\n            </div>\n          )}\n          {maxLength && (\n            <div className=\"max-word\">\n              {value.length}/{maxLength}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n"],"names":["AutoCompleteInput","memo","_a","_b","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","suggestions","customRenderSuggestions","onSuggestionClick","props","filteredSuggestions","setFilteredSuggestions","React","useState","isSuggestionBoxVisible","setSuggestionBoxVisible","containerRef","useRef","handleInputChange","useCallback","e","inputValue","target","filtered","filter","suggestion","toLowerCase","includes","useEffect","handleClickOutside","event","current","contains","addEventListener","removeEventListener","handleInputClick","handleSuggestionClick","createElement","className","ref","__spreadValues","onClick","length","map","index","key","id"],"mappings":"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"}
+{"version":3,"file":"index42.js","sources":["../src/components/ToastBar/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from \"react\";\nimport { Map } from \"../../utils/common.types\";\nimport { Icon } from \"../Icon\";\nimport \"./style.scss\";\n\nexport interface ToastBarProps {\n  toastBarCtnClassName?: string;\n  type: \"success\" | \"error\" | \"info\";\n  message: string;\n  shouldAutoClose?: boolean;\n  delay?: number;\n  onClose?: () => void;\n  containerStyle?: React.CSSProperties;\n}\n\nconst classNames: Map = {\n  toastBarCtn: \"min-h-[45px] fixed top-0 w-full flex items-center justify-center flex-wrap z-[1200]\",\n  success: \"linear-gradient(90deg, var(--color-green-700) 0%, var(--color-green-400) 100%)\",\n  error: \"linear-gradient(90deg, var(--color-red-700) 0%, var(--color-red-500) 100%)\",\n  info: \"var(--color-gray-700)\", \n  toastMessageCtn: \"flex items-center gap-2\",\n  toastMessage: \"text-[var(--color-white)] text-center word-break\",\n  closeIconCtn: \"absolute right-[12px] cursor-pointer cursor-pointer hover:bg-[var(--color-gray-500)] rounded-full p-1\",\n};\n\nexport const ToastBar: FC<ToastBarProps> = ({\n  toastBarCtnClassName = \"\",\n  type,\n  message = \"\",\n  shouldAutoClose = false,\n  delay = 5000,\n  onClose = () => {},\n  containerStyle = {}\n}) => {\n  const [visible, setVisible] = useState(true);\n\n  useEffect(() => {\n    if (shouldAutoClose) {\n      const timer = setTimeout(() => {\n        handleClose();\n      }, delay);\n      return () => clearTimeout(timer);\n    }\n  }, []);\n\n  const handleClose = () => {\n    setTimeout(() => {\n      setVisible(false);\n      setTimeout(() => {\n        onClose?.();\n      }, 300);\n    }, 300);\n  };\n\n  return (\n    <div\n      className={`se-design-toast-bar ${toastBarCtnClassName} ${classNames.toastBarCtn} ${visible ? \"show\" : \"hide\"}`}\n      style={{ background: classNames[type], ...containerStyle }}\n    >\n      <div className={classNames.toastMessageCtn} >\n        <Icon name={type === \"info\" ? \"info\" : \"checked-circle\"} stroke={'var(--color-white)'} />\n        <span className={classNames.toastMessage}>{message}</span>\n      </div>\n      <Icon name=\"close\" stroke={'var(--color-white)'} className={classNames.closeIconCtn} onClick={handleClose} />\n    </div>\n  );\n};"],"names":["React__default","useState","useEffect","Icon","classNames","toastBarCtn","success","error","info","toastMessageCtn","toastMessage","closeIconCtn","ToastBar","toastBarCtnClassName","type","message","shouldAutoClose","delay","onClose","containerStyle","visible","setVisible","timer","setTimeout","handleClose","clearTimeout","React","createElement","className","style","__spreadValues","background","name","stroke","onClick"],"mappings":";;;;;;;;;;;AAeA,OAAAA,KAAA,YAAAC,GAAA,aAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAkB;AAAA,EACtBC,aAAa;AAAA,EACbC,SAAS;AAAA,EACTC,OAAO;AAAA,EACPC,MAAM;AAAA,EACNC,iBAAiB;AAAA,EACjBC,cAAc;AAAA,EACdC,cAAc;AAChB,GAEaC,IAA8BA,CAAC;AAAA,EAC1CC,sBAAAA,IAAuB;AAAA,EACvBC,MAAAA;AAAAA,EACAC,SAAAA,IAAU;AAAA,EACVC,iBAAAA,IAAkB;AAAA,EAClBC,OAAAA,IAAQ;AAAA,EACRC,SAAAA,IAAUA,MAAM;AAAA,EAAC;AAAA,EACjBC,gBAAAA,IAAiB,CAAA;AACnB,MAAM;AACJ,QAAM,CAACC,GAASC,CAAU,IAAIpB,EAAS,EAAI;AAE3CC,EAAAA,EAAU,MAAM;AACd,QAAIc,GAAiB;AACbM,YAAAA,IAAQC,WAAW,MAAM;AACjB,QAAAC,EAAA;AAAA,SACXP,CAAK;AACD,aAAA,MAAMQ,aAAaH,CAAK;AAAA,IAAA;AAAA,EAEnC,GAAG,EAAE;AAEL,QAAME,IAAcA,MAAM;AACxBD,eAAW,MAAM;AACfF,MAAAA,EAAW,EAAK,GAChBE,WAAW,MAAM;AACL,QAAAL,KAAA,QAAAA;AAAA,SACT,GAAG;AAAA,OACL,GAAG;AAAA,EACR;AAGEQ,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,uBAAuBf,CAAoB,IAAIT,EAAWC,WAAW,IAAIe,IAAU,SAAS,MAAM;AAAA,IAC7GS,OAAOC,EAAA;AAAA,MAAEC,YAAY3B,EAAWU,CAAI;AAAA,OAAMK;AAAAA,EAAe,GAEzDQ,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAWxB,EAAWK;AAAAA,EAAAA,GACzBkB,gBAAAA,EAAAA,cAACxB,GAAI;AAAA,IAAC6B,MAAMlB,MAAS,SAAS,SAAS;AAAA,IAAkBmB,QAAQ;AAAA,EAAA,CAAuB,GACxFN,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAWxB,EAAWM;AAAAA,KAAeK,CAAc,CACtD,GACLW,gBAAAA,EAAAC,cAACxB,GAAI;AAAA,IAAC6B,MAAK;AAAA,IAAQC,QAAQ;AAAA,IAAsBL,WAAWxB,EAAWO;AAAAA,IAAcuB,SAASV;AAAAA,EAAAA,CAAc,CACzG;AAET;"}

package/dist/index43.js

@@ -1,90 +1,111 @@
-import t, { useState as o, useRef as R, useEffect as C } from "react";
+var j = Object.defineProperty;
+var m = Object.getOwnPropertySymbols;
+var x = Object.prototype.hasOwnProperty, h = Object.prototype.propertyIsEnumerable;
+var b = (e, t, a) => t in e ? j(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a, I = (e, t) => {
+  for (var a in t || (t = {}))
+    x.call(t, a) && b(e, a, t[a]);
+  if (m)
+    for (var a of m(t))
+      h.call(t, a) && b(e, a, t[a]);
+  return e;
+};
+var S = (e, t) => {
+  var a = {};
+  for (var l in e)
+    x.call(e, l) && t.indexOf(l) < 0 && (a[l] = e[l]);
+  if (e != null && m)
+    for (var l of m(e))
+      t.indexOf(l) < 0 && h.call(e, l) && (a[l] = e[l]);
+  return a;
+};
+import n, { useRef as q, useEffect as $ } from "react";
 /* empty css         */
-import c from "./index144.js";
-import { Icon as g } from "./index5.js";
-const O = ({
-  onCountrycodeChange: E,
-  onNumberChange: f,
-  error: m,
-  errorMessage: N,
-  value: s
-}) => {
-  const [w, u] = o((s == null ? void 0 : s.countryCode) || c[0].dial_code), [r, i] = o(!1), [p, v] = o(c), [L, _] = o(""), [S, h] = o(""), l = R(null), a = c.find((e) => e.dial_code === w), b = (e) => {
-    e && (u(e), E(e)), i(!1);
-  }, V = (e) => {
-    const n = e.target.value;
-    _(n);
-    const y = c.filter((d) => d.name.toLowerCase().includes(n.toLowerCase()) || d.dial_code.toLowerCase().includes(n.toLowerCase()) || d.code.toLowerCase().includes(n.toLowerCase()));
-    v(y);
-  };
-  C(() => {
-    const e = (n) => {
-      l.current && !l.current.contains(n.target) && i(!1);
+const J = /* @__PURE__ */ n.memo((z) => {
+  var N = z, {
+    value: e,
+    onChange: t,
+    disabled: a = !1,
+    maxLength: l,
+    tag: y = "input",
+    error: s = !1,
+    errorMessage: B,
+    label: E,
+    placeholder: L,
+    suggestions: i = [],
+    customRenderSuggestions: o,
+    onSuggestionClick: v
+  } = N, _ = S(N, [
+    "value",
+    "onChange",
+    "disabled",
+    "maxLength",
+    "tag",
+    "error",
+    "errorMessage",
+    "label",
+    "placeholder",
+    "suggestions",
+    "customRenderSuggestions",
+    "onSuggestionClick"
+  ]);
+  const [d, f] = n.useState([...i]), [A, u] = n.useState(!1), p = q(null), F = n.useCallback((c) => {
+    const r = c.target.value;
+    if (o)
+      t(r, !1);
+    else if (t(r), r === "")
+      f([...i]);
+    else if (r) {
+      const V = i == null ? void 0 : i.filter((C) => {
+        var k;
+        return typeof C == "string" && C.toLowerCase().includes((k = r == null ? void 0 : r.toLowerCase()) != null ? k : "");
+      });
+      f([...V]);
+    }
+  }, [t, i, o]);
+  $(() => {
+    f([...i]);
+  }, [i]), $(() => {
+    const c = (r) => {
+      p.current && !p.current.contains(r.target) && u(!1);
     };
-    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, []), C(() => {
-    s && (u(s.countryCode), h(s.number));
-  }, [s]);
-  const k = (e) => {
-    const n = e.replace(/\D/g, "");
-    console.log("numericValue", n), h(n), f(n);
+    return document.addEventListener("mousedown", c), () => {
+      document.removeEventListener("mousedown", c);
+    };
+  }, []);
+  const O = () => {
+    u(!0);
+  }, w = (c) => {
+    t(c, !0), u(!1), v && v(c);
   };
-  return /* @__PURE__ */ t.createElement("div", {
-    className: "phone-input-container-se-design-main-container"
-  }, /* @__PURE__ */ t.createElement("div", {
-    className: `phone-input-container-se-design-main ${m ? "error" : ""}`,
-    ref: l
-  }, /* @__PURE__ */ t.createElement("div", {
-    className: "phone-input-container-se-design"
-  }, /* @__PURE__ */ t.createElement("div", {
-    className: "phone-input-container-se-design-country-code",
-    onClick: () => {
-      i(!r);
-    }
-  }, /* @__PURE__ */ t.createElement("img", {
-    src: `https://flagcdn.com/${a == null ? void 0 : a.code.toLowerCase()}.svg`,
-    alt: a == null ? void 0 : a.name,
-    width: "16"
-  }), a == null ? void 0 : a.dial_code, /* @__PURE__ */ t.createElement(g, {
-    name: "chevron",
-    className: r ? "rotate-180" : ""
-  })), /* @__PURE__ */ t.createElement("span", {
-    className: "divider"
-  }), /* @__PURE__ */ t.createElement("input", {
-    type: "tel",
-    placeholder: "Enter phone number",
-    className: "phone-input-container-se-design-phone-number-input",
-    onChange: (e) => k(e.target.value),
-    value: S,
-    pattern: "[0-9]*"
-  })), r && /* @__PURE__ */ t.createElement("div", {
-    className: "phone-input-container-se-design-country-code-list"
-  }, /* @__PURE__ */ t.createElement("div", {
-    className: "search-input-wrapper"
-  }, /* @__PURE__ */ t.createElement(g, {
-    name: "search",
-    className: "search-icon"
-  }), /* @__PURE__ */ t.createElement("input", {
-    type: "text",
-    placeholder: "Search",
-    className: "phone-input-container-se-design-country-code-list-item-input",
-    onChange: V,
-    value: L
-  })), p.length > 0 ? p.map((e) => /* @__PURE__ */ t.createElement("div", {
-    key: e.code,
-    className: "phone-input-container-se-design-country-code-list-item",
-    onClick: () => b(e.dial_code)
-  }, /* @__PURE__ */ t.createElement("img", {
-    src: `https://flagcdn.com/${e.code.toLowerCase()}.svg`,
-    alt: e.name,
-    width: "16"
-  }), /* @__PURE__ */ t.createElement("span", null, e.name), /* @__PURE__ */ t.createElement("span", null, "(", e.dial_code, ")"))) : /* @__PURE__ */ t.createElement("div", {
-    className: "phone-input-container-se-design-country-code-list-item-no-resuts"
-  }, "No results found"))), m && /* @__PURE__ */ t.createElement("div", {
+  return /* @__PURE__ */ n.createElement("div", {
+    className: "main-container-autocomplete-se-design",
+    ref: p
+  }, E && /* @__PURE__ */ n.createElement("label", {
+    className: "label-container"
+  }, E), /* @__PURE__ */ n.createElement(y, I({
+    value: e,
+    onChange: F,
+    onClick: O,
+    disabled: a,
+    className: `${s ? "input-container-error" : "input-container-default"} ${a ? "input-container-disabled" : ""}`,
+    maxLength: l,
+    placeholder: L
+  }, _)), A && d.length > 0 && /* @__PURE__ */ n.createElement("div", {
+    className: "suggestions-list"
+  }, o ? o(d, w) : d.map((c, r) => /* @__PURE__ */ n.createElement("div", {
+    key: r,
+    className: "suggestion-item",
+    onClick: () => w(c)
+  }, c))), /* @__PURE__ */ n.createElement("div", {
+    className: `${s ? "error-and-max-word" : "max-word-container"}`
+  }, s && /* @__PURE__ */ n.createElement("div", {
+    id: "error-message",
     className: "error-message"
-  }, N));
-};
+  }, B), l && /* @__PURE__ */ n.createElement("div", {
+    className: "max-word"
+  }, e.length, "/", l)));
+});
 export {
-  O as PhoneInput
+  J as AutoCompleteInput
 };
 //# sourceMappingURL=index43.js.map

package/dist/index43.js.map

@@ -1 +1 @@
-{"version":3,"file":"index43.js","sources":["../src/components/PhoneInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport './style.scss';\nimport countriesInfoJson from './countriesInfo.json';\nimport { Icon } from '../Icon';\n\nexport interface PhoneInputProps {\n  onCountrycodeChange: (countryCode: string) => void;\n  onNumberChange: (number: string) => void;\n  error?: boolean;\n  errorMessage?: string;\n  value?: {\n    countryCode: string;\n    number: string;\n  };\n}\n\nexport const PhoneInput: React.FC<PhoneInputProps> = ({\n  onCountrycodeChange,\n  onNumberChange,\n  error,\n  errorMessage,\n  value\n}) => {\n  const [countryCode, setCountryCode] = useState(value?.countryCode || countriesInfoJson[0].dial_code);\n  const [displaySelectCountryCode, setDisplaySelectCountryCode] = useState(false);\n  const [countriesInfo, setCountriesInfo] = useState(countriesInfoJson);\n  const [searchValue, setSearchValue] = useState('');\n  const [enteredNumber, setEnteredNumber] = useState('');\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const countryInfo = countriesInfoJson.find((country) => country.dial_code === countryCode);\n\n  const handleCountryCodeSelect = (country: string) => {\n    if (country) {\n      setCountryCode(country);\n      onCountrycodeChange(country);\n    }\n    setDisplaySelectCountryCode(false);\n  };\n\n  const handleCountryCodeSearch = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const searchValue = event.target.value;\n    setSearchValue(searchValue);\n    const filteredCountries = countriesInfoJson.filter(\n      (country) =>\n        country.name.toLowerCase().includes(searchValue.toLowerCase()) ||\n        country.dial_code.toLowerCase().includes(searchValue.toLowerCase()) ||\n        country.code.toLowerCase().includes(searchValue.toLowerCase())\n    );\n    setCountriesInfo(filteredCountries);\n  };\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n        setDisplaySelectCountryCode(false);\n      }\n    };\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, []);\n\n  useEffect(() => {\n    if (value) {\n      setCountryCode(value.countryCode);\n      setEnteredNumber(value.number);\n    }\n  }, [value]);\n\n  const handleEnteredNumberChange = (value: string) => {\n    const numericValue = value.replace(/\\D/g, ''); // Remove non-numeric characters\n    console.log('numericValue', numericValue);\n    setEnteredNumber(numericValue);\n    onNumberChange(numericValue);\n  };\n\n  return (\n    <div className=\"phone-input-container-se-design-main-container\">\n      <div className={`phone-input-container-se-design-main ${error ? 'error' : ''}`} ref={containerRef}>\n        <div className=\"phone-input-container-se-design\">\n          <div\n            className=\"phone-input-container-se-design-country-code\"\n            onClick={() => {\n              setDisplaySelectCountryCode(!displaySelectCountryCode);\n            }}\n          >\n            <img\n              src={`https://flagcdn.com/${countryInfo?.code.toLowerCase()}.svg`}\n              alt={countryInfo?.name}\n              width=\"16\"\n            />\n            {countryInfo?.dial_code}\n            <Icon name=\"chevron\" className={!displaySelectCountryCode ? '' : 'rotate-180'} />\n          </div>\n          <span className=\"divider\" />\n          <input\n            type=\"tel\"\n            placeholder=\"Enter phone number\"\n            className=\"phone-input-container-se-design-phone-number-input\"\n            onChange={(event) => handleEnteredNumberChange(event.target.value)}\n            value={enteredNumber}\n            pattern=\"[0-9]*\"\n          />\n        </div>\n\n        {displaySelectCountryCode && (\n          <div className=\"phone-input-container-se-design-country-code-list\">\n            <div className=\"search-input-wrapper\">\n              <Icon name=\"search\" className=\"search-icon\" />\n              <input\n                type=\"text\"\n                placeholder=\"Search\"\n                className=\"phone-input-container-se-design-country-code-list-item-input\"\n                onChange={handleCountryCodeSearch}\n                value={searchValue}\n              />\n            </div>\n            {countriesInfo.length > 0 ? (\n              countriesInfo.map((country) => (\n                <div\n                  key={country.code}\n                  className=\"phone-input-container-se-design-country-code-list-item\"\n                  onClick={() => handleCountryCodeSelect(country.dial_code)}\n                >\n                  <img src={`https://flagcdn.com/${country.code.toLowerCase()}.svg`} alt={country.name} width=\"16\" />\n                  <span>{country.name}</span>\n                  <span>({country.dial_code})</span>\n                </div>\n              ))\n            ) : (\n              <div className=\"phone-input-container-se-design-country-code-list-item-no-resuts\">No results found</div>\n            )}\n          </div>\n        )}\n      </div>\n      {error && <div className=\"error-message\">{errorMessage}</div>}\n    </div>\n  );\n};\n"],"names":["PhoneInput","onCountrycodeChange","onNumberChange","error","errorMessage","value","countryCode","setCountryCode","useState","countriesInfoJson","dial_code","displaySelectCountryCode","setDisplaySelectCountryCode","countriesInfo","setCountriesInfo","searchValue","setSearchValue","enteredNumber","setEnteredNumber","containerRef","useRef","countryInfo","find","country","handleCountryCodeSelect","handleCountryCodeSearch","event","target","filteredCountries","filter","name","toLowerCase","includes","code","useEffect","handleClickOutside","current","contains","addEventListener","document","removeEventListener","number","handleEnteredNumberChange","numericValue","replace","log","React","createElement","className","ref","onClick","src","alt","width","Icon","type","placeholder","onChange","pattern","length","map","key"],"mappings":"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"}
+{"version":3,"file":"index43.js","sources":["../src/components/AutoCompleteInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport './style.scss';\n\nexport interface AutoCompleteInputProps {\n  value: string;\n  disabled?: boolean;\n  maxLength?: number;\n  onChange: (value: string, fromSuggestion?: boolean) => void;\n  tag?: string;\n  error?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  suggestions?: string[];\n  customRenderSuggestions?: (suggestions: any, handleSuggestionClick: (suggestion: string) => void) => any;\n  onSuggestionClick?: (suggestion: string) => void;\n}\n\nexport const AutoCompleteInput: React.FC<AutoCompleteInputProps> = React.memo(\n  ({\n    value,\n    onChange,\n    disabled = false,\n    maxLength,\n    tag = 'input',\n    error = false,\n    errorMessage,\n    label,\n    placeholder,\n    suggestions = [],\n    customRenderSuggestions,\n    onSuggestionClick,\n    ...props\n  }) => {\n    const [filteredSuggestions, setFilteredSuggestions] = React.useState<string[]>([...suggestions]);\n    const [isSuggestionBoxVisible, setSuggestionBoxVisible] = React.useState<boolean>(false);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const handleInputChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n\n        if (customRenderSuggestions) {\n          onChange(inputValue, false);\n        } else {\n          onChange(inputValue);\n          if (inputValue === '') {\n            setFilteredSuggestions([...suggestions]);\n          } else if (inputValue) {\n            const filtered = suggestions?.filter(\n              (suggestion) =>\n                typeof suggestion === 'string' && suggestion.toLowerCase().includes(inputValue?.toLowerCase() ?? '')\n            );\n            setFilteredSuggestions([...filtered]);\n          }\n        }\n      },\n      [onChange, suggestions, customRenderSuggestions]\n    );\n\n    useEffect(() => {\n      // if (customRenderSuggestions) {\n      setFilteredSuggestions([...suggestions]);\n      // }\n    }, [suggestions]);\n\n    useEffect(() => {\n      const handleClickOutside = (event: MouseEvent) => {\n        if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n          setSuggestionBoxVisible(false);\n        }\n      };\n\n      document.addEventListener('mousedown', handleClickOutside);\n      return () => {\n        document.removeEventListener('mousedown', handleClickOutside);\n      };\n    }, []);\n\n    const handleInputClick = () => {\n      setSuggestionBoxVisible(true);\n    };\n\n    const handleSuggestionClick = (suggestion: string) => {\n      onChange(suggestion, true);\n      setSuggestionBoxVisible(false);\n      onSuggestionClick && onSuggestionClick(suggestion);\n    };\n\n    return (\n      <div className=\"main-container-autocomplete-se-design\" ref={containerRef}>\n        {label && <label className=\"label-container\">{label}</label>}\n        {React.createElement(tag, {\n          value: value,\n          onChange: handleInputChange,\n          onClick: handleInputClick,\n          disabled,\n          className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''}`,\n          maxLength,\n          placeholder,\n          ...props\n        })}\n        {isSuggestionBoxVisible && filteredSuggestions.length > 0 && (\n          <div className=\"suggestions-list\">\n            {customRenderSuggestions\n              ? customRenderSuggestions(filteredSuggestions, handleSuggestionClick)\n              : filteredSuggestions.map((suggestion, index) => (\n                  <div key={index} className=\"suggestion-item\" onClick={() => handleSuggestionClick(suggestion)}>\n                    {suggestion}\n                  </div>\n                ))}\n          </div>\n        )}\n        <div className={`${error ? 'error-and-max-word' : 'max-word-container'}`}>\n          {error && (\n            <div id=\"error-message\" className=\"error-message\">\n              {errorMessage}\n            </div>\n          )}\n          {maxLength && (\n            <div className=\"max-word\">\n              {value.length}/{maxLength}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n"],"names":["AutoCompleteInput","memo","_a","_b","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","suggestions","customRenderSuggestions","onSuggestionClick","props","filteredSuggestions","setFilteredSuggestions","React","useState","isSuggestionBoxVisible","setSuggestionBoxVisible","containerRef","useRef","handleInputChange","useCallback","e","inputValue","target","filtered","filter","suggestion","toLowerCase","includes","useEffect","handleClickOutside","event","current","contains","addEventListener","removeEventListener","handleInputClick","handleSuggestionClick","createElement","className","ref","__spreadValues","onClick","length","map","index","key","id"],"mappings":"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"}

package/dist/index44.js

@@ -1,41 +1,90 @@
-import o from "react";
-const m = ({
-  progress: a,
-  backgroundColor: n = "#E8E8E8",
-  progressColor: s = "#0066FF",
-  size: e = 40,
-  strokeWidth: r = 4
+import t, { useState as o, useRef as R, useEffect as C } from "react";
+/* empty css         */
+import c from "./index148.js";
+import { Icon as g } from "./index5.js";
+const O = ({
+  onCountrycodeChange: E,
+  onNumberChange: f,
+  error: m,
+  errorMessage: N,
+  value: s
 }) => {
-  const t = (e - r) / 2, c = t * 2 * Math.PI, l = c - a / 100 * c;
-  return /* @__PURE__ */ o.createElement("svg", {
-    width: e,
-    height: e,
-    style: {
-      transform: "rotate(-90deg)"
+  const [w, u] = o((s == null ? void 0 : s.countryCode) || c[0].dial_code), [r, i] = o(!1), [p, v] = o(c), [L, _] = o(""), [S, h] = o(""), l = R(null), a = c.find((e) => e.dial_code === w), b = (e) => {
+    e && (u(e), E(e)), i(!1);
+  }, V = (e) => {
+    const n = e.target.value;
+    _(n);
+    const y = c.filter((d) => d.name.toLowerCase().includes(n.toLowerCase()) || d.dial_code.toLowerCase().includes(n.toLowerCase()) || d.code.toLowerCase().includes(n.toLowerCase()));
+    v(y);
+  };
+  C(() => {
+    const e = (n) => {
+      l.current && !l.current.contains(n.target) && i(!1);
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, []), C(() => {
+    s && (u(s.countryCode), h(s.number));
+  }, [s]);
+  const k = (e) => {
+    const n = e.replace(/\D/g, "");
+    console.log("numericValue", n), h(n), f(n);
+  };
+  return /* @__PURE__ */ t.createElement("div", {
+    className: "phone-input-container-se-design-main-container"
+  }, /* @__PURE__ */ t.createElement("div", {
+    className: `phone-input-container-se-design-main ${m ? "error" : ""}`,
+    ref: l
+  }, /* @__PURE__ */ t.createElement("div", {
+    className: "phone-input-container-se-design"
+  }, /* @__PURE__ */ t.createElement("div", {
+    className: "phone-input-container-se-design-country-code",
+    onClick: () => {
+      i(!r);
     }
-  }, /* @__PURE__ */ o.createElement("circle", {
-    cx: e / 2,
-    cy: e / 2,
-    r: t,
-    stroke: n,
-    strokeWidth: r,
-    fill: "none"
-  }), /* @__PURE__ */ o.createElement("circle", {
-    cx: e / 2,
-    cy: e / 2,
-    r: t,
-    stroke: s,
-    strokeWidth: r,
-    strokeDasharray: c,
-    strokeDashoffset: l,
-    fill: "none",
-    strokeLinecap: "round",
-    style: {
-      transition: "stroke-dashoffset 0.3s ease"
-    }
-  }));
+  }, /* @__PURE__ */ t.createElement("img", {
+    src: `https://flagcdn.com/${a == null ? void 0 : a.code.toLowerCase()}.svg`,
+    alt: a == null ? void 0 : a.name,
+    width: "16"
+  }), a == null ? void 0 : a.dial_code, /* @__PURE__ */ t.createElement(g, {
+    name: "chevron",
+    className: r ? "rotate-180" : ""
+  })), /* @__PURE__ */ t.createElement("span", {
+    className: "divider"
+  }), /* @__PURE__ */ t.createElement("input", {
+    type: "tel",
+    placeholder: "Enter phone number",
+    className: "phone-input-container-se-design-phone-number-input",
+    onChange: (e) => k(e.target.value),
+    value: S,
+    pattern: "[0-9]*"
+  })), r && /* @__PURE__ */ t.createElement("div", {
+    className: "phone-input-container-se-design-country-code-list"
+  }, /* @__PURE__ */ t.createElement("div", {
+    className: "search-input-wrapper"
+  }, /* @__PURE__ */ t.createElement(g, {
+    name: "search",
+    className: "search-icon"
+  }), /* @__PURE__ */ t.createElement("input", {
+    type: "text",
+    placeholder: "Search",
+    className: "phone-input-container-se-design-country-code-list-item-input",
+    onChange: V,
+    value: L
+  })), p.length > 0 ? p.map((e) => /* @__PURE__ */ t.createElement("div", {
+    key: e.code,
+    className: "phone-input-container-se-design-country-code-list-item",
+    onClick: () => b(e.dial_code)
+  }, /* @__PURE__ */ t.createElement("img", {
+    src: `https://flagcdn.com/${e.code.toLowerCase()}.svg`,
+    alt: e.name,
+    width: "16"
+  }), /* @__PURE__ */ t.createElement("span", null, e.name), /* @__PURE__ */ t.createElement("span", null, "(", e.dial_code, ")"))) : /* @__PURE__ */ t.createElement("div", {
+    className: "phone-input-container-se-design-country-code-list-item-no-resuts"
+  }, "No results found"))), m && /* @__PURE__ */ t.createElement("div", {
+    className: "error-message"
+  }, N));
 };
 export {
-  m as CircularProgressBar
+  O as PhoneInput
 };
 //# sourceMappingURL=index44.js.map