@hai-dev/ui-kit 1.0.0 → 1.0.2

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

@@ -1,123 +1,393 @@
-import { jsx as e, jsxs as u } from "react/jsx-runtime";
-import { S as y } from "../../../../index-BiffjjQq.js";
-import { s as B, a as b, b as P, g as I, C as O, T as S, d as j, P as o, c as C, B as T } from "../../../../Button-BjNjCLw8.js";
-import { localizedText as d } from "../../locale.js";
-import { EN_LOCALE as A } from "../../../../constants.js";
-import { DEFAULT_MIN_DIMENSION as L, DEFAULT_ASPECT_RATIO as R } from "../../constants.js";
-import { u as M, e as k, D as v, a as F, b as U, c as H, d as w } from "../../../../DialogTitle-1A3dJ174.js";
-import * as z from "react";
-import '../../../../assets/upload-dialog.css';function G(m = {}) {
+import { jsxs as B, jsx as n } from "react/jsx-runtime";
+import { S as j } from "../../../../index-BiffjjQq.js";
+import { c as i } from "../../../../index-B2JRaoNz.js";
+import { localizedText as b } from "../../locale.js";
+import { EN_LOCALE as O } from "../../../../constants.js";
+import { DEFAULT_MIN_DIMENSION as D, DEFAULT_ASPECT_RATIO as P } from "../../constants.js";
+import { D as E, d as N, a as k, b as M, c as q } from "../../../../DialogTitle-iOQ7wKEt.js";
+import * as T from "react";
+import { g as U, a as W, u as $, s as A, c as F, b as g, d as V, B as H, P as t, f as Y } from "../../../../ButtonBase-Bw_3RZmN.js";
+import { u as Z, m as z, c as R, C as G } from "../../../../CircularProgress-BD6BPlN2.js";
+import { Button as J } from "../../../button/button.js";
+import '../../../../assets/upload-dialog.css';function K(o) {
+  return W("MuiIconButton", o);
+}
+const L = U("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorError", "colorInfo", "colorSuccess", "colorWarning", "edgeStart", "edgeEnd", "sizeSmall", "sizeMedium", "sizeLarge", "loading", "loadingIndicator", "loadingWrapper"]), Q = (o) => {
   const {
-    themeId: s,
-    defaultTheme: n,
-    defaultClassName: l = "MuiBox-root",
-    generateClassName: c
-  } = m, p = B("div", {
-    shouldForwardProp: (a) => a !== "theme" && a !== "sx" && a !== "as"
-  })(b);
-  return /* @__PURE__ */ z.forwardRef(function(h, i) {
-    const r = M(n), {
-      className: t,
-      component: g = "div",
-      ...f
-    } = k(h);
-    return /* @__PURE__ */ e(p, {
-      as: g,
-      ref: i,
-      className: P(t, c ? c(l) : l),
-      theme: s && r[s] || r,
-      ...f
-    });
+    classes: e,
+    disabled: a,
+    color: l,
+    edge: d,
+    size: u,
+    loading: m
+  } = o, p = {
+    root: ["root", m && "loading", a && "disabled", l !== "default" && `color${g(l)}`, d && `edge${g(d)}`, `size${g(u)}`],
+    loadingIndicator: ["loadingIndicator"],
+    loadingWrapper: ["loadingWrapper"]
+  };
+  return V(p, K, e);
+}, X = A(H, {
+  name: "MuiIconButton",
+  slot: "Root",
+  overridesResolver: (o, e) => {
+    const {
+      ownerState: a
+    } = o;
+    return [e.root, a.loading && e.loading, a.color !== "default" && e[`color${g(a.color)}`], a.edge && e[`edge${g(a.edge)}`], e[`size${g(a.size)}`]];
+  }
+})(z(({
+  theme: o
+}) => ({
+  textAlign: "center",
+  flex: "0 0 auto",
+  fontSize: o.typography.pxToRem(24),
+  padding: 8,
+  borderRadius: "50%",
+  color: (o.vars || o).palette.action.active,
+  transition: o.transitions.create("background-color", {
+    duration: o.transitions.duration.shortest
+  }),
+  variants: [{
+    props: (e) => !e.disableRipple,
+    style: {
+      "--IconButton-hoverBg": o.alpha((o.vars || o).palette.action.active, (o.vars || o).palette.action.hoverOpacity),
+      "&:hover": {
+        backgroundColor: "var(--IconButton-hoverBg)",
+        // Reset on touch devices, it doesn't add specificity
+        "@media (hover: none)": {
+          backgroundColor: "transparent"
+        }
+      }
+    }
+  }, {
+    props: {
+      edge: "start"
+    },
+    style: {
+      marginLeft: -12
+    }
+  }, {
+    props: {
+      edge: "start",
+      size: "small"
+    },
+    style: {
+      marginLeft: -3
+    }
+  }, {
+    props: {
+      edge: "end"
+    },
+    style: {
+      marginRight: -12
+    }
+  }, {
+    props: {
+      edge: "end",
+      size: "small"
+    },
+    style: {
+      marginRight: -3
+    }
+  }]
+})), z(({
+  theme: o
+}) => ({
+  variants: [{
+    props: {
+      color: "inherit"
+    },
+    style: {
+      color: "inherit"
+    }
+  }, ...Object.entries(o.palette).filter(R()).map(([e]) => ({
+    props: {
+      color: e
+    },
+    style: {
+      color: (o.vars || o).palette[e].main
+    }
+  })), ...Object.entries(o.palette).filter(R()).map(([e]) => ({
+    props: {
+      color: e
+    },
+    style: {
+      "--IconButton-hoverBg": o.alpha((o.vars || o).palette[e].main, (o.vars || o).palette.action.hoverOpacity)
+    }
+  })), {
+    props: {
+      size: "small"
+    },
+    style: {
+      padding: 5,
+      fontSize: o.typography.pxToRem(18)
+    }
+  }, {
+    props: {
+      size: "large"
+    },
+    style: {
+      padding: 12,
+      fontSize: o.typography.pxToRem(28)
+    }
+  }],
+  [`&.${L.disabled}`]: {
+    backgroundColor: "transparent",
+    color: (o.vars || o).palette.action.disabled
+  },
+  [`&.${L.loading}`]: {
+    color: "transparent"
+  }
+}))), oo = A("span", {
+  name: "MuiIconButton",
+  slot: "LoadingIndicator"
+})(({
+  theme: o
+}) => ({
+  display: "none",
+  position: "absolute",
+  visibility: "visible",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  color: (o.vars || o).palette.action.disabled,
+  variants: [{
+    props: {
+      loading: !0
+    },
+    style: {
+      display: "flex"
+    }
+  }]
+})), S = /* @__PURE__ */ T.forwardRef(function(e, a) {
+  const l = $({
+    props: e,
+    name: "MuiIconButton"
+  }), {
+    edge: d = !1,
+    children: u,
+    className: m,
+    color: p = "default",
+    disabled: h = !1,
+    disableFocusRipple: f = !1,
+    size: C = "medium",
+    id: s,
+    loading: c = null,
+    loadingIndicator: v,
+    ...I
+  } = l, y = Z(s), x = v ?? /* @__PURE__ */ n(G, {
+    "aria-labelledby": y,
+    color: "inherit",
+    size: 16
+  }), _ = {
+    ...l,
+    edge: d,
+    color: p,
+    disabled: h,
+    disableFocusRipple: f,
+    loading: c,
+    loadingIndicator: x,
+    size: C
+  }, w = Q(_);
+  return /* @__PURE__ */ B(X, {
+    id: c ? y : s,
+    className: F(w.root, m),
+    centerRipple: !0,
+    focusRipple: !f,
+    disabled: h || c,
+    ref: a,
+    ...I,
+    ownerState: _,
+    children: [typeof c == "boolean" && // use plain HTML span to minimize the runtime overhead
+    /* @__PURE__ */ n("span", {
+      className: w.loadingWrapper,
+      style: {
+        display: "contents"
+      },
+      children: /* @__PURE__ */ n(oo, {
+        className: w.loadingIndicator,
+        ownerState: _,
+        children: c && x
+      })
+    }), u]
   });
-}
-const V = I("MuiBox", ["root"]), W = j(), D = G({
-  themeId: S,
-  defaultTheme: W,
-  defaultClassName: V.root,
-  generateClassName: O.generate
 });
-process.env.NODE_ENV !== "production" && (D.propTypes = {
+process.env.NODE_ENV !== "production" && (S.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The icon to display.
+   */
+  children: Y(t.node, (o) => T.Children.toArray(o.children).some((a) => /* @__PURE__ */ T.isValidElement(a) && a.props.onClick) ? new Error(["MUI: You are providing an onClick event listener to a child of a button element.", "Prefer applying it to the IconButton directly.", "This guarantees that the whole <button> will be responsive to click events."].join(`
+`)) : null),
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: t.object,
+  /**
+   * @ignore
+   */
+  className: t.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'default'
+   */
+  color: t.oneOfType([t.oneOf(["inherit", "default", "primary", "secondary", "error", "info", "success", "warning"]), t.string]),
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: t.bool,
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple: t.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
+   */
+  disableRipple: t.bool,
+  /**
+   * If given, uses a negative margin to counteract the padding on one
+   * side (this is often helpful for aligning the left or right
+   * side of the icon with content above or below, without ruining the border
+   * size and shape).
+   * @default false
+   */
+  edge: t.oneOf(["end", "start", !1]),
   /**
    * @ignore
    */
-  children: o.node,
+  id: t.string,
+  /**
+   * If `true`, the loading indicator is visible and the button is disabled.
+   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
+   * @default null
+   */
+  loading: t.bool,
+  /**
+   * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default, it renders a `CircularProgress` that is labeled by the button itself.
+   * @default <CircularProgress color="inherit" size={16} />
+   */
+  loadingIndicator: t.node,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   * @default 'medium'
    */
-  component: o.elementType,
+  size: t.oneOfType([t.oneOf(["small", "medium", "large"]), t.string]),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object])
+  sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object])
 });
