se-design 0.0.112 → 0.0.114

package/dist/index41.js.map

@@ -1 +1 @@
-{"version":3,"file":"index41.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-down\" 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":"index41.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-white\" : \"checked-circle-white\"} />\n        <span className={classNames.toastMessage}>{message}</span>\n      </div>\n      <Icon name=\"white-close\" 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","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,eAAe;AAAA,EAAA,CAAyB,GACtEa,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAWxB,EAAWM;AAAAA,KAAeK,CAAc,CACtD,GACLW,gBAAAA,EAAAC,cAACxB,GAAI;AAAA,IAAC6B,MAAK;AAAA,IAAcJ,WAAWxB,EAAWO;AAAAA,IAAcsB,SAAST;AAAAA,EAAAA,CAAc,CACjF;AAET;"}

package/dist/index42.js

@@ -1,41 +1,111 @@
-import o from "react";
-const m = ({
-  progress: a,
-  backgroundColor: n = "#E8E8E8",
-  progressColor: s = "#0066FF",
-  size: e = 40,
-  strokeWidth: r = 4
-}) => {
-  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)"
-    }
-  }, /* @__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"
-    }
-  }));
+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 $ = (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 r, { useRef as q, useEffect as y } from "react";
+/* empty css         */
+const J = /* @__PURE__ */ r.memo((z) => {
+  var N = z, {
+    value: e,
+    onChange: t,
+    disabled: a = !1,
+    maxLength: l,
+    tag: B = "input",
+    error: s = !1,
+    errorMessage: L,
+    label: E,
+    placeholder: S,
+    suggestions: i = [],
+    customRenderSuggestions: o,
+    onSuggestionClick: v
+  } = N, _ = $(N, [
+    "value",
+    "onChange",
+    "disabled",
+    "maxLength",
+    "tag",
+    "error",
+    "errorMessage",
+    "label",
+    "placeholder",
+    "suggestions",
+    "customRenderSuggestions",
+    "onSuggestionClick"
+  ]);
+  const [d, f] = r.useState([...i]), [A, p] = r.useState(!1), u = q(null), F = r.useCallback((c) => {
+    const n = c.target.value;
+    if (o)
+      t(n, !1);
+    else if (t(n), n === "")
+      f([...i]);
+    else if (n) {
+      const V = i == null ? void 0 : i.filter((C) => {
+        var k;
+        return typeof C == "string" && C.toLowerCase().includes((k = n == null ? void 0 : n.toLowerCase()) != null ? k : "");
+      });
+      f(V);
+    }
+  }, [t, i, o]);
+  y(() => {
+    o && f([...i]);
+  }, [i]), y(() => {
+    const c = (n) => {
+      u.current && !u.current.contains(n.target) && p(!1);
+    };
+    return document.addEventListener("mousedown", c), () => {
+      document.removeEventListener("mousedown", c);
+    };
+  }, []);
+  const O = () => {
+    p(!0);
+  }, w = (c) => {
+    t(c, !0), p(!1), v && v(c);
+  };
+  return /* @__PURE__ */ r.createElement("div", {
+    className: "main-container-autocomplete-se-design",
+    ref: u
+  }, E && /* @__PURE__ */ r.createElement("label", {
+    className: "label-container"
+  }, E), /* @__PURE__ */ r.createElement(B, I({
+    value: e,
+    onChange: F,
+    onClick: O,
+    disabled: a,
+    className: `${s ? "input-container-error" : "input-container-default"} ${a ? "input-container-disabled" : ""}`,
+    maxLength: l,
+    placeholder: S
+  }, _)), /* @__PURE__ */ r.createElement("div", {
+    className: `${s ? "error-and-max-word" : "max-word-container"}`
+  }, s && /* @__PURE__ */ r.createElement("div", {
+    id: "error-message",
+    className: "error-message"
+  }, L), l && /* @__PURE__ */ r.createElement("div", {
+    className: "max-word"
+  }, e.length, "/", l)), A && d.length > 0 && /* @__PURE__ */ r.createElement("div", {
+    className: "suggestions-list"
+  }, o ? o(d, w) : d.map((c, n) => /* @__PURE__ */ r.createElement("div", {
+    key: n,
+    className: "suggestion-item",
+    onClick: () => w(c)
+  }, c))));
+});
 export {
-  m as CircularProgressBar
+  J as AutoCompleteInput
 };
 //# sourceMappingURL=index42.js.map

package/dist/index42.js.map

