@arthurzakharov/ui-kit 2.4.0 → 2.4.1

package/dist/assets/message-ByzpMD6r.css

@@ -0,0 +1 @@
+._Message_1591m_1{--message-icon-size: 24px;border-radius:var(--rm-ui-border-radius-md);padding:var(--rm-ui-padding-md);display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;justify-content:flex-start;gap:var(--rm-ui-padding-xs);font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body)}._Success_1591m_15{background-color:var(--rm-ui-message-success-secondary)}._Success_1591m_15 ._Icon_1591m_19{stroke:var(--rm-ui-message-success-primary)}._Question_1591m_23{background-color:var(--rm-ui-message-question-secondary)}._Question_1591m_23 ._Icon_1591m_19{stroke:var(--rm-ui-message-question-primary)}._Error_1591m_31{background-color:var(--rm-ui-message-error-secondary)}._Error_1591m_31 ._Icon_1591m_19{stroke:var(--rm-ui-message-error-primary)}._Info_1591m_39{background-color:var(--rm-ui-message-info-secondary)}._Info_1591m_39 ._Icon_1591m_19{stroke:var(--rm-ui-message-info-primary)}._Icon_1591m_19{width:var(--message-icon-size);height:var(--message-icon-size)}._Content_1591m_52{flex-basis:calc(100% - var(--message-icon-size) - var(--rm-ui-padding-xs));display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;gap:var(--rm-ui-padding-xxs)}._ContentFull_1591m_61{flex-basis:100%}._AlignLeft_1591m_65{align-items:flex-start}._AlignRight_1591m_69{align-items:flex-end}._AlignCenter_1591m_73{align-items:center}._Title_1591m_77{font-weight:var(--rm-ui-font-weight-medium)}._Text_1591m_81{font-weight:var(--rm-ui-font-weight-regular)}

package/dist/components/message/message.component.d.ts

@@ -1,13 +1,13 @@
 import { ReactNode } from 'react';
 import { Base } from '../../utils/types';
 type MessageType = 'success' | 'question' | 'error' | 'info';
+type MessageAlign = 'left' | 'right' | 'center';
 export interface MessageProps extends Base {
     type: MessageType;
     title: ReactNode;
     text: ReactNode;
+    withoutIcon?: boolean;
+    align?: MessageAlign;
 }
