test-stpr-ui-kit 0.7.0 → 1.0.0

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

@@ -0,0 +1,28 @@
+import './Spinner.css';const i = "_spinner_if3pi_1", e = "_spinnerWithText_if3pi_71", n = "_spinnerWithText__line_if3pi_77", _ = "_spinnerWithText__text_if3pi_100", t = "_spinnerWithText__dots_if3pi_103", s = "_spinnerWithText__dot_if3pi_103", p = {
+  spinner: i,
+  "spinner-rotate": "_spinner-rotate_if3pi_1",
+  "spinner-clip": "_spinner-clip_if3pi_1",
+  "spinner--size-sm": "_spinner--size-sm_if3pi_32",
+  "spinner--size-md": "_spinner--size-md_if3pi_36",
+  "spinner--size-lg": "_spinner--size-lg_if3pi_40",
+  "spinner--size-xl": "_spinner--size-xl_if3pi_44",
+  spinnerWithText: e,
+  spinnerWithText__line: n,
+  "spinnerWithText__line--size-sm": "_spinnerWithText__line--size-sm_if3pi_88",
+  "spinnerWithText__line--size-md": "_spinnerWithText__line--size-md_if3pi_91",
+  "spinnerWithText__line--size-lg": "_spinnerWithText__line--size-lg_if3pi_94",
+  "spinnerWithText__line--size-xl": "_spinnerWithText__line--size-xl_if3pi_97",
+  spinnerWithText__text: _,
+  spinnerWithText__dots: t,
+  spinnerWithText__dot: s,
+  "spinner-dot-wave": "_spinner-dot-wave_if3pi_1"
+};
+export {
+  p as default,
+  i as spinner,
+  e as spinnerWithText,
+  s as spinnerWithText__dot,
+  t as spinnerWithText__dots,
+  n as spinnerWithText__line,
+  _ as spinnerWithText__text
+};

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

@@ -0,0 +1,2 @@
+export { Spinner } from "./Spinner";
+export type { SpinnerProps, SpinnerSize } from "./types";

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

@@ -0,0 +1,9 @@
+export type SpinnerSize = "sm" | "md" | "lg" | "xl";
+export interface SpinnerProps {
+    size?: SpinnerSize;
+    color?: string;
+    classNameRoot?: string;
+    /** Текст под спиннером; в конце отображаются четыре точки с волновой анимацией */
+    loadingText?: string;
+    classNameSpinnerTextLine?: string;
+}

package/dist/components/Table/Table.css

