@dss-kit/ui-kit 0.3.0 → 0.3.1

package/dist/components/builders/Modal/Modal.js

@@ -0,0 +1,101 @@
+import { jsx as t, jsxs as M } from "react/jsx-runtime";
+import { cx as i } from "@emotion/css";
+import { forwardRef as B, useEffect as c, useCallback as f, useRef as D } from "react";
+import N from "../../../assets/svg/modal/close.svg.js";
+import { ModalContext as E } from "./context.js";
+import { styles as n } from "./styles.js";
+import { Portal as P } from "../Portal/Portal.js";
+import { Box as s } from "../Box/Box.js";
+import { IconButton as j } from "../../controls/IconButton/IconButton.js";
+import { theme as z } from "../../../utils/theme/index.js";
+const C = B(
+  ({
+    isOpen: o,
+    onClose: r,
+    overlayClassName: y,
+    modalClassName: p,
+    absoluteCloseButtonClassName: w,
+    size: h = "md",
+    closeOnBackdropClick: m = !0,
+    closeOnEsc: u = !0,
+    disableBodyScroll: l = !0,
+    showAbsoluteCloseButton: g,
+    children: v
+  }, k) => {
+    c(() => {
+      if (l && o && typeof window < "u" && typeof document < "u") {
+        const e = window.getComputedStyle(document.body).overflow;
+        return document.body.style.overflow = "hidden", () => {
+          document.body.style.overflow = e;
+        };
+      }
+    }, [o, l]);
+    const d = f(
+      (e) => {
+        e.key === "Escape" && r();
+      },
+      [r]
+    );
+    c(() => {
+      if (typeof window < "u" && typeof document < "u" && u && o)
+        return document.addEventListener("keydown", d), () => document.removeEventListener("keydown", d);
+    }, [o, u, d]);
+    const a = D(!1), x = f((e) => {
+      a.current = e.target === e.currentTarget;
+    }, []), b = f(
+      (e) => {
+        m && e.target === e.currentTarget && a.current && r();
+      },
+      [m, r]
+    );
+    return o ? /* @__PURE__ */ t(P, { children: /* @__PURE__ */ t(E.Provider, { value: { isOpen: o, onClose: r }, children: /* @__PURE__ */ t(
+      s,
+      {
+        position: "fixed",
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        row: !0,
+        center: !0,
+        flex: 1,
+        onMouseDown: x,
+        onClick: b,
+        backgroundColor: z.color.fill.bgOverlayPrimary,
+        className: i(n.overlay, y),
+        zIndex: 1,
+        children: /* @__PURE__ */ M(
+          s,
+          {
+            ref: k,
+            className: i(
+              n.modal,
+              n[`size_${h}`],
+              p
+            ),
+            relative: !0,
+            children: [
+              g && /* @__PURE__ */ t(
+                j,
+                {
+                  className: i(
+                    n.closeButton,
+                    w
+                  ),
+                  onClick: r,
+                  color: "neutral",
+                  children: /* @__PURE__ */ t(N, {})
+                }
+              ),
+              v
+            ]
+          }
+        )
+      }
+    ) }) }) : null;
+  }
+);
+C.displayName = "Modal";
+export {
+  C as Modal
+};

package/dist/components/builders/Modal/ModalFooter/ModalFooter.d.ts

@@ -39,4 +39,3 @@ declare const ModalFooter: import('react').ForwardRefExoticComponent<Omit<BoxPro
  * Поддерживает все пропсы компонента Box для максимальной гибкости настройки.
  */
 export { ModalFooter };
-//# sourceMappingURL=ModalFooter.d.ts.map

package/dist/components/builders/Modal/ModalFooter/ModalFooter.js