@@ -1 +1 @@
-{"version":3,"file":"index42.js","sources":["../src/components/CircularProgressBar/index.tsx"],"sourcesContent":["import React from 'react';\n\ninterface CircularProgressBarProps {\n  progress: number;\n  backgroundColor?: string;\n  progressColor?: string;\n  size?: number;\n  strokeWidth?: number;\n}\n\nexport const CircularProgressBar = ({\n  progress,\n  backgroundColor = '#E8E8E8',\n  progressColor = '#0066FF',\n  size = 40,\n  strokeWidth = 4\n}: CircularProgressBarProps) => {\n  const radius = (size - strokeWidth) / 2;\n  const circumference = radius * 2 * Math.PI;\n  const strokeDashoffset = circumference - (progress / 100) * circumference;\n\n  return (\n    <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>\n      {/* Background circle */}\n      <circle cx={size / 2} cy={size / 2} r={radius} stroke={backgroundColor} strokeWidth={strokeWidth} fill=\"none\" />\n      {/* Progress circle */}\n      <circle\n        cx={size / 2}\n        cy={size / 2}\n        r={radius}\n        stroke={progressColor}\n        strokeWidth={strokeWidth}\n        strokeDasharray={circumference}\n        strokeDashoffset={strokeDashoffset}\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        style={{ transition: 'stroke-dashoffset 0.3s ease' }}\n      />\n    </svg>\n  );\n};\n"],"names":["CircularProgressBar","progress","backgroundColor","progressColor","size","strokeWidth","radius","circumference","Math","PI","strokeDashoffset","React","createElement","width","height","style","transform","cx","cy","r","stroke","fill","strokeDasharray","strokeLinecap","transition"],"mappings":";AAUO,MAAMA,IAAsBA,CAAC;AAAA,EAClCC,UAAAA;AAAAA,EACAC,iBAAAA,IAAkB;AAAA,EAClBC,eAAAA,IAAgB;AAAA,EAChBC,MAAAA,IAAO;AAAA,EACPC,aAAAA,IAAc;AACU,MAAM;AACxBC,QAAAA,KAAUF,IAAOC,KAAe,GAChCE,IAAgBD,IAAS,IAAIE,KAAKC,IAClCC,IAAmBH,IAAiBN,IAAW,MAAOM;AAG1DI,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,OAAOT;AAAAA,IAAMU,QAAQV;AAAAA,IAAMW,OAAO;AAAA,MAAEC,WAAW;AAAA,IAAA;AAAA,EAAiB,GAEnEJ,gBAAAA,EAAAA,cAAA,UAAA;AAAA,IAAQK,IAAIb,IAAO;AAAA,IAAGc,IAAId,IAAO;AAAA,IAAGe,GAAGb;AAAAA,IAAQc,QAAQlB;AAAAA,IAAiBG,aAAAA;AAAAA,IAA0BgB,MAAK;AAAA,EAAA,CAAQ,GAE/GT,gBAAAA,EAAAA,cAAA,UAAA;AAAA,IACEK,IAAIb,IAAO;AAAA,IACXc,IAAId,IAAO;AAAA,IACXe,GAAGb;AAAAA,IACHc,QAAQjB;AAAAA,IACRE,aAAAA;AAAAA,IACAiB,iBAAiBf;AAAAA,IACjBG,kBAAAA;AAAAA,IACAW,MAAK;AAAA,IACLE,eAAc;AAAA,IACdR,OAAO;AAAA,MAAES,YAAY;AAAA,IAAA;AAAA,EAA8B,CACpD,CACE;AAET;"}
+{"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        <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        {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>\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","id","length","map","index","key"],"mappings":"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"}

package/dist/index43.js

