@alphakits/ui 2.0.13 → 2.2.0

package/dist/image/use-image-render-component.d.ts

@@ -8,4 +8,4 @@ export type UseImageRenderComponent = {
     icon?: React.ReactNode;
     color?: ImageProps['color'];
 };
-export declare const useImageRenderComponent: ({ src, size, color, alt, text, icon, }: UseImageRenderComponent) => {};
+export declare const useImageRenderComponent: ({ src, size, color, alt, text, icon, }: UseImageRenderComponent) => string | number | bigint | true | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element;

package/dist/image/use-image-render-component.js

@@ -1,4 +1,4 @@
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import u, { useRef as g, useEffect as x } from "react";
 import w from "@alphakits/icons/dist/PhotoM";
 import h from "@alphakits/icons/dist/PhotoS";
@@ -17,59 +17,58 @@ const y = {
   xxl: "640x640",
   auto: "640x640"
 }, C = ({
-  src: e,
-  size: r
+  src: t,
+  size: e
 }) => {
-  if (e != null && e.includes("escapenavigator-images.s3") && r) {
-    const i = e.split("amazonaws.com/")[1];
-    return `https://d2z3luly8bezbw.cloudfront.net/fit-in/${y[r]}/${i}`;
+  if (t?.includes("escapenavigator-images.s3") && e) {
+    const s = t.split("amazonaws.com/")[1];
+    return `https://d2z3luly8bezbw.cloudfront.net/fit-in/${y[e]}/${s}`;
   }
-  return e;
+  return t;
 }, F = ({
-  src: e = "",
-  size: r,
-  color: i,
+  src: t = "",
+  size: e,
+  color: s,
   alt: d,
-  text: l,
-  icon: p
+  text: c,
+  icon: l
 }) => {
-  const [s, a] = u.useState("loading"), c = g(0), o = C({ src: e, size: r });
+  const [m, i] = u.useState("loading"), p = g(0), o = C({ src: t, size: e });
   return x(() => {
     if (!o) {
-      a("error");
+      i("error");
       return;
     }
-    c.current = Date.now(), a("loading");
-    const m = new Image();
-    m.src = o, m.onload = () => {
-      a("loaded");
-    }, m.onerror = () => {
-      Date.now() - c.current < 2e3 ? setTimeout(() => {
-        m.src = o;
-      }, 500) : a("error");
+    p.current = Date.now(), i("loading");
+    const a = new Image();
+    a.src = o, a.onload = () => {
+      i("loaded");
+    }, a.onerror = () => {
+      Date.now() - p.current < 2e3 ? setTimeout(() => {
+        a.src = o;
+      }, 500) : i("error");
     };
-  }, [o, r]), p || (s === "loading" ? /* @__PURE__ */ t(b, { className: n.spinner, size: "s", view: "dark" }) : s === "error" && l ? /* @__PURE__ */ t(
+  }, [o, e]), l || (m === "loading" ? /* @__PURE__ */ r(b, { className: n.spinner, size: "s", view: "dark" }) : m === "error" && c ? /* @__PURE__ */ r(
     f.Text,
     {
-      className: S(n.textContent, n[v[r]]),
+      className: S(n.textContent, n[v[e]]),
       view: "caps",
-      color: i,
+      color: s,
       weight: "bold",
-      children: T(l.toUpperCase())
+      children: T(c.toUpperCase())
     }
-  ) : s === "error" ? /* @__PURE__ */ t(
+  ) : m === "error" ? /* @__PURE__ */ r(
     f.Text,
     {
       className: n.broken,
       tag: "div",
       view: "caps",
-      color: i,
+      color: s,
       weight: "bold",
-      children: r === "xs" ? /* @__PURE__ */ t(h, {}) : /* @__PURE__ */ t(w, {})
+      children: e === "xs" ? /* @__PURE__ */ r(h, {}) : /* @__PURE__ */ r(w, {})
     }
-  ) : /* @__PURE__ */ t("img", { className: n.image, src: o, alt: d }));
+  ) : /* @__PURE__ */ r("img", { className: n.image, src: o, alt: d }));
 };
 export {
   F as useImageRenderComponent
 };
-//# sourceMappingURL=use-image-render-component.js.map

package/dist/image/utils.js

