@arthurzakharov/ui-kit 2.12.0 → 3.0.0

package/dist/assets/sidebar-DAm9EssD.css

@@ -0,0 +1 @@
+._Sidebar_ub5hz_1{display:block}._Board_ub5hz_5{display:flex;flex-direction:column;gap:var(--rm-ui-padding-md);border-radius:var(--rm-ui-border-radius-md);padding:var(--rm-ui-padding-lg);background-color:var(--rm-ui-sidebar-bg)}._Steps_ub5hz_14,._Info_ub5hz_15{display:flex;flex-direction:column;align-items:flex-start;gap:var(--rm-ui-padding-sm)}._Step_ub5hz_14{display:inline-flex;align-items:center;gap:var(--rm-ui-padding-xs)}._InfoRow_ub5hz_28{display:inline-flex;align-items:center;justify-content:space-between;gap:var(--rm-ui-padding-xs);width:100%}._SidebarButton_ub5hz_36{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}@media screen and (min-width:1024px){._Board_ub5hz_5{padding:var(--rm-ui-padding-xl)}}@media screen and (min-width:1200px){._Board_ub5hz_5{padding:var(--rm-ui-padding-xxl);gap:var(--rm-ui-padding-lg)}}

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

@@ -1 +1 @@
-export { Sidebar, type SidebarProps } from './sidebar.component';
+export { Sidebar, type SidebarInfoProps, type SidebarInfoRow, type SidebarProps, type SidebarStep, type SidebarStepsProps, type SidebarSubmitProps, type SidebarTitleProps, type SidebarUserProps, } from './sidebar.component';

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

@@ -1,22 +1,40 @@
-import { PropsWithChildren, ReactNode } from 'react';
+import { PropsWithChildren } from 'react';
 import { CertificationsProps } from '../certifications';
+import { TimetableProps } from '../timetable';
 import { UserPanelProps } from '../user-panel';
 import { State } from '../../controls/utils';
 import { Base } from '../../utils/types';
