@arthurzakharov/ui-kit 2.6.0 → 2.8.0

package/dist/assets/accordion-D1OVgv7W.css

@@ -0,0 +1 @@
+._Accordion_1k5zy_1{display:block;width:100%;background-color:var(--rm-ui-color-background-primary, #fff);border:1px solid var(--rm-ui-grey-100);border-radius:var(--rm-ui-border-radius-md, 8px);overflow:hidden}._Header_1k5zy_10{display:flex;align-items:center;gap:var(--rm-ui-padding-sm);width:100%;padding:var(--rm-ui-padding-md) var(--rm-ui-padding-md);background:transparent;border:0;cursor:pointer;text-align:left;color:var(--rm-ui-color-text-primary);font-family:inherit;font-size:var(--rm-ui-font-size-body-large);line-height:var(--rm-ui-line-height-body-large);font-weight:var(--rm-ui-font-weight-medium)}._Header_1k5zy_10:focus-visible{outline:2px solid var(--rm-ui-color-focus);outline-offset:-2px}._HeaderOpen_1k5zy_32{color:var(--rm-ui-color-theme-primary)}._Index_1k5zy_36{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:28px;height:28px;padding:0 var(--rm-ui-padding-xxs);border-radius:50%;background-color:var(--rm-ui-color-theme-primary);color:var(--rm-ui-color-text-on-theme, #fff);font-size:var(--rm-ui-font-size-body-small);font-weight:var(--rm-ui-font-weight-medium);line-height:1}._Title_1k5zy_52{flex:1 1 auto;min-width:0}._Chevron_1k5zy_57{flex:0 0 auto;display:inline-flex;color:var(--rm-ui-color-text-secondary)}._Body_1k5zy_63{position:relative;padding:0 var(--rm-ui-padding-md) var(--rm-ui-padding-md)}._Subtitle_1k5zy_68{margin:0 0 var(--rm-ui-padding-sm);color:var(--rm-ui-color-text-secondary);font-size:var(--rm-ui-font-size-body-small);line-height:var(--rm-ui-line-height-body-small)}._Content_1k5zy_75{display:block}._LoaderOverlay_1k5zy_79{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#ffffffbf;z-index:1}

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/accordion/accordion.component.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { Base } from '../../utils/types';
+export interface AccordionProps extends Base {
+    title: string;
+    isOpen: boolean;
+    onTitleClick: () => void;
+    index?: number | string;
+    subtitle?: ReactNode;
+    loading?: boolean;
+    children: ReactNode;
+}
+export declare const Accordion: ({ title, isOpen, onTitleClick, index, subtitle, loading, children, ...base }: AccordionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/accordion/accordion.component.js

@@ -0,0 +1,61 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { ChevronDown as h } from "lucide-react";
+import { baseProps as i, clsx as s } from "../../utils/functions/functions.util.js";
+import { FadeGrow as v } from "../../animations/fade-grow/fade-grow.component.js";
+import { Rotate as p } from "../../animations/rotate/rotate.component.js";
+import { Loader as z } from "../loader/loader.component.js";
+import '../../assets/accordion-D1OVgv7W.css';const k = "_Accordion_1k5zy_1", C = "_Header_1k5zy_10", N = "_HeaderOpen_1k5zy_32", x = "_Index_1k5zy_36", b = "_Title_1k5zy_52", f = "_Chevron_1k5zy_57", H = "_Body_1k5zy_63", $ = "_Subtitle_1k5zy_68", u = "_Content_1k5zy_75", A = "_LoaderOverlay_1k5zy_79", o = {
+  Accordion: k,
+  Header: C,
+  HeaderOpen: N,
+  Index: x,
+  Title: b,
+  Chevron: f,
+  Body: H,
+  Subtitle: $,
+  Content: u,
+  LoaderOverlay: A
+}, j = ({
+  title: l,
+  isOpen: d,
+  onTitleClick: _,
+  index: r,
+  subtitle: a,
+  loading: m = !1,
+  children: y,
+  ...c
+}) => {
+  const t = i(c, "data-testid", "accordion");
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      "data-testid": t,
+      className: s(o.Accordion, i(c, "className")),
+      children: [
+        /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            "data-testid": `${t}-header`,
+            className: s(o.Header, { [o.HeaderOpen]: d }),
+            onClick: _,
+            "aria-expanded": d,
+            children: [
+              r !== void 0 && /* @__PURE__ */ e("span", { "data-testid": `${t}-index`, className: o.Index, children: r }),
+              /* @__PURE__ */ e("span", { className: o.Title, children: l }),
+              /* @__PURE__ */ e("span", { className: o.Chevron, children: /* @__PURE__ */ e(p, { name: `${t}-chevron`, condition: d, from: "top", to: "bottom", children: /* @__PURE__ */ e(h, { size: 20 }) }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(v, { name: `${t}-body`, condition: d, children: /* @__PURE__ */ n("div", { "data-testid": `${t}-body`, className: o.Body, children: [
+          m && /* @__PURE__ */ e("div", { "data-testid": `${t}-loader`, className: o.LoaderOverlay, children: /* @__PURE__ */ e(z, { color: "accent-primary", size: "md" }) }),
+          a != null && /* @__PURE__ */ e("div", { "data-testid": `${t}-subtitle`, className: o.Subtitle, children: a }),
+          /* @__PURE__ */ e("div", { className: o.Content, children: y })
+        ] }) })
+      ]
+    }
+  );
+};
+export {
+  j as Accordion
+};

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

@@ -0,0 +1 @@
+export { Accordion, type AccordionProps } from './accordion.component';

package/dist/components/accordion/index.js

@@ -0,0 +1,4 @@
+import { Accordion as c } from "./accordion.component.js";
+export {
+  c as Accordion
+};

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/main.d.ts

@@ -23,6 +23,7 @@ export { HiddenInput, type HiddenInputProps } from './controls/primitives/hidden
 export { Label, type LabelProps } from './controls/primitives/label';
 export { RadioLabel, type RadioLabelProps } from './controls/primitives/radio-label';
 export { Status, type StatusProps } from './controls/primitives/status';
+export { Accordion, type AccordionProps } from './components/accordion';
 export { AccordionTable, type AccordionTableProps } from './components/accordion-table/accordion-table.component';
 export { BottomBar } from './components/bottom-bar';
 export { Certifications, type CertificationsProps } from './components/certifications';
@@ -43,10 +44,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 l } 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 I } from "./controls/interactives/dropdown/dropdown.component.js";
+import { Input as R } 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";
@@ -23,83 +23,88 @@ import { HiddenInput as z } from "./controls/primitives/hidden-input/hidden-inpu
 import { Label as K } from "./controls/primitives/label/label.component.js";
 import { RadioLabel as Q } from "./controls/primitives/radio-label/radio-label.component.js";
 import { Status as X } from "./controls/primitives/status/status.component.js";
-import { AccordionTable as Z } from "./components/accordion-table/accordion-table.component.js";
-import { BottomBar as $ } from "./components/bottom-bar/bottom-bar.component.js";
-import { Certifications as ro } from "./components/certifications/certifications.component.js";
-import { DataProtectedLabel as to } from "./components/data-protected-label/data-protected-label.component.js";
-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 { Header as go } from "./components/header/header.component.js";
-import { InfoPanel as Co } from "./components/info-panel/info-panel.component.js";
+import { Accordion as Z } from "./components/accordion/accordion.component.js";
+import { AccordionTable as $ } from "./components/accordion-table/accordion-table.component.js";
+import { BottomBar as ro } from "./components/bottom-bar/bottom-bar.component.js";
+import { Certifications as to } from "./components/certifications/certifications.component.js";
+import { DataProtectedLabel as mo } from "./components/data-protected-label/data-protected-label.component.js";
+import { Dialog as fo } from "./components/dialog/dialog.component.js";
+import { DialogArticle as no } from "./components/dialog-article/dialog-article.component.js";
+import { Expenses as co } from "./components/expenses/expenses.component.js";
+import { Footer as so } from "./components/footer/footer.component.js";
+import { FormRow as go } from "./components/form-row/form-row.component.js";
+import { Header as Co } from "./components/header/header.component.js";
+import { InfoPanel as Lo } 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 { 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 { 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 { Layout as Ao } from "./components/layout/layout.component.js";
+import { Line as Po } from "./components/line/line.component.js";
+import { Loader as Do } from "./components/loader/loader.component.js";
+import { MainAttachment as ho } from "./components/main-attachment/main-attachment.component.js";
+import { Message as yo } from "./components/message/message.component.js";
+import { MessageBlock as ko } from "./components/message-block/message-block.component.js";
+import { NotFound as Ho } from "./components/not-found/not-found.component.js";
+import { Payment as No } from "./components/payment/payment.component.js";
+import { PriceLine as Wo } from "./components/price-line/price-line.component.js";
+import { Sidebar as qo } from "./components/sidebar/sidebar.component.js";
+import { Signature as Jo } from "./components/signature/signature.component.js";
+import { Svg as Oo } from "./utils/svg/svg.component.js";
+import { Text as Vo } from "./components/text/text.component.js";
+import { UserPanel as Yo } from "./components/user-panel/user-panel.component.js";
+import { Warranty as _o } from "./components/warranty/warranty.component.js";
+import { clsx as or, convertToEuro as rr } from "./utils/functions/functions.util.js";
 import './assets/main-DZmlIs7j.css';export {
-  Z as AccordionTable,
-  $ as BottomBar,
-  H as Box,
+  Z as Accordion,
+  $ as AccordionTable,
+  ro as BottomBar,
+  v as Box,
   d as Button,
-  s as ButtonCard,
+  l as ButtonCard,
   u as ButtonRadio,
   B as ButtonText,
   G as Caption,
   F as CardImage,
-  L as CardText,
-  ro as Certifications,
-  T as Checkbox,
+  T as CardText,
+  to as Certifications,
+  S as Checkbox,
   U as Choice,
-  to as DataProtectedLabel,
-  mo as Dialog,
-  fo as DialogArticle,
-  R as Dropdown,
+  mo as DataProtectedLabel,
+  fo as Dialog,
+  no as DialogArticle,
+  I as Dropdown,
   j as ErrorMessage,
-  no as Expenses,
+  co as Expenses,
   t as FadeGrow,
   m as FadeScale,
   f as FadeSlide,
-  lo as Footer,
-  co as FormRow,
-  go as Header,
+  so as Footer,
+  go as FormRow,
+  Co as Header,
   z as HiddenInput,
-  Co as InfoPanel,
+  Lo as InfoPanel,
   bo as Information,
-  D as Input,
+  R as Input,
   K as Label,
-  So as Layout,
-  Io as Line,
-  Ao as Loader,
-  Mo as MainAttachment,
-  ho as Message,
-  yo as MessageBlock,
-  Eo as NotFound,
-  vo as Payment,
-  P as Radio,
+  Ao as Layout,
+  Po as Line,
+  Do as Loader,
+  ho as MainAttachment,
+  yo as Message,
+  ko as MessageBlock,
+  Ho as NotFound,
+  No as Payment,
+  Wo as PriceLine,
+  M as Radio,
   Q as RadioLabel,
   n as Rotate,
-  No as Sidebar,
-  Wo as Signature,
+  qo as Sidebar,
+  Jo as Signature,
   X as Status,
-  qo as Svg,
-  Jo as Text,
+  Oo as Svg,
+  Vo as Text,
   w as TextArea,
-  k as TextField,
-  Oo as UserPanel,
-  Vo as Warranty,
-  Yo as clsx
+  E as TextField,
+  Yo as UserPanel,
+  _o as Warranty,
+  or as clsx,
+  rr 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.6.0",
+  "version": "2.8.0",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",