@arthurzakharov/ui-kit 1.7.0 → 1.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/assets/bottom-bar-DE6QuEjZ.css +1 -0
  2. package/dist/assets/button-BjcertIq.css +1 -0
  3. package/dist/components/bottom-bar/bottom-bar.component.d.ts +5 -4
  4. package/dist/components/bottom-bar/bottom-bar.component.js +42 -30
  5. package/dist/controls/buttons/button/button.component.js +32 -32
  6. package/package.json +1 -1
  7. package/dist/assets/bottom-bar-B35eeXqR.css +0 -1
  8. package/dist/assets/button-quDWRhSN.css +0 -1
package/dist/assets/bottom-bar-DE6QuEjZ.css ADDED
@@ -0,0 +1 @@
1
+ ._BottomBar_1pxm3_1{background-color:var(--rm-ui-content-bg);flex-direction:column;justify-content:stretch}._Fixed_1pxm3_7{position:fixed;z-index:8000000;bottom:0;left:0;width:100%;padding:var(--rm-ui-padding-md) var(--rm-ui-padding-xl) var(--rm-ui-padding-lg)}._Static_1pxm3_16{position:static}._TopBlock_1pxm3_20{display:flex}._LeftBlock_1pxm3_24{flex-grow:1;display:flex;flex-direction:column;align-items:flex-start}._RightBlock_1pxm3_31{flex-grow:1;display:flex;flex-direction:column;align-items:flex-end;text-align:right}._Message_1pxm3_39{margin-top:var(--rm-ui-padding-sm);margin-bottom:var(--rm-ui-padding-md)}._Button_1pxm3_44{margin-top:var(--rm-ui-padding-md)}
package/dist/assets/button-BjcertIq.css ADDED
@@ -0,0 +1 @@
1
+ ._Button_2uv09_1{position:relative;box-sizing:border-box;border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:border-color var(--rm-ui-amimation-speed-primary) var(--rm-ui-amimation-cubic-primary),background-color var(--rm-ui-amimation-speed-primary) var(--rm-ui-amimation-cubic-primary)}._Button_2uv09_1:disabled{cursor:not-allowed;opacity:.75}._SM_2uv09_19{border-radius:var(--rm-ui-border-radius-sm);padding:var(--rm-ui-padding-xs) var(--rm-ui-padding-sm)}._LG_2uv09_24._Tertiary_2uv09_24{padding:calc(var(--rm-ui-padding-xs) - 1px) calc(var(--rm-ui-padding-sm) - 1px)}._SM_2uv09_19 ._Text_2uv09_28{font-weight:var(--rm-ui-font-weight-regular);font-size:var(--rm-ui-font-size-body-small);line-height:var(--rm-ui-line-height-body-small)}._MD_2uv09_34{border-radius:var(--rm-ui-border-radius-md);padding:var(--rm-ui-padding-sm) var(--rm-ui-padding-lg)}._MD_2uv09_34._Tertiary_2uv09_24{padding:calc(var(--rm-ui-padding-sm) - 1px) calc(var(--rm-ui-padding-lg) - 1px)}._LG_2uv09_24{border-radius:var(--rm-ui-border-radius-md);padding:var(--rm-ui-padding-sm) var(--rm-ui-padding-lg)}._LG_2uv09_24._Tertiary_2uv09_24{padding:calc(var(--rm-ui-padding-sm) - 1px) calc(var(--rm-ui-padding-lg) - 1px)}._MD_2uv09_34 ._Text_2uv09_28{font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body)}._LG_2uv09_24 ._Text_2uv09_28{font-size:var(--rm-ui-font-size-body-large);line-height:var(--rm-ui-line-height-body-large)}._Primary_2uv09_62{background-color:var(--rm-ui-next-btn-bg)}._Primary_2uv09_62:hover{background-color:var(--rm-ui-next-btn-bg-hover)}._Primary_2uv09_62 ._Text_2uv09_28,._Primary_2uv09_62 ._Info_2uv09_71{color:#fff}._Secondary_2uv09_75{border:1px solid transparent;background-color:transparent}._Secondary_2uv09_75:hover{border-color:var(--rm-ui-grey-400)}._Secondary_2uv09_75:hover ._Text_2uv09_28{color:var(--rm-ui-grey-400);border-color:var(--rm-ui-grey-400)}._Secondary_2uv09_75 ._Text_2uv09_28,._Secondary_2uv09_75 ._Info_2uv09_71{color:var(--rm-ui-color-text-secondary)}._Tertiary_2uv09_24{border:1px solid var(--rm-ui-grey-300);background-color:transparent}._Tertiary_2uv09_24:hover{border-color:var(--rm-ui-grey-200)}._Tertiary_2uv09_24:hover ._Text_2uv09_28{color:var(--rm-ui-grey-700)}._Tertiary_2uv09_24 ._Text_2uv09_28,._Tertiary_2uv09_24 ._Info_2uv09_71{color:var(--rm-ui-color-text-primary)}._Button_2uv09_1:not(._Loading_2uv09_111):not(:disabled):hover{cursor:pointer}._Button_2uv09_1:focus{outline-color:var(--rm-ui-color-focus)}._FullWidth_2uv09_119{width:100%}._Content_2uv09_123{display:flex;flex-direction:column}._Info_2uv09_71{flex-basis:100%;font-weight:var(--rm-ui-font-weight-regular);font-size:var(--rm-ui-font-size-body-small);line-height:calc(var(--rm-ui-line-height-body-small) - 2px)}._Text_2uv09_28{font-weight:var(--rm-ui-font-weight-medium);transition:color var(--rm-ui-amimation-speed-primary) var(--rm-ui-amimation-cubic-primary)}._Loader_2uv09_140{position:absolute}
package/dist/components/bottom-bar/bottom-bar.component.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import { TextProps } from '../text/text.component';
2
- import { Base, FontColor, FontSize, FontWeight } from '../../utils/types';
2
+ import { Base } from '../../utils/types';
3
3
  type BottomBarInfoItem<T> = {
4
4
  lined?: boolean;
5
- weight?: FontWeight;
6
- size?: FontSize;
7
- color?: FontColor;
5
+ weight?: TextProps['weight'];
6
+ size?: TextProps['size'];
7
+ color?: TextProps['color'];
8
+ align?: TextProps['align'];
8
9
  text: T;
9
10
  };
10
11
  type BottomBarButton = {
package/dist/components/bottom-bar/bottom-bar.component.js CHANGED
@@ -1,14 +1,14 @@
1
1
  import { jsxs as n, jsx as i } from "react/jsx-runtime";
2
- import { useRef as p, useEffect as B, useMemo as u } from "react";
3
- import b from "clsx";
4
- import { useResizeObserver as _, useWindowSize as k } from "usehooks-ts";
5
- import { Text as l } from "../text/text.component.js";
2
+ import { useRef as x, useEffect as B, useMemo as b } from "react";
3
+ import _ from "clsx";
4
+ import { useResizeObserver as f, useWindowSize as u } from "usehooks-ts";
5
+ import { Text as c } from "../text/text.component.js";
6
6
  import { Button as y } from "../../controls/buttons/button/button.component.js";
7
7
  import "../../controls/primitives/box/box.component.js";
8
- import { baseProps as h } from "../../utils/functions/functions.util.js";
8
+ import { baseProps as d } from "../../utils/functions/functions.util.js";
9
9
  import "lucide-react";
10
- import '../../assets/bottom-bar-B35eeXqR.css';const f = "_BottomBar_xd6ok_1", w = "_Fixed_xd6ok_7", R = "_Static_xd6ok_16", z = "_TopBlock_xd6ok_20", L = "_LeftBlock_xd6ok_24", v = "_RightBlock_xd6ok_31", N = "_Message_xd6ok_38", M = "_Button_xd6ok_43", r = {
11
- BottomBar: f,
10
+ import '../../assets/bottom-bar-DE6QuEjZ.css';const k = "_BottomBar_1pxm3_1", w = "_Fixed_1pxm3_7", R = "_Static_1pxm3_16", z = "_TopBlock_1pxm3_20", L = "_LeftBlock_1pxm3_24", v = "_RightBlock_1pxm3_31", N = "_Message_1pxm3_39", M = "_Button_1pxm3_44", r = {
11
+ BottomBar: k,
12
12
  Fixed: w,
13
13
  Static: R,
14
14
  TopBlock: z,
@@ -16,59 +16,71 @@ import '../../assets/bottom-bar-B35eeXqR.css';const f = "_BottomBar_xd6ok_1", w
16
16
  RightBlock: v,
17
17
  Message: N,
18
18
  Button: M
19
- }, s = (o, t) => o ? typeof o == "string" ? {
19
+ }, a = (o, t) => o ? typeof o == "string" ? {
20
20
  text: o,
21
21
  lined: !1,
22
22
  weight: t.weight || "regular",
23
23
  size: t.size || "body",
24
- color: t.color || "text-primary"
24
+ color: t.color || "text-primary",
25
+ align: t.align || "left"
25
26
  } : {
26
27
  text: o.text || /* @__PURE__ */ i("wbr", {}),
27
28
  lined: o.lined,
28
29
  weight: o.weight || t.weight || "regular",
29
30
  size: o.size || t.size || "body",
30
- color: o.color || t.color || "text-primary"
31
+ color: o.color || t.color || "text-primary",
32
+ align: o.align || t.align || "left"
31
33
  } : {
32
34
  text: /* @__PURE__ */ i("wbr", {}),
33
35
  lined: !1,
34
36
  weight: t.weight || "regular",
35
37
  size: t.size || "body",
36
- color: t.color || "text-primary"
37
- }, I = ({ button: o, info: t, message: c, staticFrom: x = 768, ...a }) => {
38
- const m = p(null), { height: d } = _({
39
- ref: m,
38
+ color: t.color || "text-primary",
39
+ align: t.align || "left"
40
+ }, I = ({ button: o, info: t, message: l, staticFrom: p = 768, ...s }) => {
41
+ const g = x(null), { height: m } = f({
42
+ ref: g,
40
43
  box: "border-box"
41
- }), { width: g } = k({ initializeWithValue: !0, debounceDelay: 150 });
42
- B(() => (d ? document.body.style.marginBottom = `${Math.round(d)}px` : document.body.style.removeProperty("margin-bottom"), () => {
44
+ }), { width: h } = u({ initializeWithValue: !0, debounceDelay: 150 });
45
+ B(() => (m ? document.body.style.marginBottom = `${Math.round(m)}px` : document.body.style.removeProperty("margin-bottom"), () => {
43
46
  document.body.style.removeProperty("margin-bottom");
44
- }), [d]);
45
- const e = u(
47
+ }), [m]);
48
+ const e = b(
46
49
  () => ({
47
- topLeft: s(t.topLeft, { weight: "medium", color: "text-primary" }),
48
- topRight: s(t.topRight, { weight: "medium", color: "text-primary" }),
49
- bottomLeft: s(t.bottomLeft, { weight: "regular", color: "text-secondary" }),
50
- bottomRight: s(t.bottomRight, { weight: "regular", color: "text-secondary" })
50
+ topLeft: a(t.topLeft, { weight: "medium", color: "text-primary", align: "left" }),
51
+ topRight: a(t.topRight, { weight: "medium", color: "text-primary", align: "right" }),
52
+ bottomLeft: a(t.bottomLeft, { weight: "regular", color: "text-secondary", align: "left" }),
53
+ bottomRight: a(t.bottomRight, { weight: "regular", color: "text-secondary", align: "right" })
51
54
  }),
52
55
  [t]
53
56
  );
54
57
  return /* @__PURE__ */ n(
55
58
  "div",
56
59
  {
57
- "data-testid": h(a, "data-testid", "bottom-bar"),
58
- ref: m,
59
- className: b(r.BottomBar, h(a, "className"), g >= x ? r.Static : r.Fixed),
60
+ "data-testid": d(s, "data-testid", "bottom-bar"),
61
+ ref: g,
62
+ className: _(r.BottomBar, d(s, "className"), h >= p ? r.Static : r.Fixed),
60
63
  children: [
61
64
  /* @__PURE__ */ n("div", { className: r.TopBlock, children: [
62
65
  /* @__PURE__ */ n("div", { className: r.LeftBlock, children: [
63
- /* @__PURE__ */ i(l, { ...e.topLeft, children: e.topLeft.text }),
64
- /* @__PURE__ */ i(l, { ...e.bottomLeft, children: e.bottomLeft.text })
66
+ /* @__PURE__ */ i(c, { ...e.topLeft, children: e.topLeft.text }),
67
+ /* @__PURE__ */ i(c, { ...e.bottomLeft, children: e.bottomLeft.text })
65
68
  ] }),
66
69
  /* @__PURE__ */ n("div", { className: r.RightBlock, children: [
67
- /* @__PURE__ */ i(l, { ...e.topRight, children: e.topRight.text }),
68
- /* @__PURE__ */ i(l, { ...e.bottomRight, children: e.bottomRight.text })
70
+ /* @__PURE__ */ i(c, { ...e.topRight, children: e.topRight.text }),
71
+ /* @__PURE__ */ i(c, { ...e.bottomRight, children: e.bottomRight.text })
69
72
  ] })
70
73
  ] }),
71
- c && !c.hidden && /* @__PURE__ */ i(l, { color: c.color || "text-secondary", align: c.align || "center", className: r.Message, children: c.text }),
74
+ l && !l.hidden && /* @__PURE__ */ i(
75
+ c,
76
+ {
77
+ size: "body-small",
78
+ color: l.color || "text-secondary",
79
+ align: l.align || "center",
80
+ className: r.Message,
81
+ children: l.text
82
+ }
83
+ ),
72
84
  /* @__PURE__ */ i(
73
85
  y,
74
86
  {
package/dist/controls/buttons/button/button.component.js CHANGED
@@ -1,45 +1,45 @@
1
1
  import { jsxs as s, jsx as e } from "react/jsx-runtime";
2
2
  import L from "clsx";
3
3
  import { FadeScale as h } from "../../../animations/fade-scale/fade-scale.component.js";
4
- import { Loader as M } from "../../../components/loader/loader.component.js";
5
- import { Content as S } from "../../../utils/content/content.component.js";
6
- import { withControl as C, baseProps as c } from "../../../utils/functions/functions.util.js";
7
- import '../../../assets/button-quDWRhSN.css';const T = "_Button_12lx1_1", B = "_SM_12lx1_14", F = "_LG_12lx1_19", N = "_Tertiary_12lx1_19", b = "_Text_12lx1_23", P = "_MD_12lx1_29", D = "_Primary_12lx1_57", G = "_Info_12lx1_66", I = "_Secondary_12lx1_70", W = "_Loading_12lx1_106", w = "_FullWidth_12lx1_114", $ = "_Content_12lx1_118", g = "_Loader_12lx1_135", t = {
8
- Button: T,
9
- SM: B,
10
- LG: F,
11
- Tertiary: N,
12
- Text: b,
13
- MD: P,
14
- Primary: D,
15
- Info: G,
16
- Secondary: I,
17
- Loading: W,
18
- FullWidth: w,
19
- Content: $,
20
- Loader: g
4
+ import { Loader as x } from "../../../components/loader/loader.component.js";
5
+ import { Content as M } from "../../../utils/content/content.component.js";
6
+ import { withControl as S, baseProps as c } from "../../../utils/functions/functions.util.js";
7
+ import '../../../assets/button-BjcertIq.css';const C = "_Button_2uv09_1", T = "_SM_2uv09_19", B = "_LG_2uv09_24", F = "_Tertiary_2uv09_24", N = "_Text_2uv09_28", b = "_MD_2uv09_34", P = "_Primary_2uv09_62", D = "_Info_2uv09_71", G = "_Secondary_2uv09_75", I = "_Loading_2uv09_111", W = "_FullWidth_2uv09_119", w = "_Content_2uv09_123", $ = "_Loader_2uv09_140", t = {
8
+ Button: C,
9
+ SM: T,
10
+ LG: B,
11
+ Tertiary: F,
12
+ Text: N,
13
+ MD: b,
14
+ Primary: P,
15
+ Info: D,
16
+ Secondary: G,
17
+ Loading: I,
18
+ FullWidth: W,
19
+ Content: w,
20
+ Loader: $
21
21
  }, H = ({
22
- text: l,
22
+ text: _,
23
23
  color: r = "primary",
24
24
  size: o = "md",
25
- type: _ = "button",
26
- disabled: i = !1,
25
+ type: i = "button",
26
+ disabled: u = !1,
27
27
  info: d = "",
28
28
  fullWidth: m = !1,
29
29
  loading: n = !1,
30
- preventDefault: x = !1,
30
+ preventDefault: l = !1,
31
31
  blurAfterClick: y = !1,
32
- onClick: u = () => {
32
+ onClick: f = () => {
33
33
  },
34
- onFocus: f,
35
- onBlur: p,
34
+ onFocus: p,
35
+ onBlur: v,
36
36
  ...a
37
37
  }) => /* @__PURE__ */ s(
38
38
  "button",
39
39
  {
40
40
  "data-testid": c(a, "data-testid", "button"),
41
- type: _,
42
- disabled: i || n,
41
+ type: i,
42
+ disabled: u || n,
43
43
  className: L(t.Button, c(a, "className"), {
44
44
  [t.SM]: o === "sm",
45
45
  [t.MD]: o === "md",
@@ -50,12 +50,12 @@ import '../../../assets/button-quDWRhSN.css';const T = "_Button_12lx1_1", B = "_
50
50
  [t.FullWidth]: m,
51
51
  [t.Loading]: n
52
52
  }),
53
- onClick: C(u, { prevent: x, blur: y }),
54
- onFocus: () => f?.(),
55
- onBlur: () => p?.(),
53
+ onClick: S(f, { prevent: l, blur: y }),
54
+ onFocus: () => p?.(),
55
+ onBlur: () => v?.(),
56
56
  children: [
57
57
  n && /* @__PURE__ */ e(
58
- M,
58
+ x,
59
59
  {
60
60
  size: "xs",
61
61
  color: (() => {
@@ -72,8 +72,8 @@ import '../../../assets/button-quDWRhSN.css';const T = "_Button_12lx1_1", B = "_
72
72
  }
73
73
  ),
74
74
  /* @__PURE__ */ s(h, { name: "content", keepMount: !0, condition: !n, className: t.Content, children: [
75
- /* @__PURE__ */ e("span", { className: t.Text, children: l }),
76
- /* @__PURE__ */ e(S, { className: t.Info, children: d })
75
+ /* @__PURE__ */ e("span", { className: t.Text, children: _ }),
76
+ /* @__PURE__ */ e(M, { className: t.Info, children: d })
77
77
  ] })
78
78
  ]
79
79
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@arthurzakharov/ui-kit",
3
3
  "private": false,
4
- "version": "1.7.0",
4
+ "version": "1.7.2",
5
5
  "type": "module",
6
6
  "main": "dist/main.js",
7
7
  "types": "dist/main.d.ts",
package/dist/assets/bottom-bar-B35eeXqR.css DELETED
@@ -1 +0,0 @@
1
- ._BottomBar_xd6ok_1{background-color:var(--rm-ui-content-bg);flex-direction:column;justify-content:stretch}._Fixed_xd6ok_7{position:fixed;z-index:8000000;bottom:0;left:0;width:100%;padding:var(--rm-ui-padding-md) var(--rm-ui-padding-xl) var(--rm-ui-padding-lg)}._Static_xd6ok_16{position:static}._TopBlock_xd6ok_20{display:flex}._LeftBlock_xd6ok_24{flex-grow:1;display:flex;flex-direction:column;align-items:flex-start}._RightBlock_xd6ok_31{flex-grow:1;display:flex;flex-direction:column;align-items:flex-end}._Message_xd6ok_38{margin-top:var(--rm-ui-padding-sm);margin-bottom:var(--rm-ui-padding-md)}._Button_xd6ok_43{margin-top:var(--rm-ui-padding-md)}
package/dist/assets/button-quDWRhSN.css DELETED
@@ -1 +0,0 @@
1
- ._Button_12lx1_1{position:relative;box-sizing:border-box;border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:border-color var(--rm-ui-amimation-speed-primary) var(--rm-ui-amimation-cubic-primary),background-color var(--rm-ui-amimation-speed-primary) var(--rm-ui-amimation-cubic-primary)}._SM_12lx1_14{border-radius:var(--rm-ui-border-radius-sm);padding:var(--rm-ui-padding-xs) var(--rm-ui-padding-sm)}._LG_12lx1_19._Tertiary_12lx1_19{padding:calc(var(--rm-ui-padding-xs) - 1px) calc(var(--rm-ui-padding-sm) - 1px)}._SM_12lx1_14 ._Text_12lx1_23{font-weight:var(--rm-ui-font-weight-regular);font-size:var(--rm-ui-font-size-body-small);line-height:var(--rm-ui-line-height-body-small)}._MD_12lx1_29{border-radius:var(--rm-ui-border-radius-md);padding:var(--rm-ui-padding-sm) var(--rm-ui-padding-lg)}._MD_12lx1_29._Tertiary_12lx1_19{padding:calc(var(--rm-ui-padding-sm) - 1px) calc(var(--rm-ui-padding-lg) - 1px)}._LG_12lx1_19{border-radius:var(--rm-ui-border-radius-md);padding:var(--rm-ui-padding-sm) var(--rm-ui-padding-lg)}._LG_12lx1_19._Tertiary_12lx1_19{padding:calc(var(--rm-ui-padding-sm) - 1px) calc(var(--rm-ui-padding-lg) - 1px)}._MD_12lx1_29 ._Text_12lx1_23{font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body)}._LG_12lx1_19 ._Text_12lx1_23{font-size:var(--rm-ui-font-size-body-large);line-height:var(--rm-ui-line-height-body-large)}._Primary_12lx1_57{background-color:var(--rm-ui-next-btn-bg)}._Primary_12lx1_57:hover{background-color:var(--rm-ui-next-btn-bg-hover)}._Primary_12lx1_57 ._Text_12lx1_23,._Primary_12lx1_57 ._Info_12lx1_66{color:#fff}._Secondary_12lx1_70{border:1px solid transparent;background-color:transparent}._Secondary_12lx1_70:hover{border-color:var(--rm-ui-grey-400)}._Secondary_12lx1_70:hover ._Text_12lx1_23{color:var(--rm-ui-grey-400);border-color:var(--rm-ui-grey-400)}._Secondary_12lx1_70 ._Text_12lx1_23,._Secondary_12lx1_70 ._Info_12lx1_66{color:var(--rm-ui-color-text-secondary)}._Tertiary_12lx1_19{border:1px solid var(--rm-ui-grey-300);background-color:transparent}._Tertiary_12lx1_19:hover{border-color:var(--rm-ui-grey-200)}._Tertiary_12lx1_19:hover ._Text_12lx1_23{color:var(--rm-ui-grey-700)}._Tertiary_12lx1_19 ._Text_12lx1_23,._Tertiary_12lx1_19 ._Info_12lx1_66{color:var(--rm-ui-color-text-primary)}._Button_12lx1_1:not(._Loading_12lx1_106):not(:disabled):hover{cursor:pointer}._Button_12lx1_1:focus{outline-color:var(--rm-ui-color-focus)}._FullWidth_12lx1_114{width:100%}._Content_12lx1_118{display:flex;flex-direction:column}._Info_12lx1_66{flex-basis:100%;font-weight:var(--rm-ui-font-weight-regular);font-size:var(--rm-ui-font-size-body-small);line-height:calc(var(--rm-ui-line-height-body-small) - 2px)}._Text_12lx1_23{font-weight:var(--rm-ui-font-weight-medium);transition:color var(--rm-ui-amimation-speed-primary) var(--rm-ui-amimation-cubic-primary)}._Loader_12lx1_135{position:absolute}