-type SidebarStep = {
+export type SidebarStep = {
     state: State;
     text: string;
 };
-type SidebarInfo = [string, string];
-export interface SidebarProps extends PropsWithChildren<Base> {
-    isButtonVisible: boolean;
-    isUserOpen: boolean;
-    title: string;
+export type SidebarInfoRow = [string, string];
+export type SidebarProps = PropsWithChildren<Base>;
+export interface SidebarTitleProps extends PropsWithChildren<Base> {
+}
+export interface SidebarStepsProps extends Base {
     steps: SidebarStep[];
-    info: SidebarInfo[];
-    user: UserPanelProps;
-    certifications: CertificationsProps;
-    extras?: ReactNode;
 }
-export declare const Sidebar: ({ children, isButtonVisible, isUserOpen, title, steps, info, certifications, user, extras, ...base }: SidebarProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export interface SidebarInfoProps extends Base {
+    rows: SidebarInfoRow[];
+}
+export interface SidebarUserProps extends Base {
+    isOpen: boolean;
+    title: UserPanelProps['title'];
+    data: UserPanelProps['data'];
+    button?: UserPanelProps['button'];
+    onClick?: UserPanelProps['onClick'];
+}
+export interface SidebarSubmitProps extends PropsWithChildren<Base> {
+    isVisible: boolean;
+}
+export declare const Sidebar: (({ children, ...base }: SidebarProps) => import("react/jsx-runtime").JSX.Element) & {
+    Title: ({ children, ...base }: SidebarTitleProps) => import("react/jsx-runtime").JSX.Element;
+    Steps: ({ steps, ...base }: SidebarStepsProps) => import("react/jsx-runtime").JSX.Element;
+    Info: ({ rows, ...base }: SidebarInfoProps) => import("react/jsx-runtime").JSX.Element | null;
+    User: ({ isOpen, title, data, button, onClick, ...base }: SidebarUserProps) => import("react/jsx-runtime").JSX.Element;
+    Submit: ({ isVisible, children, ...base }: SidebarSubmitProps) => import("react/jsx-runtime").JSX.Element;
+    Certifications: (props: CertificationsProps) => import("react/jsx-runtime").JSX.Element;
+    Timetable: (props: TimetableProps) => import("react/jsx-runtime").JSX.Element;
+    Line: () => import("react/jsx-runtime").JSX.Element;
+};

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

@@ -1,97 +1,90 @@
-import { jsx as t, jsxs as o, Fragment as I } from "react/jsx-runtime";
-import { clsx as l, baseProps as h } from "../../utils/functions/functions.util.js";
-import { FadeScale as f } from "../../animations/fade-scale/fade-scale.component.js";
-import { Certifications as u } from "../certifications/certifications.component.js";
-import { Line as c } from "../line/line.component.js";
-import { Text as m } from "../text/text.component.js";
-import { UserPanel as w } from "../user-panel/user-panel.component.js";
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { clsx as m, baseProps as a } from "../../utils/functions/functions.util.js";
+import { FadeScale as b } from "../../animations/fade-scale/fade-scale.component.js";
+import { Certifications as p } from "../certifications/certifications.component.js";
+import { Line as S } from "../line/line.component.js";
+import { Text as n } from "../text/text.component.js";
+import { Timetable as f } from "../timetable/timetable.component.js";
+import { UserPanel as u } from "../user-panel/user-panel.component.js";
 import "../../controls/primitives/box/box.component.js";
 import "../../utils/content/content.component.js";
 import "lucide-react";
 import "usehooks-ts";
-import { Status as A } from "../../controls/primitives/status/status.component.js";
-import '../../assets/sidebar-rLhJNVa5.css';const B = "_Sidebar_ex9j5_1", y = "_Board_ex9j5_5", T = "_SidebarTitle_ex9j5_11", E = "_SidebarButton_ex9j5_12", R = "_Steps_ex9j5_16", z = "_Info_ex9j5_17", C = "_Step_ex9j5_16", $ = "_InfoRow_ex9j5_30", F = "_SidebarExtras_ex9j5_44", P = "_NothingAbove_ex9j5_54", e = {
-  Sidebar: B,
-  Board: y,
-  SidebarTitle: T,
-  SidebarButton: E,
-  Steps: R,
-  Info: z,
-  Step: C,
-  InfoRow: $,
-  SidebarExtras: F,
-  NothingAbove: P
-}, Y = ({
-  // Sidebar props
-  children: v,
-  isButtonVisible: b = !1,
-  isUserOpen: r = !1,
-  title: x = "Ihre Übersicht",
-  steps: g = [],
-  info: N = [],
-  certifications: _,
-  user: d,
-  extras: n,
-  // Base props
-  ...S
-}) => {
-  const p = N.filter(([, i]) => i.trim() !== ""), a = p.length > 0;
-  return /* @__PURE__ */ t(
+import { Status as _ } from "../../controls/primitives/status/status.component.js";
+import '../../assets/sidebar-DAm9EssD.css';const h = "_Sidebar_ub5hz_1", N = "_Board_ub5hz_5", z = "_Steps_ub5hz_14", I = "_Info_ub5hz_15", g = "_Step_ub5hz_14", v = "_InfoRow_ub5hz_28", B = "_SidebarButton_ub5hz_36", d = {
+  Sidebar: h,
+  Board: N,
+  Steps: z,
+  Info: I,
+  Step: g,
+  InfoRow: v,
+  SidebarButton: B
+}, w = ({ children: e, ...i }) => /* @__PURE__ */ t(
+  "div",
+  {
+    "data-testid": a(i, "data-testid", "sidebar"),
+    className: m(d.Sidebar, a(i, "className")),
+    children: /* @__PURE__ */ t("div", { className: d.Board, children: e })
+  }
+), x = ({ children: e, ...i }) => /* @__PURE__ */ t(
+  n,
+  {
+    preset: "sidebar-title",
+    "data-testid": a(i, "data-testid", "sidebar-title"),
+    className: a(i, "className"),
+    children: e
+  }
+), T = ({ steps: e, ...i }) => /* @__PURE__ */ t(
+  "div",
+  {
+    "data-testid": a(i, "data-testid", "sidebar-steps"),
+    className: m(d.Steps, a(i, "className")),
+    children: e.map(({ state: s, text: r }) => /* @__PURE__ */ l("div", { className: d.Step, "data-testid": "sidebar-step", children: [
+      /* @__PURE__ */ t(_, { state: s }),
+      /* @__PURE__ */ t(n, { tag: "span", weight: "medium", size: "body-small", color: s === "idle" ? "grey-400" : "text-primary", children: r })
+    ] }, r))
+  }
+), y = ({ rows: e, ...i }) => {
+  const s = e.filter(([, r]) => r.trim() !== "");
+  return s.length === 0 ? null : /* @__PURE__ */ t(
     "div",
     {
-      "data-testid": h(S, "data-testid", "sidebar"),
-      className: l(e.Sidebar, h(S, "className")),
-      children: /* @__PURE__ */ o("div", { className: e.Board, children: [
-        /* @__PURE__ */ t(m, { preset: "sidebar-title", className: e.SidebarTitle, children: x }),
-        /* @__PURE__ */ t("div", { className: e.Steps, "data-testid": "sidebar-steps", children: g.map(({ state: i, text: s }) => /* @__PURE__ */ o("div", { className: e.Step, "data-testid": "sidebar-step", children: [
-          /* @__PURE__ */ t(A, { state: i }),
-          /* @__PURE__ */ t(m, { tag: "span", weight: "medium", size: "body-small", color: i === "idle" ? "grey-400" : "text-primary", children: s })
-        ] }, s)) }),
-        a && /* @__PURE__ */ o(I, { children: [
-          /* @__PURE__ */ t(c, {}),
-          /* @__PURE__ */ t("div", { className: e.Info, "data-testid": "sidebar-info", children: p.map(([i, s], j) => /* @__PURE__ */ o("div", { className: e.InfoRow, "data-testid": "sidebar-info-row", children: [
-            /* @__PURE__ */ t(m, { tag: "span", size: "body-small", color: "text-secondary", children: i }),
-            /* @__PURE__ */ t(m, { tag: "span", size: "body-small", align: "right", children: s })
-          ] }, `${i}-${j}`)) }),
-          /* @__PURE__ */ t(c, {})
-        ] }),
-        /* @__PURE__ */ o(f, { name: "user", condition: r, children: [
-          !a && /* @__PURE__ */ t(c, {}),
-          /* @__PURE__ */ t(w, { title: d.title, button: d.button, data: d.data, onClick: d.onClick }),
-          /* @__PURE__ */ t(c, {})
-        ] }),
-        /* @__PURE__ */ t(f, { name: "button", condition: b, children: /* @__PURE__ */ t(
-          "div",
-          {
-            className: l(e.SidebarButton, {
-              [e.NothingAbove]: !a && !r
-            }),
-            children: v
-          }
-        ) }),
-        n != null && /* @__PURE__ */ t(
-          "div",
-          {
-            "data-testid": "sidebar-extras",
-            className: l(e.SidebarExtras, {
-              [e.NothingAbove]: !a && !r && !b
-            }),
-            children: n
-          }
-        ),
-        /* @__PURE__ */ t(u, { icons: _.icons, tuvSrc: _.tuvSrc, align: _.align }),
-        /* @__PURE__ */ t(
-          "div",
-          {
-            className: l({
-              [e.NothingAbove]: !a && !r && !b && n == null
-            })
-          }
-        )
-      ] })
+      "data-testid": a(i, "data-testid", "sidebar-info"),
+      className: m(d.Info, a(i, "className")),
+      children: s.map(([r, c], o) => /* @__PURE__ */ l("div", { className: d.InfoRow, "data-testid": "sidebar-info-row", children: [
+        /* @__PURE__ */ t(n, { tag: "span", size: "body-small", color: "text-secondary", children: r }),
+        /* @__PURE__ */ t(n, { tag: "span", size: "body-small", align: "right", children: c })
+      ] }, `${r}-${o}`))
     }
   );
-};
+}, R = ({ isOpen: e, title: i, data: s, button: r, onClick: c, ...o }) => /* @__PURE__ */ t(
+  b,
+  {
+    name: "sidebar-user",
+    condition: e,
+    "data-testid": a(o, "data-testid", "sidebar-user"),
+    className: a(o, "className"),
+    children: /* @__PURE__ */ t(u, { title: i, data: s, button: r, onClick: c })
+  }
+), j = ({ isVisible: e, children: i, ...s }) => /* @__PURE__ */ t(
+  b,
+  {
+    name: "sidebar-submit",
+    condition: e,
+    "data-testid": a(s, "data-testid", "sidebar-submit"),
+    className: a(s, "className"),
+    children: /* @__PURE__ */ t("div", { className: d.SidebarButton, children: i })
+  }
+), C = (e) => /* @__PURE__ */ t(p, { ...e }), L = (e) => /* @__PURE__ */ t(f, { ...e }), U = () => /* @__PURE__ */ t(S, {}), Q = Object.assign(w, {
+  Title: x,
+  Steps: T,
+  Info: y,
+  User: R,
+  Submit: j,
+  Certifications: C,
+  Timetable: L,
+  Line: U
+});
 export {
-  Y as Sidebar
+  Q as Sidebar
 };

package/dist/main.d.ts

@@ -46,7 +46,7 @@ export { MessageBlock, type MessageBlockProps } from './components/message-block
 export { NotFound, type NotFoundProps } from './components/not-found';
 export { Payment, type PaymentBlockProps, type PaymentGlassProps, type PaymentInfoProps, type PaymentSidebarProps, type PaymentTextBlocksProps, type PaymentTextBlockItem, } from './components/payment/payment.component';
 export { PriceLine, type PriceLineProps } from './components/price-line';
-export { Sidebar, type SidebarProps } from './components/sidebar';
+export { Sidebar, type SidebarInfoProps, type SidebarInfoRow, type SidebarProps, type SidebarStep, type SidebarStepsProps, type SidebarSubmitProps, type SidebarTitleProps, type SidebarUserProps, } from './components/sidebar';
 export { SignCtaTracker, type SignCtaTrackerProps } from './components/sign-cta-tracker';
 export { Signature } from './components/signature';
 export { Timetable, type TimetableProps } from './components/timetable';

package/package.json

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

package/dist/assets/sidebar-rLhJNVa5.css

@@ -1 +0,0 @@
-._Sidebar_ex9j5_1{display:block}._Board_ex9j5_5{border-radius:var(--rm-ui-border-radius-md);padding:var(--rm-ui-padding-lg);background-color:var(--rm-ui-sidebar-bg)}._SidebarTitle_ex9j5_11,._SidebarButton_ex9j5_12{padding-bottom:var(--rm-ui-padding-md)}._Steps_ex9j5_16,._Info_ex9j5_17{display:flex;flex-direction:column;align-items:flex-start;gap:var(--rm-ui-padding-sm)}._Step_ex9j5_16{display:inline-flex;align-items:center;gap:var(--rm-ui-padding-xs)}._InfoRow_ex9j5_30{display:inline-flex;align-items:center;justify-content:space-between;gap:var(--rm-ui-padding-xs)}._SidebarButton_ex9j5_12{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}._SidebarExtras_ex9j5_44{padding-bottom:var(--rm-ui-padding-md)}@media screen and (min-width:1200px){._SidebarExtras_ex9j5_44{padding-bottom:var(--rm-ui-padding-lg)}}._NothingAbove_ex9j5_54{margin-top:var(--rm-ui-padding-lg)}@media screen and (min-width:1024px){._Board_ex9j5_5{padding:var(--rm-ui-padding-xl)}}@media screen and (min-width:1200px){._Board_ex9j5_5{padding:var(--rm-ui-padding-xxl)}._SidebarTitle_ex9j5_11,._SidebarButton_ex9j5_12{padding-bottom:var(--rm-ui-padding-lg)}}