@arthurzakharov/ui-kit 1.4.5 → 1.4.7

package/dist/assets/form-row-tmjvl6nb.css

@@ -0,0 +1 @@
+._FormRow_f70c8_1{display:flex;flex-direction:column;align-items:stretch}._XXS_f70c8_7{gap:var(--rm-ui-padding-xxs)}._XS_f70c8_11{gap:var(--rm-ui-padding-xs)}._SM_f70c8_15{gap:var(--rm-ui-padding-sm)}._MD_f70c8_19{gap:var(--rm-ui-padding-md)}._LG_f70c8_23,._XL_f70c8_27{gap:var(--rm-ui-padding-xl)}._XXL_f70c8_31{gap:var(--rm-ui-padding-xxl)}._XXXL_f70c8_35{gap:var(--rm-ui-padding-xxxl)}._Child_f70c8_39{flex-grow:1}@media screen and (min-width:768px){._FormRow_f70c8_1{flex-direction:row}}

package/dist/assets/sidebar-ODZFjsSe.css

@@ -0,0 +1 @@
+._Sidebar_13hlr_1{display:block}._Board_13hlr_5{border-radius:var(--rm-ui-border-radius-md);padding:var(--rm-ui-padding-lg);background-color:var(--rm-ui-sidebar-bg)}._SidebarTitle_13hlr_11,._SidebarButton_13hlr_12{padding-bottom:var(--rm-ui-padding-md)}._Steps_13hlr_16,._Info_13hlr_17{display:flex;flex-direction:column;align-items:flex-start;gap:var(--rm-ui-padding-sm)}._Step_13hlr_16{display:inline-flex;align-items:center;gap:var(--rm-ui-padding-xs)}._InfoRow_13hlr_30{display:inline-flex;align-items:center;justify-content:space-between;gap:var(--rm-ui-padding-xs)}._SidebarButton_13hlr_12{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}@media screen and (min-width:1024px){._Board_13hlr_5{padding:var(--rm-ui-padding-xl)}}@media screen and (min-width:1200px){._Board_13hlr_5{padding:var(--rm-ui-padding-xxl)}._SidebarTitle_13hlr_11,._SidebarButton_13hlr_12{padding-bottom:var(--rm-ui-padding-lg)}}

package/dist/components/form-row/form-row.component.d.ts

@@ -1,6 +1,6 @@
-import { Base, Size } from '../../utils/types';
 import { PropsWithChildren } from 'react';
+import { Base, Size } from '../../utils/types';
 export interface FormRowProps extends PropsWithChildren<Base> {
     gap: Size;
 }