@@ -0,0 +1 @@
+._tableWrapperRoot_ugn7p_1{position:relative}._tableWrapperRoot_hasError_ugn7p_4{outline:var(--spui-border-width-sm) solid var(--spui-color-border-error)}._tableWrapperRoot__errorTooltip_ugn7p_7{position:absolute;bottom:calc(100% + 2px);left:0}._tableWrapper_ugn7p_1{width:100%}._tableWrapper_ugn7p_1::-webkit-scrollbar{width:var(--spui-scrollbar-width);height:var(--spui-scrollbar-width)}._tableWrapper_ugn7p_1::-webkit-scrollbar-track{background:var(--spui-color-surface-secondary-hover)}._tableWrapper_ugn7p_1::-webkit-scrollbar-thumb{background:var(--color-aqua-blue)}._tableWrapper_ugn7p_1::-webkit-scrollbar-thumb:hover{background:var(--color-accent-blue)}._tableWrapper_ugn7p_1{opacity:1;visibility:visible}._tableWrapper_ugn7p_1{transition:all .3s ease-in-out}@starting-style{._tableWrapper_ugn7p_1{opacity:0;visibility:hidden}}._table_ugn7p_1{width:100%;table-layout:fixed;border-collapse:collapse}._table_ugn7p_1 th,._table_ugn7p_1 td{text-align:start;color:var(--color-gray-chicago);font-family:var(--spui-font-family-main),serif;font-weight:var(--spui-font-weight-regular);font-size:12px}._table_ugn7p_1 tr:hover td{background-color:var(--spui-color-blue-50)}._table_ugn7p_1 th{padding:12px 16px;background-color:var(--spui-color-gray-50);font-weight:var(--spui-font-weight-medium)}._table__tdContent_ugn7p_63{display:block;padding:18px 16px;font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit;font-style:inherit}._table__tdContent_ugn7p_63{opacity:1;visibility:visible}._table__tdContent_ugn7p_63{transition:all .3s ease-in-out}@starting-style{._table__tdContent_ugn7p_63{opacity:0;visibility:hidden}}._table__controlWrapper_ugn7p_85{display:flex;align-items:center;gap:12px}._table__controlWrapper__control_ugn7p_90{color:var(--spui-color-icon-action);cursor:pointer}._table__controlWrapper__control_ugn7p_90{opacity:1;visibility:visible}._table__controlWrapper__control_ugn7p_90{transition:all .3s ease-in-out}@starting-style{._table__controlWrapper__control_ugn7p_90{opacity:0;visibility:hidden}}._table__controlWrapper__control_disabled_ugn7p_107{color:var(--spui-color-icon-disabled);pointer-events:none}._table__loadingWrapper_ugn7p_111{display:flex;justify-content:center;align-items:center;height:100%;min-height:60px}._table__noDataWrapper_ugn7p_118{display:flex;justify-content:center;align-items:center;height:60px;color:var(--spui-color-text-secondary);font-style:italic}._table__sortableHeader_ugn7p_126{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s ease}._table__sortableHeader_ugn7p_126:hover{background-color:var(--spui-color-surface-disabled)}._table__sortableHeader_ugn7p_126:hover ._table__sortIcon_ugn7p_134{color:var(--spui-color-icon-action)}._table__headerContent_ugn7p_137{display:flex;align-items:center;justify-content:start;gap:4px}._table__sortIcon_ugn7p_134{font-size:16px;line-height:1;color:var(--spui-color-gray-400);font-weight:var(--spui-font-weight-medium)}._table--variant-default_ugn7p_149 th,._table--variant-default_ugn7p_149 td{border:var(--spui-border-width-sm) solid var(--spui-color-border-primary)}._table--variant-znp_ugn7p_152 th,._table--variant-znp_ugn7p_152 td{border-bottom:var(--spui-border-width-sm) solid var(--spui-color-border-primary)}._table--variant-znp_ugn7p_152 ._table__tdContent_ugn7p_63{color:var(--spui-color-text-primary);font-weight:var(--spui-font-weight-medium)}._tooltip_ugn7p_160{padding:8px 12px!important}._tooltip_hasError_ugn7p_163{background-color:var(--spui-color-red-100)}._tooltip_hasError_ugn7p_163 ._tooltip__content_ugn7p_166{color:var(--spui-color-text-error)}._tooltip__content_ugn7p_166{font-size:12px}

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,2 @@
+import type { TableProps } from "./types";
+export declare const Table: <TData extends object>(props: TableProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Table/Table.js

@@ -0,0 +1,219 @@
+import { jsxs as b, jsx as t } from "react/jsx-runtime";
+import c from "clsx";
+import Q, { useRef as U, useState as B, useEffect as X, useCallback as Y } from "react";
+import r from "./Table.module.scss.js";
+import { isString as H, isNumber as E } from "./utils/index.js";
+import { BaseTooltip as Z } from "../BaseTooltip/BaseTooltip.js";
+import { Spinner as w } from "../Spinner/Spinner.js";
+import { Icon as h } from "../Icons/Icon.js";
+import { EIconName as f } from "../Icons/types/index.js";
+import { EllipsisTextWithTooltip as ee } from "../EllipsisTextWithTooltip/EllipsisTextWithTooltip.js";
+const me = (O) => {
+  const {
+    columns: m,
+    data: s,
+    dispatch: d,
+    styleVariant: k = "default",
+    classNameRoot: C,
+    classNameTableRoot: g,
+    classNameTdContentRoot: y,
+    renderCellContent: T,
+    noData: S = { isVisibleHeader: !0, noDataText: "Нет данных" },
+    loading: N = !1,
+    hasError: R = !1,
+    errorText: P = ""
+  } = O, _ = U(null), [V, I] = B(60), [l, W] = B(null);
+  X(() => {
+    if (_.current && s && s.length > 0 && !N) {
+      const e = _.current.offsetHeight;
+      e > 60 && I(e);
+    }
+  }, [s, N]);
+  const D = Y((e) => e.sortBy ?? e.key, []), $ = Q.useMemo(() => !l || !s.length ? s : [...s].sort((e, a) => {
+    const i = m.find((L) => L.key === l.key);
+    if (!i) return 0;
+    const p = D(i), o = e[p], n = a[p];
+    if (o == null && n == null) return 0;
+    if (o == null) return l.direction === "asc" ? -1 : 1;
+    if (n == null) return l.direction === "asc" ? 1 : -1;
+    if (H(o) && H(n))
+      return l.direction === "asc" ? o.localeCompare(n) : n.localeCompare(o);
+    if (E(o) && E(n))
+      return o < n ? l.direction === "asc" ? -1 : 1 : o > n ? l.direction === "asc" ? 1 : -1 : 0;
+    const v = String(o), x = String(n);
+    return l.direction === "asc" ? v.localeCompare(x) : x.localeCompare(v);
+  }), [l, s, m, D]), F = (e) => {
+    e.isSortable && (l?.key === e.key ? W({
+      key: e.key,
+      direction: l.direction === "asc" ? "desc" : "asc"
+    }) : W({
+      key: e.key,
+      direction: "asc"
+    }));
+  }, j = (e) => e.isSortable ? l?.key === e.key ? l.direction === "asc" ? "↑" : "↓" : "↕" : null, z = c({
+    [r.tableWrapperRoot]: !0,
+    [r.tableWrapperRoot_hasError]: R
+  }), M = c({
+    [r.tableWrapper]: !0,
+    ...C && { [C]: !0 }
+  }), q = c({
+    [r.table]: !0,
+    [r[`table--variant-${k}`]]: k,
+    ...g && { [g]: !0 }
+  }), u = c({
+    [r.table__tdContent]: !0,
+    ...y && { [y]: !0 }
+  }), A = (e, a) => {
+    if (a.renderCell)
+      return /* @__PURE__ */ t("div", { className: u, children: a.renderCell(e, a) });
+    if (a.key === "controls") {
+      const o = !!a.isDisabled;
+      return /* @__PURE__ */ t("div", { className: u, children: /* @__PURE__ */ b("div", { className: r.table__controlWrapper, children: [
+        /* @__PURE__ */ t(
+          h,
+          {
+            name: f.Edit,
+            className: c(
+              r.table__controlWrapper__control,
+              o && r.table__controlWrapper__control_disabled
+            ),
+            onClick: (n) => {
+              n.stopPropagation(), d?.({
+                clickOn: "edit",
+                rowData: e
+              });
+            }
+          }
+        ),
+        /* @__PURE__ */ t(
+          h,
+          {
+            name: f.Trash,
+            className: c(
+              r.table__controlWrapper__control,
+              o && r.table__controlWrapper__control_disabled
+            ),
+            onClick: (n) => {
+              n.stopPropagation(), d?.({
+                clickOn: "delete",
+                rowData: e
+              });
+            }
+          }
+        )
+      ] }) });
+    }
+    if (a.key === "deleteControl") {
+      const o = !!a.isDisabled;
+      return /* @__PURE__ */ t("div", { className: u, children: /* @__PURE__ */ t("div", { className: r.table__controlWrapper, children: /* @__PURE__ */ t(
+        h,
+        {
+          name: f.Trash,
+          className: c(
+            r.table__controlWrapper__control,
+            o && r.table__controlWrapper__control_disabled
+          ),
+          onClick: (n) => {
+            n.stopPropagation(), d && d({
+              clickOn: "delete",
+              rowData: e
+            });
+          }
+        }
+      ) }) });
+    }
+    if (a.key === "editControl") {
+      const o = !!a.isDisabled;
+      return /* @__PURE__ */ t("div", { className: u, children: /* @__PURE__ */ t("div", { className: r.table__controlWrapper, children: /* @__PURE__ */ t(
+        h,
+        {
+          name: f.Edit,
+          className: c(
+            r.table__controlWrapper__control,
+            o && r.table__controlWrapper__control_disabled
+          ),
+          onClick: (n) => {
+            n.stopPropagation(), d && d({
+              clickOn: "edit",
+              rowData: e
+            });
+          }
+        }
+      ) }) });
+    }
+    if (T)
+      return /* @__PURE__ */ t("div", { className: u, children: T(e, a) });
+    const i = !!a.isClickable, p = e[a.key];
+    return /* @__PURE__ */ t("div", { className: u, children: /* @__PURE__ */ t(
+      ee,
+      {
+        onClick: (o) => {
+          i && (o.stopPropagation(), d?.({
+            clickOn: String(a.key),
+            rowData: e
+          }));
+        },
+        classNameBaseTooltipRoot: r.tooltip,
+        isInheritFontStyles: !0,
+        text: p ? String(p) : "-",
+        isCursorPointerByOnClick: i
+      }
+    ) });
+  }, G = () => !S.isVisibleHeader && (!s || s.length === 0) ? null : /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ t("tr", { children: m.map((e, a) => {
+    const i = j(e), p = e.isSortable;
+    return /* @__PURE__ */ t(
+      "th",
+      {
+        onClick: () => F(e),
+        className: c(p && r.table__sortableHeader),
+        children: /* @__PURE__ */ b("div", { className: r.table__headerContent, children: [
+          /* @__PURE__ */ t("span", { children: e.title }),
+          i && /* @__PURE__ */ t("span", { className: r.table__sortIcon, children: i })
+        ] })
+      },
+      a
+    );
+  }) }) }), J = () => N ? /* @__PURE__ */ t("tbody", { ref: _, style: { height: `${V}px` }, children: /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t("td", { colSpan: m.length, children: /* @__PURE__ */ t("div", { className: r.table__loadingWrapper, children: /* @__PURE__ */ t(w, { size: "lg" }) }) }) }) }) : !s || s.length === 0 ? /* @__PURE__ */ t("tbody", { ref: _, children: /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t("td", { colSpan: m.length, children: /* @__PURE__ */ t("div", { className: r.table__noDataWrapper, children: S.noDataText }) }) }) }) : /* @__PURE__ */ t("tbody", { ref: _, children: $.map((e, a) => e ? /* @__PURE__ */ t(
+    "tr",
+    {
+      onClick: (i) => {
+        i.stopPropagation(), d && d({
+          clickOn: "row",
+          rowData: e
+        });
+      },
+      children: m.map((i, p) => /* @__PURE__ */ t("td", { children: A(e, i) }, `${a}:${p}`))
+    },
+    a
+  ) : null) }), K = () => /* @__PURE__ */ b("table", { className: q, children: [
+    /* @__PURE__ */ t("colgroup", { children: m.map(({ width: e }, a) => /* @__PURE__ */ t(
+      "col",
+      {
+        style: {
+          width: e ? `${e}px` : void 0
+        }
+      },
+      a
+    )) }),
+    G(),
+    J()
+  ] });
+  return /* @__PURE__ */ b("div", { className: z, children: [
+    R && /* @__PURE__ */ t(
+      Z,
+      {
+        text: P,
+        classNameRoot: c(
+          r.tableWrapperRoot__errorTooltip,
+          r.tooltip,
+          r.tooltip_hasError
+        ),
+        classNameContentRoot: r.tooltip__content
+      }
+    ),
+    /* @__PURE__ */ t("div", { className: M, children: K() })
+  ] });
+};
+export {
+  me as Table
+};

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

