@arthurzakharov/ui-kit 2.5.2 → 2.7.0

package/dist/assets/price-line-B6G5Nune.css

@@ -0,0 +1 @@
+._PriceLine_qio4u_1{display:flex;flex-direction:row;align-items:center;justify-content:space-between}

package/dist/components/price-line/index.d.ts

@@ -0,0 +1 @@
+export { PriceLine, type PriceLineProps } from './price-line.component';

package/dist/components/price-line/index.js

@@ -0,0 +1,4 @@
+import { PriceLine as i } from "./price-line.component.js";
+export {
+  i as PriceLine
+};

package/dist/components/price-line/price-line.component.d.ts

@@ -0,0 +1,9 @@
+export interface PriceLineProps {
+    text?: string;
+    price: number;
+}
+/**
+ * Two-column row that renders a label on the left and a German-formatted
+ * Euro amount on the right. Default label is "Pauschale Vergütung inkl. Steuern".
+ */
+export declare const PriceLine: (props: PriceLineProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/price-line/price-line.component.js

@@ -0,0 +1,15 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { Text as r } from "../text/text.component.js";
+import { convertToEuro as c } from "../../utils/functions/functions.util.js";
+import '../../assets/price-line-B6G5Nune.css';const s = "_PriceLine_qio4u_1", a = {
+  PriceLine: s
+}, g = (i) => {
+  const { text: o = "Pauschale Vergütung inkl. Steuern", price: t } = i;
+  return /* @__PURE__ */ n("div", { className: a.PriceLine, children: [
+    /* @__PURE__ */ e(r, { tag: "span", weight: "regular", size: "body-small", color: "theme-primary", children: o }),
+    /* @__PURE__ */ e(r, { tag: "span", weight: "regular", size: "body-small", color: "theme-primary", children: c(t) })
+  ] });
+};
+export {
+  g as PriceLine
+};

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

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

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

@@ -1,4 +1,4 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { Pencil as d } from "lucide-react";
 import { clsx as p, baseProps as o } from "../../utils/functions/functions.util.js";
 import "react";
@@ -6,33 +6,33 @@ import "../../utils/content/content.component.js";
 import "usehooks-ts";
 import "../../controls/primitives/box/box.component.js";
 import { ButtonText as f } from "../../controls/buttons/button-text/button-text.component.js";
-import '../../assets/user-panel-SauszbHl.css';const _ = "_UserPanel_zes0v_1", u = "_Head_zes0v_13", P = "_Info_zes0v_25", t = {
+import '../../assets/user-panel-SauszbHl.css';const _ = "_UserPanel_zes0v_1", P = "_Head_zes0v_13", u = "_Info_zes0v_25", t = {
   UserPanel: _,
-  Head: u,
-  Info: P
-}, j = ({ title: a, button: i, data: n, onClick: l, ...r }) => /* @__PURE__ */ s(
+  Head: P,
+  Info: u
+}, j = ({ title: n, button: r, data: l, onClick: s, ...a }) => /* @__PURE__ */ i(
   "div",
   {
-    "data-testid": o(r, "data-testid", "user-panel"),
-    className: p(t.UserPanel, o(r, "className")),
+    "data-testid": o(a, "data-testid", "user-panel"),
+    className: p(t.UserPanel, o(a, "className")),
     children: [
-      /* @__PURE__ */ s("div", { className: t.Head, children: [
-        /* @__PURE__ */ e("span", { "data-testid": "user-panel-title", children: a }),
-        /* @__PURE__ */ e(
+      /* @__PURE__ */ i("div", { className: t.Head, children: [
+        /* @__PURE__ */ e("span", { "data-testid": "user-panel-title", children: n }),
+        r && s && /* @__PURE__ */ e(
           f,
           {
-            text: i,
+            text: r,
             preventDefault: !0,
             blurAfterClick: !0,
             icon: /* @__PURE__ */ e(d, {}),
             iconPosition: "right",
             size: "md",
             color: "text-primary",
-            onClick: l
+            onClick: s
           }
         )
       ] }),
-      /* @__PURE__ */ e("ul", { className: t.Info, children: n.map((c, m) => /* @__PURE__ */ e("li", { children: c }, m)) })
+      /* @__PURE__ */ e("ul", { className: t.Info, children: l.map((c, m) => /* @__PURE__ */ e("li", { children: c }, m)) })
     ]
   }
 );

package/dist/main.d.ts

@@ -43,10 +43,11 @@ export { Message, type MessageProps } from './components/message';
 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 { Signature } from './components/signature';
 export { Svg, type SvgProps } from './utils/svg/svg.component';
 export { Text, type TextProps } from './components/text';
 export { UserPanel } from './components/user-panel';
 export { Warranty, type WarrantyProps } from './components/warranty';
-export { clsx } from './utils/functions';
+export { clsx, convertToEuro } from './utils/functions';

package/dist/main.js

@@ -4,18 +4,18 @@ import { FadeSlide as f } from "./animations/fade-slide/fade-slide.component.js"
 import { Rotate as n } from "./animations/rotate/rotate.component.js";
 import "usehooks-ts";
 import { Button as d } from "./controls/buttons/button/button.component.js";
-import { ButtonCard as s } from "./controls/buttons/button-card/button-card.component.js";
+import { ButtonCard as c } from "./controls/buttons/button-card/button-card.component.js";
 import { ButtonRadio as u } from "./controls/buttons/button-radio/button-radio.component.js";
 import { ButtonText as B } from "./controls/buttons/button-text/button-text.component.js";
 import { CardImage as F } from "./controls/interactives/card-image/card-image.component.js";
-import { CardText as L } from "./controls/interactives/card-text/card-text.component.js";
-import { Checkbox as T } from "./controls/interactives/checkbox/checkbox.component.js";
-import { Dropdown as R } from "./controls/interactives/dropdown/dropdown.component.js";
-import { Input as D } from "./controls/interactives/input/input.component.js";
-import { Radio as P } from "./controls/interactives/radio/radio.component.js";
+import { CardText as T } from "./controls/interactives/card-text/card-text.component.js";
+import { Checkbox as S } from "./controls/interactives/checkbox/checkbox.component.js";
+import { Dropdown as P } from "./controls/interactives/dropdown/dropdown.component.js";
+import { Input as A } from "./controls/interactives/input/input.component.js";
+import { Radio as M } from "./controls/interactives/radio/radio.component.js";
 import { TextArea as w } from "./controls/interactives/text-area/text-area.component.js";
-import { TextField as k } from "./controls/interactives/text-field/text-field.component.js";
-import { Box as H } from "./controls/primitives/box/box.component.js";
+import { TextField as E } from "./controls/interactives/text-field/text-field.component.js";
+import { Box as v } from "./controls/primitives/box/box.component.js";
 import { Caption as G } from "./controls/primitives/caption/caption.component.js";
 import { Choice as U } from "./controls/primitives/choice/choice.component.js";
 import { ErrorMessage as j } from "./controls/primitives/error-message/error-message.component.js";
@@ -31,75 +31,78 @@ import { Dialog as mo } from "./components/dialog/dialog.component.js";
 import { DialogArticle as fo } from "./components/dialog-article/dialog-article.component.js";
 import { Expenses as no } from "./components/expenses/expenses.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 { FormRow as so } from "./components/form-row/form-row.component.js";
 import { Header as go } from "./components/header/header.component.js";
 import { InfoPanel as Co } from "./components/info-panel/info-panel.component.js";
-import { Information as bo } from "./components/information/information.component.js";
-import { Layout as So } from "./components/layout/layout.component.js";
+import { Information as Lo } from "./components/information/information.component.js";
+import { Layout as bo } from "./components/layout/layout.component.js";
 import { Line as Io } from "./components/line/line.component.js";
-import { Loader as Ao } from "./components/loader/loader.component.js";
-import { MainAttachment as Mo } from "./components/main-attachment/main-attachment.component.js";
+import { Loader as Ro } 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 Eo } from "./components/not-found/not-found.component.js";
-import { Payment as vo } from "./components/payment/payment.component.js";
-import { Sidebar as No } from "./components/sidebar/sidebar.component.js";
-import { Signature as Wo } from "./components/signature/signature.component.js";
-import { Svg as qo } from "./utils/svg/svg.component.js";
-import { Text as Jo } from "./components/text/text.component.js";
-import { UserPanel as Oo } from "./components/user-panel/user-panel.component.js";
-import { Warranty as Vo } from "./components/warranty/warranty.component.js";
-import { clsx as Yo } from "./utils/functions/functions.util.js";
+import { NotFound as ko } from "./components/not-found/not-found.component.js";
+import { Payment as Ho } from "./components/payment/payment.component.js";
+import { PriceLine as No } from "./components/price-line/price-line.component.js";
+import { Sidebar as Wo } from "./components/sidebar/sidebar.component.js";
+import { Signature as qo } from "./components/signature/signature.component.js";
+import { Svg as Jo } from "./utils/svg/svg.component.js";
+import { Text as Oo } from "./components/text/text.component.js";
+import { UserPanel as Vo } from "./components/user-panel/user-panel.component.js";
+import { Warranty as Yo } from "./components/warranty/warranty.component.js";
+import { clsx as _o, convertToEuro as $o } from "./utils/functions/functions.util.js";
 import './assets/main-DZmlIs7j.css';export {
   Z as AccordionTable,
   $ as BottomBar,
-  H as Box,
+  v as Box,
   d as Button,
-  s as ButtonCard,
+  c as ButtonCard,
   u as ButtonRadio,
   B as ButtonText,
   G as Caption,
   F as CardImage,
-  L as CardText,
+  T as CardText,
   ro as Certifications,
-  T as Checkbox,
+  S as Checkbox,
   U as Choice,
   to as DataProtectedLabel,
   mo as Dialog,
   fo as DialogArticle,
-  R as Dropdown,
+  P as Dropdown,
   j as ErrorMessage,
   no as Expenses,
   t as FadeGrow,
   m as FadeScale,
   f as FadeSlide,
   lo as Footer,
-  co as FormRow,
+  so as FormRow,
   go as Header,
   z as HiddenInput,
   Co as InfoPanel,
-  bo as Information,
-  D as Input,
+  Lo as Information,
+  A as Input,
   K as Label,
-  So as Layout,
+  bo as Layout,
   Io as Line,
-  Ao as Loader,
-  Mo as MainAttachment,
+  Ro as Loader,
+  Do as MainAttachment,
   ho as Message,
   yo as MessageBlock,
-  Eo as NotFound,
-  vo as Payment,
-  P as Radio,
+  ko as NotFound,
+  Ho as Payment,
+  No as PriceLine,
+  M as Radio,
   Q as RadioLabel,
   n as Rotate,
-  No as Sidebar,
-  Wo as Signature,
+  Wo as Sidebar,
+  qo as Signature,
   X as Status,
-  qo as Svg,
-  Jo as Text,
+  Jo as Svg,
+  Oo as Text,
   w as TextArea,
-  k as TextField,
-  Oo as UserPanel,
-  Vo as Warranty,
-  Yo as clsx
+  E as TextField,
+  Vo as UserPanel,
+  Yo as Warranty,
+  _o as clsx,
+  $o as convertToEuro
 };

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

@@ -31,6 +31,13 @@ export declare function baseProps(base: Base, key: keyof Base, or?: Base[keyof B
 type ClsxClassDictionary = Record<string, unknown>;
 type ClsxClassArray = ClsxClassValue[];
 type ClsxClassValue = ClsxClassArray | ClsxClassDictionary | string | number | bigint | null | boolean | undefined;
+/**
+ * Formats a number as a German Euro currency string (e.g. 9.99 → "9,99 €").
+ * When `skipZeroCents` is true and the value has no fractional part, drops the cents (e.g. 9 → "9 €").
+ */
+export declare const convertToEuro: (num: number, options?: {
+    skipZeroCents?: boolean;
+}) => string;
 /**
  * Conditional class-name joiner. Drop-in replacement for the `clsx` npm package.
  * Accepts strings, numbers, bigints, arrays (recursively), and dictionaries (truthy values' keys are included).

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

@@ -1,43 +1,49 @@
-function o(n) {
-  return typeof n == "string";
+function o(t) {
+  return typeof t == "string";
 }
-function e(n) {
-  const i = /<\/?[a-z][\s\S]*>/i, t = /&(?:[a-z][a-z0-9]+|#\d+|#x[\da-f]+);/i;
-  return i.test(n) || t.test(n);
+function e(t) {
+  const r = /<\/?[a-z][\s\S]*>/i, n = /&(?:[a-z][a-z0-9]+|#\d+|#x[\da-f]+);/i;
+  return r.test(t) || n.test(t);
 }
-function f(n) {
-  return o(n) && e(n);
+function u(t) {
+  return o(t) && e(t);
 }
-const u = (n, i) => (t) => {
-  i?.prevent && t.preventDefault(), i?.stop && t.stopPropagation(), i?.blur && t.currentTarget.blur(), i?.withEvent ? n(t) : n();
+const c = (t, r) => (n) => {
+  r?.prevent && n.preventDefault(), r?.stop && n.stopPropagation(), r?.blur && n.currentTarget.blur(), r?.withEvent ? t(n) : t();
 };
-function c(n, i, t) {
-  return n[i] ? n[i] : t;
+function f(t, r, n) {
+  return t[r] ? t[r] : n;
 }
-const s = (...n) => {
-  const i = [];
-  for (const t of n)
-    if (t) {
-      if (typeof t == "string" || typeof t == "number" || typeof t == "bigint") {
-        i.push(String(t));
+const p = (t, r) => new Intl.NumberFormat("de-DE", {
+  style: "currency",
+  currency: "EUR",
+  minimumFractionDigits: r?.skipZeroCents && t % 1 === 0 ? 0 : 2,
+  maximumFractionDigits: r?.skipZeroCents && t % 1 === 0 ? 0 : 2
+}).format(t), s = (...t) => {
+  const r = [];
+  for (const n of t)
+    if (n) {
+      if (typeof n == "string" || typeof n == "number" || typeof n == "bigint") {
+        r.push(String(n));
         continue;
       }
-      if (Array.isArray(t)) {
-        const r = s(...t);
-        r && i.push(r);
+      if (Array.isArray(n)) {
+        const i = s(...n);
+        i && r.push(i);
         continue;
       }
-      if (typeof t == "object")
-        for (const r in t)
-          t[r] && i.push(r);
+      if (typeof n == "object")
+        for (const i in n)
+          n[i] && r.push(i);
     }
-  return i.join(" ");
+  return r.join(" ");
 };
 export {
-  c as baseProps,
+  f as baseProps,
   s as clsx,
   e as containsHtml,
-  f as isHtmlString,
+  p as convertToEuro,
+  u as isHtmlString,
   o as isString,
-  u as withControl
+  c as withControl
 };

package/dist/utils/functions/index.js

@@ -1,9 +1,10 @@
-import { baseProps as o, clsx as r, containsHtml as s, isHtmlString as n, isString as l, withControl as m } from "./functions.util.js";
+import { baseProps as r, clsx as i, containsHtml as n, convertToEuro as s, isHtmlString as l, isString as c, withControl as e } from "./functions.util.js";
 export {
-  o as baseProps,
-  r as clsx,
-  s as containsHtml,
-  n as isHtmlString,
-  l as isString,
-  m as withControl
+  r as baseProps,
+  i as clsx,
+  n as containsHtml,
+  s as convertToEuro,
+  l as isHtmlString,
+  c as isString,
+  e as withControl
 };

package/package.json

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