@arthurzakharov/ui-kit 3.5.0 → 3.6.0

package/dist/assets/dropzone-CxglLL5C.css

@@ -0,0 +1 @@
+._Dropzone_e3zu0_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_e3zu0_1:hover,._Active_e3zu0_21{border-color:var(--rm-ui-color-theme-primary);background-color:var(--rm-ui-color-background-primary, #fff)}._Dropzone_e3zu0_1:focus-visible{outline:2px solid var(--rm-ui-color-focus);outline-offset:2px}._Disabled_e3zu0_31{cursor:not-allowed;opacity:.5}._HiddenInput_e3zu0_36{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._Title_e3zu0_48{font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body);color:var(--rm-ui-color-text-primary)}._Icon_e3zu0_54{color:var(--rm-ui-color-theme-primary)}._Invitation_e3zu0_58{font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body);color:var(--rm-ui-color-text-primary)}._HelpText_e3zu0_64{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

@@ -6,9 +6,10 @@ export interface DropzoneProps extends Base {
     multiple?: boolean;
     maxSize?: number;
     disabled?: boolean;
+    title?: ReactNode;
     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;
+export declare const Dropzone: ({ accept, multiple, maxSize, disabled, title, invitation, helpText, onDrop, onReject, ...base }: DropzoneProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/package.json

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

package/dist/assets/dropzone-iRe6v-43.css

@@ -1 +0,0 @@
-._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)}