se-design 1.0.97 → 1.0.98-dev.0

package/dist/index52.js

@@ -1,41 +1,201 @@
-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)"
+import t, { useState as h, useRef as f, useCallback as g, useEffect as P } from "react";
+/* empty css         */
+import C from "./index253.js";
+import { Icon as H } from "./index6.js";
+import { useStableId as b } from "./index225.js";
+import { getA11yNameAttributes as J } from "./index87.js";
+import "./index78.js";
+import { useCombobox as le } from "./index74.js";
+function c() {
+  return c = Object.assign ? Object.assign.bind() : function(i) {
+    for (var l = 1; l < arguments.length; l++) {
+      var r = arguments[l];
+      for (var u in r) ({}).hasOwnProperty.call(r, u) && (i[u] = r[u]);
     }
-  }, /* @__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"
+    return i;
+  }, c.apply(null, arguments);
+}
+const ye = ({
+  onCountrycodeChange: i,
+  onNumberChange: l,
+  error: r,
+  errorMessage: u,
+  value: d,
+  label: s,
+  automationId: p = "",
+  ariaLabel: M,
+  ariaLabelledBy: T,
+  ariaDescribedBy: z,
+  phoneNumberAriaLabel: x,
+  countryCodeAriaLabel: G,
+  disabled: a = !1
+}) => {
+  const [v, A] = h(d?.countryCode || C[0].dial_code), [n, y] = h(!1), [w, $] = h(C), [Q, k] = h(""), [U, R] = h(""), W = f(null), F = f(null), O = f(null), m = f(!1), N = b(p, "phone-label"), B = b(p, "phone-listbox"), X = b(p, "phone-input"), K = b(p, "phone-error"), E = C.find((e) => e.dial_code === v), V = g(() => {
+    y(!1), k(""), $(C);
+  }, []), I = g((e) => {
+    e && (A(e), i(e)), V();
+  }, [i, V]), Y = g((e) => {
+    m.current = !0, I(e.dial_code);
+  }, [I]), {
+    containerProps: j,
+    inputProps: Z,
+    listboxProps: ee,
+    getOptionProps: te,
+    highlightedIndex: ne,
+    setHighlightedIndex: q
+  } = le({
+    items: w,
+    isOpen: n,
+    onOpenChange: y,
+    onSelect: Y,
+    listboxId: B
+  }), oe = (e) => {
+    const o = e.target.value;
+    k(o), q(-1);
+    const _ = C.filter((L) => L.name.toLowerCase().includes(o.toLowerCase()) || L.dial_code.toLowerCase().includes(o.toLowerCase()) || L.code.toLowerCase().includes(o.toLowerCase()));
+    $(_);
+  }, D = f(n);
+  P(() => {
+    let e = null;
+    return D.current && !n && m.current && (e = requestAnimationFrame(() => {
+      F.current?.focus();
+    })), D.current && !n && (m.current = !1), D.current = n, () => {
+      e !== null && cancelAnimationFrame(e);
+    };
+  }, [n]), P(() => {
+    d && (A(d.countryCode), R(d.number));
+  }, [d]), P(() => {
+    let e = null;
+    return n && (e = requestAnimationFrame(() => {
+      O.current?.focus();
+    })), () => {
+      e !== null && cancelAnimationFrame(e);
+    };
+  }, [n]);
+  const re = (e) => {
+    const o = e.replace(/\D/g, "");
+    R(o), l(o);
+  }, S = g(() => {
+    a || y((e) => !e);
+  }, [a]), ae = g((e) => {
+    if (!a)
+      switch (e.key) {
+        case "Enter":
+        case " ":
+          e.preventDefault(), S();
+          break;
+        case "ArrowDown":
+          e.preventDefault(), n || y(!0);
+          break;
+      }
+  }, [a, n, S]), ce = J({
+    ariaLabelledBy: T,
+    internalLabelId: s ? N : void 0,
+    ariaLabel: M || (s ? void 0 : "Phone number")
+  }), se = J({
+    ariaLabelledBy: !x && s ? N : void 0,
+    ariaLabel: x || (s ? void 0 : "Phone number"),
+    ariaDescribedBy: r ? K : z
+  }), ie = G || `Select country code. Current: ${E?.name} ${E?.dial_code}`;
+  return /* @__PURE__ */ t.createElement("div", c({
+    className: "phone-input-container-se-design-main-container",
+    "data-automation-id": p
+  }, j, {
+    onKeyDownCapture: (e) => {
+      e.key === "Escape" && n && (m.current = !0), j.onKeyDownCapture(e);
     }
-  }));
+  }), s && /* @__PURE__ */ t.createElement("div", {
+    id: N,
+    className: "label-container"
+  }, s), /* @__PURE__ */ t.createElement("div", c({
+    role: "group"
+  }, ce, {
+    className: `phone-input-container-se-design-main ${r ? "error" : ""}`,
+    ref: W
+  }), /* @__PURE__ */ t.createElement("div", {
+    className: "phone-input-container-se-design"
+  }, /* @__PURE__ */ t.createElement("button", {
+    ref: F,
+    type: "button",
+    className: `phone-input-container-se-design-country-code focus-outline rounded ${a ? "cursor-not-allowed opacity-60" : ""}`,
+    onClick: S,
+    onKeyDown: ae,
+    "aria-haspopup": "listbox",
+    "aria-expanded": n,
+    "aria-controls": n ? B : void 0,
+    "aria-label": ie,
+    disabled: a,
+    "data-automation-id": "country-code-selector"
+  }, /* @__PURE__ */ t.createElement("img", {
+    src: `https://flagcdn.com/${E?.code.toLowerCase()}.svg`,
+    alt: "",
+    "aria-hidden": "true",
+    width: "16"
+  }), /* @__PURE__ */ t.createElement("span", null, E?.dial_code), /* @__PURE__ */ t.createElement(H, {
+    name: "chevron",
+    className: n ? "rotate-180" : "",
+    "aria-hidden": "true"
+  })), /* @__PURE__ */ t.createElement("span", {
+    className: "divider",
+    "aria-hidden": "true"
+  }), /* @__PURE__ */ t.createElement("input", c({
+    id: X,
+    type: "tel",
+    placeholder: "Enter phone number",
+    className: `phone-input-container-se-design-phone-number-input ${a ? "disabled" : ""}`,
+    onChange: (e) => re(e.target.value),
+    value: U,
+    pattern: "[0-9]*",
+    disabled: a,
+    "aria-invalid": r || void 0
+  }, se, {
+    "data-automation-id": "phone-number-input-field"
+  }))), n && /* @__PURE__ */ t.createElement("div", c({}, ee, {
+    className: "phone-input-container-se-design-country-code-list",
+    "aria-label": "Select country",
+    "data-automation-id": "country-code-list"
+  }), /* @__PURE__ */ t.createElement("div", {
+    className: "search-input-wrapper"
+  }, /* @__PURE__ */ t.createElement(H, {
+    name: "search",
+    className: "search-icon",
+    "aria-hidden": "true"
+  }), /* @__PURE__ */ t.createElement("input", c({
+    ref: O
+  }, Z, {
+    type: "text",
+    placeholder: "Search countries",
+    className: "phone-input-container-se-design-country-code-list-item-input",
+    onChange: oe,
+    value: Q,
+    "aria-label": "Search countries",
+    "data-automation-id": "country-code-search-input"
+  }))), w.length > 0 ? w.map((e, o) => {
+    const _ = te(o, e.dial_code === v);
+    return /* @__PURE__ */ t.createElement("div", c({
+      key: e.code
+    }, _, {
+      className: `phone-input-container-se-design-country-code-list-item ${ne === o ? "highlighted" : ""} ${e.dial_code === v ? "selected" : ""}`,
+      onClick: () => {
+        m.current = !0, I(e.dial_code);
+      },
+      onMouseEnter: () => q(o)
+    }), /* @__PURE__ */ t.createElement("img", {
+      src: `https://flagcdn.com/${e.code.toLowerCase()}.svg`,
+      alt: "",
+      "aria-hidden": "true",
+      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-results",
+    role: "status"
+  }, "No results found"))), r && /* @__PURE__ */ t.createElement("div", {
+    id: K,
+    className: "error-message",
+    role: "alert"
+  }, u));
 };
 export {
-  m as CircularProgressBar
+  ye as PhoneInput
 };
 //# sourceMappingURL=index52.js.map

package/dist/index52.js.map

@@ -1 +1 @@
-{"version":3,"file":"index52.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;AAC9B,QAAMC,KAAUF,IAAOC,KAAe,GAChCE,IAAgBD,IAAS,IAAIE,KAAKC,IAClCC,IAAmBH,IAAiBN,IAAW,MAAOM;AAE5D,SACEI,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,OAAOT;AAAAA,IAAMU,QAAQV;AAAAA,IAAMW,OAAO;AAAA,MAAEC,WAAW;AAAA,IAAA;AAAA,EAAiB,GAEnEL,gBAAAA,EAAAC,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/GV,gBAAAA,EAAAC,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":"index52.js","sources":["../src/components/PhoneInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, useCallback } from 'react';\nimport './style.scss';\nimport countriesInfoJson from './countriesInfo.json';\nimport { Icon } from '../Icon';\nimport { useStableId } from '../../utils/useStableId';\nimport { getA11yNameAttributes, useCombobox } from '../../utils/a11y';\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  label?: string;\n  automationId?: string;\n  /**\n   * Accessible label for the entire phone input group (role=\"group\").\n   * Provides context for screen readers (e.g., \"Two-step verification phone number for signer 1\").\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label the group (highest precedence over ariaLabel).\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) providing additional description for the phone number input.\n   */\n  ariaDescribedBy?: string;\n  /**\n   * Override aria-label for the phone number input specifically.\n   * Defaults to the visible label text or 'Phone number'.\n   */\n  phoneNumberAriaLabel?: string;\n  /**\n   * Override aria-label for the country code combobox button.\n   * Defaults to \"Select country code. Current: {name} {dial_code}\".\n   */\n  countryCodeAriaLabel?: string;\n  /**\n   * Whether the input is disabled\n   */\n  disabled?: boolean;\n}\n\nexport const PhoneInput: React.FC<PhoneInputProps> = ({\n  onCountrycodeChange,\n  onNumberChange,\n  error,\n  errorMessage,\n  value,\n  label,\n  automationId = '',\n  ariaLabel,\n  ariaLabelledBy,\n  ariaDescribedBy,\n  phoneNumberAriaLabel,\n  countryCodeAriaLabel,\n  disabled = false\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  const countryButtonRef = useRef<HTMLButtonElement>(null);\n  const searchInputRef = useRef<HTMLInputElement>(null);\n  const restoreFocusToButtonRef = useRef(false);\n\n  // Generate stable IDs for ARIA relationships\n  const labelId = useStableId(automationId, 'phone-label');\n  const listboxId = useStableId(automationId, 'phone-listbox');\n  const phoneInputId = useStableId(automationId, 'phone-input');\n  const errorId = useStableId(automationId, 'phone-error');\n\n  const countryInfo = countriesInfoJson.find((country) => country.dial_code === countryCode);\n\n  // Close dropdown and reset state\n  const closeDropdown = useCallback(() => {\n    setDisplaySelectCountryCode(false);\n    setSearchValue('');\n    setCountriesInfo(countriesInfoJson);\n  }, []);\n\n  const handleCountryCodeSelect = useCallback(\n    (country: string) => {\n      if (country) {\n        setCountryCode(country);\n        onCountrycodeChange(country);\n      }\n      closeDropdown();\n      // Focus return is handled by useEffect that watches displaySelectCountryCode\n    },\n    [onCountrycodeChange, closeDropdown]\n  );\n\n  const handleSelectFromDropdown = useCallback(\n    (country: typeof countriesInfoJson[0]) => {\n      restoreFocusToButtonRef.current = true;\n      handleCountryCodeSelect(country.dial_code);\n    },\n    [handleCountryCodeSelect]\n  );\n\n  // Use comprehensive useCombobox hook for country search\n  const {\n    containerProps,\n    inputProps: comboboxInputProps,\n    listboxProps,\n    getOptionProps,\n    highlightedIndex,\n    setHighlightedIndex\n  } = useCombobox({\n    items: countriesInfo,\n    isOpen: displaySelectCountryCode,\n    onOpenChange: setDisplaySelectCountryCode,\n    onSelect: handleSelectFromDropdown,\n    listboxId\n  });\n\n  const handleCountryCodeSearch = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const searchVal = event.target.value;\n    setSearchValue(searchVal);\n    setHighlightedIndex(-1);\n    const filteredCountries = countriesInfoJson.filter(\n      (country) =>\n        country.name.toLowerCase().includes(searchVal.toLowerCase()) ||\n        country.dial_code.toLowerCase().includes(searchVal.toLowerCase()) ||\n        country.code.toLowerCase().includes(searchVal.toLowerCase())\n    );\n    setCountriesInfo(filteredCountries);\n  };\n\n  // Return focus to button when dropdown closes\n  const prevDisplaySelectCountryCodeRef = useRef(displaySelectCountryCode);\n  useEffect(() => {\n    let rafId: number | null = null;\n    // If dropdown was open and is now closed, return focus to button\n    // ONLY when the close was triggered from within the component (Escape/selection),\n    // not when the user moved focus outside (focus-out dismissal).\n    if (prevDisplaySelectCountryCodeRef.current && !displaySelectCountryCode && restoreFocusToButtonRef.current) {\n      rafId = requestAnimationFrame(() => {\n        countryButtonRef.current?.focus();\n      });\n    }\n    if (prevDisplaySelectCountryCodeRef.current && !displaySelectCountryCode) {\n      restoreFocusToButtonRef.current = false;\n    }\n    prevDisplaySelectCountryCodeRef.current = displaySelectCountryCode;\n    return () => {\n      if (rafId !== null) {\n        cancelAnimationFrame(rafId);\n      }\n    };\n  }, [displaySelectCountryCode]);\n\n  useEffect(() => {\n    if (value) {\n      setCountryCode(value.countryCode);\n      setEnteredNumber(value.number);\n    }\n  }, [value]);\n\n  // Focus search input when dropdown opens\n  useEffect(() => {\n    let rafId: number | null = null;\n    if (displaySelectCountryCode) {\n      rafId = requestAnimationFrame(() => {\n        searchInputRef.current?.focus();\n      });\n    }\n    return () => {\n      if (rafId !== null) {\n        cancelAnimationFrame(rafId);\n      }\n    };\n  }, [displaySelectCountryCode]);\n\n  const handleEnteredNumberChange = (val: string) => {\n    const numericValue = val.replace(/\\D/g, ''); // Remove non-numeric characters\n    setEnteredNumber(numericValue);\n    onNumberChange(numericValue);\n  };\n\n  const toggleDropdown = useCallback(() => {\n    if (disabled) return;\n    setDisplaySelectCountryCode((prev) => !prev);\n  }, [disabled]);\n\n  const handleCountryButtonKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (disabled) return;\n\n      switch (e.key) {\n        case 'Enter':\n        case ' ':\n          e.preventDefault();\n          toggleDropdown();\n          break;\n        case 'ArrowDown':\n          e.preventDefault();\n          if (!displaySelectCountryCode) {\n            setDisplaySelectCountryCode(true);\n          }\n          break;\n        // Escape is handled by useDismissOnEscape hook\n      }\n    },\n    [disabled, displaySelectCountryCode, toggleDropdown]\n  );\n\n  // Group label (role=\"group\"): combines the visible label with any external ariaLabelledBy\n  // (handled inside getA11yNameAttributes); ariaLabel overrides the visible label; falls back to 'Phone number'.\n  const groupA11yProps = getA11yNameAttributes({\n    ariaLabelledBy,\n    internalLabelId: label ? labelId : undefined,\n    ariaLabel: ariaLabel || (!label ? 'Phone number' : undefined)\n  });\n\n  // Phone number input: caller override > visible label > fallback 'Phone number'\n  const phoneInputA11yProps = getA11yNameAttributes({\n    ariaLabelledBy: !phoneNumberAriaLabel && label ? labelId : undefined,\n    ariaLabel: phoneNumberAriaLabel || (!label ? 'Phone number' : undefined),\n    ariaDescribedBy: error ? errorId : ariaDescribedBy\n  });\n\n  // Country code button label: caller override > default dynamic label\n  const computedCountryCodeAriaLabel = countryCodeAriaLabel ||\n    `Select country code. Current: ${countryInfo?.name} ${countryInfo?.dial_code}`;\n\n  return (\n    <div \n      className=\"phone-input-container-se-design-main-container\" \n      data-automation-id={automationId}\n      {...containerProps}\n      onKeyDownCapture={(e) => {\n        if (e.key === 'Escape' && displaySelectCountryCode) {\n          restoreFocusToButtonRef.current = true;\n        }\n        containerProps.onKeyDownCapture(e);\n      }}\n    >\n      {label && (\n        <div id={labelId} className=\"label-container\">\n          {label}\n        </div>\n      )}\n      <div\n        role=\"group\"\n        {...groupA11yProps}\n        className={`phone-input-container-se-design-main ${error ? 'error' : ''}`}\n        ref={containerRef}\n      >\n        <div className=\"phone-input-container-se-design\">\n          <button\n            ref={countryButtonRef}\n            type=\"button\"\n            className={`phone-input-container-se-design-country-code focus-outline rounded ${disabled ? 'cursor-not-allowed opacity-60' : ''}`}\n            onClick={toggleDropdown}\n            onKeyDown={handleCountryButtonKeyDown}\n            aria-haspopup=\"listbox\"\n            aria-expanded={displaySelectCountryCode}\n            aria-controls={displaySelectCountryCode ? listboxId : undefined}\n            aria-label={computedCountryCodeAriaLabel}\n            disabled={disabled}\n            data-automation-id=\"country-code-selector\"\n          >\n            <img\n              src={`https://flagcdn.com/${countryInfo?.code.toLowerCase()}.svg`}\n              alt=\"\"\n              aria-hidden=\"true\"\n              width=\"16\"\n            />\n            <span>{countryInfo?.dial_code}</span>\n            <Icon\n              name=\"chevron\"\n              className={!displaySelectCountryCode ? '' : 'rotate-180'}\n              aria-hidden=\"true\"\n            />\n          </button>\n          <span className=\"divider\" aria-hidden=\"true\" />\n          <input\n            id={phoneInputId}\n            type=\"tel\"\n            placeholder=\"Enter phone number\"\n            className={`phone-input-container-se-design-phone-number-input ${disabled ? 'disabled' : ''}`}\n            onChange={(event) => handleEnteredNumberChange(event.target.value)}\n            value={enteredNumber}\n            pattern=\"[0-9]*\"\n            disabled={disabled}\n            aria-invalid={error || undefined}\n            {...phoneInputA11yProps}\n            data-automation-id=\"phone-number-input-field\"\n          />\n        </div>\n\n        {displaySelectCountryCode && (\n          <div\n            {...listboxProps}\n            className=\"phone-input-container-se-design-country-code-list\"\n            aria-label=\"Select country\"\n            data-automation-id=\"country-code-list\"\n          >\n            <div className=\"search-input-wrapper\">\n              <Icon name=\"search\" className=\"search-icon\" aria-hidden=\"true\" />\n              <input\n                ref={searchInputRef}\n                {...comboboxInputProps}\n                type=\"text\"\n                placeholder=\"Search countries\"\n                className=\"phone-input-container-se-design-country-code-list-item-input\"\n                onChange={handleCountryCodeSearch}\n                value={searchValue}\n                aria-label=\"Search countries\"\n                data-automation-id=\"country-code-search-input\"\n              />\n            </div>\n            {countriesInfo.length > 0 ? (\n              countriesInfo.map((country, index) => {\n                const optionProps = getOptionProps(index, country.dial_code === countryCode);\n                return (\n                  <div\n                    key={country.code}\n                    {...optionProps}\n                    className={`phone-input-container-se-design-country-code-list-item ${\n                      highlightedIndex === index ? 'highlighted' : ''\n                    } ${country.dial_code === countryCode ? 'selected' : ''}`}\n                    onClick={() => {\n                      restoreFocusToButtonRef.current = true;\n                      handleCountryCodeSelect(country.dial_code);\n                    }}\n                    onMouseEnter={() => setHighlightedIndex(index)}\n                  >\n                    <img\n                      src={`https://flagcdn.com/${country.code.toLowerCase()}.svg`}\n                      alt=\"\"\n                      aria-hidden=\"true\"\n                      width=\"16\"\n                    />\n                    <span>{country.name}</span>\n                    <span>({country.dial_code})</span>\n                  </div>\n                );\n              })\n            ) : (\n              <div className=\"phone-input-container-se-design-country-code-list-item-no-results\" role=\"status\">\n                No results found\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n      {error && (\n        <div id={errorId} className=\"error-message\" role=\"alert\">\n          {errorMessage}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["PhoneInput","onCountrycodeChange","onNumberChange","error","errorMessage","value","label","automationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","phoneNumberAriaLabel","countryCodeAriaLabel","disabled","countryCode","setCountryCode","useState","countriesInfoJson","dial_code","displaySelectCountryCode","setDisplaySelectCountryCode","countriesInfo","setCountriesInfo","searchValue","setSearchValue","enteredNumber","setEnteredNumber","containerRef","useRef","countryButtonRef","searchInputRef","restoreFocusToButtonRef","labelId","useStableId","listboxId","phoneInputId","errorId","countryInfo","find","country","closeDropdown","useCallback","handleCountryCodeSelect","handleSelectFromDropdown","current","containerProps","inputProps","comboboxInputProps","listboxProps","getOptionProps","highlightedIndex","setHighlightedIndex","useCombobox","items","isOpen","onOpenChange","onSelect","handleCountryCodeSearch","event","searchVal","target","filteredCountries","filter","name","toLowerCase","includes","code","prevDisplaySelectCountryCodeRef","useEffect","rafId","requestAnimationFrame","focus","cancelAnimationFrame","number","handleEnteredNumberChange","val","numericValue","replace","toggleDropdown","prev","handleCountryButtonKeyDown","e","key","preventDefault","groupA11yProps","getA11yNameAttributes","internalLabelId","undefined","phoneInputA11yProps","computedCountryCodeAriaLabel","React","createElement","_extends","className","onKeyDownCapture","id","role","ref","type","onClick","onKeyDown","src","alt","width","Icon","placeholder","onChange","pattern","length","map","index","optionProps","onMouseEnter"],"mappings":";;;;;;;;;;;;;;;;;AA+CO,MAAMA,KAAwCA,CAAC;AAAA,EACpDC,qBAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA,IAAe;AAAA,EACfC,WAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,sBAAAA;AAAAA,EACAC,sBAAAA;AAAAA,EACAC,UAAAA,IAAW;AACb,MAAM;AACJ,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAASX,GAAOS,eAAeG,EAAkB,CAAC,EAAEC,SAAS,GAC7F,CAACC,GAA0BC,CAA2B,IAAIJ,EAAS,EAAK,GACxE,CAACK,GAAeC,CAAgB,IAAIN,EAASC,CAAiB,GAC9D,CAACM,GAAaC,CAAc,IAAIR,EAAS,EAAE,GAC3C,CAACS,GAAeC,CAAgB,IAAIV,EAAS,EAAE,GAC/CW,IAAeC,EAAuB,IAAI,GAC1CC,IAAmBD,EAA0B,IAAI,GACjDE,IAAiBF,EAAyB,IAAI,GAC9CG,IAA0BH,EAAO,EAAK,GAGtCI,IAAUC,EAAY1B,GAAc,aAAa,GACjD2B,IAAYD,EAAY1B,GAAc,eAAe,GACrD4B,IAAeF,EAAY1B,GAAc,aAAa,GACtD6B,IAAUH,EAAY1B,GAAc,aAAa,GAEjD8B,IAAcpB,EAAkBqB,KAAMC,CAAAA,MAAYA,EAAQrB,cAAcJ,CAAW,GAGnF0B,IAAgBC,EAAY,MAAM;AACtCrB,IAAAA,EAA4B,EAAK,GACjCI,EAAe,EAAE,GACjBF,EAAiBL,CAAiB;AAAA,EACpC,GAAG,CAAA,CAAE,GAECyB,IAA0BD,EAC9B,CAACF,MAAoB;AACnB,IAAIA,MACFxB,EAAewB,CAAO,GACtBtC,EAAoBsC,CAAO,IAE7BC,EAAAA;AAAAA,EAEF,GACA,CAACvC,GAAqBuC,CAAa,CACrC,GAEMG,IAA2BF,EAC/B,CAACF,MAAyC;AACxCR,IAAAA,EAAwBa,UAAU,IAClCF,EAAwBH,EAAQrB,SAAS;AAAA,EAC3C,GACA,CAACwB,CAAuB,CAC1B,GAGM;AAAA,IACJG,gBAAAA;AAAAA,IACAC,YAAYC;AAAAA,IACZC,cAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,kBAAAA;AAAAA,IACAC,qBAAAA;AAAAA,EAAAA,IACEC,GAAY;AAAA,IACdC,OAAOhC;AAAAA,IACPiC,QAAQnC;AAAAA,IACRoC,cAAcnC;AAAAA,IACdoC,UAAUb;AAAAA,IACVT,WAAAA;AAAAA,EAAAA,CACD,GAEKuB,KAA0BA,CAACC,MAA+C;AAC9E,UAAMC,IAAYD,EAAME,OAAOvD;AAC/BmB,IAAAA,EAAemC,CAAS,GACxBR,EAAoB,EAAE;AACtB,UAAMU,IAAoB5C,EAAkB6C,OACzCvB,CAAAA,MACCA,EAAQwB,KAAKC,YAAAA,EAAcC,SAASN,EAAUK,YAAAA,CAAa,KAC3DzB,EAAQrB,UAAU8C,YAAAA,EAAcC,SAASN,EAAUK,YAAAA,CAAa,KAChEzB,EAAQ2B,KAAKF,YAAAA,EAAcC,SAASN,EAAUK,YAAAA,CAAa,CAC/D;AACA1C,IAAAA,EAAiBuC,CAAiB;AAAA,EACpC,GAGMM,IAAkCvC,EAAOT,CAAwB;AACvEiD,EAAAA,EAAU,MAAM;AACd,QAAIC,IAAuB;AAI3B,WAAIF,EAAgCvB,WAAW,CAACzB,KAA4BY,EAAwBa,YAClGyB,IAAQC,sBAAsB,MAAM;AAClCzC,MAAAA,EAAiBe,SAAS2B,MAAAA;AAAAA,IAC5B,CAAC,IAECJ,EAAgCvB,WAAW,CAACzB,MAC9CY,EAAwBa,UAAU,KAEpCuB,EAAgCvB,UAAUzB,GACnC,MAAM;AACX,MAAIkD,MAAU,QACZG,qBAAqBH,CAAK;AAAA,IAE9B;AAAA,EACF,GAAG,CAAClD,CAAwB,CAAC,GAE7BiD,EAAU,MAAM;AACd,IAAI/D,MACFU,EAAeV,EAAMS,WAAW,GAChCY,EAAiBrB,EAAMoE,MAAM;AAAA,EAEjC,GAAG,CAACpE,CAAK,CAAC,GAGV+D,EAAU,MAAM;AACd,QAAIC,IAAuB;AAC3B,WAAIlD,MACFkD,IAAQC,sBAAsB,MAAM;AAClCxC,MAAAA,EAAec,SAAS2B,MAAAA;AAAAA,IAC1B,CAAC,IAEI,MAAM;AACX,MAAIF,MAAU,QACZG,qBAAqBH,CAAK;AAAA,IAE9B;AAAA,EACF,GAAG,CAAClD,CAAwB,CAAC;AAE7B,QAAMuD,KAA4BA,CAACC,MAAgB;AACjD,UAAMC,IAAeD,EAAIE,QAAQ,OAAO,EAAE;AAC1CnD,IAAAA,EAAiBkD,CAAY,GAC7B1E,EAAe0E,CAAY;AAAA,EAC7B,GAEME,IAAiBrC,EAAY,MAAM;AACvC,IAAI5B,KACJO,EAA6B2D,CAAAA,MAAS,CAACA,CAAI;AAAA,EAC7C,GAAG,CAAClE,CAAQ,CAAC,GAEPmE,KAA6BvC,EACjC,CAACwC,MAA2B;AAC1B,QAAIpE,CAAAA;AAEJ,cAAQoE,EAAEC,KAAAA;AAAAA,QACR,KAAK;AAAA,QACL,KAAK;AACHD,YAAEE,eAAAA,GACFL,EAAAA;AACA;AAAA,QACF,KAAK;AACHG,YAAEE,eAAAA,GACGhE,KACHC,EAA4B,EAAI;AAElC;AAAA,MAAA;AAAA,EAGN,GACA,CAACP,GAAUM,GAA0B2D,CAAc,CACrD,GAIMM,KAAiBC,EAAsB;AAAA,IAC3C5E,gBAAAA;AAAAA,IACA6E,iBAAiBhF,IAAQ0B,IAAUuD;AAAAA,IACnC/E,WAAWA,MAAeF,IAAyBiF,SAAjB;AAAA,EAAiBA,CACpD,GAGKC,KAAsBH,EAAsB;AAAA,IAChD5E,gBAAgB,CAACE,KAAwBL,IAAQ0B,IAAUuD;AAAAA,IAC3D/E,WAAWG,MAA0BL,IAAyBiF,SAAjB;AAAA,IAC7C7E,iBAAiBP,IAAQiC,IAAU1B;AAAAA,EAAAA,CACpC,GAGK+E,KAA+B7E,KACnC,iCAAiCyB,GAAa0B,IAAI,IAAI1B,GAAanB,SAAS;AAE9E,SACEwE,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,IACEC,WAAU;AAAA,IACV,sBAAoBtF;AAAAA,EAAAA,GAChBsC,GAAc;AAAA,IAClBiD,kBAAmBb,CAAAA,MAAM;AACvB,MAAIA,EAAEC,QAAQ,YAAY/D,MACxBY,EAAwBa,UAAU,KAEpCC,EAAeiD,iBAAiBb,CAAC;AAAA,IACnC;AAAA,EAAA,CAAE,GAED3E,KACCoF,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKI,IAAI/D;AAAAA,IAAS6D,WAAU;AAAA,EAAA,GACzBvF,CACE,GAEPoF,gBAAAA,EAAAC,qBAAAC,EAAA;AAAA,IACEI,MAAK;AAAA,EAAA,GACDZ,IAAc;AAAA,IAClBS,WAAW,wCAAwC1F,IAAQ,UAAU,EAAE;AAAA,IACvE8F,KAAKtE;AAAAA,EAAAA,CAAa,GAElB+D,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKE,WAAU;AAAA,EAAA,GACbH,gBAAAA,EAAAC,cAAA,UAAA;AAAA,IACEM,KAAKpE;AAAAA,IACLqE,MAAK;AAAA,IACLL,WAAW,sEAAsEhF,IAAW,kCAAkC,EAAE;AAAA,IAChIsF,SAASrB;AAAAA,IACTsB,WAAWpB;AAAAA,IACX,iBAAc;AAAA,IACd,iBAAe7D;AAAAA,IACf,iBAAeA,IAA2Be,IAAYqD;AAAAA,IACtD,cAAYE;AAAAA,IACZ5E,UAAAA;AAAAA,IACA,sBAAmB;AAAA,EAAA,GAEnB6E,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEU,KAAK,uBAAuBhE,GAAa6B,KAAKF,aAAa;AAAA,IAC3DsC,KAAI;AAAA,IACJ,eAAY;AAAA,IACZC,OAAM;AAAA,EAAA,CACP,GACDb,gBAAAA,EAAAC,cAAA,QAAA,MAAOtD,GAAanB,SAAgB,GACpCwE,gBAAAA,EAAAC,cAACa,GAAI;AAAA,IACHzC,MAAK;AAAA,IACL8B,WAAY1E,IAAgC,eAAL;AAAA,IACvC,eAAY;AAAA,EAAA,CACb,CACK,GACRuE,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAME,WAAU;AAAA,IAAU,eAAY;AAAA,EAAA,CAAQ,GAC9CH,gBAAAA,EAAAC,uBAAAC,EAAA;AAAA,IACEG,IAAI5D;AAAAA,IACJ+D,MAAK;AAAA,IACLO,aAAY;AAAA,IACZZ,WAAW,sDAAsDhF,IAAW,aAAa,EAAE;AAAA,IAC3F6F,UAAWhD,CAAAA,MAAUgB,GAA0BhB,EAAME,OAAOvD,KAAK;AAAA,IACjEA,OAAOoB;AAAAA,IACPkF,SAAQ;AAAA,IACR9F,UAAAA;AAAAA,IACA,gBAAcV,KAASoF;AAAAA,EAAAA,GACnBC,IAAmB;AAAA,IACvB,sBAAmB;AAAA,EAAA,CAA0B,CAC9C,CACE,GAEJrE,KACCuE,gBAAAA,EAAAC,cAAA,OAAAC,EAAA,CAAA,GACM5C,IAAY;AAAA,IAChB6C,WAAU;AAAA,IACV,cAAW;AAAA,IACX,sBAAmB;AAAA,EAAA,CAAmB,GAEtCH,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKE,WAAU;AAAA,EAAA,GACbH,gBAAAA,EAAAC,cAACa,GAAI;AAAA,IAACzC,MAAK;AAAA,IAAS8B,WAAU;AAAA,IAAc,eAAY;AAAA,EAAA,CAAQ,GAChEH,gBAAAA,EAAAC,uBAAAC,EAAA;AAAA,IACEK,KAAKnE;AAAAA,EAAAA,GACDiB,GAAkB;AAAA,IACtBmD,MAAK;AAAA,IACLO,aAAY;AAAA,IACZZ,WAAU;AAAA,IACVa,UAAUjD;AAAAA,IACVpD,OAAOkB;AAAAA,IACP,cAAW;AAAA,IACX,sBAAmB;AAAA,EAAA,CAA2B,CAC/C,CACE,GACJF,EAAcuF,SAAS,IACtBvF,EAAcwF,IAAI,CAACtE,GAASuE,MAAU;AACpC,UAAMC,IAAc9D,GAAe6D,GAAOvE,EAAQrB,cAAcJ,CAAW;AAC3E,WACE4E,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,MACEV,KAAK3C,EAAQ2B;AAAAA,IAAAA,GACT6C,GAAW;AAAA,MACflB,WAAW,0DACT3C,OAAqB4D,IAAQ,gBAAgB,EAAE,IAC7CvE,EAAQrB,cAAcJ,IAAc,aAAa,EAAE;AAAA,MACvDqF,SAASA,MAAM;AACbpE,QAAAA,EAAwBa,UAAU,IAClCF,EAAwBH,EAAQrB,SAAS;AAAA,MAC3C;AAAA,MACA8F,cAAcA,MAAM7D,EAAoB2D,CAAK;AAAA,IAAA,CAAE,GAE/CpB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MACEU,KAAK,uBAAuB9D,EAAQ2B,KAAKF,aAAa;AAAA,MACtDsC,KAAI;AAAA,MACJ,eAAY;AAAA,MACZC,OAAM;AAAA,IAAA,CACP,GACDb,gBAAAA,EAAAC,cAAA,QAAA,MAAOpD,EAAQwB,IAAW,GAC1B2B,gBAAAA,EAAAC,cAAA,QAAA,MAAM,KAAEpD,EAAQrB,WAAU,GAAO,CAC9B;AAAA,EAET,CAAC,IAEDwE,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKE,WAAU;AAAA,IAAoEG,MAAK;AAAA,EAAA,GAAS,kBAE5F,CAEJ,CAEJ,GACJ7F,KACCuF,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKI,IAAI3D;AAAAA,IAASyD,WAAU;AAAA,IAAgBG,MAAK;AAAA,EAAA,GAC9C5F,CACE,CAEJ;AAET;"}

package/dist/index53.js

@@ -1,39 +1,41 @@
-import m from "react";
-const a = ["var(--color-green-500)", "var(--color-blue-500)", "var(--color-purple-600)", "var(--color-red-400)", "var(--color-yellow-600)"], h = ({
-  size: r = 40,
-  text: l,
-  textColor: i = "var(--color-white)",
-  backgroundColor: t = "",
-  className: n = "",
-  onClick: e,
-  automationId: c = "",
-  ariaLabel: o
+import o from "react";
+const m = ({
+  progress: a,
+  backgroundColor: n = "#E8E8E8",
+  progressColor: s = "#0066FF",
+  size: e = 40,
+  strokeWidth: r = 4
 }) => {
-  const d = l?.split(" ")?.map((s) => s[0])?.join("")?.toUpperCase()?.slice(0, 2), u = () => t || a[Math.floor(Math.random() * a.length)];
-  return /* @__PURE__ */ m.createElement("div", {
-    className: `
-        se-design-avatar 
-        flex items-center justify-center 
-        rounded-full font-medium
-        ${e ? "cursor-pointer" : "cursor-default"}
-        ${n}
-      `,
-    onClick: e,
-    "data-automation-id": c,
-    "aria-hidden": o ? void 0 : !0,
-    "aria-label": o,
+  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: {
-      width: r,
-      height: r,
-      minWidth: 20,
-      minHeight: 20,
-      backgroundColor: u(),
-      color: i,
-      fontSize: `${r * 0.4}px`
+      transform: "rotate(-90deg)"
     }
-  }, d);
+  }, /* @__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 {
-  h as Avatar
+  m as CircularProgressBar
 };
 //# sourceMappingURL=index53.js.map

package/dist/index53.js.map

@@ -1 +1 @@
-{"version":3,"file":"index53.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  automationId?: string;\n  ariaLabel?: string;\n};\n\nconst AVATAR_COLORS = [\n  'var(--color-green-500)',\n  'var(--color-blue-500)',\n  'var(--color-purple-600)',\n  'var(--color-red-400)',\n  'var(--color-yellow-600)'\n];\n\nexport const Avatar: FC<AvatarProps> = ({\n  size = 40,\n  text,\n  textColor = 'var(--color-white)',\n  backgroundColor = '',\n  className = '',\n  onClick,\n  automationId = '',\n  ariaLabel\n}) => {\n  const initials = text\n    ?.split(' ')\n    ?.map((word) => word[0])\n    ?.join('')\n    ?.toUpperCase()\n    ?.slice(0, 2);\n\n  const getBackgroundColor = () => {\n    if (backgroundColor) {\n      return backgroundColor;\n    }\n    return AVATAR_COLORS[Math.floor(Math.random() * AVATAR_COLORS.length)];\n  };\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      data-automation-id={automationId}\n      aria-hidden={ariaLabel ? undefined : true}\n      aria-label={ariaLabel}\n      style={{\n        width: size,\n        height: size,\n        minWidth: 20,\n        minHeight: 20,\n        backgroundColor: getBackgroundColor(),\n        color: textColor,\n        fontSize: `${size * 0.4}px`\n      }}\n    >\n      {initials}\n    </div>\n  );\n};\n"],"names":["React__default","AVATAR_COLORS","Avatar","size","text","textColor","backgroundColor","className","onClick","automationId","ariaLabel","initials","split","map","word","join","toUpperCase","slice","getBackgroundColor","Math","floor","random","length","React","createElement","undefined","style","width","height","minWidth","minHeight","color","fontSize"],"mappings":"AAaA,OAAAA,OAAA;AAAA,MAAMC,IAAgB,CACpB,0BACA,yBACA,2BACA,wBACA,yBAAyB,GAGdC,IAA0BA,CAAC;AAAA,EACtCC,MAAAA,IAAO;AAAA,EACPC,MAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,iBAAAA,IAAkB;AAAA,EAClBC,WAAAA,IAAY;AAAA,EACZC,SAAAA;AAAAA,EACAC,cAAAA,IAAe;AAAA,EACfC,WAAAA;AACF,MAAM;AACJ,QAAMC,IAAWP,GACbQ,MAAM,GAAG,GACTC,IAAKC,OAASA,EAAK,CAAC,CAAC,GACrBC,KAAK,EAAE,GACPC,eACAC,MAAM,GAAG,CAAC,GAERC,IAAqBA,MACrBZ,KAGGL,EAAckB,KAAKC,MAAMD,KAAKE,WAAWpB,EAAcqB,MAAM,CAAC;AAGvE,SACEC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEjB,WAAW;AAAA;AAAA;AAAA;AAAA,UAIPC,IAAU,mBAAmB,gBAAgB;AAAA,UAC7CD,CAAS;AAAA;AAAA,IAEbC,SAAAA;AAAAA,IACA,sBAAoBC;AAAAA,IACpB,eAAaC,IAAYe,SAAY;AAAA,IACrC,cAAYf;AAAAA,IACZgB,OAAO;AAAA,MACLC,OAAOxB;AAAAA,MACPyB,QAAQzB;AAAAA,MACR0B,UAAU;AAAA,MACVC,WAAW;AAAA,MACXxB,iBAAiBY,EAAAA;AAAAA,MACjBa,OAAO1B;AAAAA,MACP2B,UAAU,GAAG7B,IAAO,GAAG;AAAA,IAAA;AAAA,EACzB,GAECQ,CACE;AAET;"}
+{"version":3,"file":"index53.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;AAC9B,QAAMC,KAAUF,IAAOC,KAAe,GAChCE,IAAgBD,IAAS,IAAIE,KAAKC,IAClCC,IAAmBH,IAAiBN,IAAW,MAAOM;AAE5D,SACEI,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,OAAOT;AAAAA,IAAMU,QAAQV;AAAAA,IAAMW,OAAO;AAAA,MAAEC,WAAW;AAAA,IAAA;AAAA,EAAiB,GAEnEL,gBAAAA,EAAAC,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/GV,gBAAAA,EAAAC,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/index54.js

@@ -1,156 +1,39 @@
-import t, { useState as C, useMemo as f, useEffect as D } from "react";
-import "./index3.js";
-import "./index4.js";
-import { Icon as w } from "./index6.js";
-import "./index77.js";
-import { useTabsA11y as O } from "./index78.js";
-import { MenuList as _ } from "./index18.js";
-import "./index9.js";
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-import "react-dom";
-import "./index17.js";
-import { Popover as $ } from "./index19.js";
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-import "./index47.js";
-import "./index48.js";
-import "./index49.js";
-/* empty css        */
-/* empty css         */
-import { TabButton as j } from "./index244.js";
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-/* empty css         */
-import "./index65.js";
-/* empty css         */
-/* empty css         */
-import "./index69.js";
-/* empty css         */
-function m() {
-  return m = Object.assign ? Object.assign.bind() : function(i) {
-    for (var o = 1; o < arguments.length; o++) {
-      var n = arguments[o];
-      for (var s in n) ({}).hasOwnProperty.call(n, s) && (i[s] = n[s]);
-    }
-    return i;
-  }, m.apply(null, arguments);
-}
-const Dr = ({
-  defaultActiveNavigationItem: i,
-  navigationItems: o,
-  onNavigationItemChange: n,
-  isCompactView: s = !1,
-  keyboardActivationMode: x = "automatic",
-  orientation: y = "horizontal",
-  ariaLabel: E = "Sections",
-  ariaLabelledBy: P,
-  idBase: h = ""
+import m from "react";
+const a = ["var(--color-green-500)", "var(--color-blue-500)", "var(--color-purple-600)", "var(--color-red-400)", "var(--color-yellow-600)"], h = ({
+  size: r = 40,
+  text: l,
+  textColor: i = "var(--color-white)",
+  backgroundColor: t = "",
+  className: n = "",
+  onClick: e,
+  automationId: c = "",
+  ariaLabel: o
 }) => {
-  const N = i || o[0]?.id || "", [p, c] = C(N), v = f(() => o.filter((r) => !r.disabled).map((r) => r.id), [o]), {
-    getTabProps: T,
-    setFocusedTabId: d,
-    handleKeyDown: k,
-    getPanelProps: b,
-    getTabListProps: F
-  } = O({
-    itemIds: v,
-    orientation: y,
-    activeItem: p,
-    idBase: h
-  });
-  D(() => {
-    i && (c(i), d(i));
-  }, [i, d]);
-  const u = (r) => {
-    r?.disabled || (c(r?.id), n?.(r?.id));
-  }, S = (r) => {
-    const e = o.find((a) => a.id === r);
-    !e || e.disabled || (c(r), n?.(r));
-  }, g = f(() => o.map((r) => {
-    const e = r.id === p, a = e && r.panelHasFocusableContent === !1 ? 0 : void 0;
-    return /* @__PURE__ */ t.createElement("div", m({
-      key: r.id
-    }, b(r.id), {
-      hidden: !e,
-      tabIndex: a,
-      className: `navigation-item-content ${e ? "block" : "hidden"}`
-    }), e && r?.renderNavigationItemContent?.(r));
-  }), [o, p, b]), B = o.find((r) => r.id === p);
-  return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", m({
-    className: "se-design-navigation-bar flex items-center gap-4",
-    "data-automation-id": "navigation-bar-container"
-  }, F({
-    ariaLabel: E,
-    ariaLabelledBy: P
-  })), !s && o.map((r) => {
-    const e = p === r.id, a = r.disabled, l = T(r.id);
-    return /* @__PURE__ */ t.createElement(j, {
-      key: r.id,
-      ref: l.ref,
-      tabIndex: l.tabIndex,
-      id: l.id,
-      label: r.label,
-      isSelected: e,
-      isDisabled: a,
-      panelId: l["aria-controls"],
-      onClick: () => u(r),
-      onFocus: () => {
-        l.onFocus(), x === "automatic" && !a && S(r.id);
-      },
-      onKeyDown: k,
-      className: `text-base ${a ? "text-[var(--color-gray-400)] cursor-not-allowed" : e ? "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"} focus-outline rounded-[6px]`,
-      automationId: `navigation-item-${r.id}`
-    });
-  }), s && /* @__PURE__ */ t.createElement($, {
-    className: "navigation-bar-popover",
-    position: "bottom-left",
-    noBorder: !0,
-    renderPopoverSrcElement: ({
-      displayPopover: r
-    }) => /* @__PURE__ */ t.createElement("div", {
-      className: "navigation-bar-popover-src-element flex items-center gap-1 cursor-pointer"
-    }, /* @__PURE__ */ t.createElement("label", {
-      className: "font-semibold cursor-pointer"
-    }, B?.label), /* @__PURE__ */ t.createElement(w, {
-      name: "chevron",
-      rotation: r ? "180" : "0"
-    })),
-    renderPopoverContents: ({
-      closePopoverCb: r
-    }) => /* @__PURE__ */ t.createElement(_, {
-      items: o.map((e) => ({
-        id: e.id,
-        label: e.label,
-        onClick: () => {
-          u(e), r();
-        }
-      }))
-    })
-  })), /* @__PURE__ */ t.createElement("div", {
-    className: "se-design-navigation-bar-content"
-  }, g));
+  const d = l?.split(" ")?.map((s) => s[0])?.join("")?.toUpperCase()?.slice(0, 2), u = () => t || a[Math.floor(Math.random() * a.length)];
+  return /* @__PURE__ */ m.createElement("div", {
+    className: `
+        se-design-avatar 
+        flex items-center justify-center 
+        rounded-full font-medium
+        ${e ? "cursor-pointer" : "cursor-default"}
+        ${n}
+      `,
+    onClick: e,
+    "data-automation-id": c,
+    "aria-hidden": o ? void 0 : !0,
+    "aria-label": o,
+    style: {
+      width: r,
+      height: r,
+      minWidth: 20,
+      minHeight: 20,
+      backgroundColor: u(),
+      color: i,
+      fontSize: `${r * 0.4}px`
+    }
+  }, d);
 };
 export {
-  Dr as NavigationBar
+  h as Avatar
 };
 //# sourceMappingURL=index54.js.map

package/dist/index54.js.map

@@ -1 +1 @@
-{"version":3,"file":"index54.js","sources":["../src/components/NavigationBar/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useState,useMemo, useEffect } from 'react';\nimport { Popover, MenuList, Icon } from 'src/components';\nimport { TabButton } from './TabButton';\nimport { useTabsA11y } from '../../utils/a11y';\n\nexport interface NavigationItemProps {\n  label: string;\n  id: string;\n  disabled?: boolean;\n  panelHasFocusableContent?: boolean; // If false, the panel itself will be tabbable when active\n  renderNavigationItemContent?: (navigationItem: NavigationItemProps) => ReactNode;\n}\n\ninterface NavigationBarProps {\n  defaultActiveNavigationItem?: string;\n  navigationItems: NavigationItemProps[];\n  isCompactView?: boolean;\n  onNavigationItemChange?: (navigationItemId: string) => void;\n  keyboardActivationMode?: 'automatic' | 'manual'; //manual: arrow keys move focus only; Enter/Space activates the focused tab\n  orientation?: 'horizontal' | 'vertical'; // required for aria and arrow shortcuts\n  ariaLabel?: string; // Used when ariaLabelledBy is not provided\n  ariaLabelledBy?: string; // ID of element that labels this tablist (preferred over ariaLabel when visible label exists)\n  idBase?: string; //optional ID namespace to avoid collisions\n}\n\nexport const NavigationBar: FC<NavigationBarProps> = ({\n  defaultActiveNavigationItem,\n  navigationItems,\n  onNavigationItemChange,\n  isCompactView = false,\n  keyboardActivationMode = 'automatic',\n  orientation = 'horizontal',\n  ariaLabel = 'Sections',\n  ariaLabelledBy,\n  idBase = ''\n}) => {\n  const defaultNavigationItemId = defaultActiveNavigationItem || navigationItems[0]?.id || '';\n  const [activeNavigationItem, setActiveNavigationItem] = useState<string>(defaultNavigationItemId);\n\n  // Exclude disabled tabs from roving focus (keeps native disabled buttons, avoids focus-on-disabled).\n  const itemIds = useMemo(\n    () => navigationItems.filter((item) => !item.disabled).map((item) => item.id),\n    [navigationItems]\n  );\n\n  // Hook for managing Tabs (NavigationBar) focus and ARIA props.\n  const { getTabProps, setFocusedTabId, handleKeyDown, getPanelProps, getTabListProps } = useTabsA11y({\n    itemIds,\n    orientation,\n    activeItem: activeNavigationItem,\n    idBase\n  });\n\n  useEffect(() => {\n    if (defaultActiveNavigationItem) {\n      setActiveNavigationItem(defaultActiveNavigationItem);\n      setFocusedTabId(defaultActiveNavigationItem);\n    }\n  }, [defaultActiveNavigationItem, setFocusedTabId]);\n\n  const handleNavigationItemClick = (navigationItem: NavigationItemProps) => {\n    if (navigationItem?.disabled) return;\n    setActiveNavigationItem(navigationItem?.id);\n    onNavigationItemChange?.(navigationItem?.id);\n  };\n\n  const activateTabById = (id: string) => {\n    const item = navigationItems.find((i) => i.id === id);\n    if (!item || item.disabled) return;\n    setActiveNavigationItem(id);\n    onNavigationItemChange?.(id);\n  };\n\n  const renderPanels = useMemo(() => {\n    return navigationItems.map((navigationItem) => {\n      const isSelected = navigationItem.id === activeNavigationItem;\n      const panelTabIndex = isSelected && navigationItem.panelHasFocusableContent === false ? 0 : undefined;\n\n      return (\n        <div\n          key={navigationItem.id}\n          {...getPanelProps(navigationItem.id)}\n          hidden={!isSelected}\n          tabIndex={panelTabIndex}\n          className={`navigation-item-content ${isSelected ? 'block' : 'hidden'}`}\n        >\n          {isSelected && navigationItem?.renderNavigationItemContent?.(navigationItem)}\n        </div>\n      );\n    });\n  }, [navigationItems, activeNavigationItem, getPanelProps]);\n\n  const activeNavigationItemData = navigationItems.find((item) => item.id === activeNavigationItem);\n\n  return (\n    <>\n      <div\n        className=\"se-design-navigation-bar flex items-center gap-4\"\n        data-automation-id=\"navigation-bar-container\"\n        {...getTabListProps({ ariaLabel, ariaLabelledBy })}\n      >\n        {!isCompactView && navigationItems.map((navigationItem) => {\n          const isSelected = activeNavigationItem === navigationItem.id;\n          const isDisabled = navigationItem.disabled;\n\n          const tabProps = getTabProps(navigationItem.id);\n\n          return (\n            <TabButton\n              key={navigationItem.id}\n              ref={tabProps.ref as (el: HTMLButtonElement | null) => void}\n              tabIndex={tabProps.tabIndex}\n              id={tabProps.id}\n              label={navigationItem.label}\n              isSelected={isSelected}\n              isDisabled={isDisabled}\n              panelId={tabProps['aria-controls']}\n              onClick={() => handleNavigationItemClick(navigationItem)}\n              onFocus={() => {\n                tabProps.onFocus();\n                if (keyboardActivationMode === 'automatic' && !isDisabled) {\n                  activateTabById(navigationItem.id);\n                }\n              }}\n              onKeyDown={handleKeyDown}\n              className={`text-base ${\n                isDisabled\n                  ? 'text-[var(--color-gray-400)] cursor-not-allowed'\n                  : isSelected\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              } focus-outline rounded-[6px]`}\n              automationId={`navigation-item-${navigationItem.id}`}\n            />\n          );\n        })}\n        {isCompactView && (\n          <Popover\n            className=\"navigation-bar-popover\"\n            position=\"bottom-left\"\n            noBorder\n            renderPopoverSrcElement={({ displayPopover }) => (\n              <div className=\"navigation-bar-popover-src-element flex items-center gap-1 cursor-pointer\">\n                <label className=\"font-semibold cursor-pointer\">{activeNavigationItemData?.label}</label>\n                <Icon name=\"chevron\" rotation={displayPopover ? '180' : '0'} />\n              </div>\n            )}\n            renderPopoverContents={({ closePopoverCb }) => (\n              <MenuList items={navigationItems.map((item) => ({\n                id: item.id,\n                label: item.label,\n                onClick: () => {\n                  handleNavigationItemClick(item);\n                  closePopoverCb();\n                }\n              }))}\n              />\n            )}\n          />\n        )}\n      </div>\n\n      <div className=\"se-design-navigation-bar-content\">\n        {renderPanels}\n      </div>\n    </>\n  );\n};\n"],"names":["NavigationBar","defaultActiveNavigationItem","navigationItems","onNavigationItemChange","isCompactView","keyboardActivationMode","orientation","ariaLabel","ariaLabelledBy","idBase","defaultNavigationItemId","id","activeNavigationItem","setActiveNavigationItem","useState","itemIds","useMemo","filter","item","disabled","map","getTabProps","setFocusedTabId","handleKeyDown","getPanelProps","getTabListProps","useTabsA11y","activeItem","useEffect","handleNavigationItemClick","navigationItem","activateTabById","find","i","renderPanels","isSelected","panelTabIndex","panelHasFocusableContent","undefined","React","createElement","_extends","key","hidden","tabIndex","className","renderNavigationItemContent","activeNavigationItemData","Fragment","isDisabled","tabProps","TabButton","ref","label","panelId","onClick","onFocus","onKeyDown","automationId","Popover","position","noBorder","renderPopoverSrcElement","displayPopover","Icon","name","rotation","renderPopoverContents","closePopoverCb","MenuList","items"],"mappings":"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"}
+{"version":3,"file":"index54.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  automationId?: string;\n  ariaLabel?: string;\n};\n\nconst AVATAR_COLORS = [\n  'var(--color-green-500)',\n  'var(--color-blue-500)',\n  'var(--color-purple-600)',\n  'var(--color-red-400)',\n  'var(--color-yellow-600)'\n];\n\nexport const Avatar: FC<AvatarProps> = ({\n  size = 40,\n  text,\n  textColor = 'var(--color-white)',\n  backgroundColor = '',\n  className = '',\n  onClick,\n  automationId = '',\n  ariaLabel\n}) => {\n  const initials = text\n    ?.split(' ')\n    ?.map((word) => word[0])\n    ?.join('')\n    ?.toUpperCase()\n    ?.slice(0, 2);\n\n  const getBackgroundColor = () => {\n    if (backgroundColor) {\n      return backgroundColor;\n    }\n    return AVATAR_COLORS[Math.floor(Math.random() * AVATAR_COLORS.length)];\n  };\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      data-automation-id={automationId}\n      aria-hidden={ariaLabel ? undefined : true}\n      aria-label={ariaLabel}\n      style={{\n        width: size,\n        height: size,\n        minWidth: 20,\n        minHeight: 20,\n        backgroundColor: getBackgroundColor(),\n        color: textColor,\n        fontSize: `${size * 0.4}px`\n      }}\n    >\n      {initials}\n    </div>\n  );\n};\n"],"names":["React__default","AVATAR_COLORS","Avatar","size","text","textColor","backgroundColor","className","onClick","automationId","ariaLabel","initials","split","map","word","join","toUpperCase","slice","getBackgroundColor","Math","floor","random","length","React","createElement","undefined","style","width","height","minWidth","minHeight","color","fontSize"],"mappings":"AAaA,OAAAA,OAAA;AAAA,MAAMC,IAAgB,CACpB,0BACA,yBACA,2BACA,wBACA,yBAAyB,GAGdC,IAA0BA,CAAC;AAAA,EACtCC,MAAAA,IAAO;AAAA,EACPC,MAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,iBAAAA,IAAkB;AAAA,EAClBC,WAAAA,IAAY;AAAA,EACZC,SAAAA;AAAAA,EACAC,cAAAA,IAAe;AAAA,EACfC,WAAAA;AACF,MAAM;AACJ,QAAMC,IAAWP,GACbQ,MAAM,GAAG,GACTC,IAAKC,OAASA,EAAK,CAAC,CAAC,GACrBC,KAAK,EAAE,GACPC,eACAC,MAAM,GAAG,CAAC,GAERC,IAAqBA,MACrBZ,KAGGL,EAAckB,KAAKC,MAAMD,KAAKE,WAAWpB,EAAcqB,MAAM,CAAC;AAGvE,SACEC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEjB,WAAW;AAAA;AAAA;AAAA;AAAA,UAIPC,IAAU,mBAAmB,gBAAgB;AAAA,UAC7CD,CAAS;AAAA;AAAA,IAEbC,SAAAA;AAAAA,IACA,sBAAoBC;AAAAA,IACpB,eAAaC,IAAYe,SAAY;AAAA,IACrC,cAAYf;AAAAA,IACZgB,OAAO;AAAA,MACLC,OAAOxB;AAAAA,MACPyB,QAAQzB;AAAAA,MACR0B,UAAU;AAAA,MACVC,WAAW;AAAA,MACXxB,iBAAiBY,EAAAA;AAAAA,MACjBa,OAAO1B;AAAAA,MACP2B,UAAU,GAAG7B,IAAO,GAAG;AAAA,IAAA;AAAA,EACzB,GAECQ,CACE;AAET;"}