@hai-dev/ui-kit 1.0.0

package/dist/index-BiffjjQq.js

@@ -0,0 +1,431 @@
+import p, { PureComponent as H, createRef as k } from "react";
+var X = Object.defineProperty, $ = (s, t, e) => t in s ? X(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e, u = (s, t, e) => $(s, typeof t != "symbol" ? t + "" : t, e);
+const E = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  unit: "px"
+}, R = (s, t, e) => Math.min(Math.max(s, t), e), P = (...s) => s.filter((t) => t && typeof t == "string").join(" "), Y = (s, t) => s === t || s.width === t.width && s.height === t.height && s.x === t.x && s.y === t.y && s.unit === t.unit;
+function N(s, t, e, o) {
+  const i = C(s, e, o);
+  return s.width && (i.height = i.width / t), s.height && (i.width = i.height * t), i.y + i.height > o && (i.height = o - i.y, i.width = i.height * t), i.x + i.width > e && (i.width = e - i.x, i.height = i.width / t), s.unit === "%" ? f(i, e, o) : i;
+}
+function O(s, t, e) {
+  const o = C(s, t, e);
+  return o.x = (t - o.width) / 2, o.y = (e - o.height) / 2, s.unit === "%" ? f(o, t, e) : o;
+}
+function f(s, t, e) {
+  return s.unit === "%" ? { ...E, ...s, unit: "%" } : {
+    unit: "%",
+    x: s.x ? s.x / t * 100 : 0,
+    y: s.y ? s.y / e * 100 : 0,
+    width: s.width ? s.width / t * 100 : 0,
+    height: s.height ? s.height / e * 100 : 0
+  };
+}
+function C(s, t, e) {
+  return s.unit ? s.unit === "px" ? { ...E, ...s, unit: "px" } : {
+    unit: "px",
+    x: s.x ? s.x * t / 100 : 0,
+    y: s.y ? s.y * e / 100 : 0,
+    width: s.width ? s.width * t / 100 : 0,
+    height: s.height ? s.height * e / 100 : 0
+  } : { ...E, ...s, unit: "px" };
+}
+function _(s, t, e, o, i, n = 0, a = 0, l = o, h = i) {
+  const r = { ...s };
+  let c = Math.min(n, o), w = Math.min(a, i), g = Math.min(l, o), d = Math.min(h, i);
+  t && (t > 1 ? (c = a ? a * t : c, w = c / t, g = l * t) : (w = n ? n / t : w, c = w * t, d = h / t)), r.y < 0 && (r.height = Math.max(r.height + r.y, w), r.y = 0), r.x < 0 && (r.width = Math.max(r.width + r.x, c), r.x = 0);
+  const m = o - (r.x + r.width);
+  m < 0 && (r.x = Math.min(r.x, o - c), r.width += m);
+  const x = i - (r.y + r.height);
+  if (x < 0 && (r.y = Math.min(r.y, i - w), r.height += x), r.width < c && ((e === "sw" || e == "nw") && (r.x -= c - r.width), r.width = c), r.height < w && ((e === "nw" || e == "ne") && (r.y -= w - r.height), r.height = w), r.width > g && ((e === "sw" || e == "nw") && (r.x -= g - r.width), r.width = g), r.height > d && ((e === "nw" || e == "ne") && (r.y -= d - r.height), r.height = d), t) {
+    const b = r.width / r.height;
+    if (b < t) {
+      const D = Math.max(r.width / t, w);
+      (e === "nw" || e == "ne") && (r.y -= D - r.height), r.height = D;
+    } else if (b > t) {
+      const D = Math.max(r.height * t, c);
+      (e === "sw" || e == "nw") && (r.x -= D - r.width), r.width = D;
+    }
+  }
+  return r;
+}
+function S(s, t, e, o) {
+  const i = { ...s };
+  return t === "ArrowLeft" ? o === "nw" ? (i.x -= e, i.y -= e, i.width += e, i.height += e) : o === "w" ? (i.x -= e, i.width += e) : o === "sw" ? (i.x -= e, i.width += e, i.height += e) : o === "ne" ? (i.y += e, i.width -= e, i.height -= e) : o === "e" ? i.width -= e : o === "se" && (i.width -= e, i.height -= e) : t === "ArrowRight" && (o === "nw" ? (i.x += e, i.y += e, i.width -= e, i.height -= e) : o === "w" ? (i.x += e, i.width -= e) : o === "sw" ? (i.x += e, i.width -= e, i.height -= e) : o === "ne" ? (i.y -= e, i.width += e, i.height += e) : o === "e" ? i.width += e : o === "se" && (i.width += e, i.height += e)), t === "ArrowUp" ? o === "nw" ? (i.x -= e, i.y -= e, i.width += e, i.height += e) : o === "n" ? (i.y -= e, i.height += e) : o === "ne" ? (i.y -= e, i.width += e, i.height += e) : o === "sw" ? (i.x += e, i.width -= e, i.height -= e) : o === "s" ? i.height -= e : o === "se" && (i.width -= e, i.height -= e) : t === "ArrowDown" && (o === "nw" ? (i.x += e, i.y += e, i.width -= e, i.height -= e) : o === "n" ? (i.y += e, i.height -= e) : o === "ne" ? (i.y += e, i.width -= e, i.height -= e) : o === "sw" ? (i.x -= e, i.width += e, i.height += e) : o === "s" ? i.height += e : o === "se" && (i.width += e, i.height += e)), i;
+}
+const M = { capture: !0, passive: !1 };
+let K = 0;
+const v = class y extends H {
+  constructor() {
+    super(...arguments), u(this, "docMoveBound", !1), u(this, "mouseDownOnCrop", !1), u(this, "dragStarted", !1), u(this, "evData", {
+      startClientX: 0,
+      startClientY: 0,
+      startCropX: 0,
+      startCropY: 0,
+      clientX: 0,
+      clientY: 0,
+      isResize: !0
+    }), u(this, "componentRef", k()), u(this, "mediaRef", k()), u(this, "resizeObserver"), u(this, "initChangeCalled", !1), u(this, "instanceId", `rc-${K++}`), u(this, "state", {
+      cropIsActive: !1,
+      newCropIsBeingDrawn: !1
+    }), u(this, "onCropPointerDown", (t) => {
+      const { crop: e, disabled: o } = this.props, i = this.getBox();
+      if (!e)
+        return;
+      const n = C(e, i.width, i.height);
+      if (o)
+        return;
+      t.cancelable && t.preventDefault(), this.bindDocMove(), this.componentRef.current.focus({ preventScroll: !0 });
+      const a = t.target.dataset.ord, l = !!a;
+      let h = t.clientX, r = t.clientY, c = n.x, w = n.y;
+      if (a) {
+        const g = t.clientX - i.x, d = t.clientY - i.y;
+        let m = 0, x = 0;
+        a === "ne" || a == "e" ? (m = g - (n.x + n.width), x = d - n.y, c = n.x, w = n.y + n.height) : a === "se" || a === "s" ? (m = g - (n.x + n.width), x = d - (n.y + n.height), c = n.x, w = n.y) : a === "sw" || a == "w" ? (m = g - n.x, x = d - (n.y + n.height), c = n.x + n.width, w = n.y) : (a === "nw" || a == "n") && (m = g - n.x, x = d - n.y, c = n.x + n.width, w = n.y + n.height), h = c + i.x + m, r = w + i.y + x;
+      }
+      this.evData = {
+        startClientX: h,
+        startClientY: r,
+        startCropX: c,
+        startCropY: w,
+        clientX: t.clientX,
+        clientY: t.clientY,
+        isResize: l,
+        ord: a
+      }, this.mouseDownOnCrop = !0, this.setState({ cropIsActive: !0 });
+    }), u(this, "onComponentPointerDown", (t) => {
+      const { crop: e, disabled: o, locked: i, keepSelection: n, onChange: a } = this.props, l = this.getBox();
+      if (o || i || n && e)
+        return;
+      t.cancelable && t.preventDefault(), this.bindDocMove(), this.componentRef.current.focus({ preventScroll: !0 });
+      const h = t.clientX - l.x, r = t.clientY - l.y, c = {
+        unit: "px",
+        x: h,
+        y: r,
+        width: 0,
+        height: 0
+      };
+      this.evData = {
+        startClientX: t.clientX,
+        startClientY: t.clientY,
+        startCropX: h,
+        startCropY: r,
+        clientX: t.clientX,
+        clientY: t.clientY,
+        isResize: !0
+      }, this.mouseDownOnCrop = !0, a(C(c, l.width, l.height), f(c, l.width, l.height)), this.setState({ cropIsActive: !0, newCropIsBeingDrawn: !0 });
+    }), u(this, "onDocPointerMove", (t) => {
+      const { crop: e, disabled: o, onChange: i, onDragStart: n } = this.props, a = this.getBox();
+      if (o || !e || !this.mouseDownOnCrop)
+        return;
+      t.cancelable && t.preventDefault(), this.dragStarted || (this.dragStarted = !0, n && n(t));
+      const { evData: l } = this;
+      l.clientX = t.clientX, l.clientY = t.clientY;
+      let h;
+      l.isResize ? h = this.resizeCrop() : h = this.dragCrop(), Y(e, h) || i(
+        C(h, a.width, a.height),
+        f(h, a.width, a.height)
+      );
+    }), u(this, "onComponentKeyDown", (t) => {
+      const { crop: e, disabled: o, onChange: i, onComplete: n } = this.props;
+      if (o)
+        return;
+      const a = t.key;
+      let l = !1;
+      if (!e)
+        return;
+      const h = this.getBox(), r = this.makePixelCrop(h), c = (navigator.platform.match("Mac") ? t.metaKey : t.ctrlKey) ? y.nudgeStepLarge : t.shiftKey ? y.nudgeStepMedium : y.nudgeStep;
+      if (a === "ArrowLeft" ? (r.x -= c, l = !0) : a === "ArrowRight" ? (r.x += c, l = !0) : a === "ArrowUp" ? (r.y -= c, l = !0) : a === "ArrowDown" && (r.y += c, l = !0), l) {
+        t.cancelable && t.preventDefault(), r.x = R(r.x, 0, h.width - r.width), r.y = R(r.y, 0, h.height - r.height);
+        const w = C(r, h.width, h.height), g = f(r, h.width, h.height);
+        i(w, g), n && n(w, g);
+      }
+    }), u(this, "onHandlerKeyDown", (t, e) => {
+      const {
+        aspect: o = 0,
+        crop: i,
+        disabled: n,
+        minWidth: a = 0,
+        minHeight: l = 0,
+        maxWidth: h,
+        maxHeight: r,
+        onChange: c,
+        onComplete: w
+      } = this.props, g = this.getBox();
+      if (n || !i)
+        return;
+      if (t.key === "ArrowUp" || t.key === "ArrowDown" || t.key === "ArrowLeft" || t.key === "ArrowRight")
+        t.stopPropagation(), t.preventDefault();
+      else
+        return;
+      const d = (navigator.platform.match("Mac") ? t.metaKey : t.ctrlKey) ? y.nudgeStepLarge : t.shiftKey ? y.nudgeStepMedium : y.nudgeStep, m = C(i, g.width, g.height), x = S(m, t.key, d, e), b = _(
+        x,
+        o,
+        e,
+        g.width,
+        g.height,
+        a,
+        l,
+        h,
+        r
+      );
+      if (!Y(i, b)) {
+        const D = f(b, g.width, g.height);
+        c(b, D), w && w(b, D);
+      }
+    }), u(this, "onDocPointerDone", (t) => {
+      const { crop: e, disabled: o, onComplete: i, onDragEnd: n } = this.props, a = this.getBox();
+      this.unbindDocMove(), !(o || !e) && this.mouseDownOnCrop && (this.mouseDownOnCrop = !1, this.dragStarted = !1, n && n(t), i && i(C(e, a.width, a.height), f(e, a.width, a.height)), this.setState({ cropIsActive: !1, newCropIsBeingDrawn: !1 }));
+    }), u(this, "onDragFocus", () => {
+      var t;
+      (t = this.componentRef.current) == null || t.scrollTo(0, 0);
+    });
+  }
+  get document() {
+    return document;
+  }
+  // We unfortunately get the bounding box every time as x+y changes
+  // due to scrolling.
+  getBox() {
+    const t = this.mediaRef.current;
+    if (!t)
+      return { x: 0, y: 0, width: 0, height: 0 };
+    const { x: e, y: o, width: i, height: n } = t.getBoundingClientRect();
+    return { x: e, y: o, width: i, height: n };
+  }
+  componentDidUpdate(t) {
+    const { crop: e, onComplete: o } = this.props;
+    if (o && !t.crop && e) {
+      const { width: i, height: n } = this.getBox();
+      i && n && o(C(e, i, n), f(e, i, n));
+    }
+  }
+  componentWillUnmount() {
+    this.resizeObserver && this.resizeObserver.disconnect(), this.unbindDocMove();
+  }
+  bindDocMove() {
+    this.docMoveBound || (this.document.addEventListener("pointermove", this.onDocPointerMove, M), this.document.addEventListener("pointerup", this.onDocPointerDone, M), this.document.addEventListener("pointercancel", this.onDocPointerDone, M), this.docMoveBound = !0);
+  }
+  unbindDocMove() {
+    this.docMoveBound && (this.document.removeEventListener("pointermove", this.onDocPointerMove, M), this.document.removeEventListener("pointerup", this.onDocPointerDone, M), this.document.removeEventListener("pointercancel", this.onDocPointerDone, M), this.docMoveBound = !1);
+  }
+  getCropStyle() {
+    const { crop: t } = this.props;
+    if (t)
+      return {
+        top: `${t.y}${t.unit}`,
+        left: `${t.x}${t.unit}`,
+        width: `${t.width}${t.unit}`,
+        height: `${t.height}${t.unit}`
+      };
+  }
+  dragCrop() {
+    const { evData: t } = this, e = this.getBox(), o = this.makePixelCrop(e), i = t.clientX - t.startClientX, n = t.clientY - t.startClientY;
+    return o.x = R(t.startCropX + i, 0, e.width - o.width), o.y = R(t.startCropY + n, 0, e.height - o.height), o;
+  }
+  getPointRegion(t, e, o, i) {
+    const { evData: n } = this, a = n.clientX - t.x, l = n.clientY - t.y;
+    let h;
+    i && e ? h = e === "nw" || e === "n" || e === "ne" : h = l < n.startCropY;
+    let r;
+    return o && e ? r = e === "nw" || e === "w" || e === "sw" : r = a < n.startCropX, r ? h ? "nw" : "sw" : h ? "ne" : "se";
+  }
+  resolveMinDimensions(t, e, o = 0, i = 0) {
+    const n = Math.min(o, t.width), a = Math.min(i, t.height);
+    return !e || !n && !a ? [n, a] : e > 1 ? n ? [n, n / e] : [a * e, a] : a ? [a * e, a] : [n, n / e];
+  }
+  resizeCrop() {
+    const { evData: t } = this, { aspect: e = 0, maxWidth: o, maxHeight: i } = this.props, n = this.getBox(), [a, l] = this.resolveMinDimensions(n, e, this.props.minWidth, this.props.minHeight);
+    let h = this.makePixelCrop(n);
+    const r = this.getPointRegion(n, t.ord, a, l), c = t.ord || r;
+    let w = t.clientX - t.startClientX, g = t.clientY - t.startClientY;
+    (a && c === "nw" || c === "w" || c === "sw") && (w = Math.min(w, -a)), (l && c === "nw" || c === "n" || c === "ne") && (g = Math.min(g, -l));
+    const d = {
+      unit: "px",
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    };
+    r === "ne" ? (d.x = t.startCropX, d.width = w, e ? (d.height = d.width / e, d.y = t.startCropY - d.height) : (d.height = Math.abs(g), d.y = t.startCropY - d.height)) : r === "se" ? (d.x = t.startCropX, d.y = t.startCropY, d.width = w, e ? d.height = d.width / e : d.height = g) : r === "sw" ? (d.x = t.startCropX + w, d.y = t.startCropY, d.width = Math.abs(w), e ? d.height = d.width / e : d.height = g) : r === "nw" && (d.x = t.startCropX + w, d.width = Math.abs(w), e ? (d.height = d.width / e, d.y = t.startCropY - d.height) : (d.height = Math.abs(g), d.y = t.startCropY + g));
+    const m = _(
+      d,
+      e,
+      r,
+      n.width,
+      n.height,
+      a,
+      l,
+      o,
+      i
+    );
+    return e || y.xyOrds.indexOf(c) > -1 ? h = m : y.xOrds.indexOf(c) > -1 ? (h.x = m.x, h.width = m.width) : y.yOrds.indexOf(c) > -1 && (h.y = m.y, h.height = m.height), h.x = R(h.x, 0, n.width - h.width), h.y = R(h.y, 0, n.height - h.height), h;
+  }
+  renderCropSelection() {
+    const {
+      ariaLabels: t = y.defaultProps.ariaLabels,
+      disabled: e,
+      locked: o,
+      renderSelectionAddon: i,
+      ruleOfThirds: n,
+      crop: a
+    } = this.props, l = this.getCropStyle();
+    if (a)
+      return /* @__PURE__ */ p.createElement(
+        "div",
+        {
+          style: l,
+          className: "ReactCrop__crop-selection",
+          onPointerDown: this.onCropPointerDown,
+          "aria-label": t.cropArea,
+          tabIndex: 0,
+          onKeyDown: this.onComponentKeyDown,
+          role: "group"
+        },
+        !e && !o && /* @__PURE__ */ p.createElement("div", { className: "ReactCrop__drag-elements", onFocus: this.onDragFocus }, /* @__PURE__ */ p.createElement("div", { className: "ReactCrop__drag-bar ord-n", "data-ord": "n" }), /* @__PURE__ */ p.createElement("div", { className: "ReactCrop__drag-bar ord-e", "data-ord": "e" }), /* @__PURE__ */ p.createElement("div", { className: "ReactCrop__drag-bar ord-s", "data-ord": "s" }), /* @__PURE__ */ p.createElement("div", { className: "ReactCrop__drag-bar ord-w", "data-ord": "w" }), /* @__PURE__ */ p.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-nw",
+            "data-ord": "nw",
+            tabIndex: 0,
+            "aria-label": t.nwDragHandle,
+            onKeyDown: (h) => this.onHandlerKeyDown(h, "nw"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ p.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-n",
+            "data-ord": "n",
+            tabIndex: 0,
+            "aria-label": t.nDragHandle,
+            onKeyDown: (h) => this.onHandlerKeyDown(h, "n"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ p.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-ne",
+            "data-ord": "ne",
+            tabIndex: 0,
+            "aria-label": t.neDragHandle,
+            onKeyDown: (h) => this.onHandlerKeyDown(h, "ne"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ p.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-e",
+            "data-ord": "e",
+            tabIndex: 0,
+            "aria-label": t.eDragHandle,
+            onKeyDown: (h) => this.onHandlerKeyDown(h, "e"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ p.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-se",
+            "data-ord": "se",
+            tabIndex: 0,
+            "aria-label": t.seDragHandle,
+            onKeyDown: (h) => this.onHandlerKeyDown(h, "se"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ p.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-s",
+            "data-ord": "s",
+            tabIndex: 0,
+            "aria-label": t.sDragHandle,
+            onKeyDown: (h) => this.onHandlerKeyDown(h, "s"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ p.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-sw",
+            "data-ord": "sw",
+            tabIndex: 0,
+            "aria-label": t.swDragHandle,
+            onKeyDown: (h) => this.onHandlerKeyDown(h, "sw"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ p.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-w",
+            "data-ord": "w",
+            tabIndex: 0,
+            "aria-label": t.wDragHandle,
+            onKeyDown: (h) => this.onHandlerKeyDown(h, "w"),
+            role: "button"
+          }
+        )),
+        i && /* @__PURE__ */ p.createElement("div", { className: "ReactCrop__selection-addon", onPointerDown: (h) => h.stopPropagation() }, i(this.state)),
+        n && /* @__PURE__ */ p.createElement(p.Fragment, null, /* @__PURE__ */ p.createElement("div", { className: "ReactCrop__rule-of-thirds-hz" }), /* @__PURE__ */ p.createElement("div", { className: "ReactCrop__rule-of-thirds-vt" }))
+      );
+  }
+  makePixelCrop(t) {
+    const e = { ...E, ...this.props.crop || {} };
+    return C(e, t.width, t.height);
+  }
+  render() {
+    const { aspect: t, children: e, circularCrop: o, className: i, crop: n, disabled: a, locked: l, style: h, ruleOfThirds: r } = this.props, { cropIsActive: c, newCropIsBeingDrawn: w } = this.state, g = n ? this.renderCropSelection() : null, d = P(
+      "ReactCrop",
+      i,
+      c && "ReactCrop--active",
+      a && "ReactCrop--disabled",
+      l && "ReactCrop--locked",
+      w && "ReactCrop--new-crop",
+      n && t && "ReactCrop--fixed-aspect",
+      n && o && "ReactCrop--circular-crop",
+      n && r && "ReactCrop--rule-of-thirds",
+      !this.dragStarted && n && !n.width && !n.height && "ReactCrop--invisible-crop",
+      o && "ReactCrop--no-animate"
+    );
+    return /* @__PURE__ */ p.createElement("div", { ref: this.componentRef, className: d, style: h }, /* @__PURE__ */ p.createElement("div", { ref: this.mediaRef, className: "ReactCrop__child-wrapper", onPointerDown: this.onComponentPointerDown }, e), n ? /* @__PURE__ */ p.createElement("svg", { className: "ReactCrop__crop-mask", width: "100%", height: "100%" }, /* @__PURE__ */ p.createElement("defs", null, /* @__PURE__ */ p.createElement("mask", { id: `hole-${this.instanceId}` }, /* @__PURE__ */ p.createElement("rect", { width: "100%", height: "100%", fill: "white" }), o ? /* @__PURE__ */ p.createElement(
+      "ellipse",
+      {
+        cx: `${n.x + n.width / 2}${n.unit}`,
+        cy: `${n.y + n.height / 2}${n.unit}`,
+        rx: `${n.width / 2}${n.unit}`,
+        ry: `${n.height / 2}${n.unit}`,
+        fill: "black"
+      }
+    ) : /* @__PURE__ */ p.createElement(
+      "rect",
+      {
+        x: `${n.x}${n.unit}`,
+        y: `${n.y}${n.unit}`,
+        width: `${n.width}${n.unit}`,
+        height: `${n.height}${n.unit}`,
+        fill: "black"
+      }
+    ))), /* @__PURE__ */ p.createElement("rect", { fill: "black", fillOpacity: 0.5, width: "100%", height: "100%", mask: `url(#hole-${this.instanceId})` })) : void 0, g);
+  }
+};
+u(v, "xOrds", ["e", "w"]), u(v, "yOrds", ["n", "s"]), u(v, "xyOrds", ["nw", "ne", "se", "sw"]), u(v, "nudgeStep", 1), u(v, "nudgeStepMedium", 10), u(v, "nudgeStepLarge", 100), u(v, "defaultProps", {
+  ariaLabels: {
+    cropArea: "Use the arrow keys to move the crop selection area",
+    nwDragHandle: "Use the arrow keys to move the north west drag handle to change the crop selection area",
+    nDragHandle: "Use the up and down arrow keys to move the north drag handle to change the crop selection area",
+    neDragHandle: "Use the arrow keys to move the north east drag handle to change the crop selection area",
+    eDragHandle: "Use the up and down arrow keys to move the east drag handle to change the crop selection area",
+    seDragHandle: "Use the arrow keys to move the south east drag handle to change the crop selection area",
+    sDragHandle: "Use the up and down arrow keys to move the south drag handle to change the crop selection area",
+    swDragHandle: "Use the arrow keys to move the south west drag handle to change the crop selection area",
+    wDragHandle: "Use the up and down arrow keys to move the west drag handle to change the crop selection area"
+  }
+});
+let B = v;
+export {
+  N as B,
+  C as D,
+  O as L,
+  B as S
+};

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { PhotoCropUploader } 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';
+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

@@ -0,0 +1,26 @@
+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 { PhotoCropUploader as N } from "./components/photo-crop-uploader/photo-crop-uploader.js";
+export {
+  P as BMP_IMAGE_EXT,
+  A as BMP_IMAGE_TYPE,
+  G as BYTE_TO_KILOBYTE,
+  I as EN_LOCALE,
+  Y as GIF_IMAGE_EXT,
+  o as GIF_IMAGE_TYPE,
+  O as ICO_IMAGE_EXT,
+  r as ICO_IMAGE_TYPE,
+  X as JPEG_IMAGE_EXT,
+  C as JPEG_IMAGE_TYPE,
+  B as JPG_IMAGE_EXT,
+  p as JPG_IMAGE_TYPE,
+  L as MICROSOFT_ICO_IMAGE_TYPE,
+  e as PNG_IMAGE_EXT,
+  t 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
+};

package/dist/types.d.ts

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

package/dist/types.js

@@ -0,0 +1 @@
+

package/package.json

@@ -0,0 +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"
+  ]
+}