test-stpr-ui-kit 0.7.0 → 1.0.0

package/dist/components/ProgressWrapper/hooks/index.js

@@ -0,0 +1,41 @@
+import { useState as F, useRef as c, useEffect as L } from "react";
+import { DEFAULT_DURATION as C } from "../constants/index.js";
+const D = 500;
+function S(n) {
+  return n < 0.5 ? 4 * n * n * n : 1 - Math.pow(-2 * n + 2, 3) / 2;
+}
+const w = (n) => {
+  const { targetValue: r, duration: s = C, doneValue: u, onSuccessLoaded: f } = n, [o, m] = F(r), [M, l] = F(r !== u), e = c(), a = c(r), d = c(0), p = c(r), v = c(o), t = c(), i = c(!1);
+  return v.current = o, L(() => {
+    if (p.current = r, r === a.current)
+      return;
+    if (e.current && (cancelAnimationFrame(e.current), e.current = void 0), r === u && a.current === u) {
+      m(u);
+      return;
+    }
+    a.current = v.current, d.current = performance.now();
+    const R = (h) => {
+      const T = d.current;
+      if (T === void 0) return;
+      const E = h - T, V = Math.min(E / s, 1), I = S(V), A = a.current, g = p.current, O = Math.max(0, Math.floor(A + (g - A) * I));
+      m(O), V < 1 ? e.current = requestAnimationFrame(R) : (a.current = g, e.current = void 0);
+    };
+    return e.current = requestAnimationFrame(R), () => {
+      e.current && (cancelAnimationFrame(e.current), e.current = void 0);
+    };
+  }, [r, s, u]), L(() => {
+    if (o === u)
+      return i.current ? void 0 : (t.current = setTimeout(() => {
+        t.current = void 0, i.current = !0, f?.(), l(!1);
+      }, D), () => {
+        t.current && (clearTimeout(t.current), t.current = void 0);
+      });
+    i.current = !1, t.current && (clearTimeout(t.current), t.current = void 0), l(!0);
+  }, [o, u, f]), {
+    animatedValue: o,
+    isLoading: M
+  };
+};
+export {
+  w as useAnimatedValue
+};

package/dist/components/ProgressWrapper/index.d.ts

@@ -0,0 +1,3 @@
+export { useAnimatedValue } from "./hooks";
+export { ProgressWrapper } from "./ProgressWrapper";
+export type { ProgressWrapperProps } from "./types";

package/dist/components/ProgressWrapper/types/index.d.ts

@@ -0,0 +1,17 @@
+import { PropsWithChildren } from "react";
+export type TProgressWrapperAnimationVariant = "pulse" | "backgroundProgress";
+export interface ProgressWrapperProps extends PropsWithChildren {
+    value: number;
+    classNameRoot?: string;
+    classNameProgressBadgeRoot?: string;
+    duration?: number;
+    doneValue?: number;
+    animationVariant?: TProgressWrapperAnimationVariant;
+    onSuccessLoaded?: () => void;
+}
+export type TUseAnimatedValueProps = {
+    targetValue: number;
+    doneValue: number;
+    duration?: number;
+    onSuccessLoaded?: () => void;
+};

package/dist/components/Select/Select.css

