@arthurzakharov/ui-kit 1.2.8 → 1.2.9

package/dist/assets/loader-C0f3AvRU.css

@@ -0,0 +1 @@
+._Loader_11mao_1{display:inline-flex}._Padding_11mao_5{display:flex;justify-content:center}._XXS_11mao_10{padding:32px}._XS_11mao_14{padding:64px}._SM_11mao_18{padding:96px}._MD_11mao_22{padding:128px}._LG_11mao_26{padding:160px}._XL_11mao_30{padding:192px}._XXL_11mao_34{padding:224px}._XXXL_11mao_38{padding:256px}._Icon_11mao_42{animation:_spinPulse_11mao_1 2s linear infinite;transform-origin:center}._White_11mao_47{stroke:#fff}._Primary_11mao_51{stroke:var(--rm-ui-color-accent-primary)}._Secondary_11mao_55{stroke:var(--rm-ui-color-accent-secondary)}._Icon_11mao_42>path{animation:_dash_11mao_1 2s linear infinite}@keyframes _spinPulse_11mao_1{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.25)}to{transform:rotate(360deg) scale(1)}}@keyframes _dash_11mao_1{0%{stroke-opacity:1}50%{stroke-opacity:.5}to{stroke-opacity:1}}

package/dist/assets/user-panel-BJB6pJ70.css

@@ -0,0 +1 @@
+._User_12b2p_1{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:var(--rm-ui-padding-sm);font-weight:var(--rm-ui-font-weight-light);font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body);color:var(--rm-ui-color-text-secondary)}._Head_12b2p_13{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;font-weight:var(--rm-ui-font-weight-medium);font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body);color:var(--rm-ui-color-text-primary)}._Info_12b2p_25{display:inline-flex;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;justify-content:flex-start}

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

@@ -3,6 +3,7 @@ type LoaderColor = 'white' | 'primary' | 'secondary';
 export interface LoaderProps extends BaseProps {
     size: Size;
     color: LoaderColor;
+    padding?: Size;
 }
