@arthurzakharov/ui-kit 1.7.0 → 1.7.1

package/dist/assets/bottom-bar-DE6QuEjZ.css

@@ -0,0 +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/components/bottom-bar/bottom-bar.component.d.ts

@@ -1,10 +1,11 @@
 import { TextProps } from '../text/text.component';
-import { Base, FontColor, FontSize, FontWeight } from '../../utils/types';
+import { Base } from '../../utils/types';
 type BottomBarInfoItem<T> = {
     lined?: boolean;
-    weight?: FontWeight;
-    size?: FontSize;
-    color?: FontColor;
+    weight?: TextProps['weight'];
+    size?: TextProps['size'];
+    color?: TextProps['color'];
+    align?: TextProps['align'];
     text: T;
 };
 type BottomBarButton = {

package/dist/components/bottom-bar/bottom-bar.component.js

@@ -1,14 +1,14 @@
 import { jsxs as n, jsx as i } from "react/jsx-runtime";
-import { useRef as p, useEffect as B, useMemo as u } from "react";
-import b from "clsx";
-import { useResizeObserver as _, useWindowSize as k } from "usehooks-ts";
-import { Text as l } from "../text/text.component.js";
+import { useRef as x, useEffect as B, useMemo as b } from "react";
+import _ from "clsx";
+import { useResizeObserver as f, useWindowSize as u } from "usehooks-ts";
+import { Text as c } from "../text/text.component.js";
 import { Button as y } from "../../controls/buttons/button/button.component.js";
 import "../../controls/primitives/box/box.component.js";
-import { baseProps as h } from "../../utils/functions/functions.util.js";
+import { baseProps as d } from "../../utils/functions/functions.util.js";
 import "lucide-react";
-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 = {
-  BottomBar: f,
+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 = {
+  BottomBar: k,
   Fixed: w,
   Static: R,
   TopBlock: z,
@@ -16,59 +16,71 @@ import '../../assets/bottom-bar-B35eeXqR.css';const f = "_BottomBar_xd6ok_1", w
   RightBlock: v,
   Message: N,
   Button: M
-}, s = (o, t) => o ? typeof o == "string" ? {
+}, a = (o, t) => o ? typeof o == "string" ? {
   text: o,
   lined: !1,
   weight: t.weight || "regular",
   size: t.size || "body",
-  color: t.color || "text-primary"
+  color: t.color || "text-primary",
+  align: t.align || "left"
 } : {
   text: o.text || /* @__PURE__ */ i("wbr", {}),
   lined: o.lined,
   weight: o.weight || t.weight || "regular",
   size: o.size || t.size || "body",
-  color: o.color || t.color || "text-primary"
+  color: o.color || t.color || "text-primary",
+  align: o.align || t.align || "left"
 } : {
   text: /* @__PURE__ */ i("wbr", {}),
   lined: !1,
   weight: t.weight || "regular",
   size: t.size || "body",
-  color: t.color || "text-primary"
-}, I = ({ button: o, info: t, message: c, staticFrom: x = 768, ...a }) => {
-  const m = p(null), { height: d } = _({
-    ref: m,
+  color: t.color || "text-primary",
+  align: t.align || "left"
+}, I = ({ button: o, info: t, message: l, staticFrom: p = 768, ...s }) => {
+  const g = x(null), { height: m } = f({
+    ref: g,
     box: "border-box"
-  }), { width: g } = k({ initializeWithValue: !0, debounceDelay: 150 });
-  B(() => (d ? document.body.style.marginBottom = `${Math.round(d)}px` : document.body.style.removeProperty("margin-bottom"), () => {
+  }), { width: h } = u({ initializeWithValue: !0, debounceDelay: 150 });
+  B(() => (m ? document.body.style.marginBottom = `${Math.round(m)}px` : document.body.style.removeProperty("margin-bottom"), () => {
     document.body.style.removeProperty("margin-bottom");
-  }), [d]);
-  const e = u(
+  }), [m]);
+  const e = b(
     () => ({
-      topLeft: s(t.topLeft, { weight: "medium", color: "text-primary" }),
-      topRight: s(t.topRight, { weight: "medium", color: "text-primary" }),
-      bottomLeft: s(t.bottomLeft, { weight: "regular", color: "text-secondary" }),
-      bottomRight: s(t.bottomRight, { weight: "regular", color: "text-secondary" })
+      topLeft: a(t.topLeft, { weight: "medium", color: "text-primary", align: "left" }),
+      topRight: a(t.topRight, { weight: "medium", color: "text-primary", align: "right" }),
+      bottomLeft: a(t.bottomLeft, { weight: "regular", color: "text-secondary", align: "left" }),
+      bottomRight: a(t.bottomRight, { weight: "regular", color: "text-secondary", align: "right" })
     }),
     [t]
   );
   return /* @__PURE__ */ n(
     "div",
     {
-      "data-testid": h(a, "data-testid", "bottom-bar"),
-      ref: m,
-      className: b(r.BottomBar, h(a, "className"), g >= x ? r.Static : r.Fixed),
+      "data-testid": d(s, "data-testid", "bottom-bar"),
+      ref: g,
+      className: _(r.BottomBar, d(s, "className"), h >= p ? r.Static : r.Fixed),
       children: [
         /* @__PURE__ */ n("div", { className: r.TopBlock, children: [
           /* @__PURE__ */ n("div", { className: r.LeftBlock, children: [
-            /* @__PURE__ */ i(l, { ...e.topLeft, children: e.topLeft.text }),
-            /* @__PURE__ */ i(l, { ...e.bottomLeft, children: e.bottomLeft.text })
+            /* @__PURE__ */ i(c, { ...e.topLeft, children: e.topLeft.text }),
+            /* @__PURE__ */ i(c, { ...e.bottomLeft, children: e.bottomLeft.text })
           ] }),
           /* @__PURE__ */ n("div", { className: r.RightBlock, children: [
-            /* @__PURE__ */ i(l, { ...e.topRight, children: e.topRight.text }),
-            /* @__PURE__ */ i(l, { ...e.bottomRight, children: e.bottomRight.text })
+            /* @__PURE__ */ i(c, { ...e.topRight, children: e.topRight.text }),
+            /* @__PURE__ */ i(c, { ...e.bottomRight, children: e.bottomRight.text })
           ] })
         ] }),
-        c && !c.hidden && /* @__PURE__ */ i(l, { color: c.color || "text-secondary", align: c.align || "center", className: r.Message, children: c.text }),
+        l && !l.hidden && /* @__PURE__ */ i(
+          c,
+          {
+            size: "body-small",
+            color: l.color || "text-secondary",
+            align: l.align || "center",
+            className: r.Message,
+            children: l.text
+          }
+        ),
         /* @__PURE__ */ i(
           y,
           {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arthurzakharov/ui-kit",
   "private": false,
-  "version": "1.7.0",
+  "version": "1.7.1",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",

package/dist/assets/bottom-bar-B35eeXqR.css

@@ -1 +0,0 @@
-._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)}