@alphakits/ui 2.1.0 → 2.1.1

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.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.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.js

@@ -0,0 +1,31 @@
+import * as __css from './index.css';
+export const __cssModule = __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

@@ -1,4 +1,5 @@
-import './index.module.css';
+import * as __css from './index.css';
+export const __cssModule = __css;
 const o = "image_5Dvr", n = "icon_Xtgb", t = "controls_XUF4", c = "main_ZMTq", s = {
   image: o,
   icon: n,
@@ -12,4 +13,3 @@ export {
   o as image,
   c as main
 };
-//# sourceMappingURL=index.module.css.js.map

package/dist/index.js

@@ -337,4 +337,3 @@ export {
   Ko as withFormik,
   dm as withSuffix
 };
-//# sourceMappingURL=index.js.map

package/dist/info-block-header/component.d.ts

@@ -1,8 +1,6 @@
 import { default as React } from 'react';
 export interface InfoBlockHeaderProps {
-    /** title - заголовок */
     title: string;
-    /** onClick - действие при нажатии на инфо блок */
     onClick?: () => void;
 }
 export declare const InfoBlockHeader: React.FC<InfoBlockHeaderProps>;

package/dist/info-block-header/component.js

@@ -11,4 +11,3 @@ const y = ({ title: m, onClick: o }) => /* @__PURE__ */ e("div", { className: s(
 export {
   y as InfoBlockHeader
 };
-//# sourceMappingURL=component.js.map

package/dist/info-block-header/index.js

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

package/dist/info-block-header/index.module.css.js

@@ -1,4 +1,5 @@
-import './index.module.css';
+import * as __css from './index.css';
+export const __cssModule = __css;
 const t = "item_fXRQ", e = {
   item: t
 };
@@ -6,4 +7,3 @@ export {
   e as default,
   t as item
 };
-//# sourceMappingURL=index.module.css.js.map

package/dist/info-block-item/component.d.ts

@@ -1,15 +1,10 @@
 import { default as React } from 'react';
 export interface InfoBlockItemProps {
-    /** label */
     label: any;
-    /** value */
     value?: any;
     view?: 'start' | 'between';
-    /** color - цвет value */
     color?: 'primary' | 'negative' | 'positive' | 'attention';
-    /** color - цвет value */
     withCopyButton?: boolean;
-    /** rightAddons - слот справа */
     rightAddons?: React.ReactNode;
 }
 export declare const InfoBlockItem: React.FC<InfoBlockItemProps>;

package/dist/info-block-item/component.js

@@ -44,4 +44,3 @@ const C = ({
 export {
   C as InfoBlockItem
 };
-//# sourceMappingURL=component.js.map

package/dist/info-block-item/index.js

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

package/dist/info-block-item/index.module.css.js

@@ -1,4 +1,5 @@
-import './index.module.css';
+import * as __css from './index.css';
+export const __cssModule = __css;
 const t = "item_BUo5", n = "start_G65g", e = "between_yyp2", o = "rightAddons_KS2Q", s = "content_Q7Zy", c = "copy_msKV", d = {
   item: t,
   start: n,
@@ -16,4 +17,3 @@ export {
   o as rightAddons,
   n as start
 };
-//# sourceMappingURL=index.module.css.js.map

package/dist/info-block-wrapper/component.d.ts

@@ -1,10 +1,6 @@
 import { default as React } from 'react';
 export interface InfoBlockWrapperProps {
-    /** children - slot */
     children: React.ReactNode;
-    /**
-     * view - вид обертки
-     */
     view?: 'default' | 'bordered';
 }
 export declare const InfoBlockWrapper: React.FC<InfoBlockWrapperProps>;

package/dist/info-block-wrapper/component.js

@@ -8,4 +8,3 @@ const e = ({
 export {
   e as InfoBlockWrapper
 };
-//# sourceMappingURL=component.js.map

package/dist/info-block-wrapper/index.js

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

package/dist/info-block-wrapper/index.module.css.js

@@ -1,4 +1,5 @@
-import './index.module.css';
+import * as __css from './index.css';
+export const __cssModule = __css;
 const o = "infoBlock_UlYZ", e = "icon_lhrK", c = "bordered_0yDP", n = "withHover_OF8-", r = {
   infoBlock: o,
   icon: e,
@@ -12,4 +13,3 @@ export {
   o as infoBlock,
   n as withHover
 };
-//# sourceMappingURL=index.module.css.js.map