@arthurzakharov/ui-kit 2.7.0 → 2.9.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/dropzone-iRe6v-43.css

@@ -0,0 +1 @@
+._Dropzone_14jbn_1{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--rm-ui-padding-xs);width:100%;min-height:160px;padding:var(--rm-ui-padding-md);border:2px dashed var(--rm-ui-grey-300);border-radius:var(--rm-ui-border-radius-md, 8px);background-color:var(--rm-ui-grey-50);text-align:center;cursor:pointer;transition:border-color .12s ease,background-color .12s ease}._Dropzone_14jbn_1:hover,._Active_14jbn_21{border-color:var(--rm-ui-color-theme-primary);background-color:var(--rm-ui-color-background-primary, #fff)}._Dropzone_14jbn_1:focus-visible{outline:2px solid var(--rm-ui-color-focus);outline-offset:2px}._Disabled_14jbn_31{cursor:not-allowed;opacity:.5}._HiddenInput_14jbn_36{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._Icon_14jbn_48{color:var(--rm-ui-color-theme-primary)}._Invitation_14jbn_52{font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body);color:var(--rm-ui-color-text-primary)}._HelpText_14jbn_58{font-size:var(--rm-ui-font-size-body-small);line-height:var(--rm-ui-line-height-body-small);color:var(--rm-ui-color-text-secondary)}

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

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { Base } from '../../utils/types';
+export type DropzoneRejectionReason = 'tooLarge' | 'wrongType';
+export interface DropzoneProps extends Base {
+    accept: string;
+    multiple?: boolean;
+    maxSize?: number;
+    disabled?: boolean;
+    invitation: ReactNode;
+    helpText?: ReactNode;
+    onDrop: (files: File[]) => void;
+    onReject?: (files: File[], reason: DropzoneRejectionReason) => void;
+}
+export declare const Dropzone: ({ accept, multiple, maxSize, disabled, invitation, helpText, onDrop, onReject, ...base }: DropzoneProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/dropzone/dropzone.component.js

@@ -0,0 +1,107 @@
+import { jsxs as C, jsx as p } from "react/jsx-runtime";
+import { useRef as N, useState as T } from "react";
+import { Upload as L } from "lucide-react";
+import { baseProps as I, clsx as P } from "../../utils/functions/functions.util.js";
+import '../../assets/dropzone-iRe6v-43.css';const W = "_Dropzone_14jbn_1", k = "_Active_14jbn_21", E = "_Disabled_14jbn_31", K = "_HiddenInput_14jbn_36", O = "_Icon_14jbn_48", $ = "_Invitation_14jbn_52", B = "_HelpText_14jbn_58", o = {
+  Dropzone: W,
+  Active: k,
+  Disabled: E,
+  HiddenInput: K,
+  Icon: O,
+  Invitation: $,
+  HelpText: B
+}, F = (r, u) => {
+  const s = u.split(",").map((n) => n.trim()).filter(Boolean);
+  return s.length === 0 ? !0 : s.some((n) => {
+    if (n.startsWith("."))
+      return r.name.toLowerCase().endsWith(n.toLowerCase());
+    if (n.endsWith("/*")) {
+      const f = n.slice(0, -1);
+      return r.type.startsWith(f);
+    }
+    return r.type === n;
+  });
+}, M = ({
+  accept: r,
+  multiple: u = !1,
+  maxSize: s,
+  disabled: n = !1,
+  invitation: f,
+  helpText: d,
+  onDrop: y,
+  onReject: c,
+  ...D
+}) => {
+  const h = N(null), [b, g] = T(!1), _ = I(D, "data-testid", "dropzone"), x = (t) => {
+    const l = [], a = [], i = [];
+    for (const e of t) {
+      if (!F(e, r)) {
+        i.push(e);
+        continue;
+      }
+      if (s !== void 0 && e.size > s) {
+        a.push(e);
+        continue;
+      }
+      l.push(e);
+    }
+    return { accepted: l, tooLarge: a, wrongType: i };
+  }, m = (t) => {
+    if (!t || t.length === 0) return;
+    const l = Array.from(t), { accepted: a, tooLarge: i, wrongType: e } = x(l);
+    a.length > 0 && y(a), i.length > 0 && c && c(i, "tooLarge"), e.length > 0 && c && c(e, "wrongType");
+  }, A = () => {
+    n || h.current?.click();
+  }, H = (t) => {
+    n || (t.key === "Enter" || t.key === " ") && (t.preventDefault(), h.current?.click());
+  }, w = (t) => {
+    m(t.target.files), t.target.value = "";
+  }, v = (t) => {
+    t.preventDefault(), t.stopPropagation(), !n && g(!0);
+  }, z = (t) => {
+    t.preventDefault(), t.stopPropagation(), g(!1);
+  }, j = (t) => {
+    t.preventDefault(), t.stopPropagation(), g(!1), !n && m(t.dataTransfer.files);
+  };
+  return /* @__PURE__ */ C(
+    "div",
+    {
+      "data-testid": _,
+      className: P(o.Dropzone, I(D, "className"), {
+        [o.Active]: b,
+        [o.Disabled]: n
+      }),
+      role: "button",
+      tabIndex: n ? -1 : 0,
+      "aria-disabled": n,
+      onClick: A,
+      onKeyDown: H,
+      onDragOver: v,
+      onDragEnter: v,
+      onDragLeave: z,
+      onDrop: j,
+      children: [
+        /* @__PURE__ */ p(
+          "input",
+          {
+            ref: h,
+            type: "file",
+            className: o.HiddenInput,
+            accept: r,
+            multiple: u,
+            disabled: n,
+            onChange: w,
+            "data-testid": `${_}-input`,
+            tabIndex: -1
+          }
+        ),
+        /* @__PURE__ */ p(L, { size: 32, className: o.Icon, "aria-hidden": !0 }),
+        /* @__PURE__ */ p("div", { className: o.Invitation, children: f }),
+        d != null && /* @__PURE__ */ p("div", { className: o.HelpText, children: d })
+      ]
+    }
+  );
+};
+export {
+  M as Dropzone
+};

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

@@ -0,0 +1 @@
+export { Dropzone, type DropzoneProps, type DropzoneRejectionReason } from './dropzone.component';

package/dist/components/dropzone/index.js

@@ -0,0 +1,4 @@
+import { Dropzone as e } from "./dropzone.component.js";
+export {
+  e as Dropzone
+};

package/dist/main.d.ts

@@ -23,7 +23,9 @@ 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 { Dropzone, type DropzoneProps, type DropzoneRejectionReason } from './components/dropzone';
 export { BottomBar } from './components/bottom-bar';
 export { Certifications, type CertificationsProps } from './components/certifications';
 export { DataProtectedLabel } from './components/data-protected-label';

package/dist/main.js

@@ -4,105 +4,109 @@ 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 D } from "./controls/interactives/dropdown/dropdown.component.js";
+import { Input as P } 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";
 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";
-import { HiddenInput as z } from "./controls/primitives/hidden-input/hidden-input.component.js";
+import { Caption as z } from "./controls/primitives/caption/caption.component.js";
+import { Choice as N } from "./controls/primitives/choice/choice.component.js";
+import { ErrorMessage as W } from "./controls/primitives/error-message/error-message.component.js";
+import { HiddenInput as q } from "./controls/primitives/hidden-input/hidden-input.component.js";
 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 { Dropzone as ro } from "./components/dropzone/dropzone.component.js";
+import { BottomBar as to } from "./components/bottom-bar/bottom-bar.component.js";
+import { Certifications as mo } from "./components/certifications/certifications.component.js";
+import { DataProtectedLabel as fo } from "./components/data-protected-label/data-protected-label.component.js";
+import { Dialog as no } from "./components/dialog/dialog.component.js";
+import { DialogArticle as co } from "./components/dialog-article/dialog-article.component.js";
+import { Expenses as so } from "./components/expenses/expenses.component.js";
+import { Footer as go } from "./components/footer/footer.component.js";
+import { FormRow as Co } from "./components/form-row/form-row.component.js";
+import { Header as Lo } 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 Io } from "./components/layout/layout.component.js";
+import { Line as Ro } from "./components/line/line.component.js";
+import { Loader as ho } from "./components/loader/loader.component.js";
+import { MainAttachment as yo } from "./components/main-attachment/main-attachment.component.js";
+import { Message as ko } from "./components/message/message.component.js";
+import { MessageBlock as Ho } from "./components/message-block/message-block.component.js";
+import { NotFound as Go } from "./components/not-found/not-found.component.js";
+import { Payment as Uo } from "./components/payment/payment.component.js";
+import { PriceLine as jo } from "./components/price-line/price-line.component.js";
+import { Sidebar as Jo } from "./components/sidebar/sidebar.component.js";
+import { Signature as Oo } from "./components/signature/signature.component.js";
+import { Svg as Vo } from "./utils/svg/svg.component.js";
+import { Text as Yo } from "./components/text/text.component.js";
+import { UserPanel as _o } from "./components/user-panel/user-panel.component.js";
+import { Warranty as or } from "./components/warranty/warranty.component.js";
+import { clsx as er, convertToEuro as tr } from "./utils/functions/functions.util.js";
 import './assets/main-DZmlIs7j.css';export {
-  Z as AccordionTable,
-  $ as BottomBar,
+  Z as Accordion,
+  $ as AccordionTable,
+  to as BottomBar,
   v as Box,
   d as Button,
-  c as ButtonCard,
+  l as ButtonCard,
   u as ButtonRadio,
   B as ButtonText,
-  G as Caption,
+  z as Caption,
   F as CardImage,
   T as CardText,
-  ro as Certifications,
+  mo as Certifications,
   S as Checkbox,
-  U as Choice,
-  to as DataProtectedLabel,
-  mo as Dialog,
-  fo as DialogArticle,
-  P as Dropdown,
-  j as ErrorMessage,
-  no as Expenses,
+  N as Choice,
+  fo as DataProtectedLabel,
+  no as Dialog,
+  co as DialogArticle,
+  D as Dropdown,
+  ro as Dropzone,
+  W as ErrorMessage,
+  so as Expenses,
   t as FadeGrow,
   m as FadeScale,
   f as FadeSlide,
-  lo as Footer,
-  so as FormRow,
-  go as Header,
-  z as HiddenInput,
-  Co as InfoPanel,
-  Lo as Information,
-  A as Input,
+  go as Footer,
+  Co as FormRow,
+  Lo as Header,
+  q as HiddenInput,
+  bo as InfoPanel,
+  Ao as Information,
+  P 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,
+  Io as Layout,
+  Ro as Line,
+  ho as Loader,
+  yo as MainAttachment,
+  ko as Message,
+  Ho as MessageBlock,
+  Go as NotFound,
+  Uo as Payment,
+  jo as PriceLine,
   M as Radio,
   Q as RadioLabel,
   n as Rotate,
-  Wo as Sidebar,
-  qo as Signature,
+  Jo as Sidebar,
+  Oo as Signature,
   X as Status,
-  Jo as Svg,
-  Oo as Text,
+  Vo as Svg,
+  Yo as Text,
   w as TextArea,
   E as TextField,
-  Vo as UserPanel,
-  Yo as Warranty,
-  _o as clsx,
-  $o as convertToEuro
+  _o as UserPanel,
+  or as Warranty,
+  er as clsx,
+  tr as convertToEuro
 };

package/package.json

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