-/**
- * Displays a message with an icon, title, and text content based on the message type (`success`, `question`, `error`, or `info`).
- */
-export declare const Message: ({ type, title, text, ...base }: MessageProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Message: ({ type, title, text, withoutIcon, align, ...base }: MessageProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/message/message.component.js

@@ -1,40 +1,55 @@
-import { jsxs as o, jsx as t } from "react/jsx-runtime";
-import { Check as l, CircleQuestionMark as _, X as d, CircleAlert as m } from "lucide-react";
-import f from "clsx";
-import { baseProps as n } from "../../utils/functions/functions.util.js";
-import { Content as a } from "../../utils/content/content.component.js";
-import '../../assets/message-CgGyIv5e.css';const u = "_Message_fkc6l_1", k = "_Success_fkc6l_15", I = "_Icon_fkc6l_19", x = "_Question_fkc6l_23", C = "_Info_fkc6l_39", N = "_Content_fkc6l_52", g = "_Title_fkc6l_62", T = "_Text_fkc6l_66", s = {
-  Message: u,
-  Success: k,
-  Icon: I,
-  Question: x,
-  Error: "_Error_fkc6l_31",
-  Info: C,
-  Content: N,
-  Title: g,
-  Text: T
-}, E = ({ type: e, title: i, text: r, ...c }) => /* @__PURE__ */ o(
+import { jsxs as _, jsx as n } from "react/jsx-runtime";
+import { Check as g, CircleQuestionMark as d, X as f, CircleAlert as C } from "lucide-react";
+import l from "clsx";
+import { baseProps as a } from "../../utils/functions/functions.util.js";
+import { Content as u } from "../../utils/content/content.component.js";
+import '../../assets/message-ByzpMD6r.css';const A = "_Message_1591m_1", x = "_Success_1591m_15", T = "_Icon_1591m_19", I = "_Question_1591m_23", N = "_Info_1591m_39", M = "_Content_1591m_52", h = "_ContentFull_1591m_61", F = "_AlignLeft_1591m_65", Q = "_AlignRight_1591m_69", L = "_AlignCenter_1591m_73", R = "_Title_1591m_77", S = "_Text_1591m_81", e = {
+  Message: A,
+  Success: x,
+  Icon: T,
+  Question: I,
+  Error: "_Error_1591m_31",
+  Info: N,
+  Content: M,
+  ContentFull: h,
+  AlignLeft: F,
+  AlignRight: Q,
+  AlignCenter: L,
+  Title: R,
+  Text: S
+}, m = (t, o, c) => typeof t == "string" ? /* @__PURE__ */ n(u, { "data-testid": o, className: c, children: t }) : t, p = ({ type: t, title: o, text: c, withoutIcon: s, align: i = "left", ...r }) => /* @__PURE__ */ _(
   "div",
   {
-    "data-testid": n(c, "data-testid", "message"),
-    className: f(s.Message, n(c, "className"), {
-      [s.Success]: e === "success",
-      [s.Question]: e === "question",
-      [s.Error]: e === "error",
-      [s.Info]: e === "info"
+    "data-testid": a(r, "data-testid", "message"),
+    className: l(e.Message, a(r, "className"), {
+      [e.Success]: t === "success",
+      [e.Question]: t === "question",
+      [e.Error]: t === "error",
+      [e.Info]: t === "info"
     }),
     children: [
-      e === "success" && /* @__PURE__ */ t(l, { "data-testid": "success-icon", className: s.Icon }),
-      e === "question" && /* @__PURE__ */ t(_, { "data-testid": "question-icon", className: s.Icon }),
-      e === "error" && /* @__PURE__ */ t(d, { "data-testid": "error-icon", className: s.Icon }),
-      e === "info" && /* @__PURE__ */ t(m, { "data-testid": "info-icon", className: s.Icon }),
-      /* @__PURE__ */ o("div", { className: s.Content, children: [
-        /* @__PURE__ */ t(a, { "data-testid": "message-title", className: s.Title, children: i }),
-        /* @__PURE__ */ t(a, { "data-testid": "message-text", className: s.Text, children: r })
-      ] })
+      !s && t === "success" && /* @__PURE__ */ n(g, { "data-testid": "success-icon", className: e.Icon }),
+      !s && t === "question" && /* @__PURE__ */ n(d, { "data-testid": "question-icon", className: e.Icon }),
+      !s && t === "error" && /* @__PURE__ */ n(f, { "data-testid": "error-icon", className: e.Icon }),
+      !s && t === "info" && /* @__PURE__ */ n(C, { "data-testid": "info-icon", className: e.Icon }),
+      /* @__PURE__ */ _(
+        "div",
+        {
+          className: l(e.Content, {
+            [e.ContentFull]: s,
+            [e.AlignLeft]: i === "left",
+            [e.AlignRight]: i === "right",
+            [e.AlignCenter]: i === "center"
+          }),
+          children: [
+            m(o, "message-title", e.Title),
+            m(c, "message-text", e.Text)
+          ]
+        }
+      )
     ]
   }
 );
 export {
-  E as Message
+  p as Message
 };

package/package.json

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

package/dist/assets/message-CgGyIv5e.css

@@ -1 +0,0 @@
-._Message_fkc6l_1{--message-icon-size: 24px;border-radius:var(--rm-ui-border-radius-md);padding:var(--rm-ui-padding-md);display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;justify-content:flex-start;gap:var(--rm-ui-padding-xs);font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body)}._Success_fkc6l_15{background-color:var(--rm-ui-message-success-secondary)}._Success_fkc6l_15 ._Icon_fkc6l_19{stroke:var(--rm-ui-message-success-primary)}._Question_fkc6l_23{background-color:var(--rm-ui-message-question-secondary)}._Question_fkc6l_23 ._Icon_fkc6l_19{stroke:var(--rm-ui-message-question-primary)}._Error_fkc6l_31{background-color:var(--rm-ui-message-error-secondary)}._Error_fkc6l_31 ._Icon_fkc6l_19{stroke:var(--rm-ui-message-error-primary)}._Info_fkc6l_39{background-color:var(--rm-ui-message-info-secondary)}._Info_fkc6l_39 ._Icon_fkc6l_19{stroke:var(--rm-ui-message-info-primary)}._Icon_fkc6l_19{width:var(--message-icon-size);height:var(--message-icon-size)}._Content_fkc6l_52{flex-basis:calc(100% - var(--message-icon-size) - var(--rm-ui-padding-xs));display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:var(--rm-ui-padding-xxs)}._Title_fkc6l_62{font-weight:var(--rm-ui-font-weight-medium)}._Text_fkc6l_66{font-weight:var(--rm-ui-font-weight-regular)}