@@ -0,0 +1,41 @@
+import './Table.css';const t = "_tableWrapperRoot_ugn7p_1", _ = "_tableWrapperRoot_hasError_ugn7p_4", o = "_tableWrapperRoot__errorTooltip_ugn7p_7", r = "_tableWrapper_ugn7p_1", a = "_table_ugn7p_1", e = "_table__tdContent_ugn7p_63", p = "_table__controlWrapper_ugn7p_85", l = "_table__controlWrapper__control_ugn7p_90", n = "_table__controlWrapper__control_disabled_ugn7p_107", b = "_table__loadingWrapper_ugn7p_111", c = "_table__noDataWrapper_ugn7p_118", s = "_table__sortableHeader_ugn7p_126", W = "_table__sortIcon_ugn7p_134", g = "_table__headerContent_ugn7p_137", i = "_tooltip_ugn7p_160", u = "_tooltip_hasError_ugn7p_163", d = "_tooltip__content_ugn7p_166", h = {
+  tableWrapperRoot: t,
+  tableWrapperRoot_hasError: _,
+  tableWrapperRoot__errorTooltip: o,
+  tableWrapper: r,
+  table: a,
+  table__tdContent: e,
+  table__controlWrapper: p,
+  table__controlWrapper__control: l,
+  table__controlWrapper__control_disabled: n,
+  table__loadingWrapper: b,
+  table__noDataWrapper: c,
+  table__sortableHeader: s,
+  table__sortIcon: W,
+  table__headerContent: g,
+  "table--variant-default": "_table--variant-default_ugn7p_149",
+  "table--variant-znp": "_table--variant-znp_ugn7p_152",
+  tooltip: i,
+  tooltip_hasError: u,
+  tooltip__content: d
+};
+export {
+  h as default,
+  a as table,
+  r as tableWrapper,
+  t as tableWrapperRoot,
+  o as tableWrapperRoot__errorTooltip,
+  _ as tableWrapperRoot_hasError,
+  p as table__controlWrapper,
+  l as table__controlWrapper__control,
+  n as table__controlWrapper__control_disabled,
+  g as table__headerContent,
+  b as table__loadingWrapper,
+  c as table__noDataWrapper,
+  W as table__sortIcon,
+  s as table__sortableHeader,
+  e as table__tdContent,
+  i as tooltip,
+  d as tooltip__content,
+  u as tooltip_hasError
+};