@@ -1,33 +1,90 @@
-import f from "react";
-const p = ({
-  size: r = 40,
-  text: e,
-  textColor: s = "var(--color-white)",
-  backgroundColor: c = "var(--color-gray-400)",
-  className: n = "",
-  onClick: o
+import t, { useState as o, useRef as R, useEffect as C } from "react";
+/* empty css         */
+import c from "./index137.js";
+import { Icon as g } from "./index5.js";
+const O = ({
+  onCountrycodeChange: E,
+  onNumberChange: f,
+  error: m,
+  errorMessage: N,
+  value: s
 }) => {
-  var t, a, i, l;
-  const u = (l = (i = (a = (t = e == null ? void 0 : e.split(" ")) == null ? void 0 : t.map((d) => d[0])) == null ? void 0 : a.join("")) == null ? void 0 : i.toUpperCase()) == null ? void 0 : l.slice(0, 3);
-  return /* @__PURE__ */ f.createElement("div", {
-    className: `
-        se-design-avatar 
-        flex items-center justify-center 
-        rounded-full font-medium
-        ${o ? "cursor-pointer" : "cursor-default"}
-        ${n}
-      `,
-    onClick: o,
-    style: {
-      width: r,
-      height: r,
-      backgroundColor: c,
-      color: s,
-      fontSize: `${r * 0.4}px`
+  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);
     }
-  }, u);
+  }, /* @__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-down",
+    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 {
-  p as Avatar
+  O as PhoneInput
 };
 //# sourceMappingURL=index43.js.map

package/dist/index43.js.map

@@ -1 +1 @@
-{"version":3,"file":"index43.js","sources":["../src/components/Avatar/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nexport type AvatarProps = {\n  size?: number;\n  text: string;\n  textColor?: string;\n  backgroundColor?: string;\n  className?: string;\n  onClick?: () => void;\n};\n\nexport const Avatar: FC<AvatarProps> = ({\n  size = 40,\n  text,\n  textColor = 'var(--color-white)',\n  backgroundColor = 'var(--color-gray-400)',\n  className = '',\n  onClick\n}) => {\n  const initials = text\n    ?.split(' ')\n    ?.map((word) => word[0])\n    ?.join('')\n    ?.toUpperCase()\n    ?.slice(0, 3);\n\n  return (\n    <div\n      className={`\n        se-design-avatar \n        flex items-center justify-center \n        rounded-full font-medium\n        ${onClick ? 'cursor-pointer' : 'cursor-default'}\n        ${className}\n      `}\n      onClick={onClick}\n      style={{\n        width: size,\n        height: size,\n        backgroundColor: backgroundColor,\n        color: textColor,\n        fontSize: `${size * 0.4}px`\n      }}\n    >\n      {initials}\n    </div>\n  );\n};\n"],"names":["Avatar","size","text","textColor","backgroundColor","className","onClick","initials","split","map","word","join","toUpperCase","slice","React","createElement","style","width","height","color","fontSize"],"mappings":";AAWO,MAAMA,IAA0BA,CAAC;AAAA,EACtCC,MAAAA,IAAO;AAAA,EACPC,MAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,iBAAAA,IAAkB;AAAA,EAClBC,WAAAA,IAAY;AAAA,EACZC,SAAAA;AACF,MAAM;;AACJ,QAAMC,KAAWL,KAAAA,KAAAA,KAAAA,IAAAA,KAAAA,gBAAAA,EACbM,MAAM,SADON,gBAAAA,EAEbO,IAAKC,OAASA,EAAK,CAAC,OAFPR,gBAAAA,EAGbS,KAAK,QAHQT,gBAAAA,EAIbU,kBAJaV,gBAAAA,EAKbW,MAAM,GAAG;AAGXC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEV,WAAW;AAAA;AAAA;AAAA;AAAA,UAIPC,IAAU,mBAAmB,gBAAgB;AAAA,UAC7CD,CAAS;AAAA;AAAA,IAEbC,SAAAA;AAAAA,IACAU,OAAO;AAAA,MACLC,OAAOhB;AAAAA,MACPiB,QAAQjB;AAAAA,MACRG,iBAAAA;AAAAA,MACAe,OAAOhB;AAAAA,MACPiB,UAAU,GAAGnB,IAAO,GAAG;AAAA,IAAA;AAAA,KAGxBM,CACE;AAET;"}
+{"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-down\" 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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"}

package/dist/index44.js

@@ -1,33 +1,41 @@
-import e, { useState as y, useEffect as E } from "react";
-const k = ({
-  defaultActiveNavigationItem: l,
-  navigationItems: c,
-  onNavigationItemChange: s
+import o from "react";
+const m = ({
+  progress: a,
+  backgroundColor: n = "#E8E8E8",
+  progressColor: s = "#0066FF",
+  size: e = 40,
+  strokeWidth: r = 4
 }) => {
-  const x = l || (c[0] ? c[0].id : ""), [d, o] = y(x);
-  E(() => {
-    o(l || "");
-  }, [l]);
-  const f = (r) => {
-    o(r == null ? void 0 : r.id), s == null || s(r == null ? void 0 : r.id);
-  }, u = (r, b) => r.id === b;
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", {
-    className: "se-design-navigation-bar flex items-center gap-4"
-  }, c.map((r) => {
-    const b = d === r.id, p = r.disabled;
-    return /* @__PURE__ */ e.createElement("div", {
-      key: r.label,
-      onClick: () => !p && f(r),
-      className: `text-base ${p ? "text-[var(--color-gray-400)] cursor-not-allowed" : b ? "text-[var(--color-gray-900)] font-bold hover:cursor-pointer" : "text-[var(--color-gray-700)] font-normal hover:text-[var(--color-gray-900)] cursor-pointer"}`
-    }, r.label);
-  })), /* @__PURE__ */ e.createElement("div", {
-    className: "se-design-navigation-bar-content"
-  }, c.map((r) => /* @__PURE__ */ e.createElement("div", {
-    key: r.id,
-    className: `navigation-item-content ${u(r, d) ? "block" : "hidden"}`
-  }, u(r, d) && (r == null ? void 0 : r.renderNavigationItemContent) && (r == null ? void 0 : r.renderNavigationItemContent(r))))));
+  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)"
+    }
+  }, /* @__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"
+    }
+  }));
 };
 export {
-  k as NavigationBar
+  m as CircularProgressBar
 };
 //# sourceMappingURL=index44.js.map

package/dist/index44.js.map

@@ -1 +1 @@
-{"version":3,"file":"index44.js","sources":["../src/components/NavigationBar/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useState, useEffect } from 'react';\n\ninterface NavigationItemProps {\n  label: string;\n  id: string;\n  disabled?: boolean;\n  renderNavigationItemContent?: (navigationItem: NavigationItemProps) => ReactNode;\n}\n\ninterface NavigationBarProps {\n  defaultActiveNavigationItem?: string;\n  navigationItems: NavigationItemProps[];\n  onNavigationItemChange?: (navigationItemId: string) => void;\n}\n\nexport const NavigationBar: FC<NavigationBarProps> = ({\n  defaultActiveNavigationItem,\n  navigationItems,\n  onNavigationItemChange\n}) => {\n  const defaultNavigationItemId = defaultActiveNavigationItem || (navigationItems[0] ? navigationItems[0].id : '');\n  const [activeNavigationItem, setActiveNavigationItem] = useState(defaultNavigationItemId);\n\n  useEffect(() => {\n    setActiveNavigationItem(defaultActiveNavigationItem || '');\n  }, [defaultActiveNavigationItem]);\n\n  const handleNavigationItemClick = (navigationItem: NavigationItemProps) => {\n    setActiveNavigationItem(navigationItem?.id);\n    onNavigationItemChange?.(navigationItem?.id);\n  };\n\n  const isNavigationItemActive = (navigationItem: NavigationItemProps, activeNavigationItem: string) => {\n    return navigationItem.id === activeNavigationItem;\n  };\n\n  return (\n    <>\n      <div className=\"se-design-navigation-bar flex items-center gap-4\">\n        {navigationItems.map((navigationItem) => {\n          const isActive = activeNavigationItem === navigationItem.id;\n          const isDisabled = navigationItem.disabled;\n          return (\n            <div\n              key={navigationItem.label}\n              onClick={() => !isDisabled && handleNavigationItemClick(navigationItem)}\n              className={`text-base ${\n                isDisabled\n                  ? 'text-[var(--color-gray-400)] cursor-not-allowed'\n                  : isActive\n                    ? 'text-[var(--color-gray-900)] font-bold hover:cursor-pointer'\n                    : 'text-[var(--color-gray-700)] font-normal hover:text-[var(--color-gray-900)] cursor-pointer'\n              }`}\n            >\n              {navigationItem.label}\n            </div>\n          );\n        })}\n      </div>\n\n      <div className=\"se-design-navigation-bar-content\">\n        {navigationItems.map((navigationItem) => (\n          <div\n            key={navigationItem.id}\n            className={`navigation-item-content ${isNavigationItemActive(navigationItem, activeNavigationItem) ? 'block' : 'hidden'}`}\n          >\n            {isNavigationItemActive(navigationItem, activeNavigationItem) &&\n              navigationItem?.renderNavigationItemContent &&\n              navigationItem?.renderNavigationItemContent(navigationItem)}\n          </div>\n        ))}\n      </div>\n    </>\n  );\n};\n"],"names":["NavigationBar","defaultActiveNavigationItem","navigationItems","onNavigationItemChange","defaultNavigationItemId","id","activeNavigationItem","setActiveNavigationItem","useState","useEffect","handleNavigationItemClick","navigationItem","isNavigationItemActive","createElement","React","Fragment","className","map","isActive","isDisabled","disabled","key","label","onClick","renderNavigationItemContent"],"mappings":";AAeO,MAAMA,IAAwCA,CAAC;AAAA,EACpDC,6BAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,wBAAAA;AACF,MAAM;AACEC,QAAAA,IAA0BH,MAAgCC,EAAgB,CAAC,IAAIA,EAAgB,CAAC,EAAEG,KAAK,KACvG,CAACC,GAAsBC,CAAuB,IAAIC,EAASJ,CAAuB;AAExFK,EAAAA,EAAU,MAAM;AACdF,IAAAA,EAAwBN,KAA+B,EAAE;AAAA,EAAA,GACxD,CAACA,CAA2B,CAAC;AAE1BS,QAAAA,IAA4BA,CAACC,MAAwC;AACzEJ,IAAAA,EAAwBI,KAAAA,gBAAAA,EAAgBN,EAAE,GAC1CF,KAAAA,QAAAA,EAAyBQ,KAAAA,gBAAAA,EAAgBN;AAAAA,EAC3C,GAEMO,IAAyBA,CAACD,GAAqCL,MAC5DK,EAAeN,OAAOC;AAG/B,2BACEO,cAAAC,EAAAC,UAAA,MACED,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IAAKG,WAAU;AAAA,EAAA,GACZd,EAAgBe,IAAKN,CAAmBA,MAAA;AACjCO,UAAAA,IAAWZ,MAAyBK,EAAeN,IACnDc,IAAaR,EAAeS;AAEhCN,WAAAA,gBAAAA,EAAAD,cAAA,OAAA;AAAA,MACEQ,KAAKV,EAAeW;AAAAA,MACpBC,SAASA,MAAM,CAACJ,KAAcT,EAA0BC,CAAc;AAAA,MACtEK,WAAW,aACTG,IACI,oDACAD,IACE,gEACA,4FAA4F;AAAA,IAAA,GAGnGP,EAAeW,KACb;AAAA,EAER,CAAA,CACE,GAELR,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IAAKG,WAAU;AAAA,EAAA,GACZd,EAAgBe,IAAKN,CACpBG,MAAAA,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IACEQ,KAAKV,EAAeN;AAAAA,IACpBW,WAAW,2BAA2BJ,EAAuBD,GAAgBL,CAAoB,IAAI,UAAU,QAAQ;AAAA,EAEtHM,GAAAA,EAAuBD,GAAgBL,CAAoB,MAC1DK,KAAAA,gBAAAA,EAAgBa,iCAChBb,KAAAA,gBAAAA,EAAgBa,4BAA4Bb,GAC3C,CACN,CACE,CACL;AAEN;"}
+{"version":3,"file":"index44.js","sources":["../src/components/CircularProgressBar/index.tsx"],"sourcesContent":["import React from 'react';\n\ninterface CircularProgressBarProps {\n  progress: number;\n  backgroundColor?: string;\n  progressColor?: string;\n  size?: number;\n  strokeWidth?: number;\n}\n\nexport const CircularProgressBar = ({\n  progress,\n  backgroundColor = '#E8E8E8',\n  progressColor = '#0066FF',\n  size = 40,\n  strokeWidth = 4\n}: CircularProgressBarProps) => {\n  const radius = (size - strokeWidth) / 2;\n  const circumference = radius * 2 * Math.PI;\n  const strokeDashoffset = circumference - (progress / 100) * circumference;\n\n  return (\n    <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>\n      {/* Background circle */}\n      <circle cx={size / 2} cy={size / 2} r={radius} stroke={backgroundColor} strokeWidth={strokeWidth} fill=\"none\" />\n      {/* Progress circle */}\n      <circle\n        cx={size / 2}\n        cy={size / 2}\n        r={radius}\n        stroke={progressColor}\n        strokeWidth={strokeWidth}\n        strokeDasharray={circumference}\n        strokeDashoffset={strokeDashoffset}\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        style={{ transition: 'stroke-dashoffset 0.3s ease' }}\n      />\n    </svg>\n  );\n};\n"],"names":["CircularProgressBar","progress","backgroundColor","progressColor","size","strokeWidth","radius","circumference","Math","PI","strokeDashoffset","React","createElement","width","height","style","transform","cx","cy","r","stroke","fill","strokeDasharray","strokeLinecap","transition"],"mappings":";AAUO,MAAMA,IAAsBA,CAAC;AAAA,EAClCC,UAAAA;AAAAA,EACAC,iBAAAA,IAAkB;AAAA,EAClBC,eAAAA,IAAgB;AAAA,EAChBC,MAAAA,IAAO;AAAA,EACPC,aAAAA,IAAc;AACU,MAAM;AACxBC,QAAAA,KAAUF,IAAOC,KAAe,GAChCE,IAAgBD,IAAS,IAAIE,KAAKC,IAClCC,IAAmBH,IAAiBN,IAAW,MAAOM;AAG1DI,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,OAAOT;AAAAA,IAAMU,QAAQV;AAAAA,IAAMW,OAAO;AAAA,MAAEC,WAAW;AAAA,IAAA;AAAA,EAAiB,GAEnEJ,gBAAAA,EAAAA,cAAA,UAAA;AAAA,IAAQK,IAAIb,IAAO;AAAA,IAAGc,IAAId,IAAO;AAAA,IAAGe,GAAGb;AAAAA,IAAQc,QAAQlB;AAAAA,IAAiBG,aAAAA;AAAAA,IAA0BgB,MAAK;AAAA,EAAA,CAAQ,GAE/GT,gBAAAA,EAAAA,cAAA,UAAA;AAAA,IACEK,IAAIb,IAAO;AAAA,IACXc,IAAId,IAAO;AAAA,IACXe,GAAGb;AAAAA,IACHc,QAAQjB;AAAAA,IACRE,aAAAA;AAAAA,IACAiB,iBAAiBf;AAAAA,IACjBG,kBAAAA;AAAAA,IACAW,MAAK;AAAA,IACLE,eAAc;AAAA,IACdR,OAAO;AAAA,MAAES,YAAY;AAAA,IAAA;AAAA,EAA8B,CACpD,CACE;AAET;"}

