@hai-dev/ui-kit 1.0.0 → 1.0.1

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

@@ -1,82 +1,89 @@
-import { jsxs as K, Fragment as Q, jsx as s } from "react/jsx-runtime";
+import { jsxs as Y, Fragment as $, jsx as s } from "react/jsx-runtime";
 import { useState as a, useRef as S } from "react";
 import "../../index-BiffjjQq.js";
-import { c as V } from "../../Button-BjNjCLw8.js";
-import { localizedText as W } from "./locale.js";
-import { EN_LOCALE as Y } from "../../constants.js";
-import { DEFAULT_MIN_DIMENSION as $, DEFAULT_ASPECT_RATIO as oo, DEFAULT_TIMEOUT as to, DEFAULT_FILE_MAX_SIZE as ro } from "./constants.js";
-import { UploadDialog as eo } from "./components/upload-dialog/upload-dialog.js";
-import { UploadButton as ao } from "./components/upload-button/upload-button.js";
-import { ErrorUploadDialog as no } from "./components/error-upload-dialog/error-upload-dialog.js";
-import { validatePhotoFile as so } from "./utils/validate-photo-file.js";
-import { readPhoto as po } from "./utils/read-photo.js";
-import { getPhotoCrop as io } from "./utils/get-photo-crop.js";
-import { getCropedPhoto as lo } from "./utils/get-croped-photo.js";
-import '../../assets/photo-crop-uploader.css';const co = "_photoCropCanvas_1i4lr_1", ho = {
-  photoCropCanvas: co
-}, vo = (_) => {
+import { c as oo } from "../../index-B2JRaoNz.js";
+import { localizedText as to } from "./locale.js";
+import { EN_LOCALE as ro } from "../../constants.js";
+import { DEFAULT_MIN_DIMENSION as eo, DEFAULT_ASPECT_RATIO as ao, DEFAULT_TIMEOUT as no, DEFAULT_FILE_MAX_SIZE as so } from "./constants.js";
+import { UploadDialog as po } from "./components/upload-dialog/upload-dialog.js";
+import { UploadButton as lo } from "./components/upload-button/upload-button.js";
+import { ErrorUploadDialog as io } from "./components/error-upload-dialog/error-upload-dialog.js";
+import { validatePhotoFile as co } from "./utils/validate-photo-file.js";
+import { readPhoto as ho } from "./utils/read-photo.js";
+import { getPhotoCrop as mo } from "./utils/get-photo-crop.js";
+import { getCropedPhoto as fo } from "./utils/get-croped-photo.js";
+import '../../assets/photo-crop-uploader.css';const uo = "_photoCropCanvas_1i4lr_1", Co = {
+  photoCropCanvas: uo
+}, Io = (U) => {
   const {
-    buttonClassname: U = "",
+    buttonClassname: _ = "",
     onStartUpload: T = () => {
     },
-    onEndUpload: w = () => {
+    onEndUpload: v = () => {
     },
-    onError: v = () => {
+    onError: w = () => {
     },
     onStartCrop: x = () => {
     },
     onEndCrop: A = () => {
     },
-    showErrorPopup: F = !1,
-    minDimension: n = $,
-    aspectRatio: l = oo,
-    locale: e = Y,
-    timeout: I = to,
-    fileMaxSize: y = ro,
+    onDragOver: F = () => {
+    },
+    onDragLeave: I = () => {
+    },
+    onDragDrop: O = () => {
+    },
+    showErrorPopup: b = !1,
+    minDimension: n = eo,
+    aspectRatio: i = ao,
+    locale: e = ro,
+    timeout: y = no,
+    fileMaxSize: M = so,
     allowedExtensions: c,
-    allowedMimeTypes: M,
-    circular: O,
-    width: N,
-    keepSelection: R,
-    ...b
-  } = _, [z, p] = a(!1), [H, h] = a(""), [i, d] = a(), m = S(null), f = S(null), [u, C] = a(!1), [E, P] = a(""), [j, g] = a(!1), D = () => {
+    allowedMimeTypes: N,
+    circular: R,
+    width: z,
+    keepSelection: H,
+    photoCropUploaderSlots: j,
+    ...k
+  } = U, [B, p] = a(!1), [X, h] = a(""), [l, d] = a(), m = S(null), f = S(null), [u, C] = a(!1), [E, g] = a(""), [Z, P] = a(!1), D = () => {
     p(!1);
-  }, k = () => {
-    g(!1);
-  }, B = (o) => {
-    w(o), h(o), p(!0), P("");
+  }, q = () => {
+    P(!1);
+  }, G = (o) => {
+    v(o), h(o), p(!0), g("");
   }, L = (o) => {
-    o instanceof Error && (console.warn(o.message), v(o), P(o.message), g(!0), h(""), p(!1));
-  }, X = async (o) => {
+    o instanceof Error && (console.warn(o.message), w(o), g(o.message), P(!0), h(""), p(!1));
+  }, J = async (o) => {
     const r = o.target.files?.[0];
     if (r)
       try {
-        C(!0), T(), so(
+        C(!0), T(), co(
           r,
-          { maxSize: y, allowedExtensions: c, allowedMimeTypes: M },
+          { maxSize: M, allowedExtensions: c, allowedMimeTypes: N },
           e
         );
-        const t = await po(r, n, e, I);
-        B(t);
+        const t = await ho(r, n, e, y);
+        G(t);
       } catch (t) {
         L(t);
       } finally {
         o.target.value = "", C(!1);
       }
-  }, Z = (o) => {
-    const { width: r, height: t } = o.currentTarget, J = io(r, t, n, l);
-    d(J);
-  }, q = (o, r) => {
+  }, K = (o) => {
+    const { width: r, height: t } = o.currentTarget, W = mo(r, t, n, i);
+    d(W);
+  }, Q = (o, r) => {
     d(r);
-  }, G = () => {
+  }, V = () => {
     const o = f.current, r = m.current;
-    if (o && r && i)
+    if (o && r && l)
       try {
         x();
-        const t = lo(
+        const t = fo(
           r,
           o,
-          i,
+          l,
           e
         );
         A(t), D();
@@ -84,53 +91,57 @@ import '../../assets/photo-crop-uploader.css';const co = "_photoCropCanvas_1i4lr
         t instanceof Error && (console.warn(t), L(t));
       }
   };
-  return /* @__PURE__ */ K(Q, { children: [
+  return /* @__PURE__ */ Y($, { children: [
     /* @__PURE__ */ s(
-      ao,
+      lo,
       {
-        onChange: X,
-        buttonClassname: U,
+        onChange: J,
+        buttonClassname: _,
         disabled: u,
         buttonDisabled: u,
         locale: e,
-        width: N,
+        width: z,
         allowedExtensions: c,
-        ...b,
-        children: W[e].upload
+        onDragDrop: O,
+        onDragLeave: I,
+        onDragOver: F,
+        button: j?.button,
+        ...k,
+        children: to[e].upload
       }
     ),
     /* @__PURE__ */ s(
-      eo,
+      po,
       {
-        open: z,
-        photoCrop: i,
-        photoSource: H,
+        open: B,
+        photoCrop: l,
+        photoSource: X,
         photoError: E,
         onCloseDialogHandler: D,
-        onCropChange: q,
-        onPhotoCrop: G,
-        onPhotoLoad: Z,
+        onCropChange: Q,
+        onPhotoCrop: V,
+        onPhotoLoad: K,
         imageRef: m,
         minDimension: n,
-        aspectRatio: l,
+        aspectRatio: i,
         locale: e,
-        circular: O,
-        keepSelection: R
+        circular: R,
+        keepSelection: H
       }
     ),
     /* @__PURE__ */ s(
-      no,
+      io,
       {
-        open: F && j,
+        open: b && Z,
         photoError: E,
-        onCloseErrorDialog: k,
+        onCloseErrorDialog: q,
         locale: e
       }
     ),
     /* @__PURE__ */ s(
       "canvas",
       {
-        className: V(ho.photoCropCanvas),
+        className: oo(Co.photoCropCanvas),
         width: n,
         height: n,
         ref: f
@@ -139,5 +150,5 @@ import '../../assets/photo-crop-uploader.css';const co = "_photoCropCanvas_1i4lr
   ] });
 };
 export {
-  vo as PhotoCropUploader
+  Io as PhotoCropUploader
 };

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

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes } from 'react';
+import { DragEvent, InputHTMLAttributes, ReactNode } from 'react';
 import { Locale } 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;
@@ -10,6 +10,9 @@ export type PhotoFileOptions = {
     allowedExtensions?: PhotoExtension[];
     allowedMimeTypes?: PhotoMimeType[];
 };
+export type PhotoCropUploaderSlots = {
+    button?: ReactNode;
+};
 export type PhotoCropUploaderCustomProps = {
     buttonClassname?: string;
     onStartUpload?: () => unknown;
@@ -17,6 +20,9 @@ export type PhotoCropUploaderCustomProps = {
     onError?: (error: Error) => unknown;
     onStartCrop?: () => unknown;
     onEndCrop?: (photoData: PhotoDataUrl) => unknown;
+    onDragOver?: (event: DragEvent<HTMLDivElement>) => unknown;
+    onDragLeave?: (event: DragEvent<HTMLDivElement>) => unknown;
+    onDragDrop?: (event: DragEvent<HTMLDivElement>) => unknown;
     showErrorPopup?: boolean;
     minDimension?: number;
     aspectRatio?: number;
@@ -28,6 +34,7 @@ export type PhotoCropUploaderCustomProps = {
     circular?: boolean;
     keepSelection?: boolean;
     width?: number;
+    photoCropUploaderSlots?: PhotoCropUploaderSlots;
 };
 export type PhotoCropUploaderProps = PhotoCropUploaderCustomProps & InputHTMLAttributes<HTMLInputElement>;
 export type PhotoCropUploaderLocaleText = Record<Locale, Record<string, string>>;

package/dist/index-B2JRaoNz.js

@@ -0,0 +1,48 @@
+function c(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+}
+var o = { exports: {} };
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+var i;
+function p() {
+  return i || (i = 1, (function(e) {
+    (function() {
+      var u = {}.hasOwnProperty;
+      function s() {
+        for (var t = "", r = 0; r < arguments.length; r++) {
+          var n = arguments[r];
+          n && (t = a(t, f(n)));
+        }
+        return t;
+      }
+      function f(t) {
+        if (typeof t == "string" || typeof t == "number")
+          return t;
+        if (typeof t != "object")
+          return "";
+        if (Array.isArray(t))
+          return s.apply(null, t);
+        if (t.toString !== Object.prototype.toString && !t.toString.toString().includes("[native code]"))
+          return t.toString();
+        var r = "";
+        for (var n in t)
+          u.call(t, n) && t[n] && (r = a(r, n));
+        return r;
+      }
+      function a(t, r) {
+        return r ? t ? t + " " + r : t + r : t;
+      }
+      e.exports ? (s.default = s, e.exports = s) : window.classNames = s;
+    })();
+  })(o)), o.exports;
+}
+var l = p();
+const m = /* @__PURE__ */ c(l);
+export {
+  m as c,
+  c as g
+};

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { PhotoCropUploader } from './components';
+export { PhotoCropUploader, Button } from './components';
 export type { Locale } 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';

package/dist/index.js

@@ -1,26 +1,28 @@
 import { BYTE_TO_KILOBYTE as G, EN_LOCALE as I, RU_LOCALE as T } from "./constants.js";
-import { BMP_IMAGE_EXT as P, BMP_IMAGE_TYPE as A, GIF_IMAGE_EXT as Y, GIF_IMAGE_TYPE as o, ICO_IMAGE_EXT as O, ICO_IMAGE_TYPE as r, JPEG_IMAGE_EXT as X, JPEG_IMAGE_TYPE as C, JPG_IMAGE_EXT as B, JPG_IMAGE_TYPE as p, MICROSOFT_ICO_IMAGE_TYPE as L, PNG_IMAGE_EXT as e, PNG_IMAGE_TYPE as t, SVG_IMAGE_EXT as J, SVG_IMAGE_TYPE as f, WEBP_IMAGE_EXT as m, WEBP_IMAGE_TYPE as x } from "./components/photo-crop-uploader/constants.js";
+import { BMP_IMAGE_EXT as P, BMP_IMAGE_TYPE as A, GIF_IMAGE_EXT as o, GIF_IMAGE_TYPE as Y, ICO_IMAGE_EXT as r, ICO_IMAGE_TYPE as O, JPEG_IMAGE_EXT as X, JPEG_IMAGE_TYPE as t, JPG_IMAGE_EXT as B, JPG_IMAGE_TYPE as C, MICROSOFT_ICO_IMAGE_TYPE as p, PNG_IMAGE_EXT as e, PNG_IMAGE_TYPE as L, SVG_IMAGE_EXT as f, SVG_IMAGE_TYPE as m, WEBP_IMAGE_EXT as x, WEBP_IMAGE_TYPE as J } from "./components/photo-crop-uploader/constants.js";
 import { PhotoCropUploader as N } from "./components/photo-crop-uploader/photo-crop-uploader.js";
+import { Button as R } from "./components/button/button.js";
 export {
   P as BMP_IMAGE_EXT,
   A as BMP_IMAGE_TYPE,
   G as BYTE_TO_KILOBYTE,
+  R as Button,
   I as EN_LOCALE,
-  Y as GIF_IMAGE_EXT,
-  o as GIF_IMAGE_TYPE,
-  O as ICO_IMAGE_EXT,
-  r as ICO_IMAGE_TYPE,
+  o as GIF_IMAGE_EXT,
+  Y as GIF_IMAGE_TYPE,
+  r as ICO_IMAGE_EXT,
+  O as ICO_IMAGE_TYPE,
   X as JPEG_IMAGE_EXT,
-  C as JPEG_IMAGE_TYPE,
+  t as JPEG_IMAGE_TYPE,
   B as JPG_IMAGE_EXT,
-  p as JPG_IMAGE_TYPE,
-  L as MICROSOFT_ICO_IMAGE_TYPE,
+  C as JPG_IMAGE_TYPE,
+  p as MICROSOFT_ICO_IMAGE_TYPE,
   e as PNG_IMAGE_EXT,
-  t as PNG_IMAGE_TYPE,
+  L as PNG_IMAGE_TYPE,
   N as PhotoCropUploader,
   T as RU_LOCALE,
-  J as SVG_IMAGE_EXT,
-  f as SVG_IMAGE_TYPE,
-  m as WEBP_IMAGE_EXT,
-  x as WEBP_IMAGE_TYPE
+  f as SVG_IMAGE_EXT,
+  m as SVG_IMAGE_TYPE,
+  x as WEBP_IMAGE_EXT,
+  J as WEBP_IMAGE_TYPE
 };

package/package.json

@@ -1,73 +1,73 @@
-{
-  "name": "@hai-dev/ui-kit",
-  "private": false,
-  "version": "1.0.0",
-  "author": {
-    "name": "Vladislav Knitrunov",
-    "email": "kingvlad3008@gmail.com",
-    "url": "https://gitlab.com/kingvlad3008"
-  },
-  "type": "module",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "prepublishOnly": "npm run build",
-    "lint": "eslint .",
-    "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "prepare": "husky"
-  },
-  "peerDependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
-    "@mui/material": "^7.3.2",
-    "@types/node": "^24.5.2",
-    "classnames": "^2.5.1",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "react-image-crop": "^11.0.10",
-    "sass": "^1.93.1"
-  },
-  "devDependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
-    "@eslint/js": "^9.36.0",
-    "@mui/material": "^7.3.2",
-    "@storybook/addon-docs": "9.1.8",
-    "@storybook/addon-onboarding": "9.1.8",
-    "@storybook/react-vite": "9.1.8",
-    "@types/node": "^24.5.2",
-    "@types/react": "^19.1.13",
-    "@types/react-dom": "^19.1.9",
-    "@vitejs/plugin-react": "^5.0.3",
-    "classnames": "^2.5.1",
-    "eslint": "^9.36.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
-    "eslint-plugin-storybook": "9.1.8",
-    "glob": "^11.0.3",
-    "globals": "^16.4.0",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "react-image-crop": "^11.0.10",
-    "sass": "^1.93.1",
-    "storybook": "9.1.8",
-    "typescript": "~5.8.3",
-    "typescript-eslint": "^8.44.0",
-    "vite": "^7.1.7",
-    "vite-plugin-dts": "^4.5.4",
-    "vite-plugin-lib-inject-css": "^2.2.2",
-    "@commitlint/cli": "^20.0.0",
-    "@commitlint/config-conventional": "^20.0.0",
-    "husky": "^9.1.7"
-  },
-  "sideEffects": [
-    "**/*.css"
-  ]
-}
+{
+  "name": "@hai-dev/ui-kit",
+  "private": false,
+  "version": "1.0.1",
+  "author": {
+    "name": "Vladislav Knitrunov",
+    "email": "kingvlad3008@gmail.com",
+    "url": "https://gitlab.com/kingvlad3008"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "prepublishOnly": "npm run build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "prepare": "husky"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/material": "^7.3.2",
+    "@types/node": "^24.5.2",
+    "classnames": "^2.5.1",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-image-crop": "^11.0.10",
+    "sass": "^1.93.1"
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@eslint/js": "^9.36.0",
+    "@mui/material": "^7.3.2",
+    "@storybook/addon-docs": "9.1.8",
+    "@storybook/addon-onboarding": "9.1.8",
+    "@storybook/react-vite": "9.1.8",
+    "@types/node": "^24.5.2",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^5.0.3",
+    "classnames": "^2.5.1",
+    "eslint": "^9.36.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "eslint-plugin-storybook": "9.1.8",
+    "glob": "^11.0.3",
+    "globals": "^16.4.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-image-crop": "^11.0.10",
+    "sass": "^1.93.1",
+    "storybook": "9.1.8",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.44.0",
+    "vite": "^7.1.7",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "@commitlint/cli": "^20.0.0",
+    "@commitlint/config-conventional": "^20.0.0",
+    "husky": "^9.1.7"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ]
+}