package/dist/components/Table/hooks/index.d.ts

@@ -0,0 +1,12 @@
+import type { TClickOnCellAction } from "../types";
+interface IUseTableActionsProps<T> {
+    onEdit?: (data: T) => void;
+    onDelete?: (key: string) => void;
+    onRowClick?: (data: T) => void;
+    onCustomAction?: (action: TClickOnCellAction<T>) => void;
+}
+export declare const useTableActions: <T extends {
+    key?: string | number;
+    id?: string | number;
+}>({ onEdit, onDelete, onRowClick, onCustomAction, }?: IUseTableActionsProps<T>) => (action: TClickOnCellAction<T>) => void;
+export {};

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

@@ -0,0 +1,28 @@
+import { useCallback as b } from "react";
+const i = ({
+  onEdit: a,
+  onDelete: e,
+  onRowClick: s,
+  onCustomAction: f
+} = {}) => b(
+  (r) => {
+    switch (f && f(r), r.clickOn) {
+      case "delete":
+        if (e) {
+          const w = "key" in r.rowData && r.rowData.key || "id" in r.rowData && r.rowData.id || void 0;
+          w !== void 0 && e(String(w));
+        }
+        break;
+      case "edit":
+        a && a(r.rowData);
+        break;
+      case "row":
+        s && s(r.rowData);
+        break;
+    }
+  },
+  [a, e, s, f]
+);
+export {
+  i as useTableActions
+};

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