-const q = "_dialog_jouds_1", J = "_dialogText_jouds_1", N = {
-  dialog: q,
-  dialogText: J
-}, eo = (m) => {
+const to = "data:image/svg+xml,%3csvg%20width='46'%20height='46'%20viewBox='0%200%2046%2046'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M17.3434%2015.4595C16.8227%2014.9388%2015.9785%2014.9388%2015.4578%2015.4595C14.9371%2015.9802%2014.9371%2016.8244%2015.4578%2017.3451L21.1146%2023.002L15.4578%2028.6588C14.9371%2029.1795%2014.9371%2030.0237%2015.4578%2030.5444C15.9785%2031.0651%2016.8227%2031.0651%2017.3434%2030.5444L23.0002%2024.8876L28.6571%2030.5444C29.1778%2031.0651%2030.022%2031.0651%2030.5427%2030.5444C31.0634%2030.0237%2031.0634%2029.1795%2030.5427%2028.6588L24.8858%2023.002L30.5427%2017.3451C31.0634%2016.8244%2031.0634%2015.9802%2030.5427%2015.4595C30.022%2014.9388%2029.1778%2014.9388%2028.6571%2015.4595L23.0002%2021.1163L17.3434%2015.4595Z'%20fill='%233AA8FF'/%3e%3c/svg%3e", eo = "_dialog_wdj3q_1", ao = "_topActions_wdj3q_6", no = "_close_wdj3q_12", io = "_botActions_wdj3q_16", ro = "_button_wdj3q_19", so = "_title_wdj3q_22", lo = "_content_wdj3q_28", co = "_crop_wdj3q_36", po = "_dialogText_wdj3q_45", r = {
+  dialog: eo,
+  topActions: ao,
+  close: no,
+  botActions: io,
+  button: ro,
+  title: so,
+  content: lo,
+  crop: co,
+  dialogText: po
+}, _o = (o) => {
   const {
-    onCloseDialogHandler: s,
-    photoSource: n,
+    onCloseDialogHandler: e,
+    photoSource: a,
     photoCrop: l,
-    onCropChange: c = () => {
+    onCropChange: d = () => {
     },
-    onPhotoLoad: p,
-    imageRef: x,
-    photoError: a,
+    onPhotoLoad: u,
+    imageRef: m,
+    photoError: p,
     onPhotoCrop: h,
-    minDimension: i = L,
-    aspectRatio: r = R,
-    locale: t = A,
-    circular: g,
-    keepSelection: f = !0,
-    className: _,
-    ...E
-  } = m;
-  return /* @__PURE__ */ u(
-    v,
+    minDimension: f = D,
+    aspectRatio: C = P,
+    locale: s = O,
+    circular: c,
+    keepSelection: v = !0,
+    className: I,
+    ...y
+  } = o;
+  return /* @__PURE__ */ B(
+    E,
     {
-      className: C(N.dialog, _),
-      onClose: s,
-      ...E,
+      className: i(r.dialog, I),
+      onClose: e,
+      ...y,
       children: [
-        /* @__PURE__ */ e(F, { children: d[t]["photo-crop"] }),
-        /* @__PURE__ */ u(U, { children: [
-          n && /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(
-            y,
+        /* @__PURE__ */ n(N, { className: i(r.topActions), children: /* @__PURE__ */ n(
+          S,
+          {
+            onClick: e,
+            className: i(r.close),
+            "aria-label": b[s].back,
+            children: /* @__PURE__ */ n(
+              "img",
+              {
+                width: 40,
+                height: 40,
+                src: to,
+                alt: b[s].back
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ n(k, { className: i(r.title), children: b[s]["photo-crop"] }),
+        /* @__PURE__ */ B(M, { className: i(r.content), children: [
+          a && /* @__PURE__ */ n(
+            j,
             {
+              className: i(r.crop),
               crop: l,
-              circularCrop: g,
-              keepSelection: f,
-              aspect: r,
-              minWidth: i,
-              minHeight: i,
-              onChange: c,
-              children: /* @__PURE__ */ e(
+              circularCrop: c,
+              keepSelection: v,
+              aspect: C,
+              minWidth: f,
+              minHeight: f,
+              onChange: d,
+              children: /* @__PURE__ */ n(
                 "img",
                 {
-                  onLoad: p,
-                  src: n,
-                  ref: x,
-                  alt: d[t]["photo-crop"],
+                  onLoad: u,
+                  src: a,
+                  ref: m,
+                  alt: b[s]["photo-crop"],
                   draggable: !1
                 }
               )
             }
-          ) }),
-          a && /* @__PURE__ */ e(H, { className: C(N.dialogText), children: a })
+          ),
+          p && /* @__PURE__ */ n(q, { className: i(r.dialogText), children: p })
         ] }),
-        /* @__PURE__ */ u(w, { children: [
-          /* @__PURE__ */ e(T, { onClick: s, children: d[t].back }),
-          /* @__PURE__ */ e(T, { onClick: h, children: d[t].crop })
-        ] })
+        /* @__PURE__ */ n(N, { className: i(r.botActions), children: /* @__PURE__ */ n(
+          J,
+          {
+            minWidth: "100%",
+            buttonSize: "small",
+            buttonColor: "blue",
+            buttonVariant: "filled",
+            buttonWeight: 500,
+            className: i(r.button),
+            onClick: h,
+            children: b[s].crop
+          }
+        ) })
       ]
     }
   );
 };
 export {
-  eo as UploadDialog
+  _o as UploadDialog
 };

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

@@ -1,5 +1,5 @@
 export declare const DEFAULT_ASPECT_RATIO = 1;
-export declare const DEFAULT_MIN_DIMENSION = 150;
+export declare const DEFAULT_MIN_DIMENSION = 670;
 export declare const JPG_IMAGE_EXT = ".jpg";
 export declare const JPEG_IMAGE_EXT = ".jpeg";
 export declare const PNG_IMAGE_EXT = ".png";

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

@@ -1,5 +1,5 @@
 import { BYTE_TO_KILOBYTE as T } from "../../constants.js";
-const S = 1, e = 150, E = ".jpg", _ = ".jpeg", G = ".png", M = ".svg", P = ".bmp", o = ".gif", I = ".ico", A = ".webp", p = [
+const S = 1, e = 670, E = ".jpg", _ = ".jpeg", G = ".png", M = ".svg", P = ".bmp", o = ".gif", I = ".ico", A = ".webp", p = [
   E,
   _,
   G,

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

@@ -2,8 +2,8 @@ const e = {
   en: {
     upload: "Upload a photo",
     drop: "Drop the file here",
-    "photo-crop": "Cropping a photo",
-    crop: "Crop",
+    "photo-crop": "Select the display area",
+    crop: "Save",
     back: "Back",
     "photo-size-error": "The photo size must be at least",
     pixels: "pixels",
@@ -23,8 +23,8 @@ const e = {
   ru: {
     upload: "Загрузить фото",
     drop: "Отпустите файл здесь",
-    "photo-crop": "Обрезка фотографии",
-    crop: "Обрезать",
+    "photo-crop": "Выберите отображаемую область",
+    crop: "Сохранить",
     back: "Назад",
     "photo-size-error": "Размер фотографии должен быть не меньше",
     pixels: "пикселей",