-export declare const Loader: ({ size, color, className }: LoaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Loader: ({ size, color, padding, className }: LoaderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/loader/loader.component.js

@@ -1,41 +1,72 @@
-import { jsx as s } from "react/jsx-runtime";
-import t from "clsx";
-import { Loader as c } from "lucide-react";
-import '../../assets/loader-BBn4lDjH.css';const n = "_Loader_2orye_1", i = "_White_2orye_6", m = "_Primary_2orye_10", y = "_Secondary_2orye_14", r = {
+import { jsxs as t, jsx as c } from "react/jsx-runtime";
+import s from "clsx";
+import { Loader as X } from "lucide-react";
+import '../../assets/loader-C0f3AvRU.css';const n = "_Loader_11mao_1", m = "_Padding_11mao_5", L = "_XXS_11mao_10", x = "_XS_11mao_14", i = "_SM_11mao_18", S = "_MD_11mao_22", d = "_LG_11mao_26", l = "_XL_11mao_30", y = "_XXL_11mao_34", u = "_XXXL_11mao_38", M = "_Icon_11mao_42", P = "_White_11mao_47", h = "_Primary_11mao_51", D = "_Secondary_11mao_55", o = {
   Loader: n,
-  White: i,
-  Primary: m,
-  Secondary: y
-}, u = ({ size: a, color: e, className: o = "" }) => /* @__PURE__ */ s(
-  c,
+  Padding: m,
+  XXS: L,
+  XS: x,
+  SM: i,
+  MD: S,
+  LG: d,
+  XL: l,
+  XXL: y,
+  XXXL: u,
+  Icon: M,
+  White: P,
+  Primary: h,
+  Secondary: D
+}, f = ({ size: e, color: r, padding: a, className: _ = "" }) => /* @__PURE__ */ t(
+  "div",
   {
-    size: (() => {
-      switch (a) {
-        case "xxs":
-          return 16;
-        case "xs":
-          return 24;
-        case "sm":
-          return 32;
-        case "md":
-          return 40;
-        case "lg":
-          return 48;
-        case "xl":
-          return 56;
-        case "xxl":
-          return 64;
-        case "xxxl":
-          return 72;
-      }
-    })(),
-    className: t(r.Loader, o, {
-      [r.White]: e === "white",
-      [r.Primary]: e === "primary",
-      [r.Secondary]: e === "secondary"
-    })
+    "data-testid": "loader",
+    className: s(o.Loader, _, {
+      [o.Padding]: !!a,
+      [o.XXS]: a === "xxs",
+      [o.XS]: a === "xs",
+      [o.SM]: a === "sm",
+      [o.MD]: a === "md",
+      [o.LG]: a === "lg",
+      [o.XL]: a === "xl",
+      [o.XXL]: a === "xxl",
+      [o.XXXL]: a === "xxxl"
+    }),
+    children: [
+      /* @__PURE__ */ c(
+        X,
+        {
+          "data-testid": "loader-icon",
+          size: (() => {
+            switch (e) {
+              case "xxs":
+                return 16;
+              case "xs":
+                return 24;
+              case "sm":
+                return 32;
+              case "md":
+                return 40;
+              case "lg":
+                return 48;
+              case "xl":
+                return 56;
+              case "xxl":
+                return 64;
+              case "xxxl":
+                return 72;
+            }
+          })(),
+          className: s(o.Icon, {
+            [o.White]: r === "white",
+            [o.Primary]: r === "primary",
+            [o.Secondary]: r === "secondary"
+          })
+        }
+      ),
+      " "
+    ]
   }
 );
 export {
-  u as Loader
+  f as Loader
 };

package/dist/components/user-panel/index.d.ts

@@ -0,0 +1 @@
+export { UserPanel, type UserPanelProps } from './user-panel.component';

package/dist/components/user-panel/index.js

@@ -0,0 +1,4 @@
+import { UserPanel as o } from "./user-panel.component.js";
+export {
+  o as UserPanel
+};

package/dist/components/user-panel/user-panel.component.d.ts

@@ -1,7 +1,8 @@
-export interface UserPanelProps {
-    title?: string;
-    button?: string;
-    data?: string[];
+import { BaseProps } from '../../utils/types';
+export interface UserPanelProps extends BaseProps {
+    title: string;
+    button: string;
+    data: string[];
     onClick: () => void;
 }
-export declare const UserPanel: (props: UserPanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const UserPanel: ({ title, button, data, onClick, className }: UserPanelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/user-panel/user-panel.component.js

@@ -1,29 +1,29 @@
-import { jsxs as n, jsx as s } from "react/jsx-runtime";
-import { Pencil as u } from "lucide-react";
-import '../../assets/user-panel-BEeXLR6v.css';const i = "_User_1kveo_1", d = "_UserHead_1kveo_9", m = "_UserTitle_1kveo_17", I = "_UserButton_1kveo_24", B = "_UserButtonText_1kveo_41", f = "_UserButtonIcon_1kveo_48", k = "_UserInfo_1kveo_55", v = "_UserInfoRaw_1kveo_63", e = {
-  User: i,
-  UserHead: d,
-  UserTitle: m,
-  UserButton: I,
-  UserButtonText: B,
-  UserButtonIcon: f,
-  UserInfo: k,
-  UserInfoRaw: v
-}, p = (o) => {
-  const { title: r = "Ihre Angaben", button: c = "Ändern", data: a = [], onClick: U } = o, l = (t) => {
-    t.preventDefault(), t.currentTarget.blur(), U();
-  };
-  return /* @__PURE__ */ n("div", { className: e.User, children: [
-    /* @__PURE__ */ n("div", { className: e.UserHead, children: [
-      /* @__PURE__ */ s("span", { className: e.UserTitle, dangerouslySetInnerHTML: { __html: r } }),
-      /* @__PURE__ */ n("button", { type: "button", className: e.UserButton, onClick: l, children: [
-        /* @__PURE__ */ s("span", { className: e.UserButtonText, children: c }),
-        /* @__PURE__ */ s(u, { className: e.UserButtonIcon })
-      ] })
-    ] }),
-    /* @__PURE__ */ s("ul", { className: e.UserInfo, children: a.map((t, _) => /* @__PURE__ */ s("li", { className: e.UserInfoRaw, children: t }, _)) })
-  ] });
-};
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { Pencil as d } from "lucide-react";
+import m from "clsx";
+import { C as p } from "../../control.component-Cq46ev8T.js";
+import '../../assets/user-panel-BJB6pJ70.css';const f = "_Head_12b2p_13", u = "_Info_12b2p_25", r = {
+  Head: f,
+  Info: u
+}, I = ({ title: n, button: o, data: i, onClick: s, className: a = "" }) => /* @__PURE__ */ t("div", { "data-testid": "user-panel", className: m(r.UserPanel, a), children: [
+  /* @__PURE__ */ t("div", { className: r.Head, children: [
+    /* @__PURE__ */ e("span", { "data-testid": "user-panel-title", children: n }),
+    /* @__PURE__ */ e(
+      p.ButtonText,
+      {
+        preventDefault: !0,
+        blurAfterClick: !0,
+        icon: /* @__PURE__ */ e(d, {}),
+        iconPosition: "right",
+        size: "md",
+        color: "primary",
+        onClick: s,
+        children: o
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e("ul", { className: r.Info, children: i.map((l, c) => /* @__PURE__ */ e("li", { children: l }, c)) })
+] });
 export {
-  p as UserPanel
+  I as UserPanel
 };

package/dist/main.d.ts

@@ -16,7 +16,6 @@ export { Information, type InformationProps } from './components/information/inf
 export { Layout, type LayoutProps } from './components/layout/layout.component';
 export { Line } from './components/line/line.component';
 export { Loader, type LoaderProps } from './components/loader';
-export { LoadingBlock } from './components/loading-block/loading-block.component';
 export { MainAttachment, type MainAttachmentProps } from './components/main-attachment/main-attachment.component';
 export { Message, type MessageProps } from './components/message';
 export { MessageBlock, type MessageBlockProps } from './components/message-block/message-block.component';
@@ -26,5 +25,5 @@ export { Sidebar, type SidebarProps } from './components/sidebar/sidebar.compone
 export { Signature, type SignatureProps, type SignatureMode } from './components/signature/signature.component';
 export { Svg, type SvgProps } from './components/svg/svg.component';
 export { Text } from './components/text/text.component';
-export { UserPanel, type UserPanelProps } from './components/user-panel/user-panel.component';
+export { UserPanel, type UserPanelProps } from './components/user-panel';
 export { Warranty, type WarrantyProps } from './components/warranty';

package/dist/main.js

@@ -5,29 +5,28 @@ import { Certifications as a } from "./components/certifications/certifications.
 import { C as i } from "./control.component-Cq46ev8T.js";
 import { DataProtectedLabel as s } from "./components/data-protected-label/data-protected-label.component.js";
 import { Dialog as d } from "./components/dialog/dialog.component.js";
-import { DialogArticle as L } from "./components/dialog-article/dialog-article.component.js";
-import { Expenses as B } from "./components/expenses/expenses.component.js";
-import { Flex as P } from "./components/flex/flex.component.js";
-import { Footer as u } from "./components/footer/footer.component.js";
+import { DialogArticle as A } from "./components/dialog-article/dialog-article.component.js";
+import { Expenses as L } from "./components/expenses/expenses.component.js";
+import { Flex as b } from "./components/flex/flex.component.js";
+import { Footer as y } from "./components/footer/footer.component.js";
 import { FormRow as C } from "./components/form-row/form-row.component.js";
 import { Header as M } from "./components/header/header.component.js";
-import { InfoPanel as k } from "./components/info-panel/info-panel.component.js";
-import { Information as T } from "./components/information/information.component.js";
+import { InfoPanel as I } from "./components/info-panel/info-panel.component.js";
+import { Information as h } from "./components/information/information.component.js";
 import { Layout as v } from "./components/layout/layout.component.js";
 import { Line as E } from "./components/line/line.component.js";
 import { Loader as N } from "./components/loader/loader.component.js";
-import { LoadingBlock as U } from "./components/loading-block/loading-block.component.js";
-import { MainAttachment as j } from "./components/main-attachment/main-attachment.component.js";
-import { Message as z } from "./components/message/message.component.js";
-import { MessageBlock as J } from "./components/message-block/message-block.component.js";
-import { NotFound as O } from "./components/not-found/not-found.component.js";
-import { Payment as V } from "./components/payment/payment.component.js";
-import { Sidebar as Y } from "./components/sidebar/sidebar.component.js";
-import { Signature as _ } from "./components/signature/signature.component.js";
-import { Svg as oo } from "./components/svg/svg.component.js";
-import { Text as eo } from "./components/text/text.component.js";
-import { UserPanel as mo } from "./components/user-panel/user-panel.component.js";
-import { Warranty as xo } from "./components/warranty/warranty.component.js";
+import { MainAttachment as U } from "./components/main-attachment/main-attachment.component.js";
+import { Message as j } from "./components/message/message.component.js";
+import { MessageBlock as z } from "./components/message-block/message-block.component.js";
+import { NotFound as J } from "./components/not-found/not-found.component.js";
+import { Payment as O } from "./components/payment/payment.component.js";
+import { Sidebar as V } from "./components/sidebar/sidebar.component.js";
+import { Signature as Y } from "./components/signature/signature.component.js";
+import { Svg as _ } from "./components/svg/svg.component.js";
+import { Text as oo } from "./components/text/text.component.js";
+import { UserPanel as eo } from "./components/user-panel/user-panel.component.js";
+import { Warranty as mo } from "./components/warranty/warranty.component.js";
 import './assets/main-BK_1RcKG.css';export {
   e as AccordionTable,
   m as Animation,
@@ -36,27 +35,26 @@ import './assets/main-BK_1RcKG.css';export {
   i as Control,
   s as DataProtectedLabel,
   d as Dialog,
-  L as DialogArticle,
-  B as Expenses,
-  P as Flex,
-  u as Footer,
+  A as DialogArticle,
+  L as Expenses,
+  b as Flex,
+  y as Footer,
   C as FormRow,
   M as Header,
-  k as InfoPanel,
-  T as Information,
+  I as InfoPanel,
+  h as Information,
   v as Layout,
   E as Line,
   N as Loader,
-  U as LoadingBlock,
-  j as MainAttachment,
-  z as Message,
-  J as MessageBlock,
-  O as NotFound,
-  V as Payment,
-  Y as Sidebar,
-  _ as Signature,
-  oo as Svg,
-  eo as Text,
-  mo as UserPanel,
-  xo as Warranty
+  U as MainAttachment,
+  j as Message,
+  z as MessageBlock,
+  J as NotFound,
+  O as Payment,
+  V as Sidebar,
+  Y as Signature,
+  _ as Svg,
+  oo as Text,
+  eo as UserPanel,
+  mo as Warranty
 };

package/dist/utils/functions/functions.util.d.ts

@@ -1,3 +1,4 @@
+import { SyntheticEvent } from 'react';
 /**
  * Type guard: checks whether value is a string
  */
@@ -12,3 +13,9 @@ export declare function containsHtml(value: string): boolean;
  * Checks if unknown value is a string containing HTML markup
  */
 export declare function isHtmlString(value: unknown): value is string;
+type ControlAction = 'prevent' | 'stop' | 'blur';
+/**
+ * A higher-order function to wrap event handlers with common event control logic.
+ */
+export declare const withControl: <E extends SyntheticEvent<HTMLElement>>(handler: (e: E) => void, ...actions: ControlAction[]) => (e: E) => void;
+export {};

package/dist/utils/functions/functions.util.js

@@ -1,14 +1,18 @@
-function n(t) {
+function e(t) {
   return typeof t == "string";
 }
 function i(t) {
   return /<\/?[a-z][\s\S]*>/i.test(t);
 }
-function e(t) {
-  return n(t) && i(t);
+function o(t) {
+  return e(t) && i(t);
 }
+const u = (t, ...n) => (r) => {
+  n.includes("prevent") && r.preventDefault(), n.includes("stop") && r.stopPropagation(), n.includes("blur") && r.currentTarget.blur(), t(r);
+};
 export {
   i as containsHtml,
-  e as isHtmlString,
-  n as isString
+  o as isHtmlString,
+  e as isString,
+  u as withControl
 };

package/dist/utils/functions/index.js

@@ -1,6 +1,7 @@
-import { containsHtml as n, isHtmlString as r, isString as m } from "./functions.util.js";
+import { containsHtml as n, isHtmlString as o, isString as r, withControl as l } from "./functions.util.js";
 export {
   n as containsHtml,
-  r as isHtmlString,
-  m as isString
+  o as isHtmlString,
+  r as isString,
+  l as withControl
 };

package/package.json

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

package/dist/assets/loader-BBn4lDjH.css

@@ -1 +0,0 @@
-._Loader_2orye_1{animation:_spinPulse_2orye_1 2s linear infinite;transform-origin:center}._White_2orye_6{stroke:#fff}._Primary_2orye_10{stroke:var(--rm-ui-color-accent-primary)}._Secondary_2orye_14{stroke:var(--rm-ui-color-accent-secondary)}._Loader_2orye_1>path{animation:_dash_2orye_1 2s linear infinite}@keyframes _spinPulse_2orye_1{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.25)}to{transform:rotate(360deg) scale(1)}}@keyframes _dash_2orye_1{0%{stroke-opacity:1}50%{stroke-opacity:.5}to{stroke-opacity:1}}

package/dist/assets/loading-block-al0S6J3z.css

@@ -1 +0,0 @@
-._LoadingBlock_1h5nh_1{height:var(--rm-ui-loading-screen-height);display:flex;align-items:center;justify-content:center;background-color:transparent}

package/dist/assets/user-panel-BEeXLR6v.css

@@ -1 +0,0 @@
-._User_1kveo_1{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:var(--rm-ui-padding-sm)}._UserHead_1kveo_9{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between}._UserTitle_1kveo_17{font-weight:var(--rm-ui-font-weight-medium);font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body);color:var(--rm-ui-color-text-primary)}._UserButton_1kveo_24{padding:0;border:none;background-color:transparent;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:var(--rm-ui-padding-xs)}._UserButton_1kveo_24:focus-visible{outline-offset:2px;outline-color:var(--rm-ui-color-focus)}._UserButtonText_1kveo_41{font-weight:var(--rm-ui-font-weight-medium);font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body);color:var(--rm-ui-color-text-primary)}._UserButtonIcon_1kveo_48{width:24px;height:24px;stroke-width:2px;stroke:var(--rm-ui-color-text-primary)}._UserInfo_1kveo_55{display:inline-flex;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;justify-content:flex-start}._UserInfoRaw_1kveo_63{font-weight:var(--rm-ui-font-weight-light);font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body);color:var(--rm-ui-color-text-secondary)}

package/dist/components/loading-block/loading-block.component.d.ts

@@ -1 +0,0 @@
-export declare const LoadingBlock: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/loading-block/loading-block.component.js

@@ -1,8 +0,0 @@
-import { jsx as o } from "react/jsx-runtime";
-import { Loader as c } from "../loader/loader.component.js";
-import '../../assets/loading-block-al0S6J3z.css';const n = "_LoadingBlock_1h5nh_1", r = {
-  LoadingBlock: n
-}, l = () => /* @__PURE__ */ o("div", { className: r.LoadingBlock, children: /* @__PURE__ */ o(c, { size: "lg", color: "primary" }) });
-export {
-  l as LoadingBlock
-};