@@ -0,0 +1,3 @@
+export { useTableActions } from "./hooks";
+export { Table } from "./Table";
+export type { TableProps, TClickOnCellAction, TColumn, TDefaultColumnKey, TSortState, TTableStyleVariant, } from "./types";

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

@@ -0,0 +1,39 @@
+import type { Dispatch, ReactNode } from "react";
+export interface TableProps<TData extends object = Record<string, unknown>> {
+    data: TData[];
+    columns: TColumn<TData>[];
+    dispatch?: Dispatch<TClickOnCellAction<TData>>;
+    classNameRoot?: string;
+    classNameTableRoot?: string;
+    classNameTdContentRoot?: string;
+    renderCellContent?: (row: TData, col: TColumn<TData>) => ReactNode;
+    styleVariant?: TTableStyleVariant;
+    noData?: {
+        isVisibleHeader?: boolean;
+        noDataText?: string;
+    };
+    loading?: boolean;
+    hasError?: boolean;
+    errorText?: string;
+}
+export type TClickOnCellAction<TData> = {
+    clickOn: string;
+    rowData: TData;
+};
+export type TTableStyleVariant = "default" | "znp";
+export type TColumn<TData> = {
+    key: keyof TData | TDefaultColumnKey;
+    title: string;
+    isVisible?: boolean;
+    isClickable?: boolean;
+    isSortable?: boolean;
+    isDisabled?: boolean;
+    width?: number;
+    renderCell?: (row: TData, col: TColumn<TData>) => ReactNode;
+    sortBy?: keyof TData;
+};
+export type TSortState<TData> = {
+    key: keyof TData | TDefaultColumnKey;
+    direction: "asc" | "desc";
+};
+export type TDefaultColumnKey = "controls" | "deleteControl" | "editControl";

package/dist/components/Table/utils/index.d.ts

@@ -0,0 +1,2 @@
+export declare const isNumber: (data: unknown) => data is number;
+export declare const isString: (data: unknown) => data is string;

package/dist/components/Table/utils/index.js

@@ -0,0 +1,5 @@
+const e = (t) => typeof t == "number", n = (t) => typeof t == "string";
+export {
+  e as isNumber,
+  n as isString
+};

package/dist/components/Tabs/Tabs.css

