@arthurzakharov/ui-kit 2.8.0 → 2.9.0

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/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

@@ -25,6 +25,7 @@ export { RadioLabel, type RadioLabelProps } from './controls/primitives/radio-la
 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

@@ -10,101 +10,103 @@ import { ButtonText as B } from "./controls/buttons/button-text/button-text.comp
 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 I } from "./controls/interactives/dropdown/dropdown.component.js";
-import { Input as R } 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 { 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 { 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 Accordion,
   $ as AccordionTable,
-  ro as BottomBar,
+  to as BottomBar,
   v as Box,
   d as Button,
   l as ButtonCard,
   u as ButtonRadio,
   B as ButtonText,
-  G as Caption,
+  z as Caption,
   F as CardImage,
   T as CardText,
-  to as Certifications,
+  mo as Certifications,
   S as Checkbox,
-  U as Choice,
-  mo as DataProtectedLabel,
-  fo as Dialog,
-  no as DialogArticle,
-  I as Dropdown,
-  j as ErrorMessage,
-  co 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,
-  so as Footer,
-  go as FormRow,
-  Co as Header,
-  z as HiddenInput,
-  Lo as InfoPanel,
-  bo as Information,
-  R 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,
-  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,
+  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,
-  qo as Sidebar,
-  Jo as Signature,
+  Jo as Sidebar,
+  Oo as Signature,
   X as Status,
-  Oo as Svg,
-  Vo as Text,
+  Vo as Svg,
+  Yo as Text,
   w as TextArea,
   E as TextField,
-  Yo as UserPanel,
-  _o as Warranty,
-  or as clsx,
-  rr 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.8.0",
+  "version": "2.9.0",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",