@arthurzakharov/ui-kit 2.7.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/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/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';

package/dist/main.js

@@ -4,14 +4,14 @@ 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 c } 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 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 { 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 E } from "./controls/interactives/text-field/text-field.component.js";
@@ -23,86 +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 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 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 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 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 { 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 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,
+  Z as Accordion,
+  $ as AccordionTable,
+  ro as BottomBar,
   v as Box,
   d as Button,
-  c as ButtonCard,
+  l as ButtonCard,
   u as ButtonRadio,
   B as ButtonText,
   G as Caption,
   F as CardImage,
   T as CardText,
-  ro as Certifications,
+  to as Certifications,
   S as Checkbox,
   U as Choice,
-  to as DataProtectedLabel,
-  mo as Dialog,
-  fo as DialogArticle,
-  P 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,
-  so as FormRow,
-  go as Header,
+  so as Footer,
+  go as FormRow,
+  Co as Header,
   z as HiddenInput,
-  Co as InfoPanel,
-  Lo as Information,
-  A as Input,
+  Lo as InfoPanel,
+  bo as Information,
+  R as Input,
   K as Label,
-  bo as Layout,
-  Io as Line,
-  Ro as Loader,
-  Do as MainAttachment,
-  ho as Message,
-  yo as MessageBlock,
-  ko as NotFound,
-  Ho as Payment,
-  No as PriceLine,
+  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,
-  Wo as Sidebar,
-  qo as Signature,
+  qo as Sidebar,
+  Jo as Signature,
   X as Status,
-  Jo as Svg,
-  Oo as Text,
+  Oo as Svg,
+  Vo as Text,
   w as TextArea,
   E as TextField,
-  Vo as UserPanel,
-  Yo as Warranty,
-  _o as clsx,
-  $o as convertToEuro
+  Yo as UserPanel,
+  _o as Warranty,
+  or as clsx,
+  rr as convertToEuro
 };

package/package.json

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