package/dist/index45.js

@@ -1,5 +1,33 @@
-const e = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='11'%20viewBox='0%200%208%2011'%20fill='none'%3e%3cpath%20d='M5.2%207.9359L5.2%203.32051C5.2%202.75407%204.66274%202.29487%204%202.29487C3.33726%202.29487%202.8%202.75407%202.8%203.32051L2.8%208.70513C2.8%209.69641%203.7402%2010.5%204.9%2010.5C6.0598%2010.5%207%209.69641%207%208.70513L7%203.0641C7%201.64799%205.65685%200.5%204%200.5C2.34315%200.5%201%201.64799%201%203.0641L1%207.9359'%20stroke='%23415575'%20stroke-width='0.8'%20stroke-linecap='round'/%3e%3c/svg%3e";
+import f from "react";
+const p = ({
+  size: r = 40,
+  text: e,
+  textColor: s = "var(--color-white)",
+  backgroundColor: c = "var(--color-gray-400)",
+  className: n = "",
+  onClick: o
+}) => {
+  var t, a, i, l;
+  const u = (l = (i = (a = (t = e == null ? void 0 : e.split(" ")) == null ? void 0 : t.map((d) => d[0])) == null ? void 0 : a.join("")) == null ? void 0 : i.toUpperCase()) == null ? void 0 : l.slice(0, 3);
+  return /* @__PURE__ */ f.createElement("div", {
+    className: `
+        se-design-avatar 
+        flex items-center justify-center 
+        rounded-full font-medium
+        ${o ? "cursor-pointer" : "cursor-default"}
+        ${n}
+      `,
+    onClick: o,
+    style: {
+      width: r,
+      height: r,
+      backgroundColor: c,
+      color: s,
+      fontSize: `${r * 0.4}px`
+    }
+  }, u);
+};
 export {
-  e as default
+  p as Avatar
 };
 //# sourceMappingURL=index45.js.map