@@ -0,0 +1 @@
+._spSelect_c8o64_1{display:inline-flex;flex-direction:column;width:100%}._spSelect_c8o64_1{opacity:1;visibility:visible}._spSelect_c8o64_1{transition:all .3s ease-in-out}@starting-style{._spSelect_c8o64_1{opacity:0;visibility:hidden}}._spSelect_size-md_c8o64_19{--spui-select-control-font-size: 16px;--spui-select-error-font-size: 12px;--spui-select-control-height: var(--spui-control-height-md);--spui-select-control-icon-size: var(--spui-icon-size-sm);--spui-select-control-padding-right: var(--spui-spacing-10x)}._spSelect_size-xl_c8o64_26{--spui-select-control-font-size: 18px;--spui-select-error-font-size: 14px;--spui-select-control-height: var(--spui-control-height-xl);--spui-select-control-icon-size: var(--spui-icon-size-base);--spui-select-control-padding-right: var(--spui-spacing-12x)}._spSelect_error_c8o64_33 ._spSelect__control_c8o64_33{border-color:var(--spui-color-border-error);color:var(--spui-color-text-error)}._spSelect_error_c8o64_33 ._spSelect__control_c8o64_33:hover ._spSelect__value_empty_c8o64_37{color:var(--spui-color-text-secondary)}._spSelect_error_c8o64_33 ._spSelect__control_c8o64_33:hover ._spSelect__icon_c8o64_40{color:var(--spui-color-icon-disabled)}._spSelect_absolutePositionError_c8o64_43,._spSelect__container_c8o64_46{position:relative}._spSelect__control_c8o64_33{cursor:pointer;display:flex;height:var(--spui-select-control-height);padding:var(--spui-spacing-none) var(--spui-select-control-padding-right) var(--spui-spacing-none) var(--spui-spacing-4x);align-items:center;align-self:stretch;width:100%;border-width:2px;border-style:solid}._spSelect__control_filled_c8o64_60{border-color:var(--spui-color-border-secondary);background-color:var(--spui-color-surface-page)}._spSelect__control_outlined_c8o64_64{background-color:var(--spui-color-surface-transparent);border-color:var(--spui-color-border-primary)}._spSelect__control_c8o64_33::placeholder{color:var(--spui-color-text-secondary)}._spSelect__control_c8o64_33:hover ._spSelect__value_empty_c8o64_37{color:var(--spui-color-text-primary)}._spSelect__control_c8o64_33:hover ._spSelect__icon_c8o64_40{color:var(--spui-color-icon-primary)}._spSelect__control_open_c8o64_77,._spSelect__control_c8o64_33:focus,._spSelect__control_c8o64_33:focus-visible{outline:none;border-style:solid;border-color:var(--spui-color-border-action);background-color:var(--spui-color-surface-transparent)}._spSelect__control_disabled_c8o64_83{cursor:default;color:var(--spui-color-text-disabled);pointer-events:none}._spSelect__control_disabled_c8o64_83:hover ._spSelect__value_empty_c8o64_37{color:var(--spui-color-text-disabled)}._spSelect__control_disabled_c8o64_83:hover ._spSelect__icon_c8o64_40{color:var(--spui-color-icon-disabled);cursor:default}._spSelect__value_c8o64_37{font-family:var(--spui-font-family-main),serif;font-weight:var(--spui-font-weight-regular);font-size:var(--spui-select-control-font-size);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%}._spSelect__value_empty_c8o64_37{color:var(--spui-color-text-secondary)}._spSelect__icon_c8o64_40{z-index:10;color:var(--spui-color-icon-disabled);cursor:pointer;position:absolute;right:var(--spui-spacing-4x);width:var(--spui-select-control-icon-size);height:var(--spui-select-control-icon-size);top:0;bottom:0;margin:auto}._spSelect__listWrapper_c8o64_119{position:absolute;width:100%;display:flex;flex-direction:column;background-color:var(--spui-color-surface-default);border-radius:var(--spui-border-radius-sm);box-shadow:1px 1px 26px 0 var(--spui-color-gray-300);z-index:15}._spSelect__listWrapper_size-md_c8o64_129{--spui-select-control-font-size: 16px;--empty-options-font-size: 12px;--spui-select-control-icon-size: var(--spui-icon-size-sm);--spui-select-control-padding-right: var(--spui-spacing-10x)}._spSelect__listWrapper_size-xl_c8o64_135{--spui-select-control-font-size: 18px;--empty-options-font-size: 14px;--spui-select-control-icon-size: var(--spui-icon-size-base);--spui-select-control-padding-right: var(--spui-spacing-12x)}._spSelect__listWrapper_placementBottom_c8o64_141{animation:_selectListOpenFromBottom_c8o64_1 .2s ease-out forwards}._spSelect__listWrapper_placementTop_c8o64_144{flex-direction:column-reverse;animation:_selectListOpenFromTop_c8o64_1 .2s ease-out forwards}._spSelect__list_c8o64_119{font-family:var(--spui-font-family-main),serif;font-weight:var(--spui-font-weight-regular);width:100%;background-color:var(--spui-color-surface-default)}._spSelect__list_scrollable_c8o64_154{overflow-y:auto}._spSelect__list_withSearch_c8o64_157{padding-top:var(--spui-spacing-none)}._spSelect__list_c8o64_119::-webkit-scrollbar{width:var(--spui-scrollbar-width);height:var(--spui-scrollbar-width)}._spSelect__list_c8o64_119::-webkit-scrollbar-track{background:var(--spui-color-surface-transparent)}._spSelect__list_c8o64_119::-webkit-scrollbar-thumb{background:var(--color-aqua-blue)}._spSelect__list_c8o64_119::-webkit-scrollbar-thumb:hover{background:var(--color-accent-blue)}._spSelect__emptyOptions_c8o64_173{font-style:italic;color:var(--spui-color-text-secondary);font-size:var(--empty-options-font-size);padding:var(--spui-spacing-3x) var(--spui-select-control-padding-right) var(--spui-spacing-3x) var(--spui-spacing-4x)}._spSelect__option_c8o64_179{cursor:pointer;position:relative;white-space:pre-line;color:var(--spui-color-text-primary);font-size:var(--spui-select-control-font-size);padding:var(--spui-spacing-3x) var(--spui-select-control-padding-right) var(--spui-spacing-3x) var(--spui-spacing-4x)}._spSelect__option_c8o64_179:hover{background-color:var(--spui-color-surface-page)}._spSelect__label_c8o64_190{margin-bottom:var(--spui-spacing-2x)}._spSelect__error_c8o64_193{padding-top:var(--spui-spacing-2x);font-family:var(--spui-font-family-main),serif;font-weight:var(--spui-font-weight-regular);font-size:var(--spui-select-error-font-size);color:var(--spui-color-text-error)}._spSelect__error_absolutePosition_c8o64_200{position:absolute;top:100%}._spSelect__search_c8o64_204{position:relative;padding:8px 16px;border-bottom:var(--spui-border-width-sm) solid var(--spui-color-border-secondary);background-color:var(--spui-color-surface-default)}._spSelect__search_atBottom_c8o64_210{border-bottom:none;border-top:var(--spui-border-width-sm) solid var(--spui-color-border-secondary)}._spSelect__searchInput_c8o64_214{width:100%;outline:none;font-family:var(--spui-font-family-main),serif;font-size:14px;padding:8px 30px;border:1px solid var(--spui-color-border-primary);border-radius:4px;box-sizing:border-box}._spSelect__searchInput_c8o64_214:focus{border-color:var(--spui-color-border-action)}._spSelect__searchInput_c8o64_214::placeholder{color:var(--spui-color-text-secondary)}._spSelect__searchIcon_c8o64_230{position:absolute;left:24px;top:50%;transform:translateY(-50%);color:var(--spui-color-icon-disabled);width:16px;height:16px}._spSelect__searchClearIcon_c8o64_239{position:absolute;right:24px;top:50%;transform:translateY(-50%);color:var(--spui-color-icon-disabled);cursor:pointer;width:16px;height:16px}._spSelect__searchClearIcon_c8o64_239:hover{color:var(--spui-color-icon-primary)}@keyframes _selectListOpenFromBottom_c8o64_1{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes _selectListOpenFromTop_c8o64_1{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ISelectProps } from "./types";
+export declare const Select: React.FC<ISelectProps>;

package/dist/components/Select/Select.js

@@ -0,0 +1,195 @@
+import { jsxs as a, jsx as l } from "react/jsx-runtime";
+import s from "clsx";
+import { MAX_HEIGHT_SELECT_LIST as re } from "./constants/index.js";
+import { useSelect as oe } from "./hooks/useSelect.js";
+import e from "./Select.module.scss.js";
+import { Label as ce } from "../Label/Label.js";
+import { Icon as c } from "../Icons/Icon.js";
+import { EIconName as n } from "../Icons/types/index.js";
+import { Portal as ne } from "../Portal/Potral.js";
+const fe = (I) => {
+  const {
+    options: L = [],
+    size: r = "xl",
+    placeholder: g = "Выберите из списка...",
+    value: o,
+    name: d,
+    variant: h = "outlined",
+    onChange: R,
+    onBlur: B,
+    onMouseEnter: k,
+    error: i,
+    label: u,
+    infoTooltipText: P,
+    tooltipPosition: W,
+    disabled: p = !1,
+    required: O,
+    maxHeightList: H = re,
+    isVisibleDefaultTitle: $ = !0,
+    isScrollableList: N = !1,
+    isAbsolutePositionError: f = !1,
+    isSearchable: v = !1,
+    searchPlaceholder: z = "Поиск...",
+    classNameRoot: b,
+    classNameError: C,
+    classNameLabel: T,
+    classNameBaseTooltipRoot: j
+  } = I, {
+    isOpen: m,
+    searchQuery: _,
+    listStyle: S,
+    refControl: A,
+    refListWrapper: D,
+    searchInputRef: M,
+    selectedOption: x,
+    filteredOptions: y,
+    listWrapperStyle: Q,
+    handleSelect: V,
+    handleToggle: q,
+    handleSearchChange: w,
+    handleSearchClick: F,
+    setSearchQuery: G
+  } = oe({
+    options: L,
+    value: o,
+    name: d,
+    disabled: p,
+    isSearchable: v,
+    onChange: R,
+    onBlur: B
+  }), X = s({
+    [e.spSelect]: !0,
+    [e[`spSelect_size-${r}`]]: r,
+    [e.spSelect_error]: !!i,
+    [e.spSelect_absolutePositionError]: f,
+    ...b && { [b]: !0 }
+  }), J = s({
+    [e.spSelect__container]: !0
+  }), K = s({
+    [e.spSelect__control]: !0,
+    [e.spSelect__control_open]: m,
+    [e[`spSelect__control_${h}`]]: h,
+    [e.spSelect__control_disabled]: p
+  }), U = s({
+    [e.spSelect__value]: !0,
+    [e.spSelect__value_empty]: !x
+  }), E = s({
+    [e.spSelect__icon]: !0
+  }), Y = s({
+    [e.spSelect__list]: !0,
+    [e.spSelect__list_scrollable]: N
+  }), Z = e.spSelect__search, ee = s({
+    [e.spSelect__label]: !0,
+    ...T && { [T]: !0 }
+  }), le = s({
+    [e.spSelect__error]: !0,
+    [e.spSelect__error_absolutePosition]: f,
+    ...C && { [C]: !0 }
+  }), se = (t) => v ? /* @__PURE__ */ a(
+    "div",
+    {
+      className: s(Z, t && e.spSelect__search_atBottom),
+      onClick: F,
+      children: [
+        /* @__PURE__ */ l(c, { name: n.Search, className: e.spSelect__searchIcon }),
+        /* @__PURE__ */ l(
+          "input",
+          {
+            ref: M,
+            type: "text",
+            placeholder: z,
+            value: _,
+            onChange: w,
+            className: e.spSelect__searchInput
+          }
+        ),
+        _ && /* @__PURE__ */ l(
+          c,
+          {
+            name: n.Trash,
+            className: e.spSelect__searchClearIcon,
+            onClick: () => G("")
+          }
+        )
+      ]
+    }
+  ) : null;
+  return /* @__PURE__ */ a("div", { className: X, children: [
+    u && /* @__PURE__ */ l(
+      ce,
+      {
+        classNameRoot: ee,
+        tooltipPosition: W,
+        required: O,
+        label: u,
+        infoTooltipText: P,
+        classNameBaseTooltipRoot: j
+      }
+    ),
+    /* @__PURE__ */ a("div", { className: J, onMouseEnter: k, children: [
+      /* @__PURE__ */ a(
+        "div",
+        {
+          ref: A,
+          tabIndex: p ? -1 : 0,
+          title: $ && o ? String(o) : void 0,
+          className: K,
+          onClick: q,
+          children: [
+            /* @__PURE__ */ l("div", { className: U, children: x?.label || g }),
+            /* @__PURE__ */ l(
+              c,
+              {
+                name: n.SelectChevronDown,
+                rotate: m ? 180 : void 0,
+                className: E
+              }
+            )
+          ]
+        }
+      ),
+      m && /* @__PURE__ */ l(ne, { node: document.body, children: /* @__PURE__ */ a(
+        "div",
+        {
+          ref: D,
+          className: s(
+            e.spSelect__listWrapper,
+            r && [e[`spSelect__listWrapper_size-${r}`]],
+            S?.placement === "bottom" && e.spSelect__listWrapper_placementBottom,
+            S?.placement === "top" && e.spSelect__listWrapper_placementTop
+          ),
+          style: Q,
+          children: [
+            se(S?.placement === "top"),
+            /* @__PURE__ */ l(
+              "div",
+              {
+                className: Y,
+                style: N ? { maxHeight: `${H}px` } : {},
+                children: y.length > 0 ? y.map((t) => {
+                  const te = t.value === o;
+                  return /* @__PURE__ */ a(
+                    "div",
+                    {
+                      className: e.spSelect__option,
+                      onClick: (ae) => V(ae, { value: t.value, name: d }),
+                      children: [
+                        t.label,
+                        te && /* @__PURE__ */ l(c, { name: n.Check, className: E })
+                      ]
+                    },
+                    t.value
+                  );
+                }) : /* @__PURE__ */ l("div", { className: e.spSelect__emptyOptions, children: _ ? "Ничего не найдено" : "Нет доступных вариантов выбора..." })
+              }
+            )
+          ]
+        }
+      ) })
+    ] }),
+    i && /* @__PURE__ */ l("div", { className: le, children: i })
+  ] });
+};
+export {
+  fe as Select
+};

package/dist/components/Select/Select.module.scss.js

@@ -0,0 +1,69 @@
+import './Select.css';const e = "_spSelect_c8o64_1", _ = "_spSelect_error_c8o64_33", t = "_spSelect__control_c8o64_33", c = "_spSelect__value_empty_c8o64_37", s = "_spSelect__icon_c8o64_40", l = "_spSelect_absolutePositionError_c8o64_43", o = "_spSelect__container_c8o64_46", p = "_spSelect__control_filled_c8o64_60", r = "_spSelect__control_outlined_c8o64_64", S = "_spSelect__control_open_c8o64_77", n = "_spSelect__control_disabled_c8o64_83", i = "_spSelect__value_c8o64_37", a = "_spSelect__listWrapper_c8o64_119", m = "_spSelect__listWrapper_placementBottom_c8o64_141", h = "_selectListOpenFromBottom_c8o64_1", u = "_spSelect__listWrapper_placementTop_c8o64_144", d = "_selectListOpenFromTop_c8o64_1", b = "_spSelect__list_c8o64_119", W = "_spSelect__list_scrollable_c8o64_154", B = "_spSelect__list_withSearch_c8o64_157", I = "_spSelect__emptyOptions_c8o64_173", O = "_spSelect__option_c8o64_179", z = "_spSelect__label_c8o64_190", y = "_spSelect__error_c8o64_193", v = "_spSelect__error_absolutePosition_c8o64_200", F = "_spSelect__search_c8o64_204", L = "_spSelect__search_atBottom_c8o64_210", P = "_spSelect__searchInput_c8o64_214", T = "_spSelect__searchIcon_c8o64_230", x = "_spSelect__searchClearIcon_c8o64_239", f = {
+  spSelect: e,
+  "spSelect_size-md": "_spSelect_size-md_c8o64_19",
+  "spSelect_size-xl": "_spSelect_size-xl_c8o64_26",
+  spSelect_error: _,
+  spSelect__control: t,
+  spSelect__value_empty: c,
+  spSelect__icon: s,
+  spSelect_absolutePositionError: l,
+  spSelect__container: o,
+  spSelect__control_filled: p,
+  spSelect__control_outlined: r,
+  spSelect__control_open: S,
+  spSelect__control_disabled: n,
+  spSelect__value: i,
+  spSelect__listWrapper: a,
+  "spSelect__listWrapper_size-md": "_spSelect__listWrapper_size-md_c8o64_129",
+  "spSelect__listWrapper_size-xl": "_spSelect__listWrapper_size-xl_c8o64_135",
+  spSelect__listWrapper_placementBottom: m,
+  selectListOpenFromBottom: h,
+  spSelect__listWrapper_placementTop: u,
+  selectListOpenFromTop: d,
+  spSelect__list: b,
+  spSelect__list_scrollable: W,
+  spSelect__list_withSearch: B,
+  spSelect__emptyOptions: I,
+  spSelect__option: O,
+  spSelect__label: z,
+  spSelect__error: y,
+  spSelect__error_absolutePosition: v,
+  spSelect__search: F,
+  spSelect__search_atBottom: L,
+  spSelect__searchInput: P,
+  spSelect__searchIcon: T,
+  spSelect__searchClearIcon: x
+};
+export {
+  f as default,
+  h as selectListOpenFromBottom,
+  d as selectListOpenFromTop,
+  e as spSelect,
+  o as spSelect__container,
+  t as spSelect__control,
+  n as spSelect__control_disabled,
+  p as spSelect__control_filled,
+  S as spSelect__control_open,
+  r as spSelect__control_outlined,
+  I as spSelect__emptyOptions,
+  y as spSelect__error,
+  v as spSelect__error_absolutePosition,
+  s as spSelect__icon,
+  z as spSelect__label,
+  b as spSelect__list,
+  a as spSelect__listWrapper,
+  m as spSelect__listWrapper_placementBottom,
+  u as spSelect__listWrapper_placementTop,
+  W as spSelect__list_scrollable,
+  B as spSelect__list_withSearch,
+  O as spSelect__option,
+  F as spSelect__search,
+  x as spSelect__searchClearIcon,
+  T as spSelect__searchIcon,
+  P as spSelect__searchInput,
+  L as spSelect__search_atBottom,
+  i as spSelect__value,
+  c as spSelect__value_empty,
+  l as spSelect_absolutePositionError,
+  _ as spSelect_error
+};

package/dist/components/Select/constants/index.d.ts

@@ -0,0 +1,3 @@
+export declare const MAX_HEIGHT_SELECT_LIST = 180;
+/** Отступ между триггером селекта и выпадающим списком (px) */
+export declare const SELECT_DROPDOWN_GAP = 0;

package/dist/components/Select/constants/index.js

@@ -0,0 +1,5 @@
+const E = 180, _ = 0;
+export {
+  E as MAX_HEIGHT_SELECT_LIST,
+  _ as SELECT_DROPDOWN_GAP
+};

package/dist/components/Select/hooks/useSelect.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import { TOnBlurSelect, TOnChangeSelect, TSelectListStyle, TSelectOption } from "../types";
+export type TUseSelectParams = {
+    options: TSelectOption[];
+    value?: string | null | number;
+    name: string;
+    disabled?: boolean;
+    isSearchable?: boolean;
+    onChange?: TOnChangeSelect;
+    onBlur?: TOnBlurSelect;
+};
+export type TUseSelectReturn = {
+    isOpen: boolean;
+    searchQuery: string;
+    listStyle: TSelectListStyle;
+    refControl: React.RefObject<HTMLDivElement>;
+    refListWrapper: React.RefObject<HTMLDivElement>;
+    searchInputRef: React.RefObject<HTMLInputElement>;
+    selectedOption: TSelectOption | undefined;
+    filteredOptions: TSelectOption[];
+    listWrapperStyle: React.CSSProperties;
+    handleSelect: TOnChangeSelect;
+    handleToggle: () => void;
+    handleSearchChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    handleSearchClick: (event: React.MouseEvent) => void;
+    setSearchQuery: React.Dispatch<React.SetStateAction<string>>;
+};
+export declare function useSelect(params: TUseSelectParams): TUseSelectReturn;

package/dist/components/Select/hooks/useSelect.js

@@ -0,0 +1,73 @@
+import { useState as C, useRef as L, useCallback as i, useLayoutEffect as F, useEffect as f } from "react";
+import { useClickOutside as Q } from "../../../hooks/useClickOutside.js";
+import { SELECT_DROPDOWN_GAP as _ } from "../constants/index.js";
+function N(R) {
+  const { options: d, value: B, name: p, disabled: S = !1, isSearchable: h = !1, onChange: b, onBlur: E } = R, [t, m] = C(!1), [l, s] = C(""), [o, y] = C(null), c = L(null), a = L(null), w = L(null), r = i(() => {
+    if (!c.current || !a.current) return;
+    const e = c.current.getBoundingClientRect(), n = a.current.getBoundingClientRect(), u = _, W = e.bottom + n.height + u <= window.innerHeight, D = e.top - n.height - u >= 0;
+    let g, v;
+    !W && D ? (v = "top", g = e.top - n.height - u) : (v = "bottom", g = e.bottom + u), y({
+      top: g,
+      left: e.left,
+      width: e.width,
+      placement: v
+    });
+  }, []);
+  F(() => {
+    if (!t) {
+      y(null);
+      return;
+    }
+    r();
+  }, [t, r]), f(() => {
+    if (!t) return;
+    const e = requestAnimationFrame(() => r()), n = () => r();
+    return window.addEventListener("resize", n), window.addEventListener("scroll", n, !0), () => {
+      cancelAnimationFrame(e), window.removeEventListener("resize", n), window.removeEventListener("scroll", n, !0);
+    };
+  }, [t, r]), f(() => {
+    !t || o?.placement !== "top" || r();
+  }, [t, l, o?.placement, r]), Q([c, a], () => m(!1), t), f(() => {
+    if (t && h && w.current) {
+      const e = setTimeout(() => w.current?.focus(), 0);
+      return () => clearTimeout(e);
+    }
+  }, [t, h]), f(() => {
+    t || s("");
+  }, [t]);
+  const A = d.find((e) => e.value === B), I = h && l ? d.filter((e) => e.label.toLowerCase().includes(l.toLowerCase())) : d, O = i((e) => E?.(e), [E]), P = i(
+    (e, n) => {
+      b?.(e, { value: n.value, name: p }), m(!1), s(""), O({ value: n.value, name: p });
+    },
+    [b, p, O]
+  ), T = i(() => {
+    S || (m((e) => !e), s(""));
+  }, [S]), k = i((e) => {
+    s(e.target.value);
+  }, []), x = i((e) => {
+    e.stopPropagation();
+  }, []), z = {
+    position: "fixed",
+    zIndex: 1e3,
+    ...o ? { top: o.top, left: o.left, width: o.width } : { top: -9999, left: 0, width: 100, visibility: "hidden" }
+  };
+  return {
+    isOpen: t,
+    searchQuery: l,
+    listStyle: o,
+    refControl: c,
+    refListWrapper: a,
+    searchInputRef: w,
+    selectedOption: A,
+    filteredOptions: I,
+    listWrapperStyle: z,
+    handleSelect: P,
+    handleToggle: T,
+    handleSearchChange: k,
+    handleSearchClick: x,
+    setSearchQuery: s
+  };
+}
+export {
+  N as useSelect
+};

package/dist/components/Select/index.d.ts

@@ -0,0 +1,2 @@
+export { Select } from "./Select";
+export type { ISelectProps, TOnBlurSelect, TOnChangeSelect, TSelectOption } from "./types";

package/dist/components/Select/types/index.d.ts

@@ -0,0 +1,50 @@
+import React from "react";
+import { ETooltipPosition } from "../../Tooltip";
+export type TSelectOption = {
+    value: string | null | number;
+    label: string;
+    key?: string;
+};
+export type TSelectVariant = "outlined" | "filled";
+export type TSelectSize = "md" | "xl";
+export interface ISelectProps {
+    options: TSelectOption[];
+    isAbsolutePositionError?: boolean;
+    placeholder?: string;
+    variant?: TSelectVariant;
+    value?: string | null | number;
+    name: string;
+    onChange?: TOnChangeSelect;
+    onBlur?: TOnBlurSelect;
+    onMouseEnter?: () => void;
+    error?: string;
+    label?: string;
+    infoTooltipText?: string;
+    tooltipPosition?: ETooltipPosition;
+    disabled?: boolean;
+    required?: boolean;
+    maxHeightList?: number;
+    isVisibleDefaultTitle?: boolean;
+    isScrollableList?: boolean;
+    classNameRoot?: string;
+    classNameError?: string;
+    classNameLabel?: string;
+    classNameBaseTooltipRoot?: string;
+    isSearchable?: boolean;
+    searchPlaceholder?: string;
+    size?: TSelectSize;
+}
+export type TOnChangeSelect = (event: React.MouseEvent<HTMLDivElement>, data: {
+    value: string | null | number;
+    name: string;
+}) => void;
+export type TOnBlurSelect = (data: {
+    value: string | null | number;
+    name: string;
+}) => void;
+export type TSelectListStyle = {
+    top: number;
+    left: number;
+    width: number;
+    placement: "top" | "bottom";
+} | null;

package/dist/components/Skeleton/Skeleton.css

@@ -0,0 +1 @@
+._skeleton_1h6ke_1{--start-color: var(--spui-color-gray-100);--end-color: var(--spui-color-surface-default);background-color:var(--start-color);background-image:linear-gradient(90deg,var(--start-color) 0%,var(--end-color) 50%,var(--start-color) 100%);background-size:200% 100%;animation:_shimmer_1h6ke_1 2s infinite ease-in-out;display:inline-block}._skeleton_1h6ke_1{opacity:1;visibility:visible}._skeleton_1h6ke_1{transition:all .3s ease-in-out}@starting-style{._skeleton_1h6ke_1{opacity:0;visibility:hidden}}._skeleton_circle_1h6ke_23{border-radius:50%}._skeleton_customStart_1h6ke_26{--start-color: var(--custom-start-color, var(--spui-color-gray-100))}._skeleton_customEnd_1h6ke_29{--end-color: var(--custom-end-color, var(--spui-color-surface-default))}@keyframes _shimmer_1h6ke_1{0%{background-position:200% 0}to{background-position:-200% 0}}

package/dist/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SkeletonProps } from "./typs";
+export declare const Skeleton: React.FC<SkeletonProps>;

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,38 @@
+import { jsx as u } from "react/jsx-runtime";
+import k from "clsx";
+import o from "./Skeleton.module.scss.js";
+const y = (r) => {
+  const {
+    startColor: t,
+    endColor: e,
+    width: l = "100%",
+    height: c = "1rem",
+    circle: m = !1,
+    classNameRoot: s,
+    style: n = {}
+  } = r, a = {
+    width: l,
+    height: c,
+    ...n
+  }, i = k({
+    [o.skeleton]: !0,
+    [o.skeleton_circle]: m,
+    [o.skeleton_customStart]: t,
+    [o.skeleton_customEnd]: e,
+    ...s && { [s]: !0 }
+  });
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: i,
+      style: {
+        ...a,
+        ...t && { "--custom-start-color": t },
+        ...e && { "--custom-end-color": e }
+      }
+    }
+  );
+};
+export {
+  y as Skeleton
+};