@@ -0,0 +1 @@
+._spTabs_14g3q_1{display:flex;align-items:flex-start}._spTabs_14g3q_1{opacity:1;visibility:visible}._spTabs_14g3q_1{transition:all .3s ease-in-out}@starting-style{._spTabs_14g3q_1{opacity:0;visibility:hidden}}._spTabs_separated_14g3q_18{background-color:transparent;gap:var(--spui-tabs-container-gap);padding:var(--spui-spacing-none)}._spTabs--size-md_14g3q_23{--spui-tabs-container-gap: var(--spui-spacing-1x);--spui-tabs-container-padding: 6px;--spui-tab-item-padding: var(--spui-spacing-none) var(--spui-spacing-4x);--spui-tab-item-height: var(--spui-control-height-md);--spui-tabs-contained-content-height: var(--spui-control-height-base);--spui-tab-item-font-size: 16px}._spTabs--size-xl_14g3q_31{--spui-tabs-container-gap: var(--spui-spacing-2x);--spui-tabs-container-padding: var(--spui-spacing-2x);--spui-tab-item-padding: var(--spui-spacing-none) var(--spui-spacing-5x);--spui-tab-item-height: var(--spui-control-height-xl);--spui-tabs-contained-content-height: var(--spui-control-height-md);--spui-tab-item-font-size: 20px}._spTabs--variant-contained_14g3q_39{background-color:var(--spui-color-surface-page);padding:var(--spui-spacing-none) var(--tabs-container-padding)}._spTabs--variant-contained_14g3q_39 ._spTabs__tabElement_14g3q_43{color:var(--spui-color-text-secondary);background-color:transparent;padding:var(--spui-spacing-none)}._spTabs--variant-contained_14g3q_39 ._spTabs__tabElement_14g3q_43:hover:not(._spTabs__tabElement_active_14g3q_48) ._spTabs__tabContent_14g3q_48{background-color:var(--tab-item-bg-hover)}._spTabs--variant-contained_14g3q_39 ._spTabs__tabElement_active_14g3q_48{color:var(--spui-color-text-action);background-color:transparent}._spTabs--variant-contained_14g3q_39 ._spTabs__tabElement_active_14g3q_48 ._spTabs__tooltip_14g3q_55{color:var(--spui-color-text-action)}._spTabs--variant-contained_14g3q_39 ._spTabs__tabElement_active_14g3q_48 ._spTabs__tabContent_14g3q_48{background-color:var(--spui-color-surface-default)}._spTabs--variant-contained_14g3q_39 ._spTabs__tabContent_14g3q_48{height:var(--tabs-contained-content-height);min-height:var(--tabs-contained-content-height);padding:var(--tab-item-padding);background-color:transparent}._spTabs--variant-outlined_14g3q_67{background-color:transparent;padding:var(--spui-spacing-none)}._spTabs--variant-outlined_14g3q_67 ._spTabs__tabElement_14g3q_43{border-bottom:var(--spui-border-width-md) solid transparent;color:var(--spui-color-text-secondary);background-color:transparent}._spTabs--variant-outlined_14g3q_67 ._spTabs__tabElement_14g3q_43:hover{color:var(--spui-color-text-action)}._spTabs--variant-outlined_14g3q_67 ._spTabs__tabElement_active_14g3q_48{color:var(--spui-color-text-action);border-bottom:var(--spui-border-width-md) solid var(--spui-color-border-action)}._spTabs--variant-outlined_14g3q_67 ._spTabs__tabElement_active_14g3q_48 ._spTabs__tooltip_14g3q_55{color:var(--spui-color-text-action)}._spTabs--variant-filled_14g3q_86{background-color:transparent;padding:var(--spui-spacing-none)}._spTabs--variant-filled_14g3q_86 ._spTabs__tabElement_14g3q_43{border:var(--spui-border-width-sm) solid var(--spui-color-border-disabled, var(--color-light-smoke));color:var(--spui-color-text-secondary);background-color:var(--spui-color-surface-disabled)}._spTabs--variant-filled_14g3q_86 ._spTabs__tabElement_14g3q_43:hover{border-color:var(--spui-color-border-action)}._spTabs--variant-filled_14g3q_86 ._spTabs__tabElement_active_14g3q_48{color:var(--spui-color-text-on-action);background-color:var(--spui-color-surface-action);border-color:var(--spui-color-border-action)}._spTabs--variant-filled_14g3q_86 ._spTabs__tabElement_active_14g3q_48 ._spTabs__tooltip_14g3q_55{color:var(--spui-color-text-on-action)}._spTabs__tabElement_14g3q_43{display:flex;cursor:pointer;justify-content:center;align-items:center;height:var(--tab-item-height);min-height:var(--tab-item-height);padding:var(--tab-item-padding);font-family:var(--spui-font-family-main),serif;font-weight:var(--spui-font-weight-regular);font-size:var(--tab-item-font-size);line-height:120%}._spTabs__tabElement_active_14g3q_48{font-weight:var(--spui-font-weight-medium)}._spTabs__tabContent_14g3q_48{display:flex;align-items:center;justify-content:center;gap:var(--spui-spacing-2x);box-sizing:border-box;width:100%;height:100%;min-height:100%;padding:var(--spui-spacing-none)}._spTabs__iconContainer_14g3q_133{display:flex}._spTabs__iconContainer_14g3q_133 .stpr-icon{width:var(--spui-icon-size-base);height:var(--spui-icon-size-base);transition:unset;flex-shrink:0}._spTabs__tabText_14g3q_142{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}._spTabs__tooltip_14g3q_55{display:flex;flex-shrink:0;align-items:center}