-export declare const FormRow: (props: FormRowProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const FormRow: ({ children, gap, ...base }: FormRowProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/form-row/form-row.component.js

@@ -1,10 +1,46 @@
 import { jsx as e } from "react/jsx-runtime";
-import { Children as n } from "react";
-import { Flex as i } from "../flex/flex.component.js";
-const u = (o) => {
-  const { children: r, gap: t = "sm" } = o;
-  return n.count(r) === 0 ? null : /* @__PURE__ */ e(i, { direction: "column", align: "stretch", grow: "equal", gap: t, changeDirectionAfter: "tablet", children: r });
-};
+import { Children as r, isValidElement as f, cloneElement as L } from "react";
+import _ from "clsx";
+import { baseProps as n } from "../../utils/functions/functions.util.js";
+import '../../assets/form-row-tmjvl6nb.css';const i = "_FormRow_f70c8_1", x = "_XXS_f70c8_7", S = "_XS_f70c8_11", d = "_SM_f70c8_15", M = "_MD_f70c8_19", a = "_LG_f70c8_23", u = "_XL_f70c8_27", w = "_XXL_f70c8_31", C = "_XXXL_f70c8_35", F = "_Child_f70c8_39", o = {
+  FormRow: i,
+  XXS: x,
+  XS: S,
+  SM: d,
+  MD: M,
+  LG: a,
+  XL: u,
+  XXL: w,
+  XXXL: C,
+  Child: F
+}, G = ({ children: t, gap: X = "sm", ...c }) => r.count(t) === 0 ? null : /* @__PURE__ */ e(
+  "div",
+  {
+    "data-testid": n(c, "data-testid", "form-row"),
+    className: _(o.FormRow, n(c, "className"), {
+      [o.XXS]: X === "xxs",
+      [o.XS]: X === "xs",
+      [o.SM]: X === "sm",
+      [o.MD]: X === "md",
+      [o.LG]: X === "lg",
+      [o.XL]: X === "xl",
+      [o.XXL]: X === "xxl",
+      [o.XXXL]: X === "xxxl"
+    }),
+    children: r.map(t, (s) => {
+      if (!f(s)) return null;
+      const { className: m, children: l } = s.props;
+      return L(
+        s,
+        {
+          ...s.props,
+          className: _(m, o.Child)
+        },
+        l
+      );
+    })
+  }
+);
 export {
-  u as FormRow
+  G as FormRow
 };

package/dist/components/form-row/index.d.ts

@@ -0,0 +1 @@
+export { FormRow } from './form-row.component';

package/dist/components/form-row/index.js

@@ -0,0 +1,4 @@
+import { FormRow as m } from "./form-row.component.js";
+export {
+  m as FormRow
+};

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

@@ -0,0 +1 @@
+export { Sidebar, type SidebarProps } from './sidebar.component';

package/dist/components/sidebar/index.js

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

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

@@ -1,16 +1,21 @@
 import { PropsWithChildren } from 'react';
 import { CertificationsProps } from '../certifications';
 import { UserPanelProps } from '../user-panel';
-import { InfoProps } from './components/info/info.component';
-import { StepsProps } from './components/steps/steps.component';
+import { State } from '../../controls/utils/types';
 import { Base } from '../../utils/types';
+type SidebarStep = {
+    state: State;
+    text: string;
+};
+type SidebarInfo = [string, string];
 export interface SidebarProps extends PropsWithChildren<Base> {
     isButtonVisible: boolean;
     isUserOpen: boolean;
     title: string;
-    steps: StepsProps['data'];
-    info: InfoProps['data'];
+    steps: SidebarStep[];
+    info: SidebarInfo[];
     user: UserPanelProps;
     certifications: CertificationsProps['icons'];
 }
-export declare const Sidebar: ({ children, isButtonVisible, isUserOpen, title, steps, info, certifications, user, }: SidebarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Sidebar: ({ children, isButtonVisible, isUserOpen, title, steps, info, certifications, user, ...base }: SidebarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,37 +1,66 @@
-import { jsxs as e, jsx as t } from "react/jsx-runtime";
-import { AnimationFadeScale as r } from "../../animations/animation-fade-scale/animation-fade-scale.component.js";
-import { Certifications as f } from "../certifications/certifications.component.js";
-import { Line as o } from "../line/line.component.js";
-import { Text as p } from "../text/text.component.js";
-import { UserPanel as S } from "../user-panel/user-panel.component.js";
-import { Board as h } from "./components/board/board.component.js";
-import { Info as u } from "./components/info/info.component.js";
-import { Steps as _ } from "./components/steps/steps.component.js";
-import '../../assets/sidebar-B3KPFpFU.css';const B = "_SidebarTitle_1sscs_1", T = "_SidebarButton_1sscs_2", a = {
-  SidebarTitle: B,
-  SidebarButton: T
-}, F = ({
-  children: n,
-  isButtonVisible: d = !1,
-  isUserOpen: s = !1,
-  title: m = "Ihre Übersicht",
-  steps: c = [],
-  info: l = [],
-  certifications: b = [],
-  user: i
-}) => /* @__PURE__ */ e(h, { children: [
-  /* @__PURE__ */ t(p, { preset: "sidebar-title", className: a.SidebarTitle, children: m }),
-  /* @__PURE__ */ t(_, { data: c }),
-  /* @__PURE__ */ t(o, {}),
-  /* @__PURE__ */ t(u, { data: l }),
-  /* @__PURE__ */ t(o, {}),
-  /* @__PURE__ */ e(r, { name: "user", condition: s, children: [
-    /* @__PURE__ */ t(S, { title: i.title, button: i.button, data: i.data, onClick: i.onClick }),
-    /* @__PURE__ */ t(o, {})
-  ] }),
-  /* @__PURE__ */ t(r, { name: "button", condition: d, duration: 0.2, delay: 0.1, children: /* @__PURE__ */ t("div", { className: a.SidebarButton, children: n }) }),
-  /* @__PURE__ */ t(f, { icons: b })
-] });
+import { jsx as t, jsxs as r } from "react/jsx-runtime";
+import N from "clsx";
+import { AnimationFadeScale as l } from "../../animations/animation-fade-scale/animation-fade-scale.component.js";
+import { Certifications as B } from "../certifications/certifications.component.js";
+import { Line as d } from "../line/line.component.js";
+import { Text as s } from "../text/text.component.js";
+import { UserPanel as u } from "../user-panel/user-panel.component.js";
+import { ControlStatus as v } from "../../controls/control-status/control-status.component.js";
+import { baseProps as c } from "../../utils/functions/functions.util.js";
+import '../../assets/sidebar-ODZFjsSe.css';const x = "_Sidebar_13hlr_1", g = "_Board_13hlr_5", w = "_SidebarTitle_13hlr_11", y = "_SidebarButton_13hlr_12", T = "_Steps_13hlr_16", C = "_Info_13hlr_17", R = "_Step_13hlr_16", z = "_InfoRow_13hlr_30", e = {
+  Sidebar: x,
+  Board: g,
+  SidebarTitle: w,
+  SidebarButton: y,
+  Steps: T,
+  Info: C,
+  Step: R,
+  InfoRow: z
+}, D = ({
+  children: m,
+  isButtonVisible: p = !1,
+  isUserOpen: b = !1,
+  title: h = "Ihre Übersicht",
+  steps: _ = [],
+  info: S = [],
+  certifications: f = [],
+  user: a,
+  ...n
+}) => /* @__PURE__ */ t(
+  "div",
+  {
+    "data-testid": c(n, "data-testid", "sidebar"),
+    className: N(e.Sidebar, c(n, "className")),
+    children: /* @__PURE__ */ r("div", { className: e.Board, children: [
+      /* @__PURE__ */ t(s, { preset: "sidebar-title", className: e.SidebarTitle, children: h }),
+      /* @__PURE__ */ t("div", { className: e.Steps, "data-testid": "sidebar-steps", children: _.map(({ state: i, text: o }) => /* @__PURE__ */ r("div", { className: e.Step, "data-testid": "sidebar-step", children: [
+        /* @__PURE__ */ t(v, { state: i }),
+        /* @__PURE__ */ t(
+          s,
+          {
+            tag: "span",
+            weight: "medium",
+            size: "body-small",
+            color: i === "idle" ? "text-secondary" : "text-primary",
+            children: o
+          }
+        )
+      ] }, o)) }),
+      /* @__PURE__ */ t(d, {}),
+      /* @__PURE__ */ t("div", { className: e.Info, "data-testid": "sidebar-info", children: S.map(([i, o], I) => /* @__PURE__ */ r("div", { className: e.InfoRow, "data-testid": "sidebar-info-row", children: [
+        /* @__PURE__ */ t(s, { tag: "span", size: "body-small", color: "text-secondary", children: i }),
+        /* @__PURE__ */ t(s, { tag: "span", size: "body-small", align: "right", children: o })
+      ] }, `${i}-${I}`)) }),
+      /* @__PURE__ */ t(d, {}),
+      /* @__PURE__ */ r(l, { name: "user", condition: b, children: [
+        /* @__PURE__ */ t(u, { title: a.title, button: a.button, data: a.data, onClick: a.onClick }),
+        /* @__PURE__ */ t(d, {})
+      ] }),
+      /* @__PURE__ */ t(l, { name: "button", condition: p, children: /* @__PURE__ */ t("div", { className: e.SidebarButton, children: m }) }),
+      /* @__PURE__ */ t(B, { icons: f })
+    ] })
+  }
+);
 export {
-  F as Sidebar
+  D as Sidebar
 };

package/dist/main.d.ts

@@ -29,7 +29,6 @@ export { DataProtectedLabel } from './components/data-protected-label';
 export { Dialog, type DialogProps, type DialogSize, type DialogPosition } from './components/dialog/dialog.component';
 export { DialogArticle } from './components/dialog-article';
 export { Expenses, type ExpensesProps } from './components/expenses';
-export { Flex, type FlexProps } from './components/flex/flex.component';
 export { Footer } from './components/footer';
 export { FormRow, type FormRowProps } from './components/form-row/form-row.component';
 export { Header, type HeaderProps, type HeaderDescription } from './components/header/header.component';
@@ -43,7 +42,7 @@ export { Message, type MessageProps } from './components/message';
 export { MessageBlock } from './components/message-block';
 export { NotFound, type NotFoundProps } from './components/not-found';
 export { Payment, type PaymentBlockProps, type PaymentGlassProps, type PaymentSidebarProps, type PaymentTextBlocksProps, type PaymentTextBlockItem, } from './components/payment/payment.component';
-export { Sidebar, type SidebarProps } from './components/sidebar/sidebar.component';
+export { Sidebar, type SidebarProps } from './components/sidebar';
 export { Signature } from './components/signature';
 export { Svg, type SvgProps } from './utils/svg/svg.component';
 export { Text } from './components/text';

package/dist/main.js

@@ -7,8 +7,8 @@ import { ControlButton as C } from "./controls/control-button/control-button.com
 import { ControlButtonCard as c } from "./controls/control-button-card/control-button-card.component.js";
 import { ControlButtonRadio as s } from "./controls/control-button-radio/control-button-radio.component.js";
 import { ControlButtonText as g } from "./controls/control-button-text/control-button-text.component.js";
-import { ControlCardImage as F } from "./controls/control-card-image/control-card-image.component.js";
-import { ControlCardText as b } from "./controls/control-card-text/control-card-text.component.js";
+import { ControlCardImage as T } from "./controls/control-card-image/control-card-image.component.js";
+import { ControlCardText as F } from "./controls/control-card-text/control-card-text.component.js";
 import { ControlCheckbox as R } from "./controls/control-checkbox/control-checkbox.component.js";
 import { ControlChoice as I } from "./controls/control-choice/control-choice.component.js";
 import { ControlDropdown as P } from "./controls/control-dropdown/control-dropdown.component.js";
@@ -28,26 +28,25 @@ import { DataProtectedLabel as oo } from "./components/data-protected-label/data
 import { Dialog as to } from "./components/dialog/dialog.component.js";
 import { DialogArticle as mo } from "./components/dialog-article/dialog-article.component.js";
 import { Expenses as po } from "./components/expenses/expenses.component.js";
-import { Flex as no } from "./components/flex/flex.component.js";
-import { Footer as lo } from "./components/footer/footer.component.js";
-import { FormRow as Co } from "./components/form-row/form-row.component.js";
-import { Header as uo } from "./components/header/header.component.js";
-import { InfoPanel as Bo } from "./components/info-panel/info-panel.component.js";
-import { Information as Ao } from "./components/information/information.component.js";
-import { Layout as To } from "./components/layout/layout.component.js";
-import { Line as Lo } from "./components/line/line.component.js";
-import { Loader as So } from "./components/loader/loader.component.js";
-import { MainAttachment as Do } from "./components/main-attachment/main-attachment.component.js";
-import { Message as ho } from "./components/message/message.component.js";
-import { MessageBlock as yo } from "./components/message-block/message-block.component.js";
-import { NotFound as ko } from "./components/not-found/not-found.component.js";
-import { Payment as vo } from "./components/payment/payment.component.js";
-import { Sidebar as Go } from "./components/sidebar/sidebar.component.js";
-import { Signature as Uo } from "./components/signature/signature.component.js";
-import { Svg as jo } from "./utils/svg/svg.component.js";
-import { Text as zo } from "./components/text/text.component.js";
-import { UserPanel as Ko } from "./components/user-panel/user-panel.component.js";
-import { Warranty as Qo } from "./components/warranty/warranty.component.js";
+import { Footer as no } from "./components/footer/footer.component.js";
+import { FormRow as lo } from "./components/form-row/form-row.component.js";
+import { Header as Co } from "./components/header/header.component.js";
+import { InfoPanel as uo } from "./components/info-panel/info-panel.component.js";
+import { Information as Bo } from "./components/information/information.component.js";
+import { Layout as Ao } from "./components/layout/layout.component.js";
+import { Line as bo } from "./components/line/line.component.js";
+import { Loader as Lo } from "./components/loader/loader.component.js";
+import { MainAttachment as So } from "./components/main-attachment/main-attachment.component.js";
+import { Message as Do } from "./components/message/message.component.js";
+import { MessageBlock as ho } from "./components/message-block/message-block.component.js";
+import { NotFound as yo } from "./components/not-found/not-found.component.js";
+import { Payment as ko } from "./components/payment/payment.component.js";
+import { Sidebar as vo } from "./components/sidebar/sidebar.component.js";
+import { Signature as Go } from "./components/signature/signature.component.js";
+import { Svg as Uo } from "./utils/svg/svg.component.js";
+import { Text as jo } from "./components/text/text.component.js";
+import { UserPanel as zo } from "./components/user-panel/user-panel.component.js";
+import { Warranty as Ko } from "./components/warranty/warranty.component.js";
 import './assets/main-DlyWXITA.css';export {
   V as AccordionTable,
   t as AnimationFadeGrow,
@@ -61,8 +60,8 @@ import './assets/main-DlyWXITA.css';export {
   c as ControlButtonCard,
   s as ControlButtonRadio,
   g as ControlButtonText,
-  F as ControlCardImage,
-  b as ControlCardText,
+  T as ControlCardImage,
+  F as ControlCardText,
   R as ControlCheckbox,
   I as ControlChoice,
   P as ControlDropdown,
@@ -79,24 +78,23 @@ import './assets/main-DlyWXITA.css';export {
   to as Dialog,
   mo as DialogArticle,
   po as Expenses,
-  no as Flex,
-  lo as Footer,
-  Co as FormRow,
-  uo as Header,
-  Bo as InfoPanel,
-  Ao as Information,
-  To as Layout,
-  Lo as Line,
-  So as Loader,
-  Do as MainAttachment,
-  ho as Message,
-  yo as MessageBlock,
-  ko as NotFound,
-  vo as Payment,
-  Go as Sidebar,
-  Uo as Signature,
-  jo as Svg,
-  zo as Text,
-  Ko as UserPanel,
-  Qo as Warranty
+  no as Footer,
+  lo as FormRow,
+  Co as Header,
+  uo as InfoPanel,
+  Bo as Information,
+  Ao as Layout,
+  bo as Line,
+  Lo as Loader,
+  So as MainAttachment,
+  Do as Message,
+  ho as MessageBlock,
+  yo as NotFound,
+  ko as Payment,
+  vo as Sidebar,
+  Go as Signature,
+  Uo as Svg,
+  jo as Text,
+  zo as UserPanel,
+  Ko as Warranty
 };

package/package.json

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

package/dist/assets/board-DdRugbJz.css

@@ -1 +0,0 @@
-._Board_daowi_1{border-radius:var(--rm-ui-border-radius-md);padding:var(--rm-ui-padding-lg);background-color:var(--rm-ui-sidebar-bg)}@media screen and (min-width:1024px){._Board_daowi_1{padding:var(--rm-ui-padding-xl)}}@media screen and (min-width:1200px){._Board_daowi_1{padding:var(--rm-ui-padding-xxl)}}

package/dist/assets/sidebar-B3KPFpFU.css

@@ -1 +0,0 @@
-._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/sidebar/components/board/board.component.d.ts

@@ -1,3 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { Base } from '../../../../utils/types';
-export declare const Board: ({ children, ...base }: PropsWithChildren<Base>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,16 +0,0 @@
-import { jsx as d } from "react/jsx-runtime";
-import s from "clsx";
-import { baseProps as a } from "../../../../utils/functions/functions.util.js";
-import '../../../../assets/board-DdRugbJz.css';const t = "_Board_daowi_1", i = {
-  Board: t
-}, p = ({ children: r, ...o }) => /* @__PURE__ */ d(
-  "div",
-  {
-    "data-testid": a(o, "data-testid", "sidebar-board"),
-    className: s(i.Board, a(o, "className")),
-    children: r
-  }
-);
-export {
-  p as Board
-};

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

@@ -1,4 +0,0 @@
-export interface InfoProps {
-    data: [string, string][];
-}
-export declare const Info: (props: InfoProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,13 +0,0 @@
-import { jsx as t, jsxs as a } from "react/jsx-runtime";
-import { Flex as e } from "../../../flex/flex.component.js";
-import { Text as o } from "../../../text/text.component.js";
-const d = (i) => {
-  const { data: n = [] } = i;
-  return /* @__PURE__ */ t(e, { direction: "column", justify: "start", gap: "sm", children: n.map(([r, s]) => /* @__PURE__ */ a(e, { direction: "row", gap: "xs", align: "center", justify: "space-between", children: [
-    /* @__PURE__ */ t(o, { tag: "span", size: "body-small", color: "text-secondary", children: r }),
-    /* @__PURE__ */ t(o, { tag: "span", size: "body-small", align: "right", children: s })
-  ] }, r)) });
-};
-export {
-  d as Info
-};

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

@@ -1,6 +0,0 @@
-import { State } from '../../../../controls/utils/types';
-export interface StepProps {
-    state: State;
-    text: string;
-}
-export declare const Step: (props: StepProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,14 +0,0 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
-import { ControlStatus as s } from "../../../../controls/control-status/control-status.component.js";
-import { Flex as m } from "../../../flex/flex.component.js";
-import { Text as n } from "../../../text/text.component.js";
-const c = (e) => {
-  const { state: t = "idle", text: o = "" } = e;
-  return /* @__PURE__ */ i(m, { direction: "row", align: "center", justify: "start", gap: "xs", children: [
-    /* @__PURE__ */ r(s, { state: t }),
-    /* @__PURE__ */ r(n, { tag: "span", weight: "medium", size: "body-small", color: t === "idle" ? "text-secondary" : "text-primary", children: o })
-  ] });
-};
-export {
-  c as Step
-};

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

@@ -1,5 +0,0 @@
-import { StepProps } from '../step/step.component';
-export interface StepsProps {
-    data: StepProps[];
-}
-export declare const Steps: (props: StepsProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,10 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import { Flex as i } from "../../../flex/flex.component.js";
-import { Step as s } from "../step/step.component.js";
-const c = (o) => {
-  const { data: m } = o;
-  return /* @__PURE__ */ t(i, { direction: "column", justify: "start", gap: "sm", children: m.map(({ state: p, text: r }) => /* @__PURE__ */ t(s, { state: p, text: r }, r)) });
-};
-export {
-  c as Steps
-};