package/dist/components/Skeleton/Skeleton.module.scss.js

@@ -0,0 +1,13 @@
+import './Skeleton.css';const e = "_skeleton_1h6ke_1", t = "_skeleton_circle_1h6ke_23", s = "_skeleton_customStart_1h6ke_26", o = "_skeleton_customEnd_1h6ke_29", _ = {
+  skeleton: e,
+  skeleton_circle: t,
+  skeleton_customStart: s,
+  skeleton_customEnd: o
+};
+export {
+  _ as default,
+  e as skeleton,
+  t as skeleton_circle,
+  o as skeleton_customEnd,
+  s as skeleton_customStart
+};

package/dist/components/Skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export { Skeleton } from "./Skeleton";
+export type { SkeletonProps } from "./typs";

package/dist/components/Skeleton/typs/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface SkeletonProps {
+    startColor?: string;
+    endColor?: string;
+    width?: number | string;
+    height?: number | string;
+    circle?: boolean;
+    classNameRoot?: string;
+    style?: React.CSSProperties;
+}

package/dist/components/Spinner/Spinner.css

@@ -0,0 +1 @@
+._spinner_if3pi_1{--spinner-size: 24px;--spinner-thickness: 2px;width:var(--spinner-size);height:var(--spinner-size);border-radius:50%;position:relative;animation:_spinner-rotate_if3pi_1 1s linear infinite;flex-shrink:0}._spinner_if3pi_1{opacity:1;visibility:visible}._spinner_if3pi_1{transition:all .3s ease-in-out}@starting-style{._spinner_if3pi_1{opacity:0;visibility:hidden}}._spinner_if3pi_1:before{content:"";position:absolute;inset:0;border-radius:50%;border:var(--spinner-thickness) solid currentColor;animation:_spinner-clip_if3pi_1 2s linear infinite}._spinner--size-sm_if3pi_32{--spinner-size: 16px;--spinner-thickness: 2px}._spinner--size-md_if3pi_36{--spinner-size: 24px;--spinner-thickness: 3px}._spinner--size-lg_if3pi_40{--spinner-size: 32px;--spinner-thickness: 4px}._spinner--size-xl_if3pi_44{--spinner-size: 48px;--spinner-thickness: 5px}@keyframes _spinner-rotate_if3pi_1{to{transform:rotate(360deg)}}@keyframes _spinner-clip_if3pi_1{0%{clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}25%{clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}50%{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}75%{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}to{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}}._spinnerWithText_if3pi_71{display:flex;flex-direction:column;align-items:center;gap:12px}._spinnerWithText__line_if3pi_77{--spinner-text-size: 14px;display:block;text-align:center;overflow-wrap:break-word;font-family:var(--spui-font-family-main),serif;font-weight:var(--spui-font-weight-regular);line-height:120%;color:var(--spui-color-text-primary);font-size:var(--spinner-text-size)}._spinnerWithText__line--size-sm_if3pi_88{--spinner-text-size: 8px}._spinnerWithText__line--size-md_if3pi_91{--spinner-text-size: 10px}._spinnerWithText__line--size-lg_if3pi_94{--spinner-text-size: 12px}._spinnerWithText__line--size-xl_if3pi_97{--spinner-text-size: 14px}._spinnerWithText__text_if3pi_100{display:inline}._spinnerWithText__dots_if3pi_103{display:inline-flex;align-items:baseline;gap:.05em;font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit;font-style:inherit}._spinnerWithText__dot_if3pi_103{display:inline-block;animation:_spinner-dot-wave_if3pi_1 1.2s ease-in-out infinite both;font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit;font-style:inherit}._spinnerWithText__dot_if3pi_103:after{content:"."}._spinnerWithText__dot_if3pi_103:nth-child(1){animation-delay:0s}._spinnerWithText__dot_if3pi_103:nth-child(2){animation-delay:.15s}._spinnerWithText__dot_if3pi_103:nth-child(3){animation-delay:.3s}._spinnerWithText__dot_if3pi_103:nth-child(4){animation-delay:.45s}@keyframes _spinner-dot-wave_if3pi_1{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-.35em)}}

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SpinnerProps } from "./types";
+export declare const Spinner: React.FC<SpinnerProps>;

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,46 @@
+import { jsxs as i, jsx as s } from "react/jsx-runtime";
+import l from "clsx";
+import e from "./Spinner.module.scss.js";
+const h = (p) => {
+  const {
+    size: n = "md",
+    color: c = "#036bfd",
+    classNameRoot: a,
+    classNameSpinnerTextLine: r,
+    loadingText: t
+  } = p, m = l({
+    [e.spinner]: !0,
+    [e[`spinner--size-${n}`]]: n,
+    ...a && { [a]: !0 }
+  }), o = () => /* @__PURE__ */ s(
+    "div",
+    {
+      className: m,
+      "aria-label": t ? void 0 : "Loading",
+      role: "status",
+      style: { color: c }
+    }
+  );
+  if (!t)
+    return o();
+  const d = l({
+    [e.spinnerWithText__line]: !0,
+    [e[`spinnerWithText__line--size-${n}`]]: n,
+    ...r && { [r]: !0 }
+  });
+  return /* @__PURE__ */ i("div", { className: e.spinnerWithText, children: [
+    o(),
+    /* @__PURE__ */ i("div", { className: d, "aria-live": "polite", children: [
+      /* @__PURE__ */ s("span", { className: e.spinnerWithText__text, children: t }),
+      /* @__PURE__ */ i("span", { className: e.spinnerWithText__dots, "aria-hidden": "true", children: [
+        /* @__PURE__ */ s("span", { className: e.spinnerWithText__dot }),
+        /* @__PURE__ */ s("span", { className: e.spinnerWithText__dot }),
+        /* @__PURE__ */ s("span", { className: e.spinnerWithText__dot }),
+        /* @__PURE__ */ s("span", { className: e.spinnerWithText__dot })
+      ] })
+    ] })
+  ] });
+};
+export {
+  h as Spinner
+};