package/dist/index45.js.map

@@ -1 +1 @@
-{"version":3,"file":"index45.js","sources":["../src/assets/icons/attachment.svg?url"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='11'%20viewBox='0%200%208%2011'%20fill='none'%3e%3cpath%20d='M5.2%207.9359L5.2%203.32051C5.2%202.75407%204.66274%202.29487%204%202.29487C3.33726%202.29487%202.8%202.75407%202.8%203.32051L2.8%208.70513C2.8%209.69641%203.7402%2010.5%204.9%2010.5C6.0598%2010.5%207%209.69641%207%208.70513L7%203.0641C7%201.64799%205.65685%200.5%204%200.5C2.34315%200.5%201%201.64799%201%203.0641L1%207.9359'%20stroke='%23415575'%20stroke-width='0.8'%20stroke-linecap='round'/%3e%3c/svg%3e\""],"names":["__vite_glob_0_0"],"mappings":"AAAA,MAAeA,IAAA;"}
+{"version":3,"file":"index45.js","sources":["../src/components/Avatar/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nexport type AvatarProps = {\n  size?: number;\n  text: string;\n  textColor?: string;\n  backgroundColor?: string;\n  className?: string;\n  onClick?: () => void;\n};\n\nexport const Avatar: FC<AvatarProps> = ({\n  size = 40,\n  text,\n  textColor = 'var(--color-white)',\n  backgroundColor = 'var(--color-gray-400)',\n  className = '',\n  onClick\n}) => {\n  const initials = text\n    ?.split(' ')\n    ?.map((word) => word[0])\n    ?.join('')\n    ?.toUpperCase()\n    ?.slice(0, 3);\n\n  return (\n    <div\n      className={`\n        se-design-avatar \n        flex items-center justify-center \n        rounded-full font-medium\n        ${onClick ? 'cursor-pointer' : 'cursor-default'}\n        ${className}\n      `}\n      onClick={onClick}\n      style={{\n        width: size,\n        height: size,\n        backgroundColor: backgroundColor,\n        color: textColor,\n        fontSize: `${size * 0.4}px`\n      }}\n    >\n      {initials}\n    </div>\n  );\n};\n"],"names":["Avatar","size","text","textColor","backgroundColor","className","onClick","initials","split","map","word","join","toUpperCase","slice","React","createElement","style","width","height","color","fontSize"],"mappings":";AAWO,MAAMA,IAA0BA,CAAC;AAAA,EACtCC,MAAAA,IAAO;AAAA,EACPC,MAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,iBAAAA,IAAkB;AAAA,EAClBC,WAAAA,IAAY;AAAA,EACZC,SAAAA;AACF,MAAM;;AACJ,QAAMC,KAAWL,KAAAA,KAAAA,KAAAA,IAAAA,KAAAA,gBAAAA,EACbM,MAAM,SADON,gBAAAA,EAEbO,IAAKC,OAASA,EAAK,CAAC,OAFPR,gBAAAA,EAGbS,KAAK,QAHQT,gBAAAA,EAIbU,kBAJaV,gBAAAA,EAKbW,MAAM,GAAG;AAGXC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEV,WAAW;AAAA;AAAA;AAAA;AAAA,UAIPC,IAAU,mBAAmB,gBAAgB;AAAA,UAC7CD,CAAS;AAAA;AAAA,IAEbC,SAAAA;AAAAA,IACAU,OAAO;AAAA,MACLC,OAAOhB;AAAAA,MACPiB,QAAQjB;AAAAA,MACRG,iBAAAA;AAAAA,MACAe,OAAOhB;AAAAA,MACPiB,UAAU,GAAGnB,IAAO,GAAG;AAAA,IAAA;AAAA,KAGxBM,CACE;AAET;"}

