@alphakits/ui 2.3.0 → 2.4.0

package/dist/sidepanel/component.js

@@ -1,41 +1,47 @@
 import { jsx as e, jsxs as v } from "react/jsx-runtime";
-import N from "react";
-import x from "classnames";
+import N from "classnames";
+import x from "react";
 import { FlexColumns as S } from "../flex-columns/component.js";
 import { SidepanelHeader as g } from "../sidepanel-header/component.js";
-import { Skeleton as y } from "../skeleton/component.js";
+import { Skeleton as j } from "../skeleton/component.js";
 import r from "./index.module.css.js";
 const R = ({
-  dataTestId: i,
+  dataTestId: o,
   title: m,
-  loading: t,
-  headerRightAddons: a,
-  subtitle: l,
-  noCloser: s,
+  loading: i,
+  headerRightAddons: t,
+  subtitle: a,
+  noCloser: l,
   showCloser: n,
   headerBottomAddons: c,
   noStickyFooter: d,
   noStickyHeader: p,
-  bottomAddons: o,
+  bottomAddons: s,
   children: f,
   ...h
-}) => /* @__PURE__ */ e(N.Fragment, { children: t ? /* @__PURE__ */ e(S, { className: r.loader, columns: 1, gr: 20, children: new Array(7).fill("").map((j, u) => /* @__PURE__ */ e(y, { animate: !0, visible: !0, className: r.input }, u)) }) : /* @__PURE__ */ v("div", { children: [
+}) => /* @__PURE__ */ e(x.Fragment, { children: i ? /* @__PURE__ */ e(S, { className: r.loader, columns: 1, gr: 20, children: ["s1", "s2", "s3", "s4", "s5", "s6", "s7"].map((u) => /* @__PURE__ */ e(j, { animate: !0, visible: !0, className: r.input }, u)) }) : /* @__PURE__ */ v("div", { children: [
   /* @__PURE__ */ e(
     g,
     {
       title: m,
       className: p ? void 0 : r.header,
-      subtitle: l,
-      noCloser: s,
+      subtitle: a,
+      noCloser: l,
       showCloser: n,
-      dataTestId: i,
-      rightAddons: a,
+      dataTestId: o,
+      rightAddons: t,
       bottomAddons: c,
       ...h
     }
   ),
   /* @__PURE__ */ e("div", { className: r.content, children: f }),
-  o && /* @__PURE__ */ e("div", { className: x(r.footer, { [r.noSticky]: d }), children: o })
+  s && /* @__PURE__ */ e(
+    "div",
+    {
+      className: N(r.footer, { [r.noSticky]: d }),
+      children: s
+    }
+  )
 ] }) });
 export {
   R as Sidepanel

package/dist/sidepanel-header/component.js

@@ -18,22 +18,23 @@ const h = ({ title: m, subtitle: l }) => /* @__PURE__ */ a(w, { columns: 1, gr:
   bottomAddons: n,
   noCloser: f,
   showCloser: v
-}) => /* @__PURE__ */ a(
-  "div",
-  {
-    "data-test-id": l,
-    className: p(e.wrapper, m),
-    children: [
-      (i || o || s) && /* @__PURE__ */ a("div", { className: e.heading, children: [
-        i && d && /* @__PURE__ */ r(g, { onClick: i, t: d }),
-        !i && o && /* @__PURE__ */ r(h, { title: o, subtitle: c }),
-        s && /* @__PURE__ */ r("div", { className: p(e.rightAddons, { [e.noCloser]: !!f || v === !1 }), children: s })
-      ] }),
-      !!i && o && /* @__PURE__ */ r(h, { title: o, subtitle: c }),
-      !!n && /* @__PURE__ */ r("div", { className: e.bottomAddons, children: n })
-    ]
-  }
-);
+}) => /* @__PURE__ */ a("div", { "data-test-id": l, className: p(e.wrapper, m), children: [
+  (i || o || s) && /* @__PURE__ */ a("div", { className: e.heading, children: [
+    i && d && /* @__PURE__ */ r(g, { onClick: i, t: d }),
+    !i && o && /* @__PURE__ */ r(h, { title: o, subtitle: c }),
+    s && /* @__PURE__ */ r(
+      "div",
+      {
+        className: p(e.rightAddons, {
+          [e.noCloser]: !!f || v === !1
+        }),
+        children: s
+      }
+    )
+  ] }),
+  !!i && o && /* @__PURE__ */ r(h, { title: o, subtitle: c }),
+  !!n && /* @__PURE__ */ r("div", { className: e.bottomAddons, children: n })
+] });
 export {
   u as SidepanelHeader
 };

package/dist/skeleton/component.js

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
-import i from "react";
-import s from "classnames";
+import i from "classnames";
+import s from "react";
 import o from "./index.module.css.js";
 const d = ({
   visible: e,
@@ -11,11 +11,11 @@ const d = ({
 }) => e ? /* @__PURE__ */ r(
   "div",
   {
-    className: s(o.component, { [o.animate]: m }, a),
+    className: i(o.component, { [o.animate]: m }, a),
     "data-test-id": n,
     children: t
   }
-) : /* @__PURE__ */ r(i.Fragment, { children: t });
+) : /* @__PURE__ */ r(s.Fragment, { children: t });
 export {
   d as Skeleton
 };

package/dist/space/component.d.ts

@@ -1,11 +1,11 @@
 import { default as React, ReactNode } from 'react';
-import { Direction, Align, Size } from './utils';
+import { Align, Direction, Size } from './utils';
 export type SpaceProps = {
     align?: Align;
     direction?: Direction;
     size?: Size | [Size, Size];
     className?: string;
-    children: ReactNode;
+    children?: ReactNode;
     dataTestId?: string;
     wrap?: boolean;
     divider?: string | ReactNode;

package/dist/space/component.js

@@ -1,70 +1,67 @@
-import { jsx as d } from "react/jsx-runtime";
-import z, { forwardRef as W, Children as w } from "react";
-import f from "classnames";
-import A from "./Item.js";
-import e from "./index.module.css.js";
-const I = {
+import { jsx as f } from "react/jsx-runtime";
+import d from "classnames";
+import W, { forwardRef as w, Children as A, isValidElement as I } from "react";
+import t from "./index.module.css.js";
+import k from "./item.js";
+const x = {
   s: 12,
   m: 16,
   l: 20
-}, F = (t) => typeof t == "string" ? I[t] : t || 0, M = W((t, h) => {
+}, F = (r) => typeof r == "string" ? x[r] : r || 0, E = w((r, u) => {
   const {
-    children: u,
+    children: h,
     className: N,
     align: n = "start",
     direction: o = "vertical",
-    size: r = "m",
-    wrap: i = !1,
+    size: a = "m",
+    wrap: l = !1,
     divider: g = !1,
-    fullWidth: l = !1
-  } = t, [C, c] = z.useMemo(
-    () => (Array.isArray(r) ? r : [r, r]).map(
-      (s) => F(s)
+    fullWidth: i = !1
+  } = r, [y, m] = W.useMemo(
+    () => (Array.isArray(a) ? a : [a, a]).map(
+      (e) => F(e)
     ),
-    [r]
-  ), a = w.toArray(u);
-  if (a.length === 0)
+    [a]
+  ), s = A.toArray(h);
+  if (s.length === 0)
     return null;
-  const y = e[o], S = e[n], v = f(
-    e.spaceContainer,
-    y,
+  const C = t[o], S = t[n], v = d(
+    t.spaceContainer,
+    C,
     {
       [S]: n,
-      [e.spaceContainerFullWidth]: l
+      [t.spaceContainerFullWidth]: i
     },
     N
-  ), m = f(e.spaceItem, {
-    [e.spaceItemFullWidth]: l
-  }), x = a.map((s, p) => (
-    /* eslint-disable react/no-array-index-key */
-    /* @__PURE__ */ d(
-      A,
-      {
-        className: m,
-        direction: o,
-        horizontalSize: C,
-        verticalSize: c,
-        length: a.length,
-        index: p,
-        wrap: i,
-        divider: g,
-        children: s
-      },
-      `${m}-${p}`
-    )
+  ), c = d(t.spaceItem, {
+    [t.spaceItemFullWidth]: i
+  }), z = s.map((e, p) => /* @__PURE__ */ f(
+    k,
+    {
+      className: c,
+      direction: o,
+      horizontalSize: y,
+      verticalSize: m,
+      length: s.length,
+      index: p,
+      wrap: l,
+      divider: g,
+      children: e
+    },
+    I(e) && e.key != null ? e.key : `${c}-${p}`
   ));
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ f(
     "div",
     {
       className: v,
       style: {
-        ...i && { flexWrap: "wrap", marginBottom: -c }
+        ...l && { flexWrap: "wrap", marginBottom: -m }
       },
-      ref: h,
-      children: x
+      ref: u,
+      children: z
     }
   );
 });
 export {
-  M as Space
+  E as Space
 };

package/dist/space/{Item.d.ts → item.d.ts}

@@ -5,11 +5,11 @@ export interface ItemProps {
     horizontalSize: number;
     verticalSize: number;
     length: number;
-    children: React.ReactNode;
+    children?: React.ReactNode;
     index: number;
     direction?: Direction;
     divider?: string | React.ReactNode;
     wrap?: boolean;
 }
-declare const Item: (props: ItemProps) => React.JSX.Element | null;
+declare const Item: (props: ItemProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Item;

package/dist/spinner/component.js

@@ -1,8 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
-import s from "classnames";
+import i from "classnames";
 import e from "./index.module.css.js";
 const m = ({
-  size: i = "s",
+  size: s = "s",
   id: t,
   view: n = "default",
   className: a,
@@ -12,17 +12,18 @@ const m = ({
   {
     id: t,
     "data-test-id": c,
-    className: s(e.spinnerWrapper, e[i], a),
+    className: i(e.spinnerWrapper, e[s], a),
     children: /* @__PURE__ */ r(
       "svg",
       {
-        className: s(e.spinner, e[i]),
+        className: i(e.spinner, e[s]),
         preserveAspectRatio: "xMinYMin meet",
         viewBox: "0 0 50 50",
+        "aria-hidden": "true",
         children: /* @__PURE__ */ r(
           "circle",
           {
-            className: s(e.path, e[n]),
+            className: i(e.path, e[n]),
             cx: "25",
             cy: "25",
             r: "20",

package/dist/stack/index.d.ts

@@ -1,2 +1,2 @@
-export * from './context';
 export * from './component';
+export * from './context';

package/dist/stack/index.js

@@ -1,7 +1,7 @@
-import { StackingContext as o, stackingOrder as e } from "./context.js";
-import { Stack as c } from "./component.js";
+import { Stack as o } from "./component.js";
+import { StackingContext as a, stackingOrder as c } from "./context.js";
 export {
-  c as Stack,
-  o as StackingContext,
-  e as stackingOrder
+  o as Stack,
+  a as StackingContext,
+  c as stackingOrder
 };

package/dist/stepped-progress-bar/components/step-bar.js

@@ -1,8 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
-import { memo as p } from "react";
-import s from "classnames";
+import p from "classnames";
+import { memo as s } from "react";
 import t from "../index.module.css.js";
-const c = p(({ isDone: o, view: m = "positive" }) => /* @__PURE__ */ r("span", { "data-test-id": o ? "on" : "off", className: s(t.bar, o && t[m]) }));
+const c = s(({ isDone: o, view: m = "positive" }) => /* @__PURE__ */ r("span", { "data-test-id": o ? "on" : "off", className: p(t.bar, o && t[m]) }));
 export {
   c as StepBar
 };

package/dist/stepped-progress-bar/index.d.ts

@@ -1,4 +1,4 @@
-import { default as React, FC } from 'react';
+import { FC } from 'react';
 import { SteppedProgressBarView } from './components/step-bar';
 export type SteppedProgressBarProps = {
     maxStep: number;
@@ -14,7 +14,7 @@ export declare const useSteps: ({ maxStep, initialStep, }: {
     initialStep?: number;
 }) => {
     step: number;
-    setStep: React.Dispatch<React.SetStateAction<number>>;
+    setStep: import('react').Dispatch<import('react').SetStateAction<number>>;
     nextStep: () => void;
     prevStep: () => void;
 };

package/dist/stepped-progress-bar/index.js

@@ -1,34 +1,49 @@
-import { jsxs as l, jsx as p } from "react/jsx-runtime";
-import { useState as d } from "react";
-import S from "classnames";
-import { Typography as f } from "../typography/component.js";
-import { StepBar as y } from "./components/step-bar.js";
+import { jsxs as S, jsx as p } from "react/jsx-runtime";
+import f from "classnames";
+import { useMemo as g, useState as y } from "react";
+import { Typography as v } from "../typography/component.js";
+import { StepBar as h } from "./components/step-bar.js";
 import n from "./index.module.css.js";
-const A = ({
+const T = ({
   maxStep: e,
-  description: s,
+  description: o,
   step: t = 0,
   view: r,
-  dataTestId: a,
-  className: i
+  dataTestId: i,
+  className: a
 }) => {
-  const c = e <= 0 ? 1 : e, m = typeof r == "string";
-  return /* @__PURE__ */ l("div", { className: S(n.component, i), "data-test-id": a, children: [
-    /* @__PURE__ */ p("div", { className: n.stepsContainer, children: Array.from(Array(c), (v, o) => /* @__PURE__ */ p(
-      y,
+  const m = e <= 0 ? 1 : e, l = typeof r == "string", d = g(
+    () => Array.from({ length: m }, (c, s) => ({
+      id: `progress-step-${s + 1}`,
+      stepIndex: s
+    })),
+    [m]
+  );
+  return /* @__PURE__ */ S("div", { className: f(n.component, a), "data-test-id": i, children: [
+    /* @__PURE__ */ p("div", { className: n.stepsContainer, children: d.map(({ id: c, stepIndex: s }) => /* @__PURE__ */ p(
+      h,
       {
-        isDone: o < t,
-        view: m ? r : r?.[o]
+        isDone: s < t,
+        view: l ? r : r?.[s]
       },
-      o
+      c
     )) }),
-    s && /* @__PURE__ */ p(f.Text, { color: "secondary", tag: "div", className: n.description, view: "primary-small", children: s })
+    o && /* @__PURE__ */ p(
+      v.Text,
+      {
+        color: "secondary",
+        tag: "div",
+        className: n.description,
+        view: "primary-small",
+        children: o
+      }
+    )
   ] });
-}, B = ({
+}, w = ({
   maxStep: e,
-  initialStep: s = 1
+  initialStep: o = 1
 }) => {
-  const [t, r] = d(s);
+  const [t, r] = y(o);
   return {
     step: t,
     setStep: r,
@@ -41,6 +56,6 @@ const A = ({
   };
 };
 export {
-  A as SteppedProgressBar,
-  B as useSteps
+  T as SteppedProgressBar,
+  w as useSteps
 };

package/dist/sticker/component.js

@@ -1,23 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
 import s from "classnames";
 import o from "./index.module.css.js";
-const a = ({
-  className: r,
-  text: e,
-  color: i,
-  dataTestId: m
-}) => /* @__PURE__ */ t(
-  "div",
-  {
-    className: s(
-      o.component,
-      o[i],
-      r
-    ),
-    "data-test-id": m,
-    children: /* @__PURE__ */ t("span", { children: e })
-  }
-);
+const a = ({ className: r, text: e, color: i, dataTestId: m }) => /* @__PURE__ */ t("div", { className: s(o.component, o[i], r), "data-test-id": m, children: /* @__PURE__ */ t("span", { children: e }) });
 export {
   a as Sticker
 };

package/dist/suffix-input/component.js

@@ -1,10 +1,10 @@
 import { jsx as a, jsxs as f } from "react/jsx-runtime";
-import { forwardRef as S, useState as v, useEffect as y, useCallback as A, Fragment as j } from "react";
 import m from "classnames";
+import { forwardRef as S, useState as v, useEffect as y, useCallback as A, Fragment as j } from "react";
 import { Input as w } from "../input/component.js";
-import { withSuffix as k } from "../with-suffix/component.js";
+import { withSuffix as $ } from "../with-suffix/component.js";
 import t from "./index.module.css.js";
-const B = k(w), z = S(
+const k = $(w), z = S(
   ({
     value: e,
     suffix: c,
@@ -16,34 +16,34 @@ const B = k(w), z = S(
     dataTestId: C,
     clear: N = !1,
     onChange: o,
-    onClear: r,
+    onClear: i,
     ...I
   }, b) => {
-    const [i, s] = v(e);
-    y(() => i !== e ? s(e) : () => {
-    }, [e]);
+    const [r, s] = v(e);
+    y(() => r !== e ? s(e) : () => {
+    }, [e, r]);
     const g = (n) => {
       const u = n.target.value;
       o && o(n, { value: Number.isInteger(+u) ? +u : void 0 });
     }, V = A(
       (n) => {
-        s(void 0), r && r(n);
+        s(void 0), i && i(n);
       },
-      [r]
+      [i]
     );
     return /* @__PURE__ */ a(
       "div",
       {
         className: m(t.container, {
           [t.bold]: p,
-          [t.filled]: !!i
+          [t.filled]: !!r
         }),
         children: /* @__PURE__ */ a(
-          B,
+          k,
           {
             ...I,
             suffix: /* @__PURE__ */ f(j, { children: [
-              i,
+              r,
               /* @__PURE__ */ f("span", { className: t.minorPartAndCurrency, children: [
                 " ",
                 c
@@ -53,7 +53,7 @@ const B = k(w), z = S(
             clear: N,
             required: h,
             placeholder: l,
-            value: Number.isInteger(e) ? "" + e : void 0,
+            value: Number.isInteger(e) ? `${e}` : void 0,
             type: "number",
             className: m(t.component, d),
             focusedClassName: x,

package/dist/switch/component.js

@@ -1,10 +1,10 @@
 import { jsxs as d, jsx as s } from "react/jsx-runtime";
-import { forwardRef as y, useRef as g, useCallback as j } from "react";
-import v from "react-merge-refs";
-import C from "classnames";
+import y from "classnames";
+import { forwardRef as g, useRef as j, useCallback as v } from "react";
+import C from "react-merge-refs";
 import { useFocus as F } from "../hooks/useFocus/index.js";
 import e from "./index.module.css.js";
-const E = y(
+const E = g(
   ({
     reversed: i = !1,
     checked: t = !1,
@@ -21,7 +21,7 @@ const E = y(
     dataTestId: N,
     ...b
   }, x) => {
-    const m = g(null), [R] = F(m, "keyboard"), w = j(
+    const m = j(null), [R] = F(m, "keyboard"), w = v(
       (f) => {
         o && o(f, { checked: f.target.checked, name: a });
       },
@@ -32,14 +32,14 @@ const E = y(
       /* @__PURE__ */ d(
         "label",
         {
-          className: C(e.component, e[p], k, {
+          className: y(e.component, e[p], k, {
             [e.disabled]: n,
             [e.checked]: t,
             [e.reversed]: i,
             [e.focused]: R,
             [e.block]: h
           }),
-          ref: v([m, x]),
+          ref: C([m, x]),
           children: [
             /* @__PURE__ */ s(
               "input",

package/dist/table/components/cells/index.d.ts

@@ -1,4 +1,3 @@
-import { default as React } from 'react';
 import { Query, QueryDTO, TableColumns } from '../../types';
 type Props<T extends object> = {
     columns: TableColumns<T>;
@@ -7,5 +6,5 @@ type Props<T extends object> = {
     addParam: ({ sort, order }: Pick<Query, 'order' | 'sort'>) => void;
     compact?: boolean;
 };
-export declare function Cells<T extends object>({ columns, sort, order, addParam, compact, }: Props<T>): React.JSX.Element;
+export declare function Cells<T extends object>({ columns, sort, order, addParam, compact, }: Props<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/table/components/empty-list/index.d.ts

@@ -1,4 +1,3 @@
-import { default as React } from 'react';
 export declare const EmptyList: ({ language }: {
     language: 'en' | 'de' | 'ru';
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/table/components/error/index.d.ts

@@ -1,4 +1,3 @@
-import { default as React } from 'react';
-export declare const Error: ({ language }: {
+export declare const TableError: ({ language }: {
     language: 'en' | 'de' | 'ru';
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/table/components/error/index.js

@@ -4,5 +4,5 @@ import { translate as e } from "../../languages/index.js";
 import i from "./index.module.css.js";
 const a = ({ language: o }) => /* @__PURE__ */ r("div", { className: i.empty_list, children: /* @__PURE__ */ r(t.Text, { color: "primary", view: "title", children: e(o)("error") }) });
 export {
-  a as Error
+  a as TableError
 };

package/dist/table/components/loading/index.d.ts

@@ -2,5 +2,5 @@ import { default as React } from 'react';
 type Props = {
     columnsLength: number;
 };
-export declare const Loading: React.MemoExoticComponent<({ columnsLength }: Props) => React.JSX.Element>;
+export declare const Loading: React.MemoExoticComponent<({ columnsLength }: Props) => import("react/jsx-runtime").JSX.Element>;
 export {};

package/dist/table/components/loading/index.js

@@ -1,15 +1,21 @@
 import { jsx as r } from "react/jsx-runtime";
-import t, { memo as a } from "react";
-import e from "classnames";
-import { TableCell as l } from "../cell/component.js";
-import m from "./index.module.css.js";
-const f = a(({ columnsLength: o }) => /* @__PURE__ */ r(t.Fragment, { children: new Array(5).fill(1).map(() => /* @__PURE__ */ r("tr", { className: e(m.row, m.tr), children: new Array(o).fill(1).map(() => /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(
-  "div",
-  {
-    className: m.td,
-    style: { width: `${Math.floor(Math.random() * 51) + 50}%` }
-  }
-) })) })) }));
+import l from "classnames";
+import s, { memo as c, useMemo as i } from "react";
+import { TableCell as n } from "../cell/component.js";
+import t from "./index.module.css.js";
+const d = ["r1", "r2", "r3", "r4", "r5"], M = c(({ columnsLength: e }) => {
+  const a = i(
+    () => Array.from({ length: e }, (o, m) => `col-${m + 1}`),
+    [e]
+  );
+  return /* @__PURE__ */ r(s.Fragment, { children: d.map((o) => /* @__PURE__ */ r("tr", { className: l(t.row, t.tr), children: a.map((m) => /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(
+    "div",
+    {
+      className: t.td,
+      style: { width: `${Math.floor(Math.random() * 51) + 50}%` }
+    }
+  ) }, `${o}-${m}`)) }, o)) });
+});
 export {
-  f as Loading
+  M as Loading
 };