@alphakits/ui 2.0.13 → 2.1.1

package/dist/hooks/useClickOutside/index.js

@@ -1,18 +1,14 @@
-import s from "react";
-function c(r, a, t) {
-  s.useEffect(() => {
-    const n = (o) => {
-      !r.current || r.current.contains(o.target) || t != null && t.every((i) => {
-        var m;
-        return (m = i == null ? void 0 : i.current) == null ? void 0 : m.contains(o.target);
-      }) || a(o);
+import c from "react";
+function i(e, r, o) {
+  c.useEffect(() => {
+    const t = (n) => {
+      !e.current || e.current.contains(n.target) || o?.every((u) => u?.current?.contains(n.target)) || r(n);
     };
-    return document.addEventListener("mousedown", n), document.addEventListener("touchstart", n), () => {
-      document.removeEventListener("mousedown", n), document.removeEventListener("touchstart", n);
+    return document.addEventListener("mousedown", t), document.addEventListener("touchstart", t), () => {
+      document.removeEventListener("mousedown", t), document.removeEventListener("touchstart", t);
     };
-  }, [r, a, t]);
+  }, [e, r, o]);
 }
 export {
-  c as useClickOutside
+  i as useClickOutside
 };
-//# sourceMappingURL=index.js.map

package/dist/hooks/useFocus/index.d.ts

@@ -1,9 +1,3 @@
 import { default as React } from 'react';
 export type InputMethod = 'keyboard' | 'mouse';
-/**
- * Хук устанавливает обработчик события на focusin и focusout
- * по конкретному типу события
- * @param node Элемент на котором установится обработчик (default = document)
- * @param inputMethod Если параметр не задан, установит обработчик по любому событию фокуса
- */
-export declare function useFocus<T extends HTMLElement>(ref: React.MutableRefObject<T> | React.RefObject<T>, inputMethod?: InputMethod): [boolean];
+export declare function useFocus<T extends HTMLElement>(ref: React.RefObject<T | null>, inputMethod?: InputMethod): [boolean];

package/dist/hooks/useFocus/index.js

@@ -28,4 +28,3 @@ function v(t, s) {
 export {
   v as useFocus
 };
-//# sourceMappingURL=index.js.map

package/dist/hooks/usePrevious/index.js

@@ -1,11 +1,10 @@
 import r from "react";
-function c(t) {
-  const e = r.useRef();
+function o(t) {
+  const e = r.useRef(void 0);
   return r.useEffect(() => {
     e.current = t;
   }), e.current;
 }
 export {
-  c as usePrevious
+  o as usePrevious
 };
-//# sourceMappingURL=index.js.map

package/dist/icon-button/component.d.ts

@@ -1,47 +1,17 @@
 import { default as React, ButtonHTMLAttributes } from 'react';
 export type IconButtonProps = {
-    /**
-     * Компонент иконки
-     */
     icon: any;
-    /**
-     * Тип кнопки
-     */
     view?: 'secondary' | 'ghost';
-    /**
-     * Размер компонента
-     */
     size?: 'l' | 'm' | 's';
-    /**
-     * Дополнительный класс
-     */
     className?: string;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
     dataTestId?: string;
     loading?: boolean;
 } & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'size'>;
 export declare const IconButton: React.ForwardRefExoticComponent<{
-    /**
-     * Компонент иконки
-     */
     icon: any;
-    /**
-     * Тип кнопки
-     */
     view?: "secondary" | "ghost" | undefined;
-    /**
-     * Размер компонента
-     */
     size?: "s" | "m" | "l" | undefined;
-    /**
-     * Дополнительный класс
-     */
     className?: string | undefined;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
     dataTestId?: string | undefined;
     loading?: boolean | undefined;
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/icon-button/component.js

@@ -29,4 +29,3 @@ const b = l(
 export {
   b as IconButton
 };
-//# sourceMappingURL=component.js.map

package/dist/icon-button/index.js

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

package/dist/icon-button/index.module.css.js

@@ -1,4 +1,5 @@
-import './index.module.css';
+import * as __css from './index.css';
+export const __cssModule = __css;
 const o = "iconWrapper_85Tz", s = "ghost_AGvq", n = "secondary_nXyc", c = "s_YCn0", t = "m_tTOU", r = "l_QVBC", e = "icon_JiAI", a = {
   iconWrapper: o,
   ghost: s,
@@ -18,4 +19,3 @@ export {
   c as s,
   n as secondary
 };
-//# sourceMappingURL=index.module.css.js.map

package/dist/image/component.js

@@ -49,4 +49,3 @@ const k = ({
 export {
   k as Image
 };
-//# sourceMappingURL=component.js.map

package/dist/image/image-base.js

@@ -20,4 +20,3 @@ const u = ({
 export {
   u as ImageBase
 };
-//# sourceMappingURL=image-base.js.map

package/dist/image/index.js

@@ -4,4 +4,3 @@ export {
   r as Image,
   m as textSizes
 };
-//# sourceMappingURL=index.js.map

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

@@ -1,4 +1,5 @@
-import './index.module.css';
+import * as __css from './index.css';
+export const __cssModule = __css;
 const t = "container_bgmJ", n = "component_Jf39", o = "border_3eTF", e = "addon_fLNN", c = "filled_-OKo", s = "primary_NmfO", a = "secondary_mFC4", d = "thirdly_QoVo", i = "positive_KObT", _ = "negative_JSnt", r = "attention_xn0w", l = "accent_OKgO", x = "broken_U-IU", p = "image_m6QQ", m = "hint_U93q", y = "hint_text_iACD", f = "textContent_zwpf", h = "xs_WMoN", b = "s_Hg5M", g = "m_C8Kq", v = "l_bAVT", C = "xl_4V4r", u = "auto_UzBu", M = "xxl_CbPt", N = "circle_a7zS", O = "ellipse_omc9", X = "defs_-U1g", k = "textS_rn-M", z = "textXs_qpkP", S = "textM_mXb7", U = "textL_jV-6", K = {
   container: t,
   component: n,
@@ -74,4 +75,3 @@ export {
   h as xs,
   M as xxl
 };
-//# sourceMappingURL=index.module.css.js.map

package/dist/image/types.d.ts

@@ -1,56 +1,25 @@
 import { TextProps } from '../typography/text';
-/**
- * componentSize - размер компонента
- *
- * @param xs - 24x24
- * @param s - 32x32
- * @param m - 40x40
- * @param l - 48x48
- * @param xl - 136x80
- * @param xxl - 304x200
- */
 export type ComponentSizes = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'auto';
 export declare const textSizes: Record<ComponentSizes, string>;
 export type BgColors = 'primary' | 'secondary' | 'thirdly' | 'positive' | 'negative' | 'attention' | 'accent';
 export type ImageProps = {
     children?: React.ReactNode;
-    /**
-     * Кастомный класс
-     */
     className?: string;
     border?: boolean;
-    /**
-     * @param src - ссылка на картинку
-     */
     src?: string;
-    /**
-     * @param alt - alt атрибут картинки
-     */
     alt?: string;
-    /**
-     * Id компонента для тестов
-     */
     dataTestId?: string;
-    /**
-     * hint - подсказка внизу фото
-     */
     hint?: string | React.ReactNode;
     size?: ComponentSizes;
-    /** loading - прелоад компонента */
     loading?: boolean;
-    /** бейдж в нижнем правом углу */
     addon?: {
         color: BgColors;
         icon: React.ReactNode;
         filled?: boolean;
     };
-    /** text - текст для отображения первых букв */
     text?: string;
-    /** Иконка */
     icon?: React.ReactNode;
-    /** view - ellipse | circle | default */
     view?: 'ellipse' | 'circle' | 'default';
-    /** bgColor - цвет фона задней плашки */
     bgColor?: BgColors;
     color?: TextProps['color'];
 };

package/dist/image/types.js

@@ -10,4 +10,3 @@ const t = {
 export {
   t as textSizes
 };
-//# sourceMappingURL=types.js.map

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.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
+};