@@ -0,0 +1,41 @@
+import { jsx as i } from "react/jsx-runtime";
+import { cx as c, css as f } from "@emotion/css";
+import { forwardRef as d } from "react";
+import { Box as n } from "../../Box/Box.js";
+import { theme as o } from "../../../../utils/theme/index.js";
+const x = f({
+  borderTop: `1px solid ${o.color.border.neutralAlphaBasic}`
+}), u = d(
+  ({
+    /** Дочерние элементы футера (обычно кнопки) */
+    children: r,
+    /** Горизонтальное расположение элементов. @default true */
+    row: t = !0,
+    /** Включение flexbox layout. @default true */
+    flex: e = !0,
+    /** Расстояние между дочерними элементами. @default spacing.lg */
+    gap: m = o.spacing.lg,
+    /** Внутренние отступы футера. @default spacing['2xl'] */
+    p: s = o.spacing["2xl"],
+    /** Дополнительные CSS классы */
+    className: a,
+    /** Остальные пропсы передаются в компонент Box */
+    ...p
+  }, l) => /* @__PURE__ */ i(
+    n,
+    {
+      flex: e,
+      row: t,
+      gap: m,
+      p: s,
+      className: c(x, a),
+      ref: l,
+      ...p,
+      children: r
+    }
+  )
+);
+u.displayName = "ModalFooter";
+export {
+  u as ModalFooter
+};

package/dist/components/builders/Modal/ModalFooter/index.d.ts

@@ -1,2 +1 @@
 export { ModalFooter } from './ModalFooter';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/builders/Modal/ModalHeader/ModalHeader.d.ts

@@ -30,4 +30,3 @@ interface ModalHeaderProps extends Pick<BoxProps, "p" | "px" | "py" | "pt" | "pb
 }
 declare const ModalHeader: import('react').ForwardRefExoticComponent<ModalHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
 export { ModalHeader };
-//# sourceMappingURL=ModalHeader.d.ts.map

package/dist/components/builders/Modal/ModalHeader/ModalHeader.js