package/dist/index46.js

@@ -1,5 +1,33 @@
-const e = "data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M17.2727%2010.0535H2'%20stroke='currentColor'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M6.49198%2014.5454L2%2010.0535L6.49198%205.56149'%20stroke='currentColor'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e";
+import e, { useState as y, useEffect as E } from "react";
+const k = ({
+  defaultActiveNavigationItem: l,
+  navigationItems: c,
+  onNavigationItemChange: s
+}) => {
+  const x = l || (c[0] ? c[0].id : ""), [d, o] = y(x);
+  E(() => {
+    o(l || "");
+  }, [l]);
+  const f = (r) => {
+    o(r == null ? void 0 : r.id), s == null || s(r == null ? void 0 : r.id);
+  }, u = (r, b) => r.id === b;
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", {
+    className: "se-design-navigation-bar flex items-center gap-4"
+  }, c.map((r) => {
+    const b = d === r.id, p = r.disabled;
+    return /* @__PURE__ */ e.createElement("div", {
+      key: r.label,
+      onClick: () => !p && f(r),
+      className: `text-base ${p ? "text-[var(--color-gray-400)] cursor-not-allowed" : b ? "text-[var(--color-gray-900)] font-bold hover:cursor-pointer" : "text-[var(--color-gray-700)] font-normal hover:text-[var(--color-gray-900)] cursor-pointer"}`
+    }, r.label);
+  })), /* @__PURE__ */ e.createElement("div", {
+    className: "se-design-navigation-bar-content"
+  }, c.map((r) => /* @__PURE__ */ e.createElement("div", {
+    key: r.id,
+    className: `navigation-item-content ${u(r, d) ? "block" : "hidden"}`
+  }, u(r, d) && (r == null ? void 0 : r.renderNavigationItemContent) && (r == null ? void 0 : r.renderNavigationItemContent(r))))));
+};
 export {
-  e as default
+  k as NavigationBar
 };
 //# sourceMappingURL=index46.js.map

