@arthurzakharov/ui-kit 1.0.40 → 1.0.42

package/dist/assets/button-CMUsPT4x.css

@@ -0,0 +1 @@
+._Button_md2b6_1{position:relative;box-sizing:border-box;border:none;display:flex;flex-direction:column;align-items:center;justify-content:center}._ButtonSizeSm_md2b6_11{border-radius:var(--rm-ui-border-radius-sm);padding:var(--rm-ui-padding-xs) var(--rm-ui-padding-sm)}._ButtonSizeSm_md2b6_11 ._ButtonText_md2b6_16{font-family:var(--rm-ui-font-family-regular),sans-serif;font-size:var(--rm-ui-font-size-body-small);line-height:var(--rm-ui-line-height-body-small)}._ButtonSizeMd_md2b6_22,._ButtonSizeLg_md2b6_23{border-radius:var(--rm-ui-border-radius-md);padding:var(--rm-ui-padding-sm) var(--rm-ui-padding-md)}._ButtonSizeMd_md2b6_22 ._ButtonText_md2b6_16{font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body)}._ButtonSizeLg_md2b6_23 ._ButtonText_md2b6_16{font-size:var(--rm-ui-font-size-body-large);line-height:var(--rm-ui-line-height-body-large)}._ButtonColorNext_md2b6_38{background-color:var(--rm-ui-next-btn-bg)}._ButtonColorNext_md2b6_38 ._ButtonText_md2b6_16{color:#fff}._ButtonColorPrevious_md2b6_46{background-color:transparent}._ButtonColorPrevious_md2b6_46 ._ButtonText_md2b6_16{color:var(--rm-ui-color-text-secondary)}._Button_md2b6_1:not(._ButtonLoading_md2b6_54):not(:disabled):hover{cursor:pointer}._Button_md2b6_1:focus{outline-color:var(--rm-ui-color-focus)}._ButtonFullWidth_md2b6_62{width:100%}._ButtonText_md2b6_16{font-family:var(--rm-ui-font-family-medium),sans-serif}._ButtonInfo_md2b6_70{font-family:var(--rm-ui-font-family-regular),sans-serif;font-size:var(--rm-ui-font-size-body-small);line-height:calc(var(--rm-ui-line-height-body-small) - 2px);color:#fff}._ButtonContent_md2b6_77{transition:opacity .2s ease-in-out .2s}._ButtonContentLoading_md2b6_81{opacity:0}._ButtonContentIdle_md2b6_85{opacity:1}._ButtonLoaderWrap_md2b6_89{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}._ButtonLoader_md2b6_89{stroke:#fff;animation:_spinPulse_md2b6_1 2s linear infinite;transform-origin:center}._ButtonLoader_md2b6_89 path{animation:_dash_md2b6_1 2s ease-in-out infinite}@keyframes _spinPulse_md2b6_1{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.25)}to{transform:rotate(360deg) scale(1)}}@keyframes _dash_md2b6_1{0%{stroke-opacity:1}50%{stroke-opacity:.6}to{stroke-opacity:1}}

package/dist/assets/sidebar-B3KPFpFU.css

@@ -0,0 +1 @@
+._SidebarTitle_1sscs_1,._SidebarButton_1sscs_2{padding-bottom:var(--rm-ui-padding-md)}._SidebarButton_1sscs_2{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}@media screen and (min-width:1200px){._SidebarTitle_1sscs_1,._SidebarButton_1sscs_2{padding-bottom:var(--rm-ui-padding-lg)}}

package/dist/components/control/components/button/button.component.d.ts

@@ -6,6 +6,7 @@ export interface ButtonProps extends PropsWithChildren {
     disabled?: boolean;
     info?: string;
     fullWidth?: boolean;
+    loading?: boolean;
     onClick?: () => void;
     onFocus?: () => void;
     onBlur?: () => void;

package/dist/components/control/components/button/button.component.js

@@ -1,53 +1,66 @@
-import { jsxs as d, jsx as u } from "react/jsx-runtime";
-import m from "clsx";
-import { containsHtml as p } from "../../utils/utils.js";
-import '../../../../assets/button-Bg4CwXVJ.css';const S = "_Button_1npja_1", x = "_ButtonSizeSm_1npja_10", z = "_ButtonText_1npja_15", f = "_ButtonSizeMd_1npja_21", j = "_ButtonSizeLg_1npja_22", C = "_ButtonColorNext_1npja_37", h = "_ButtonColorPrevious_1npja_45", N = "_ButtonFullWidth_1npja_61", g = "_ButtonInfo_1npja_69", t = {
-  Button: S,
-  ButtonSizeSm: x,
-  ButtonText: z,
-  ButtonSizeMd: f,
-  ButtonSizeLg: j,
-  ButtonColorNext: C,
-  ButtonColorPrevious: h,
-  ButtonFullWidth: N,
-  ButtonInfo: g
-}, L = (e) => {
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { Loader as L } from "lucide-react";
+import B from "clsx";
+import { Animation as b } from "../../../animation/animation.component.js";
+import { containsHtml as S } from "../../utils/utils.js";
+import '../../../../assets/button-CMUsPT4x.css';const f = "_Button_md2b6_1", g = "_ButtonSizeSm_md2b6_11", p = "_ButtonText_md2b6_16", x = "_ButtonSizeMd_md2b6_22", z = "_ButtonSizeLg_md2b6_23", h = "_ButtonColorNext_md2b6_38", N = "_ButtonColorPrevious_md2b6_46", I = "_ButtonLoading_md2b6_54", W = "_ButtonFullWidth_md2b6_62", v = "_ButtonInfo_md2b6_70", F = "_ButtonContent_md2b6_77", M = "_ButtonContentLoading_md2b6_81", T = "_ButtonContentIdle_md2b6_85", P = "_ButtonLoaderWrap_md2b6_89", y = "_ButtonLoader_md2b6_89", t = {
+  Button: f,
+  ButtonSizeSm: g,
+  ButtonText: p,
+  ButtonSizeMd: x,
+  ButtonSizeLg: z,
+  ButtonColorNext: h,
+  ButtonColorPrevious: N,
+  ButtonLoading: I,
+  ButtonFullWidth: W,
+  ButtonInfo: v,
+  ButtonContent: F,
+  ButtonContentLoading: M,
+  ButtonContentIdle: T,
+  ButtonLoaderWrap: P,
+  ButtonLoader: y
+}, q = (a) => {
   const {
-    children: s,
-    color: l,
-    size: n,
-    type: B,
-    disabled: i = !1,
-    info: o = "",
-    fullWidth: a = !1,
+    children: i,
+    color: d,
+    size: e,
+    type: s,
+    disabled: r = !1,
+    info: n = "",
+    fullWidth: _ = !1,
+    loading: u = !1,
     onClick: c,
-    onFocus: r,
-    onBlur: _
-  } = e;
-  return /* @__PURE__ */ d(
+    onFocus: m,
+    onBlur: C
+  } = a;
+  return /* @__PURE__ */ l(
     "button",
     {
       "data-testid": "button",
-      type: B,
-      disabled: i,
-      className: m(t.Button, {
-        [t.ButtonSizeSm]: n === "sm",
-        [t.ButtonSizeMd]: n === "md",
-        [t.ButtonSizeLg]: n === "lg",
-        [t.ButtonColorNext]: l === "next",
-        [t.ButtonColorPrevious]: l === "previous",
-        [t.ButtonFullWidth]: a
+      type: s,
+      disabled: r || u,
+      className: B(t.Button, {
+        [t.ButtonSizeSm]: e === "sm",
+        [t.ButtonSizeMd]: e === "md",
+        [t.ButtonSizeLg]: e === "lg",
+        [t.ButtonColorNext]: d === "next",
+        [t.ButtonColorPrevious]: d === "previous",
+        [t.ButtonFullWidth]: _,
+        [t.ButtonLoading]: u
       }),
       onClick: () => c?.call(null),
-      onFocus: () => r?.call(null),
-      onBlur: () => _?.call(null),
+      onFocus: () => m?.call(null),
+      onBlur: () => C?.call(null),
       children: [
-        /* @__PURE__ */ u("span", { className: t.ButtonText, children: s }),
-        p(o) && o ? /* @__PURE__ */ u("span", { className: t.ButtonInfo, dangerouslySetInnerHTML: { __html: o } }) : /* @__PURE__ */ u("span", { className: t.ButtonInfo, children: o })
+        /* @__PURE__ */ o("div", { className: t.ButtonLoaderWrap, children: /* @__PURE__ */ o(b.FadeScale, { name: "loader", condition: u, duration: 0.2, delay: 0.2, children: /* @__PURE__ */ o(L, { className: t.ButtonLoader }) }) }),
+        /* @__PURE__ */ l("div", { className: B(t.ButtonContent, u ? t.ButtonContentLoading : t.ButtonContentIdle), children: [
+          /* @__PURE__ */ o("span", { className: t.ButtonText, children: i }),
+          S(n) && n ? /* @__PURE__ */ o("span", { className: t.ButtonInfo, dangerouslySetInnerHTML: { __html: n } }) : /* @__PURE__ */ o("span", { className: t.ButtonInfo, children: n })
+        ] })
       ]
     }
   );
 };
 export {
-  L as Button
+  q as Button
 };

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

@@ -1,14 +1,15 @@
-export type { InfoProps } from './components/info/info.component';
-export type { DataBoardProps } from './components/data-board/data-board.component';
-export type { StepProps } from './components/step/step.component';
-export type { StepsProps } from './components/steps/steps.component';
-export type { UserProps } from './components/user/user.component';
-export declare const Sidebar: {
-    Board: (props: import('react').PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
-    DataBoard: (props: import('./sidebar.component').DataBoardProps) => import("react/jsx-runtime").JSX.Element;
-    Info: (props: import('./sidebar.component').InfoProps) => import("react/jsx-runtime").JSX.Element;
-    Line: () => import("react/jsx-runtime").JSX.Element;
-    Step: (props: import('./sidebar.component').StepProps) => import("react/jsx-runtime").JSX.Element;
-    Steps: (props: import('./sidebar.component').StepsProps) => import("react/jsx-runtime").JSX.Element;
-    User: (props: import('./sidebar.component').UserProps) => import("react/jsx-runtime").JSX.Element;
-};
+import { PropsWithChildren } from 'react';
+import { CertificationsProps } from '../certifications/certifications.component';
+import { InfoProps } from './components/info/info.component';
+import { StepsProps } from './components/steps/steps.component';
+import { UserProps } from './components/user/user.component';
+export interface SidebarProps extends PropsWithChildren {
+    isButtonVisible: boolean;
+    isUserOpen: boolean;
+    title: string;
+    steps: StepsProps['data'];
+    info: InfoProps['data'];
+    user: UserProps;
+    certifications: CertificationsProps['icons'];
+}
+export declare const Sidebar: (props: SidebarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/sidebar/sidebar.component.js

@@ -1,11 +1,44 @@
-import { Board as o } from "./components/board/board.component.js";
-import { DataBoard as r } from "./components/data-board/data-board.component.js";
-import { Info as m } from "./components/info/info.component.js";
-import { Line as t } from "./components/line/line.component.js";
-import { Step as p } from "./components/step/step.component.js";
-import { Steps as i } from "./components/steps/steps.component.js";
-import { User as f } from "./components/user/user.component.js";
-const b = { Board: o, DataBoard: r, Info: m, Line: t, Step: p, Steps: i, User: f };
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import { Animation as b } from "../animation/animation.component.js";
+import { Text as p } from "../text/text.component.js";
+import { Certifications as u } from "../certifications/certifications.component.js";
+import { Board as S } from "./components/board/board.component.js";
+import { DataBoard as h } from "./components/data-board/data-board.component.js";
+import { Line as r } from "./components/line/line.component.js";
+import { Info as B } from "./components/info/info.component.js";
+import { Steps as T } from "./components/steps/steps.component.js";
+import { User as _ } from "./components/user/user.component.js";
+import '../../assets/sidebar-B3KPFpFU.css';const x = "_SidebarTitle_1sscs_1", C = "_SidebarButton_1sscs_2", o = {
+  SidebarTitle: x,
+  SidebarButton: C
+}, L = (e) => {
+  const {
+    children: a,
+    isButtonVisible: n = !1,
+    isUserOpen: s = !1,
+    title: d = "Ihre Übersicht",
+    steps: c = [],
+    info: m = [],
+    certifications: l = [],
+    user: i
+  } = e;
+  return /* @__PURE__ */ f(S, { children: [
+    /* @__PURE__ */ t("div", { className: o.SidebarTitle, children: /* @__PURE__ */ t(p.SidebarTitle, { children: d }) }),
+    /* @__PURE__ */ t(T, { data: c }),
+    /* @__PURE__ */ t(r, {}),
+    /* @__PURE__ */ t(
+      h,
+      {
+        isUserOpen: s,
+        user: /* @__PURE__ */ t(_, { title: i.title, button: i.button, data: i.data, onClick: i.onClick }),
+        info: /* @__PURE__ */ t(B, { data: m })
+      }
+    ),
+    /* @__PURE__ */ t(r, {}),
+    /* @__PURE__ */ t(b.FadeScale, { name: "button", condition: n, duration: 0.2, delay: 0.1, children: /* @__PURE__ */ t("div", { className: o.SidebarButton, children: a }) }),
+    /* @__PURE__ */ t(u, { icons: l })
+  ] });
+};
 export {
-  b as Sidebar
+  L as Sidebar
 };

package/dist/main.d.ts

@@ -5,5 +5,5 @@ export { Footer, type FooterProps } from './components/footer/footer.component';
 export { Header, type HeaderProps } from './components/header/header.component';
 export { InfoPanel, type InfoPanelProps } from './components/info-panel/info-panel.component';
 export { Layout, type LayoutProps } from './components/layout/layout.component';
-export { Sidebar, type InfoProps, type DataBoardProps, type StepProps, type StepsProps, type UserProps, } from './components/sidebar/sidebar.component';
+export { Sidebar, type SidebarProps } from './components/sidebar/sidebar.component';
 export { Text } from './components/text/text.component';

package/package.json

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

package/dist/assets/button-Bg4CwXVJ.css

@@ -1 +0,0 @@
-._Button_1npja_1{box-sizing:border-box;border:none;display:flex;flex-direction:column;align-items:center;justify-content:center}._ButtonSizeSm_1npja_10{border-radius:var(--rm-ui-border-radius-sm);padding:var(--rm-ui-padding-xs) var(--rm-ui-padding-sm)}._ButtonSizeSm_1npja_10 ._ButtonText_1npja_15{font-family:var(--rm-ui-font-family-regular),sans-serif;font-size:var(--rm-ui-font-size-body-small);line-height:var(--rm-ui-line-height-body-small)}._ButtonSizeMd_1npja_21,._ButtonSizeLg_1npja_22{border-radius:var(--rm-ui-border-radius-md);padding:var(--rm-ui-padding-sm) var(--rm-ui-padding-md)}._ButtonSizeMd_1npja_21 ._ButtonText_1npja_15{font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body)}._ButtonSizeLg_1npja_22 ._ButtonText_1npja_15{font-size:var(--rm-ui-font-size-body-large);line-height:var(--rm-ui-line-height-body-large)}._ButtonColorNext_1npja_37{background-color:var(--rm-ui-next-btn-bg)}._ButtonColorNext_1npja_37 ._ButtonText_1npja_15{color:#fff}._ButtonColorPrevious_1npja_45{background-color:transparent}._ButtonColorPrevious_1npja_45 ._ButtonText_1npja_15{color:var(--rm-ui-color-text-secondary)}._Button_1npja_1:hover{cursor:pointer}._Button_1npja_1:focus{outline-color:var(--rm-ui-color-focus)}._ButtonFullWidth_1npja_61{width:100%}._ButtonText_1npja_15{font-family:var(--rm-ui-font-family-medium),sans-serif}._ButtonInfo_1npja_69{font-family:var(--rm-ui-font-family-regular),sans-serif;font-size:var(--rm-ui-font-size-body-small);line-height:calc(var(--rm-ui-line-height-body-small) - 2px);color:#fff}