@@ -0,0 +1,85 @@
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { forwardRef as B } from "react";
+import W from "../../../../assets/svg/modal/close.svg.js";
+import { useModalContext as v } from "../context.js";
+import { Box as e } from "../../Box/Box.js";
+import { theme as r } from "../../../../utils/theme/index.js";
+import { Text as l } from "../../Text/Text.js";
+import { IconButton as M } from "../../../controls/IconButton/IconButton.js";
+const j = B(
+  ({
+    title: a,
+    subtitle: i,
+    w: m = "full",
+    p: n,
+    py: s,
+    px: d = r.spacing["2xl"],
+    pt: c = r.spacing["2xl"],
+    pb: p = r.spacing.lg,
+    row: f = !0,
+    justifyContent: h = "space-between",
+    showCloseButton: g = !1,
+    className: b,
+    titleClassName: u,
+    subtitleClassName: x,
+    closeButtonClassName: N
+  }, y) => {
+    const { onClose: C } = v();
+    return /* @__PURE__ */ t(
+      e,
+      {
+        w: m,
+        p: n,
+        py: s,
+        px: d,
+        pt: c,
+        pb: p,
+        row: f,
+        justifyContent: h,
+        ref: y,
+        borderColor: r.color.border.neutralAlphaBasic,
+        borderWidth: 0,
+        borderBottomWidth: 1,
+        borderStyle: "solid",
+        className: b,
+        children: [
+          /* @__PURE__ */ t(e, { gap: r.spacing.sm, children: [
+            /* @__PURE__ */ o(
+              l,
+              {
+                variant: "title-3",
+                colorName: "primary",
+                fontWeight: "semibold",
+                className: u,
+                children: a
+              }
+            ),
+            /* @__PURE__ */ o(
+              l,
+              {
+                variant: "body-1",
+                colorName: "tertiary",
+                fontWeight: "medium",
+                className: x,
+                children: i
+              }
+            )
+          ] }),
+          g && /* @__PURE__ */ o(e, { children: /* @__PURE__ */ o(
+            M,
+            {
+              onClick: C,
+              color: "neutral",
+              className: N,
+              children: /* @__PURE__ */ o(W, {})
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+j.displayName = "ModalHeader";
+export {
+  j as ModalHeader
+};

package/dist/components/builders/Modal/ModalHeader/index.d.ts

@@ -1,2 +1 @@
 export { ModalHeader } from './ModalHeader';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/builders/Modal/ModalMain/ModalMain.d.ts

@@ -95,4 +95,3 @@ interface ModalMainProps extends PropsWithChildren {
 declare const ModalMain: import('react').ForwardRefExoticComponent<ModalMainProps & import('react').RefAttributes<ModalMainRef>>;
 export { ModalMain };
 export type { ModalMainRef };
-//# sourceMappingURL=ModalMain.d.ts.map

package/dist/components/builders/Modal/ModalMain/ModalMain.js

@@ -0,0 +1,92 @@
+import { jsx as r } from "react/jsx-runtime";
+import { cx as p } from "@emotion/css";
+import { useVirtualizer as T } from "@tanstack/react-virtual";
+import { forwardRef as O, useRef as y, useMemo as h, Children as z, useImperativeHandle as S } from "react";
+import { styles as u } from "./styles.js";
+import { Box as s } from "../../Box/Box.js";
+import { theme as i } from "../../../../utils/theme/index.js";
+const b = O(
+  ({
+    children: n,
+    className: f,
+    row: c = !1,
+    estimatedItemHeight: g = 100,
+    virtualize: m = !1,
+    maxHeight: d = 448
+  }, x) => {
+    const a = y(null), t = h(() => z.toArray(n), [n]), e = T({
+      count: t.length,
+      getScrollElement: () => a.current,
+      estimateSize: () => g,
+      measureElement: (o) => o.getBoundingClientRect().height
+    });
+    return S(
+      x,
+      () => ({
+        scrollToTop: () => e.scrollToOffset(0, { behavior: "smooth" }),
+        scrollToBottom: () => e.scrollToOffset(e.getTotalSize(), {
+          behavior: "smooth"
+        }),
+        scrollToIndex: (o, l = {}) => e.scrollToIndex(o, { behavior: "smooth", ...l }),
+        scrollToOffset: (o, l = {}) => e.scrollToOffset(o, {
+          behavior: "smooth",
+          ...l
+        }),
+        scrollBy: (o) => {
+          const l = e.scrollOffset || 0;
+          e.scrollToOffset(l + o, {
+            behavior: "smooth"
+          });
+        },
+        getElement: () => a.current,
+        getScrollOffset: () => e.scrollOffset || 0,
+        getTotalSize: () => e.getTotalSize()
+      }),
+      [e]
+    ), h(
+      () => m || t.length > 50,
+      [m, t]
+    ) && t.length > 0 ? /* @__PURE__ */ r(
+      s,
+      {
+        ref: a,
+        row: c,
+        maxHeight: d,
+        className: p(u.main, f),
+        w: "full",
+        p: i.spacing["2xl"],
+        children: /* @__PURE__ */ r(s, { relative: !0, h: e.getTotalSize(), children: e.getVirtualItems().map((o) => /* @__PURE__ */ r(
+          s,
+          {
+            "data-index": o.index,
+            ref: e.measureElement,
+            w: "full",
+            absolute: !0,
+            style: {
+              top: 0,
+              left: 0,
+              transform: `translateY(${o.start}px)`
+            },
+            children: t[o.index]
+          },
+          o.key
+        )) })
+      }
+    ) : /* @__PURE__ */ r(
+      s,
+      {
+        ref: a,
+        className: p(u.main, f),
+        w: "full",
+        row: c,
+        pl: i.spacing["2xl"],
+        pr: i.spacing.xs,
+        children: /* @__PURE__ */ r(s, { py: i.spacing["2xl"], pr: i.spacing.xl, children: n })
+      }
+    );
+  }
+);
+b.displayName = "ModalMain";
+export {
+  b as ModalMain
+};

package/dist/components/builders/Modal/ModalMain/index.d.ts

@@ -1,3 +1,2 @@
 export type { ModalMainRef } from './ModalMain';
 export { ModalMain } from './ModalMain';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/builders/Modal/ModalMain/styles.d.ts

@@ -1,4 +1,3 @@
 export declare const styles: {
     main: string;
 };
-//# sourceMappingURL=styles.d.ts.map

package/dist/components/builders/Modal/ModalMain/styles.js

@@ -0,0 +1,24 @@
+import { css as o } from "@emotion/css";
+import { theme as r } from "../../../../utils/theme/index.js";
+const c = {
+  main: o({
+    flex: 0,
+    overflowY: "auto",
+    scrollbarWidth: "thin",
+    scrollbarColor: `${r.color.scrollbar.thumbPrimary} ${r.color.scrollbar.trackPrimary}`,
+    "&::-webkit-scrollbar": {
+      width: 6
+    },
+    "&::-webkit-scrollbar-track": {
+      background: r.color.scrollbar.trackPrimary,
+      borderRadius: r.cornerRadius.fullRound
+    },
+    "&::-webkit-scrollbar-thumb": {
+      borderRadius: r.cornerRadius.fullRound,
+      backgroundColor: r.color.scrollbar.thumbPrimary
+    }
+  })
+};
+export {
+  c as styles
+};

package/dist/components/builders/Modal/context.d.ts

@@ -6,4 +6,3 @@ export declare const useModalContext: () => {
     isOpen: boolean;
     onClose: () => void;
 };
-//# sourceMappingURL=context.d.ts.map

package/dist/components/builders/Modal/context.js

@@ -0,0 +1,10 @@
+import { createContext as o, useContext as t } from "react";
+const e = o({
+  isOpen: !1,
+  onClose: () => {
+  }
+}), s = () => t(e);
+export {
+  e as ModalContext,
+  s as useModalContext
+};

package/dist/components/builders/Modal/index.d.ts

@@ -10,4 +10,3 @@ interface ModalWithSubComponentsProps extends React.ForwardRefExoticComponent<Mo
 declare const ModalWithSubComponents: ModalWithSubComponentsProps;
 export { ModalWithSubComponents as Modal };
 export type { ModalProps };
-//# sourceMappingURL=index.d.ts.map

package/dist/components/builders/Modal/index.js

@@ -0,0 +1,11 @@
+import { Modal as r } from "./Modal.js";
+import { ModalHeader as a } from "./ModalHeader/ModalHeader.js";
+import { ModalMain as t } from "./ModalMain/ModalMain.js";
+import { ModalFooter as m } from "./ModalFooter/ModalFooter.js";
+const o = r;
+o.Header = a;
+o.Main = t;
+o.Footer = m;
+export {
+  o as Modal
+};

package/dist/components/builders/Modal/styles.d.ts

@@ -6,4 +6,3 @@ export declare const styles: {
     size_md: string;
     size_sm: string;
 };
-//# sourceMappingURL=styles.d.ts.map

package/dist/components/builders/Modal/styles.js

@@ -0,0 +1,48 @@
+import { css as i, keyframes as a } from "@emotion/css";
+import { bp as t } from "../../../styles/utils/breakpoints.js";
+import { theme as o } from "../../../utils/theme/index.js";
+const n = a`
+  0% {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+`, l = {
+  overlay: i({
+    backdropFilter: "blur(5px)"
+  }),
+  modal: i({
+    animationDuration: "0.2s",
+    animationTimingFunction: "ease-in-out",
+    animationName: n,
+    maxWidth: `calc(100vw - ${o.spacing["3xl"]})`,
+    maxHeight: `calc(100vh - ${o.spacing["7xl"]} - ${o.spacing["7xl"]})`,
+    borderRadius: o.cornerRadius["2xl"],
+    backgroundColor: o.color.fill.bgPrimary,
+    boxShadow: `0 4px 20px 0 ${o.color.effect.shadowS}`,
+    [t.sm()]: {
+      flex: 1
+    }
+  }),
+  closeButton: i({
+    position: "absolute",
+    zIndex: 1,
+    top: o.spacing.lg,
+    right: o.spacing.lg
+  }),
+  size_lg: i({
+    width: 874
+  }),
+  size_md: i({
+    width: 650
+  }),
+  size_sm: i({
+    width: 426
+  })
+};
+export {
+  l as styles
+};

package/dist/components/builders/Portal/Portal.d.ts

@@ -1,3 +1,2 @@
 import { FC, PropsWithChildren } from 'react';
 export declare const Portal: FC<PropsWithChildren>;
-//# sourceMappingURL=Portal.d.ts.map

package/dist/components/builders/Portal/Portal.js

@@ -0,0 +1,16 @@
+import { useState as a, useEffect as l } from "react";
+import { createPortal as c } from "react-dom";
+import { usePortalHost as d } from "./context.js";
+const m = ({ children: n }) => {
+  const [e, u] = a(null), r = d();
+  return l(() => {
+    if (typeof document > "u") return;
+    const o = r?.current ?? document.body;
+    if (!o) return;
+    let t = o.querySelector("[data-portal-root]") ?? void 0;
+    t || (t = document.createElement("div"), t.setAttribute("data-portal-root", "true"), o.appendChild(t)), u(t);
+  }, [r]), e ? c(n, e) : null;
+};
+export {
+  m as Portal
+};

package/dist/components/builders/Portal/context.d.ts

@@ -2,4 +2,3 @@ import { RefObject } from 'react';
 export type PortalHostRef = RefObject<HTMLElement> | null;
 export declare const PortalHostContext: import('react').Context<PortalHostRef>;
 export declare const usePortalHost: () => PortalHostRef;
-//# sourceMappingURL=context.d.ts.map

package/dist/components/builders/Portal/context.js

@@ -0,0 +1,6 @@
+import { useContext as t, createContext as o } from "react";
+const e = o(null), r = () => t(e);
+export {
+  e as PortalHostContext,
+  r as usePortalHost
+};

package/dist/components/builders/Portal/index.d.ts

@@ -1,2 +1 @@
 export { Portal } from './Portal';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/builders/Ripple/Ripple.d.ts

@@ -36,4 +36,3 @@ export declare const Ripple: import('react').ForwardRefExoticComponent<{
     className?: string;
 } & import('react').RefAttributes<RippleHandle>>;
 export {};
-//# sourceMappingURL=Ripple.d.ts.map

package/dist/components/builders/Ripple/Ripple.js

@@ -0,0 +1,132 @@
+import { jsx as $ } from "react/jsx-runtime";
+import { forwardRef as X, useRef as g, useState as Y, useCallback as y, useImperativeHandle as j, useEffect as M } from "react";
+import { styles as P } from "./styles.js";
+const x = "button, a, input, label, [role='button'], [data-ripple]";
+function H(f) {
+  if (typeof f.composedPath == "function") return f.composedPath();
+  const l = [];
+  let s = f.target;
+  for (; s; )
+    l.push(s), s = s.parentNode || s.host;
+  return l.push(window), l;
+}
+const G = X(
+  ({ color: f = "rgba(0,0,0,0.18)", duration: l = 1e3, radius: s = "auto", className: k }, L) => {
+    const a = g(null), [T, C] = Y([]), w = g([]), A = g(1), h = g(null), v = () => {
+      w.current.map((e) => clearTimeout(e)), w.current = [];
+    }, p = y(
+      (e, n, r, o) => {
+        if (typeof window > "u") return;
+        const t = r.getBoundingClientRect(), i = s === "auto" ? Math.max(t.width, t.height) * 2 : s, c = e - o.left, u = n - o.top, m = Math.max(0, t.top - o.top), d = Math.max(0, t.left - o.left), z = Math.max(0, o.right - t.right), S = Math.max(0, o.bottom - t.bottom), D = window.getComputedStyle(r).borderRadius || "0px", B = A.current++, N = {
+          id: B,
+          left: c - i / 2,
+          top: u - i / 2,
+          size: Math.ceil(i),
+          clip: {
+            top: Math.round(m),
+            right: Math.round(z),
+            bottom: Math.round(S),
+            left: Math.round(d)
+          },
+          borderRadius: D
+        };
+        C((R) => [...R, N]);
+        const I = window.setTimeout(() => {
+          C((R) => R.filter((O) => O.id !== B));
+        }, l + 80);
+        w.current.push(I);
+      },
+      [l, s]
+    ), b = y(
+      (e) => {
+        try {
+          if (!a.current) return;
+          const n = a.current, r = n.parentElement;
+          if (!r) return;
+          const o = H(e);
+          let t = null;
+          for (const d of o)
+            if (d instanceof Element) {
+              if (d === r) break;
+              if (d.matches && d.matches(x)) {
+                t = d;
+                break;
+              }
+            }
+          if (t || (t = r), t.closest && (t.closest("[disabled]") || t.getAttribute("aria-disabled") === "true" || t.classList.contains("ripple-disabled")))
+            return;
+          const i = e.target;
+          if (i?.closest && (i.closest("[disabled]") || i.getAttribute?.("aria-disabled") === "true"))
+            return;
+          const c = n.getBoundingClientRect(), { clientX: u } = e, { clientY: m } = e;
+          p(u, m, t, c);
+        } catch {
+        }
+      },
+      [p]
+    ), E = y(
+      (e) => {
+        if (!a.current || !(e.key === "Enter" || e.key === " ")) return;
+        const n = a.current, r = n.parentElement;
+        if (!r) return;
+        const o = document.activeElement;
+        let t = null;
+        if (o instanceof Element && o.matches(x) && (t = o), t || (t = r), t.closest && (t.closest("[disabled]") || t.getAttribute("aria-disabled") === "true"))
+          return;
+        const i = n.getBoundingClientRect(), c = t.getBoundingClientRect().left + t.getBoundingClientRect().width / 2, u = t.getBoundingClientRect().top + t.getBoundingClientRect().height / 2;
+        p(c, u, t, i);
+      },
+      [p]
+    );
+    return j(
+      L,
+      () => ({
+        trigger: ({ center: e = !0, x: n, y: r } = {}) => {
+          const o = a.current;
+          if (!o) return;
+          const t = o.parentElement;
+          if (!t) return;
+          const i = o.getBoundingClientRect(), c = document.activeElement instanceof Element && document.activeElement.matches(x) ? document.activeElement : t, u = e ? c.getBoundingClientRect().left + c.getBoundingClientRect().width / 2 : n ?? i.left + i.width / 2, m = e ? c.getBoundingClientRect().top + c.getBoundingClientRect().height / 2 : r ?? i.top + i.height / 2;
+          p(u, m, c, i);
+        }
+      }),
+      [p]
+    ), M(() => {
+      const e = a.current;
+      if (!e) return;
+      const n = e.parentElement;
+      if (!n || typeof window > "u") return;
+      const r = window.getComputedStyle(n);
+      let o = !1;
+      return r.position === "static" && (n.style.position = "relative", o = !0, h.current = n), n.addEventListener("pointerdown", b, !0), n.addEventListener("keydown", E), () => {
+        n.removeEventListener("pointerdown", b, !0), n.removeEventListener("keydown", E), o && h.current && (h.current.style.position = "", h.current = null), v();
+      };
+    }, [b, E]), M(() => () => v(), []), /* @__PURE__ */ $(
+      "div",
+      {
+        ref: a,
+        className: `${P.rippleOverlay} ${k ?? ""}`,
+        "aria-hidden": !0,
+        children: T.map((e) => /* @__PURE__ */ $(
+          "span",
+          {
+            className: P.ripple,
+            style: {
+              left: `${e.left}px`,
+              top: `${e.top}px`,
+              width: `${e.size}px`,
+              height: `${e.size}px`,
+              backgroundColor: f,
+              animationDuration: `${l}ms`,
+              clipPath: `inset(${e.clip.top}px ${e.clip.right}px ${e.clip.bottom}px ${e.clip.left}px round ${e.borderRadius})`
+            }
+          },
+          e.id
+        ))
+      }
+    );
+  }
+);
+export {
+  G as Ripple
+};

package/dist/components/builders/Ripple/index.d.ts

@@ -1,2 +1 @@
 export * from './Ripple';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/builders/Ripple/styles.d.ts

@@ -2,4 +2,3 @@ export declare const styles: {
     rippleOverlay: string;
     ripple: string;
 };
-//# sourceMappingURL=styles.d.ts.map