@hai-dev/ui-kit 1.1.10 → 1.1.12

package/dist/components/photo-crop-uploader/photo-crop-uploader.js

@@ -1,73 +1,74 @@
-import { jsxs as No, Fragment as Ho, jsx as U } from "react/jsx-runtime";
-import { useState as i, useRef as A } from "react";
-import { v as Vo, D as bo } from "../../index-CcueJ2sD.js";
-import { c as ko } from "../../index-YnD2EP-S.js";
-import { localizedText as zo } from "./locale.js";
-import { EN_LOCALE as jo } from "../../constants.js";
-import { DEFAULT_MIN_DIMENSION as Wo, DEFAULT_ASPECT_RATIO as Bo, DEFAULT_TIMEOUT as Go, DEFAULT_FILE_MAX_SIZE as Xo, DEFAULT_VIDEO_FILE_MAX_SIZE as Yo, DEFAULT_BASE_DIMENSION as Zo, FULL_PROGRESS_VALUE as $, PHOTO_LOADING_DELAY as qo, RESET_DATA_DELAY as d } from "./constants.js";
-import { UploadDialog as Jo } from "./components/upload-dialog/upload-dialog.js";
-import { UploadButton as Ko } from "./components/upload-button/upload-button.js";
-import { ErrorUploadDialog as Qo } from "./components/error-upload-dialog/error-upload-dialog.js";
-import { isVideo as oo } from "./utils/is-video.js";
-import { validateVideoFile as eo } from "./utils/validate-video-file.js";
-import { validatePhotoFile as to } from "./utils/validate-photo-file.js";
-import { readPhoto as ro } from "./utils/read-photo.js";
-import { getPhotoCrop as $o } from "./utils/get-photo-crop.js";
-import { getCroppedSource as oe } from "./utils/get-cropped-source.js";
-import { getDefaultCroppedPhoto as no } from "./utils/get-default-cropped-photo.js";
-import '../../assets/photo-crop-uploader.css';const ee = "_photoCropCanvas_1i4lr_1", te = {
-  photoCropCanvas: ee
+import { jsxs as Ho, Fragment as Vo, jsx as A } from "react/jsx-runtime";
+import { useState as i, useRef as U } from "react";
+import { v as bo, D as ko } from "../../index-CcueJ2sD.js";
+import { c as zo } from "../../index-YnD2EP-S.js";
+import { localizedText as jo } from "./locale.js";
+import { EN_LOCALE as Wo, DARK_THEME as Bo } from "../../constants.js";
+import { DEFAULT_MIN_DIMENSION as Go, DEFAULT_ASPECT_RATIO as Xo, DEFAULT_TIMEOUT as Yo, DEFAULT_FILE_MAX_SIZE as Zo, DEFAULT_VIDEO_FILE_MAX_SIZE as Ko, DEFAULT_BASE_DIMENSION as qo, FULL_PROGRESS_VALUE as oo, PHOTO_LOADING_DELAY as Jo, RESET_DATA_DELAY as d } from "./constants.js";
+import { UploadDialog as Qo } from "./components/upload-dialog/upload-dialog.js";
+import { UploadButton as $o } from "./components/upload-button/upload-button.js";
+import { ErrorUploadDialog as oe } from "./components/error-upload-dialog/error-upload-dialog.js";
+import { isVideo as eo } from "./utils/is-video.js";
+import { validateVideoFile as to } from "./utils/validate-video-file.js";
+import { validatePhotoFile as ro } from "./utils/validate-photo-file.js";
+import { readPhoto as no } from "./utils/read-photo.js";
+import { getPhotoCrop as ee } from "./utils/get-photo-crop.js";
+import { getCroppedSource as te } from "./utils/get-cropped-source.js";
+import { getDefaultCroppedPhoto as so } from "./utils/get-default-cropped-photo.js";
+import '../../assets/photo-crop-uploader.css';const re = "_photoCropCanvas_1i4lr_1", ne = {
+  photoCropCanvas: re
 };
-function Le(a) {
+function Te(a) {
   const {
-    buttonClassname: so = "",
-    onStartUpload: ao = () => {
+    buttonClassname: ao = "",
+    onStartUpload: io = () => {
     },
-    onEndUpload: io = () => {
+    onEndUpload: lo = () => {
     },
-    onError: lo = () => {
+    onError: co = () => {
     },
-    onStartCrop: co = () => {
+    onStartCrop: po = () => {
     },
-    onDragOver: po = () => {
+    onDragOver: uo = () => {
     },
-    onDragLeave: uo = () => {
+    onDragLeave: fo = () => {
     },
-    onDragDrop: fo = () => {
+    onDragDrop: ho = () => {
     },
-    showErrorPopup: ho = !1,
-    minDimension: l = Wo,
-    aspectRatio: C = Bo,
-    locale: n = jo,
-    timeout: M = Go,
-    fileMaxSize: N = Xo,
-    videoFileMaxSize: H = Yo,
+    showErrorPopup: mo = !1,
+    minDimension: l = Go,
+    aspectRatio: C = Xo,
+    locale: n = Wo,
+    timeout: y = Yo,
+    fileMaxSize: N = Zo,
+    videoFileMaxSize: H = Ko,
     allowedExtensions: w,
     allowedMimeTypes: V,
-    circular: mo,
+    circular: Co,
     usePercentCrop: b = !0,
-    width: Co,
+    width: Eo,
     keepSelection: go,
-    uploadButton: Eo,
-    multiple: g = !1,
+    uploadButton: Po,
+    multiple: E = !1,
     fromSources: k,
     withVideoUploaded: v = !1,
-    returnCropParams: Po = !1,
+    returnCropParams: Do = !1,
     dialogClassname: z,
-    defaultDimension: Do = Zo,
-    ...So
-  } = a, {
-    onEndCrop: re,
-    onClose: ne,
+    theme: j = Bo,
+    defaultDimension: So = qo,
     ...Lo
-  } = So, [_o, E] = i(!1), [P, D] = i([]), [I, x] = i([]), f = A([]), h = A([]), [p, j] = i(0), W = A(null), B = A(null), [c, O] = i(!1), [To, G] = i(0), [X, Y] = i(""), [Uo, S] = i([]), [Ao, Z] = i(!1), wo = _o || c && g, vo = () => {
+  } = a, {
+    onEndCrop: se,
+    onClose: ae,
+    ..._o
+  } = Lo, [To, g] = i(!1), [P, D] = i([]), [I, x] = i([]), f = U([]), h = U([]), [p, W] = i(0), B = U(null), G = U(null), [c, O] = i(!1), [Ao, X] = i(0), [Y, Z] = i(""), [Uo, S] = i([]), [wo, K] = i(!1), vo = To || c && E, Io = () => {
     S([]);
   }, F = (e = []) => {
     c || (a.returnCropParams === !0 && a.onClose?.(
       e,
       f.current,
       h.current
-    ), E(!1), setTimeout(() => S([]), d), setTimeout(() => D([]), d), setTimeout(() => {
+    ), g(!1), setTimeout(() => S([]), d), setTimeout(() => D([]), d), setTimeout(() => {
       f.current = [], h.current = [];
     }, d));
   }, R = (e = []) => {
@@ -75,32 +76,32 @@ function Le(a) {
       e,
       f.current,
       h.current
-    ), E(!1), setTimeout(() => S([]), d), setTimeout(() => D([]), d), setTimeout(() => {
+    ), g(!1), setTimeout(() => S([]), d), setTimeout(() => D([]), d), setTimeout(() => {
       f.current = [], h.current = [];
     }, d));
   }, q = () => {
     c || (a.returnCropParams === !0 ? F([]) : R([]));
-  }, Io = () => {
-    Z(!1);
+  }, xo = () => {
+    K(!1);
   }, L = (e, t = e, o = [], r = !1) => {
-    io(e), Y(""), D(e), x(Array(e.length)), j(0), E(!0), f.current = t, h.current = o, !e.length && !r && q();
-  }, y = (e) => {
-    e instanceof Error && (console.warn(e.message), lo(e), Y(e.message), Z(!0), D([]), E(!1), f.current = [], h.current = []);
-  }, xo = async (e) => {
+    lo(e), Z(""), D(e), x(Array(e.length)), W(0), g(!0), f.current = t, h.current = o, !e.length && !r && q();
+  }, M = (e) => {
+    e instanceof Error && (console.warn(e.message), co(e), Z(e.message), K(!0), D([]), g(!1), f.current = [], h.current = []);
+  }, Oo = async (e) => {
     const { files: t } = e.target;
     if (t?.length && !c)
       try {
-        if (O(!0), ao(), g) {
-          const o = Array.from(t), r = $ / o.length, _ = [], u = [], K = [], T = [];
+        if (O(!0), io(), E) {
+          const o = Array.from(t), r = oo / o.length, _ = [], u = [], Q = [], T = [];
           for (const m of o) {
-            const Mo = oo(m);
+            const No = eo(m);
             try {
-              if (v && Mo) {
-                eo(m, H, n);
+              if (v && No) {
+                to(m, H, n);
                 const s = URL.createObjectURL(m);
-                K.push(u.length), u.push(s);
+                Q.push(u.length), u.push(s);
               } else {
-                to(
+                ro(
                   m,
                   {
                     maxSize: N,
@@ -109,85 +110,85 @@ function Le(a) {
                   },
                   n
                 );
-                const s = await ro(
+                const s = await no(
                   m,
                   l,
                   n,
-                  M
+                  y
                 );
                 _.push(s), u.push(s);
               }
             } catch (s) {
-              let Q = "";
-              s instanceof Error && (Q = s.message), T.push({
+              let $ = "";
+              s instanceof Error && ($ = s.message), T.push({
                 photoName: m.name,
-                errorMessage: Q
+                errorMessage: $
               });
             }
-            G(
-              (s) => Math.min($, s + r)
+            X(
+              (s) => Math.min(oo, s + r)
             ), await new Promise((s) => setTimeout(s, 0));
           }
           if (k?.length)
             throw new Error(T[0]?.errorMessage);
-          S(T), L(_, u, K, T.length > 0);
+          S(T), L(_, u, Q, T.length > 0);
         } else {
           const o = t[0];
-          if (v && oo(o)) {
-            eo(o, H, n);
+          if (v && eo(o)) {
+            to(o, H, n);
             const r = URL.createObjectURL(o);
             L([], [r], [0]);
           } else {
-            to(
+            ro(
               o,
               { maxSize: N, allowedExtensions: w, allowedMimeTypes: V },
               n
             );
-            const r = await ro(o, l, n, M);
+            const r = await no(o, l, n, y);
             L([r]);
           }
         }
       } catch (o) {
-        y(o);
+        M(o);
       } finally {
-        g ? setTimeout(() => {
-          e.target.value = "", G(0), O(!1);
-        }, qo) : (e.target.value = "", O(!1));
+        E ? setTimeout(() => {
+          e.target.value = "", X(0), O(!1);
+        }, Jo) : (e.target.value = "", O(!1));
       }
-  }, Oo = (e) => {
-    const { width: t, height: o } = e.currentTarget, r = $o(
+  }, Fo = (e) => {
+    const { width: t, height: o } = e.currentTarget, r = ee(
       t,
       o,
       l,
       C,
       !1,
-      Do
+      So
     );
     x((_) => {
       const u = [..._];
       return u[p] = r, u;
     });
-  }, Fo = (e, t) => {
+  }, Ro = (e, t) => {
     x((o) => {
       const r = [...o];
       return r[p] = t, r;
     });
   }, J = () => {
-    const e = B.current, t = W.current;
+    const e = G.current, t = B.current;
     if (e && t && I)
       try {
         const o = I[p];
         if (!o) return !1;
-        if (co(), a.returnCropParams === !0) {
+        if (po(), a.returnCropParams === !0) {
           if (b) {
-            const r = Vo(
+            const r = bo(
               o,
               t.naturalWidth,
               t.naturalHeight
             );
             a.onEndCrop?.(r);
           } else {
-            const r = bo(
+            const r = ko(
               o,
               t.naturalWidth,
               t.naturalHeight
@@ -196,7 +197,7 @@ function Le(a) {
           }
           p >= P.length - 1 && F();
         } else {
-          const r = oe(
+          const r = te(
             t,
             e,
             o,
@@ -206,19 +207,19 @@ function Le(a) {
         }
         return !0;
       } catch (o) {
-        return o instanceof Error && (console.warn(o), y(o)), !1;
+        return o instanceof Error && (console.warn(o), M(o)), !1;
       }
     else
       return !1;
-  }, Ro = () => {
-    J() && j((t) => t + 1);
+  }, Mo = () => {
+    J() && W((t) => t + 1);
   }, yo = async () => {
     const e = P.slice(p);
     try {
-      if (Po) {
+      if (Do) {
         const t = await Promise.all(
           e.map(
-            (o) => no(
+            (o) => so(
               o,
               l,
               C,
@@ -232,7 +233,7 @@ function Le(a) {
       } else {
         const t = await Promise.all(
           e.map(
-            (o) => no(
+            (o) => so(
               o,
               l,
               C,
@@ -244,80 +245,82 @@ function Le(a) {
         R(t);
       }
     } catch (t) {
-      y(t);
+      M(t);
     }
   };
-  return /* @__PURE__ */ No(Ho, { children: [
-    /* @__PURE__ */ U(
-      Ko,
+  return /* @__PURE__ */ Ho(Vo, { children: [
+    /* @__PURE__ */ A(
+      $o,
       {
-        onChange: xo,
+        onChange: Oo,
         onPhotoDataLoaded: L,
-        buttonClassname: so,
+        buttonClassname: ao,
         disabled: c,
         buttonDisabled: c,
         locale: n,
-        width: Co,
+        width: Eo,
         allowedExtensions: w,
-        onDragDrop: fo,
-        onDragLeave: uo,
-        onDragOver: po,
-        button: Eo,
-        multiple: g,
+        onDragDrop: ho,
+        onDragLeave: fo,
+        onDragOver: uo,
+        button: Po,
+        multiple: E,
         fromSources: k,
         withVideoUploaded: v,
-        ...Lo,
-        children: zo[n].upload
+        ..._o,
+        children: jo[n].upload
       }
     ),
-    /* @__PURE__ */ U(
-      Jo,
+    /* @__PURE__ */ A(
+      Qo,
       {
-        open: wo,
+        open: vo,
         className: z,
         photoSourceLoading: c,
-        loadingValue: To,
+        loadingValue: Ao,
         errors: Uo,
         photoCrops: I,
         photoSources: P,
-        onNextPhoto: Ro,
+        onNextPhoto: Mo,
         onSkipCrop: yo,
-        onClearErrors: vo,
-        photoError: X,
+        onClearErrors: Io,
+        photoError: Y,
         onCloseDialogHandler: q,
-        onCropChange: Fo,
+        onCropChange: Ro,
         onPhotoCrop: J,
-        onPhotoLoad: Oo,
-        imageRef: W,
+        onPhotoLoad: Fo,
+        imageRef: B,
         minDimension: l,
         aspectRatio: C,
         locale: n,
-        circular: mo,
+        circular: Co,
         keepSelection: go,
-        photoIndex: p
+        photoIndex: p,
+        theme: j
       }
     ),
-    /* @__PURE__ */ U(
-      Qo,
+    /* @__PURE__ */ A(
+      oe,
       {
         className: z,
-        open: ho && Ao,
-        photoError: X,
-        onCloseErrorDialog: Io,
-        locale: n
+        open: mo && wo,
+        photoError: Y,
+        onCloseErrorDialog: xo,
+        locale: n,
+        theme: j
       }
     ),
-    /* @__PURE__ */ U(
+    /* @__PURE__ */ A(
       "canvas",
       {
-        className: ko(te.photoCropCanvas),
+        className: zo(ne.photoCropCanvas),
         width: l,
         height: l,
-        ref: B
+        ref: G
       }
     )
   ] });
 }
 export {
-  Le as PhotoCropUploader
+  Te as PhotoCropUploader
 };

package/dist/components/photo-crop-uploader/types.d.ts

@@ -1,6 +1,6 @@
 import { DragEvent, InputHTMLAttributes, ReactNode } from 'react';
 import { Crop } from 'react-image-crop';
-import { Locale } from '../../types';
+import { Locale, Theme } from '../../types';
 import { BMP_IMAGE_TYPE, GIF_IMAGE_TYPE, ICO_IMAGE_TYPE, JPEG_IMAGE_TYPE, JPG_IMAGE_TYPE, MICROSOFT_ICO_IMAGE_TYPE, PNG_IMAGE_TYPE, SVG_IMAGE_TYPE, WEBP_IMAGE_TYPE, ICO_IMAGE_EXT, BMP_IMAGE_EXT, GIF_IMAGE_EXT, JPEG_IMAGE_EXT, JPG_IMAGE_EXT, PNG_IMAGE_EXT, SVG_IMAGE_EXT, WEBP_IMAGE_EXT } from './constants';
 export type PhotoDataUrl = string;
 export type PhotoFileSize = number;
@@ -53,6 +53,7 @@ export type PhotoCropUploaderCustomProps = {
     fromSources?: PhotoDataUrl[];
     withVideoUploaded?: boolean;
     dialogClassname?: string;
+    theme?: Theme;
 };
 export type PhotoCropUploaderProps = PhotoCropUploaderCustomProps & CropProps & InputHTMLAttributes<HTMLInputElement>;
 export type PhotoCropUploaderLocaleText = Record<Locale, Record<string, string>>;

package/dist/constants.d.ts

@@ -3,3 +3,5 @@ export declare const RU_LOCALE = "ru";
 export declare const BYTE_TO_KILOBYTE = 1024;
 export declare const PERCENT_SYMBOL = "%";
 export declare const DASH_SYMBOL = "-";
+export declare const LIGHT_THEME = "light";
+export declare const DARK_THEME = "dark";

package/dist/constants.js

@@ -1,8 +1,10 @@
-const E = "en", L = "ru", n = 1024, o = "%", t = "-";
+const E = "en", t = "ru", n = 1024, o = "%", L = "-", _ = "light", c = "dark";
 export {
   n as BYTE_TO_KILOBYTE,
-  t as DASH_SYMBOL,
+  c as DARK_THEME,
+  L as DASH_SYMBOL,
   E as EN_LOCALE,
+  _ as LIGHT_THEME,
   o as PERCENT_SYMBOL,
-  L as RU_LOCALE
+  t as RU_LOCALE
 };

package/dist/index.d.ts

@@ -1,8 +1,8 @@
-export { PhotoCropUploader, Button, CircularProgressLoader, CodeInput } from './components';
+export { PhotoCropUploader, Button, CircularProgressLoader, CodeInput, } from './components';
 export { drawCroppedImage } from './components';
 export type { Crop, PercentCrop, PixelCrop } from 'react-image-crop';
 export type { CodeInputProps } from './components';
-export type { Locale } from './types';
+export type { Locale, Theme } from './types';
 export type { PhotoDataUrl, PhotoFileSize, PhotoExtension, PhotoMimeType, PhotoFileOptions, PhotoCropUploaderProps, } from './components/photo-crop-uploader/types';
-export { EN_LOCALE, RU_LOCALE, BYTE_TO_KILOBYTE } from './constants';
+export { EN_LOCALE, RU_LOCALE, BYTE_TO_KILOBYTE, LIGHT_THEME, DARK_THEME, } from './constants';
 export { JPG_IMAGE_EXT, JPEG_IMAGE_EXT, PNG_IMAGE_EXT, SVG_IMAGE_EXT, BMP_IMAGE_EXT, GIF_IMAGE_EXT, WEBP_IMAGE_EXT, ICO_IMAGE_EXT, BMP_IMAGE_TYPE, GIF_IMAGE_TYPE, ICO_IMAGE_TYPE, JPEG_IMAGE_TYPE, JPG_IMAGE_TYPE, MICROSOFT_ICO_IMAGE_TYPE, PNG_IMAGE_TYPE, SVG_IMAGE_TYPE, WEBP_IMAGE_TYPE, } from './components/photo-crop-uploader/constants';

package/dist/index.js

@@ -1,34 +1,36 @@
-import { BYTE_TO_KILOBYTE as G, EN_LOCALE as I, RU_LOCALE as o } from "./constants.js";
-import { BMP_IMAGE_EXT as P, BMP_IMAGE_TYPE as T, GIF_IMAGE_EXT as M, GIF_IMAGE_TYPE as A, ICO_IMAGE_EXT as e, ICO_IMAGE_TYPE as p, JPEG_IMAGE_EXT as t, JPEG_IMAGE_TYPE as Y, JPG_IMAGE_EXT as C, JPG_IMAGE_TYPE as O, MICROSOFT_ICO_IMAGE_TYPE as m, PNG_IMAGE_EXT as X, PNG_IMAGE_TYPE as f, SVG_IMAGE_EXT as x, SVG_IMAGE_TYPE as B, WEBP_IMAGE_EXT as L, WEBP_IMAGE_TYPE as a } from "./components/photo-crop-uploader/constants.js";
-import { Button as J } from "./components/button/button.js";
-import { CircularProgressLoader as F } from "./components/circular-progress-loader/circular-progress-loader.js";
+import { BYTE_TO_KILOBYTE as G, DARK_THEME as I, EN_LOCALE as T, LIGHT_THEME as o, RU_LOCALE as r } from "./constants.js";
+import { BMP_IMAGE_EXT as P, BMP_IMAGE_TYPE as A, GIF_IMAGE_EXT as e, GIF_IMAGE_TYPE as p, ICO_IMAGE_EXT as t, ICO_IMAGE_TYPE as Y, JPEG_IMAGE_EXT as C, JPEG_IMAGE_TYPE as O, JPG_IMAGE_EXT as m, JPG_IMAGE_TYPE as X, MICROSOFT_ICO_IMAGE_TYPE as f, PNG_IMAGE_EXT as x, PNG_IMAGE_TYPE as B, SVG_IMAGE_EXT as L, SVG_IMAGE_TYPE as a, WEBP_IMAGE_EXT as d, WEBP_IMAGE_TYPE as J } from "./components/photo-crop-uploader/constants.js";
+import { Button as F } from "./components/button/button.js";
+import { CircularProgressLoader as N } from "./components/circular-progress-loader/circular-progress-loader.js";
 import { CodeInput as S } from "./components/code-input/code-input.js";
 import { PhotoCropUploader as l } from "./components/photo-crop-uploader/photo-crop-uploader.js";
 import { drawCroppedImage as s } from "./components/photo-crop-uploader/utils/draw-cropped-image.js";
 export {
   P as BMP_IMAGE_EXT,
-  T as BMP_IMAGE_TYPE,
+  A as BMP_IMAGE_TYPE,
   G as BYTE_TO_KILOBYTE,
-  J as Button,
-  F as CircularProgressLoader,
+  F as Button,
+  N as CircularProgressLoader,
   S as CodeInput,
-  I as EN_LOCALE,
-  M as GIF_IMAGE_EXT,
-  A as GIF_IMAGE_TYPE,
-  e as ICO_IMAGE_EXT,
-  p as ICO_IMAGE_TYPE,
-  t as JPEG_IMAGE_EXT,
-  Y as JPEG_IMAGE_TYPE,
-  C as JPG_IMAGE_EXT,
-  O as JPG_IMAGE_TYPE,
-  m as MICROSOFT_ICO_IMAGE_TYPE,
-  X as PNG_IMAGE_EXT,
-  f as PNG_IMAGE_TYPE,
+  I as DARK_THEME,
+  T as EN_LOCALE,
+  e as GIF_IMAGE_EXT,
+  p as GIF_IMAGE_TYPE,
+  t as ICO_IMAGE_EXT,
+  Y as ICO_IMAGE_TYPE,
+  C as JPEG_IMAGE_EXT,
+  O as JPEG_IMAGE_TYPE,
+  m as JPG_IMAGE_EXT,
+  X as JPG_IMAGE_TYPE,
+  o as LIGHT_THEME,
+  f as MICROSOFT_ICO_IMAGE_TYPE,
+  x as PNG_IMAGE_EXT,
+  B as PNG_IMAGE_TYPE,
   l as PhotoCropUploader,
-  o as RU_LOCALE,
-  x as SVG_IMAGE_EXT,
-  B as SVG_IMAGE_TYPE,
-  L as WEBP_IMAGE_EXT,
-  a as WEBP_IMAGE_TYPE,
+  r as RU_LOCALE,
+  L as SVG_IMAGE_EXT,
+  a as SVG_IMAGE_TYPE,
+  d as WEBP_IMAGE_EXT,
+  J as WEBP_IMAGE_TYPE,
   s as drawCroppedImage
 };

package/dist/types.d.ts

@@ -1,2 +1,3 @@
-import { EN_LOCALE, RU_LOCALE } from './constants';
+import { DARK_THEME, EN_LOCALE, LIGHT_THEME, RU_LOCALE } from './constants';
 export type Locale = typeof EN_LOCALE | typeof RU_LOCALE;
+export type Theme = typeof LIGHT_THEME | typeof DARK_THEME;