package/dist/components/Tabs/Tabs.d.ts

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

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,73 @@
+import { jsx as s, jsxs as N, Fragment as S } from "react/jsx-runtime";
+import n from "clsx";
+import e from "./Tabs.module.scss.js";
+import { InfoTooltip as $ } from "../Tooltip/Tooltip.js";
+import { Icon as F } from "../Icons/Icon.js";
+const D = (_) => {
+  const {
+    panes: R,
+    isSeparated: v = !1,
+    classNameRoot: c,
+    classNameTabElementRoot: i,
+    classNameBaseTooltipRoot: I,
+    variant: m = "contained",
+    size: p = "xl"
+  } = _, f = n({
+    [e.spTabs]: !0,
+    [e.spTabs_separated]: v,
+    [e[`spTabs--variant-${m}`]]: m,
+    [e[`spTabs--size-${p}`]]: p,
+    ...c && { [c]: !0 }
+  }), h = n({
+    [e.spTabs__iconContainer]: !0
+  }), C = n({
+    [e.spTabs__tooltip]: !0
+  }), x = n({
+    [e.spTabs__tabContent]: !0
+  }), r = (o, a) => o ? /* @__PURE__ */ s("div", { className: h, children: /* @__PURE__ */ s(F, { name: o, rotate: a }) }) : null, B = (o, a) => {
+    const {
+      name: d,
+      active: E,
+      onClick: y,
+      infoTooltipText: T,
+      isOnlyIcon: t = !1,
+      startIconName: l,
+      endIconName: b,
+      startIconRotate: u = 0,
+      endIconRotate: g = 0
+    } = o, j = !t && !!l, k = !t && !!b, z = !t;
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        "aria-label": t ? d : void 0,
+        className: n({
+          [e.spTabs__tabElement]: !0,
+          [e.spTabs__tabElement_active]: E,
+          ...i && { [i]: !0 }
+        }),
+        onClick: y,
+        children: /* @__PURE__ */ N("div", { className: x, children: [
+          t ? r(l, u) : /* @__PURE__ */ N(S, { children: [
+            r(j ? l : void 0, u),
+            z && /* @__PURE__ */ s("span", { className: e.spTabs__tabText, children: d }),
+            r(k ? b : void 0, g)
+          ] }),
+          !!T && /* @__PURE__ */ s(
+            $,
+            {
+              hover: !0,
+              classNameTooltip: C,
+              text: T,
+              classNameBaseTooltipRoot: I
+            }
+          )
+        ] })
+      },
+      o.key || a
+    );
+  };
+  return /* @__PURE__ */ s("div", { className: f, children: R.map((o, a) => B(o, a)) });
+};
+export {
+  D as Tabs
+};

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

@@ -0,0 +1,26 @@
+import './Tabs.css';const s = "_spTabs_14g3q_1", _ = "_spTabs_separated_14g3q_18", a = "_spTabs__tabElement_14g3q_43", t = "_spTabs__tabElement_active_14g3q_48", b = "_spTabs__tabContent_14g3q_48", e = "_spTabs__tooltip_14g3q_55", n = "_spTabs__iconContainer_14g3q_133", p = "_spTabs__tabText_14g3q_142", T = {
+  spTabs: s,
+  spTabs_separated: _,
+  "spTabs--size-md": "_spTabs--size-md_14g3q_23",
+  "spTabs--size-xl": "_spTabs--size-xl_14g3q_31",
+  "spTabs--variant-contained": "_spTabs--variant-contained_14g3q_39",
+  spTabs__tabElement: a,
+  spTabs__tabElement_active: t,
+  spTabs__tabContent: b,
+  spTabs__tooltip: e,
+  "spTabs--variant-outlined": "_spTabs--variant-outlined_14g3q_67",
+  "spTabs--variant-filled": "_spTabs--variant-filled_14g3q_86",
+  spTabs__iconContainer: n,
+  spTabs__tabText: p
+};
+export {
+  T as default,
+  s as spTabs,
+  n as spTabs__iconContainer,
+  b as spTabs__tabContent,
+  a as spTabs__tabElement,
+  t as spTabs__tabElement_active,
+  p as spTabs__tabText,
+  e as spTabs__tooltip,
+  _ as spTabs_separated
+};

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

@@ -0,0 +1,2 @@
+export { Tabs } from "./Tabs";
+export type { TabsProps, TPaneItem } from "./types";

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

@@ -0,0 +1,25 @@
+import React from "react";
+import type { EIconName } from "../../Icons";
+export type TTabsVariant = "filled" | "contained" | "outlined";
+export type TTabsSize = "md" | "xl";
+export type TPaneItem = {
+    name: string;
+    key?: string;
+    active?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    infoTooltipText?: string;
+    isOnlyIcon?: boolean;
+    startIconName?: EIconName;
+    endIconName?: EIconName;
+    startIconRotate?: number;
+    endIconRotate?: number;
+};
+export interface TabsProps {
+    size?: TTabsSize;
+    panes: TPaneItem[];
+    isSeparated?: boolean;
+    variant?: TTabsVariant;
+    classNameRoot?: string;
+    classNameTabElementRoot?: string;
+    classNameBaseTooltipRoot?: string;
+}

package/dist/components/Text/Text.css