@@ -5,4 +5,3 @@ const e = (r = "NN") => {
 export {
   e as getCharsFromText
 };
-//# sourceMappingURL=utils.js.map

package/dist/image-gallery/component.d.ts

@@ -1,11 +1,12 @@
-/// <reference types="react" />
+import { default as React } from 'react';
+type Photo = {
+    src: string;
+};
 type Props = {
     initialSlide: number;
-    photos: Array<{
-        src: string;
-    }>;
+    photos: Photo[];
     onClose: () => void;
     open: boolean;
 };
-export declare const ImageGallery: ({ onClose, initialSlide, photos, open, }: Props) => JSX.Element;
+export declare const ImageGallery: React.FC<Props>;
 export {};

package/dist/image-gallery/component.js

@@ -1,42 +1,105 @@
-import { jsx as c } from "react/jsx-runtime";
-import { useState as s } from "react";
-import l from "react-images-viewer";
-const C = ({
-  onClose: t,
-  initialSlide: n = 0,
-  photos: r,
-  open: i
+import { jsx as l, jsxs as g } from "react/jsx-runtime";
+import { useState as v, useEffect as h, useCallback as y } from "react";
+import N from "@alphakits/icons/dist/ChevronBackM";
+import x from "@alphakits/icons/dist/ChevronForwardM";
+import C from "@alphakits/icons/dist/CloseM";
+import m from "classnames";
+import { Portal as w } from "../portal/component.js";
+import e from "./index.module.css.js";
+const j = ({
+  onClose: i,
+  initialSlide: s = 0,
+  photos: t,
+  open: n
 }) => {
-  const [o, e] = s(n);
-  return /* @__PURE__ */ c(
-    l,
+  const [c, o] = v(s);
+  h(() => {
+    n && o(s);
+  }, [n, s]);
+  const d = y(() => {
+    o((r) => Math.max(0, r - 1));
+  }, []), u = y(() => {
+    o((r) => Math.min(t.length - 1, r + 1));
+  }, [t.length]);
+  if (h(() => {
+    if (!n) return;
+    const r = (b) => {
+      b.key === "Escape" ? i() : b.key === "ArrowLeft" ? d() : b.key === "ArrowRight" && u();
+    };
+    document.addEventListener("keydown", r);
+    const { overflow: a } = document.body.style;
+    return document.body.style.overflow = "hidden", () => {
+      document.removeEventListener("keydown", r), document.body.style.overflow = a;
+    };
+  }, [n, i, d, u]), !n || !t.length) return null;
+  const k = t[Math.min(c, t.length - 1)], f = (r) => {
+    r.target === r.currentTarget && i();
+  };
+  return /* @__PURE__ */ l(w, { children: /* @__PURE__ */ g(
+    "div",
     {
-      theme: {
-        container: {
-          zIndex: 1e16
-        }
-      },
-      backdropCloseable: !0,
-      showThumbnails: !0,
-      imgs: r,
-      onClickThumbnail: (m) => {
-        e(m);
-      },
-      onClickNext: () => {
-        e(o + 1);
-      },
-      onClickPrev: () => {
-        e(o - 1);
-      },
-      onClickImg: () => {
-      },
-      currImg: o,
-      isOpen: i,
-      onClose: t
+      className: e.overlay,
+      role: "dialog",
+      "aria-modal": "true",
+      onClick: f,
+      children: [
+        /* @__PURE__ */ l(
+          "button",
+          {
+            type: "button",
+            className: m(e.button, e.closeButton),
+            onClick: i,
+            "aria-label": "Close gallery",
+            children: /* @__PURE__ */ l(C, {})
+          }
+        ),
+        /* @__PURE__ */ g("div", { className: e.stage, onClick: f, children: [
+          /* @__PURE__ */ g("div", { className: e.counter, children: [
+            c + 1,
+            " / ",
+            t.length
+          ] }),
+          t.length > 1 && /* @__PURE__ */ l(
+            "button",
+            {
+              type: "button",
+              className: m(e.button, e.prevButton),
+              onClick: d,
+              disabled: c === 0,
+              "aria-label": "Previous image",
+              children: /* @__PURE__ */ l(N, {})
+            }
+          ),
+          /* @__PURE__ */ l("img", { className: e.image, src: k.src, alt: "" }),
+          t.length > 1 && /* @__PURE__ */ l(
+            "button",
+            {
+              type: "button",
+              className: m(e.button, e.nextButton),
+              onClick: u,
+              disabled: c === t.length - 1,
+              "aria-label": "Next image",
+              children: /* @__PURE__ */ l(x, {})
+            }
+          )
+        ] }),
+        t.length > 1 && /* @__PURE__ */ l("div", { className: e.thumbnails, children: t.map((r, a) => /* @__PURE__ */ l(
+          "button",
+          {
+            type: "button",
+            className: m(e.thumbnail, {
+              [e.thumbnailActive]: a === c
+            }),
+            onClick: () => o(a),
+            "aria-label": `Image ${a + 1}`,
+            children: /* @__PURE__ */ l("img", { className: e.thumbnailImage, src: r.src, alt: "" })
+          },
+          a
+        )) })
+      ]
     }
-  );
+  ) });
 };
 export {
-  C as ImageGallery
+  j as ImageGallery
 };
-//# sourceMappingURL=component.js.map

package/dist/image-gallery/index.js

@@ -2,4 +2,3 @@ import { ImageGallery as a } from "./component.js";
 export {
   a as ImageGallery
 };
-//# sourceMappingURL=index.js.map

package/dist/image-gallery/index.module.css

@@ -0,0 +1 @@
+.overlay_vpYZ{position:fixed;inset:0;z-index:9999999;background:#000000eb;display:flex;flex-direction:column;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}.stage_OviA{position:relative;flex:1 1 auto;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.image_OQtH{max-width:92vw;max-height:calc(100vh - 160px);-o-object-fit:contain;object-fit:contain;display:block;box-shadow:0 4px 24px #0006}.counter_TCDF{position:absolute;top:16px;left:50%;transform:translate(-50%);color:#ffffffb3;font-size:14px;line-height:1;padding:8px 12px;border-radius:4px;background:#0006;pointer-events:none}.button_RRLP{position:absolute;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#ffffff14;color:#fff;border:none;cursor:pointer;transition:background .15s ease;padding:0}.button_RRLP:hover{background:#ffffff2e}.button_RRLP:disabled{opacity:.3;cursor:default}.closeButton_gDbr{top:12px;right:12px}.prevButton_Xjn-{left:16px;top:50%;transform:translateY(-50%)}.nextButton_7M9p{right:16px;top:50%;transform:translateY(-50%)}.thumbnails_5MBK{flex:0 0 auto;display:flex;gap:8px;padding:12px 16px;overflow-x:auto;max-width:100%;scrollbar-width:thin}.thumbnail_OlwP{flex:0 0 auto;width:72px;height:56px;border-radius:4px;overflow:hidden;cursor:pointer;border:2px solid transparent;background:none;padding:0;transition:border-color .15s ease,opacity .15s ease;opacity:.6}.thumbnail_OlwP:hover{opacity:.85}.thumbnailActive_7HK8{border-color:#fff;opacity:1}.thumbnailImage_H6K4{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}

package/dist/image-gallery/index.module.css.js

@@ -0,0 +1,30 @@
+import './index.module.css';
+const t = "overlay_vpYZ", n = "stage_OviA", o = "image_OQtH", e = "counter_TCDF", u = "button_RRLP", a = "closeButton_gDbr", s = "prevButton_Xjn-", c = "nextButton_7M9p", l = "thumbnails_5MBK", i = "thumbnail_OlwP", m = "thumbnailActive_7HK8", b = "thumbnailImage_H6K4", h = {
+  overlay: t,
+  stage: n,
+  image: o,
+  counter: e,
+  button: u,
+  closeButton: a,
+  prevButton: s,
+  nextButton: c,
+  thumbnails: l,
+  thumbnail: i,
+  thumbnailActive: m,
+  thumbnailImage: b
+};
+export {
+  u as button,
+  a as closeButton,
+  e as counter,
+  h as default,
+  o as image,
+  c as nextButton,
+  t as overlay,
+  s as prevButton,
+  n as stage,
+  i as thumbnail,
+  m as thumbnailActive,
+  b as thumbnailImage,
+  l as thumbnails
+};

package/dist/image-uploader/component.js

@@ -1,4 +1,4 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import j, { forwardRef as B, useState as p, useRef as H } from "react";
 import L from "@alphakits/icons/dist/EyeM";
 import b from "@alphakits/icons/dist/HeartStrokeM";
@@ -31,11 +31,11 @@ const de = B(
     className: z,
     children: y
   }, T) => {
-    const [A, w] = p(!1), [E, F] = p(), [v, C] = p(!1), s = H(null), M = (e, c) => {
-      f(e.filter((i) => i !== c));
-    }, x = async ({ target: { files: e } }) => {
-      if (!e) return;
-      const c = Array.from(e).map((i) => {
+    const [A, w] = p(!1), [E, F] = p(), [v, C] = p(!1), s = H(null), M = (r, c) => {
+      f(r.filter((i) => i !== c));
+    }, x = async ({ target: { files: r } }) => {
+      if (!r) return;
+      const c = Array.from(r).map((i) => {
         const o = new FormData();
         return o.append("file", i), o.append("type", R), I({ data: o });
       });
@@ -51,7 +51,7 @@ const de = B(
       }
     };
     return /* @__PURE__ */ a("div", { className: z, children: [
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ e(
         "input",
         {
           type: "file",
@@ -62,7 +62,7 @@ const de = B(
           accept: "image/*, .heic"
         }
       ),
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ e(
         "input",
         {
           type: "file",
@@ -73,49 +73,43 @@ const de = B(
           accept: "image/*, .heic"
         }
       ),
-      y ? /* @__PURE__ */ r(
+      y ? /* @__PURE__ */ e(
         O,
         {
           view: "ghost",
-          onClick: () => {
-            var e;
-            return (e = s.current) == null ? void 0 : e.click();
-          },
+          onClick: () => s.current?.click(),
           children: y({ value: n, loading: v })
         }
       ) : /* @__PURE__ */ a(j.Fragment, { children: [
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ e(
           U,
           {
             text: S,
-            leftAddons: /* @__PURE__ */ r(
+            leftAddons: /* @__PURE__ */ e(
               m,
               {
-                onClick: () => {
-                  var e;
-                  return (e = s.current) == null ? void 0 : e.click();
-                },
+                onClick: () => s.current?.click(),
                 icon: D,
                 loading: v
               }
             )
           }
         ),
-        d && /* @__PURE__ */ r(k.Text, { view: "primary-small", color: "secondary", weight: "medium", children: d }),
-        /* @__PURE__ */ r(Q, { padding: "4px 0", children: g && /* @__PURE__ */ r(k.Text, { view: "caps", color: "negative", weight: "medium", children: g }) }),
-        /* @__PURE__ */ r(q, { columns: N, children: n.map((e, c) => /* @__PURE__ */ a(J, { className: t.image, src: e, size: "xl", view: "default", children: [
+        d && /* @__PURE__ */ e(k.Text, { view: "primary-small", color: "secondary", weight: "medium", children: d }),
+        /* @__PURE__ */ e(Q, { padding: "4px 0", children: g && /* @__PURE__ */ e(k.Text, { view: "caps", color: "negative", weight: "medium", children: g }) }),
+        /* @__PURE__ */ e(q, { columns: N, children: n.map((r, c) => /* @__PURE__ */ a(J, { className: t.image, src: r, size: "xl", view: "default", children: [
           /* @__PURE__ */ a("div", { className: t.controls, children: [
-            !!h && u !== e && /* @__PURE__ */ r(
+            !!h && u !== r && /* @__PURE__ */ e(
               m,
               {
-                onClick: () => h(e),
+                onClick: () => h(r),
                 icon: b,
                 size: "m",
                 view: "secondary",
                 className: t.icon
               }
             ),
-            /* @__PURE__ */ r(
+            /* @__PURE__ */ e(
               m,
               {
                 onClick: () => {
@@ -127,10 +121,10 @@ const de = B(
                 className: t.icon
               }
             ),
-            /* @__PURE__ */ r(
+            /* @__PURE__ */ e(
               m,
               {
-                onClick: () => M(n, e),
+                onClick: () => M(n, r),
                 icon: G,
                 size: "m",
                 view: "secondary",
@@ -138,12 +132,12 @@ const de = B(
               }
             )
           ] }),
-          u === e && /* @__PURE__ */ r("div", { className: t.main, children: "MAIN" })
-        ] }, e)) }),
-        /* @__PURE__ */ r(
+          u === r && /* @__PURE__ */ e("div", { className: t.main, children: "MAIN" })
+        ] }, r)) }),
+        /* @__PURE__ */ e(
           K,
           {
-            photos: n.map((e) => ({ src: e })),
+            photos: n.map((r) => ({ src: r })),
             initialSlide: E || 0,
             open: A,
             onClose: () => w(!1)
@@ -156,4 +150,3 @@ const de = B(
 export {
   de as ImageUploader
 };
-//# sourceMappingURL=component.js.map

package/dist/image-uploader/index.js

@@ -2,4 +2,3 @@ import { ImageUploader as r } from "./component.js";
 export {
   r as ImageUploader
 };
-//# sourceMappingURL=index.js.map

package/dist/image-uploader/index.module.css.js

@@ -12,4 +12,3 @@ export {
   o as image,
   c as main
 };
-//# sourceMappingURL=index.module.css.js.map