package/dist/index46.js.map

@@ -1 +1 @@
-{"version":3,"file":"index46.js","sources":["../src/assets/icons/back.svg?url"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M17.2727%2010.0535H2'%20stroke='currentColor'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M6.49198%2014.5454L2%2010.0535L6.49198%205.56149'%20stroke='currentColor'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e\""],"names":["__vite_glob_0_1"],"mappings":"AAAA,MAAeA,IAAA;"}
+{"version":3,"file":"index46.js","sources":["../src/components/NavigationBar/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useState, useEffect } from 'react';\n\ninterface NavigationItemProps {\n  label: string;\n  id: string;\n  disabled?: boolean;\n  renderNavigationItemContent?: (navigationItem: NavigationItemProps) => ReactNode;\n}\n\ninterface NavigationBarProps {\n  defaultActiveNavigationItem?: string;\n  navigationItems: NavigationItemProps[];\n  onNavigationItemChange?: (navigationItemId: string) => void;\n}\n\nexport const NavigationBar: FC<NavigationBarProps> = ({\n  defaultActiveNavigationItem,\n  navigationItems,\n  onNavigationItemChange\n}) => {\n  const defaultNavigationItemId = defaultActiveNavigationItem || (navigationItems[0] ? navigationItems[0].id : '');\n  const [activeNavigationItem, setActiveNavigationItem] = useState(defaultNavigationItemId);\n\n  useEffect(() => {\n    setActiveNavigationItem(defaultActiveNavigationItem || '');\n  }, [defaultActiveNavigationItem]);\n\n  const handleNavigationItemClick = (navigationItem: NavigationItemProps) => {\n    setActiveNavigationItem(navigationItem?.id);\n    onNavigationItemChange?.(navigationItem?.id);\n  };\n\n  const isNavigationItemActive = (navigationItem: NavigationItemProps, activeNavigationItem: string) => {\n    return navigationItem.id === activeNavigationItem;\n  };\n\n  return (\n    <>\n      <div className=\"se-design-navigation-bar flex items-center gap-4\">\n        {navigationItems.map((navigationItem) => {\n          const isActive = activeNavigationItem === navigationItem.id;\n          const isDisabled = navigationItem.disabled;\n          return (\n            <div\n              key={navigationItem.label}\n              onClick={() => !isDisabled && handleNavigationItemClick(navigationItem)}\n              className={`text-base ${\n                isDisabled\n                  ? 'text-[var(--color-gray-400)] cursor-not-allowed'\n                  : isActive\n                    ? 'text-[var(--color-gray-900)] font-bold hover:cursor-pointer'\n                    : 'text-[var(--color-gray-700)] font-normal hover:text-[var(--color-gray-900)] cursor-pointer'\n              }`}\n            >\n              {navigationItem.label}\n            </div>\n          );\n        })}\n      </div>\n\n      <div className=\"se-design-navigation-bar-content\">\n        {navigationItems.map((navigationItem) => (\n          <div\n            key={navigationItem.id}\n            className={`navigation-item-content ${isNavigationItemActive(navigationItem, activeNavigationItem) ? 'block' : 'hidden'}`}\n          >\n            {isNavigationItemActive(navigationItem, activeNavigationItem) &&\n              navigationItem?.renderNavigationItemContent &&\n              navigationItem?.renderNavigationItemContent(navigationItem)}\n          </div>\n        ))}\n      </div>\n    </>\n  );\n};\n"],"names":["NavigationBar","defaultActiveNavigationItem","navigationItems","onNavigationItemChange","defaultNavigationItemId","id","activeNavigationItem","setActiveNavigationItem","useState","useEffect","handleNavigationItemClick","navigationItem","isNavigationItemActive","createElement","React","Fragment","className","map","isActive","isDisabled","disabled","key","label","onClick","renderNavigationItemContent"],"mappings":";AAeO,MAAMA,IAAwCA,CAAC;AAAA,EACpDC,6BAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,wBAAAA;AACF,MAAM;AACEC,QAAAA,IAA0BH,MAAgCC,EAAgB,CAAC,IAAIA,EAAgB,CAAC,EAAEG,KAAK,KACvG,CAACC,GAAsBC,CAAuB,IAAIC,EAASJ,CAAuB;AAExFK,EAAAA,EAAU,MAAM;AACdF,IAAAA,EAAwBN,KAA+B,EAAE;AAAA,EAAA,GACxD,CAACA,CAA2B,CAAC;AAE1BS,QAAAA,IAA4BA,CAACC,MAAwC;AACzEJ,IAAAA,EAAwBI,KAAAA,gBAAAA,EAAgBN,EAAE,GAC1CF,KAAAA,QAAAA,EAAyBQ,KAAAA,gBAAAA,EAAgBN;AAAAA,EAC3C,GAEMO,IAAyBA,CAACD,GAAqCL,MAC5DK,EAAeN,OAAOC;AAG/B,2BACEO,cAAAC,EAAAC,UAAA,MACED,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IAAKG,WAAU;AAAA,EAAA,GACZd,EAAgBe,IAAKN,CAAmBA,MAAA;AACjCO,UAAAA,IAAWZ,MAAyBK,EAAeN,IACnDc,IAAaR,EAAeS;AAEhCN,WAAAA,gBAAAA,EAAAD,cAAA,OAAA;AAAA,MACEQ,KAAKV,EAAeW;AAAAA,MACpBC,SAASA,MAAM,CAACJ,KAAcT,EAA0BC,CAAc;AAAA,MACtEK,WAAW,aACTG,IACI,oDACAD,IACE,gEACA,4FAA4F;AAAA,IAAA,GAGnGP,EAAeW,KACb;AAAA,EAER,CAAA,CACE,GAELR,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IAAKG,WAAU;AAAA,EAAA,GACZd,EAAgBe,IAAKN,CACpBG,MAAAA,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IACEQ,KAAKV,EAAeN;AAAAA,IACpBW,WAAW,2BAA2BJ,EAAuBD,GAAgBL,CAAoB,IAAI,UAAU,QAAQ;AAAA,EAEtHM,GAAAA,EAAuBD,GAAgBL,CAAoB,MAC1DK,KAAAA,gBAAAA,EAAgBa,iCAChBb,KAAAA,gBAAAA,EAAgBa,4BAA4Bb,GAC3C,CACN,CACE,CACL;AAEN;"}