@@ -0,0 +1 @@
+._spText_1rmz8_1{display:inline-block;font-family:var(--spui-font-family-main),serif;font-weight:var(--spui-font-weight-regular);font-size:16px;line-height:120%;white-space:normal}._spText_1rmz8_1{opacity:1;visibility:visible}._spText_1rmz8_1{transition:all .3s ease-in-out}@starting-style{._spText_1rmz8_1{opacity:0;visibility:hidden}}@media only screen and (min-width:768px){._spText_1rmz8_1{font-size:18px}}._spText_ellipsis_1rmz8_27{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}._spText_type-h1_1rmz8_33{font-family:var(--spui-font-family-title),serif;font-weight:var(--spui-font-weight-bold);font-size:28px}@media only screen and (min-width:768px){._spText_type-h1_1rmz8_33{font-size:48px}}._spText_type-h3_1rmz8_43{font-family:var(--spui-font-family-title),serif;font-weight:var(--spui-font-weight-bold);font-size:24px}@media only screen and (min-width:768px){._spText_type-h3_1rmz8_43{font-size:28px}}@media only screen and (min-width:1200px){._spText_type-h3_1rmz8_43{font-size:36px}}@media only screen and (min-width:768px){._spText_type-p1_1rmz8_59{font-size:20px}}@media only screen and (min-width:768px){._spText_type-p2_1rmz8_64{font-size:16px}}._spText_type-description_1rmz8_68{font-size:14px}@media only screen and (min-width:768px){._spText_type-description_1rmz8_68{font-size:16px}}._spText_type-link_1rmz8_76{color:var(--spui-color-text-action);font-size:16px;font-weight:var(--spui-font-weight-medium)}@media only screen and (min-width:768px){._spText_type-link_1rmz8_76{font-size:18px}}._spText_type-link_1rmz8_76:hover{color:var(--spui-color-text-action)}._spText_cursorPointer_1rmz8_89{cursor:pointer}

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { TextProps } from "./types";
+export declare const Text: React.ForwardRefExoticComponent<Omit<TextProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Text/Text.js

@@ -0,0 +1,39 @@
+import { jsx as C } from "react/jsx-runtime";
+import T from "clsx";
+import N from "react";
+import t from "./Text.module.scss.js";
+const R = N.forwardRef((o, i) => {
+  const {
+    type: s,
+    children: l,
+    color: p,
+    title: a,
+    style: n,
+    onClick: e,
+    isEllipsis: c = !1,
+    isCursorPointer: m = !1,
+    isCursorPointerByOnClick: u = !0,
+    classNameRoot: r
+  } = o, f = () => e && u ? !0 : m, x = T({
+    [t.spText]: !0,
+    [t.spText_ellipsis]: c,
+    [t.spText_cursorPointer]: f(),
+    [t[`spText_type-${s}`]]: s,
+    ...r && { [r]: !0 }
+  });
+  return /* @__PURE__ */ C(
+    "span",
+    {
+      style: { ...n, color: p },
+      title: a,
+      onClick: (y) => e && e(y),
+      className: x,
+      ref: i,
+      children: l
+    }
+  );
+});
+R.displayName = "Text";
+export {
+  R as Text
+};

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

@@ -0,0 +1,17 @@
+import './Text.css';const t = "_spText_1rmz8_1", _ = "_spText_ellipsis_1rmz8_27", e = "_spText_cursorPointer_1rmz8_89", p = {
+  spText: t,
+  spText_ellipsis: _,
+  "spText_type-h1": "_spText_type-h1_1rmz8_33",
+  "spText_type-h3": "_spText_type-h3_1rmz8_43",
+  "spText_type-p1": "_spText_type-p1_1rmz8_59",
+  "spText_type-p2": "_spText_type-p2_1rmz8_64",
+  "spText_type-description": "_spText_type-description_1rmz8_68",
+  "spText_type-link": "_spText_type-link_1rmz8_76",
+  spText_cursorPointer: e
+};
+export {
+  p as default,
+  t as spText,
+  e as spText_cursorPointer,
+  _ as spText_ellipsis
+};

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

@@ -0,0 +1,2 @@
+export { Text } from "./Text";
+export type { TextProps } from "./types";

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

@@ -0,0 +1,15 @@
+import React, { ForwardedRef, ReactNode } from "react";
+export type TTextType = "h1" | "h3" | "p1" | "p2" | "description" | "link";
+export interface TextProps {
+    children?: string | ReactNode;
+    color?: string;
+    title?: string;
+    classNameRoot?: string;
+    style?: React.CSSProperties;
+    onClick?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
+    isEllipsis?: boolean;
+    isCursorPointer?: boolean;
+    isCursorPointerByOnClick?: boolean;
+    type?: TTextType;
+    ref?: ForwardedRef<HTMLDivElement>;
+}

package/dist/components/TextWithLabel/TextWithLabel.css

@@ -0,0 +1 @@
+._spTextWithLabel_18nkl_1{width:fit-content}._spTextWithLabel_ellipsis_18nkl_4{width:100%}

package/dist/components/TextWithLabel/TextWithLabel.d.ts

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