@dss-kit/ui-kit 0.3.0 → 0.3.1

package/dist/components/builders/Table/TablePagination/TablePagination.js

@@ -0,0 +1,208 @@
+import { jsxs as v, jsx as e } from "react/jsx-runtime";
+import { css as R, cx as G } from "@emotion/css";
+import { useRef as J, useState as K, useEffect as Q } from "react";
+import z from "../../../../assets/svg/table/chevron-left.svg.js";
+import B from "../../../../assets/svg/table/chevron-right.svg.js";
+import U from "../../../../assets/svg/table/dots.svg.js";
+import { getPageNumbers as X } from "./TablePagination.utils.js";
+import { Button as M } from "../../../controls/Button/Button.js";
+import { Box as r } from "../../Box/Box.js";
+import { Select as Y } from "../../../controls/Select/Select.js";
+import { theme as Z } from "../../../../utils/theme/index.js";
+import { IconButton as j } from "../../../controls/IconButton/IconButton.js";
+import { Text as _ } from "../../Text/Text.js";
+const { color: i, cornerRadius: tt, spacing: b } = Z, bt = ({
+  pageIndex: o,
+  pageSize: n,
+  totalCount: a,
+  onPageChange: s,
+  onPageSizeChange: c,
+  variant: l = "numbered",
+  labels: d,
+  pageSizeOptions: m = [10, 20, 50, 100],
+  showPageSizeSelector: h = !0,
+  renderPageSizeSelectorDropdownItem: T = (u) => u.label,
+  renderPageSizeSelectorInputItem: V,
+  className: D,
+  itemClassName: x,
+  activeItemClassName: S,
+  pageSizeSelectorClassName: I
+}) => {
+  const { prev: u = "Previous", next: O = "Next" } = d ?? {}, w = J(null), [$, A] = K(0), y = Math.ceil(a / n), f = o > 0, g = o < y - 1;
+  Q(() => {
+    const t = w.current;
+    if (!t) return;
+    const p = new ResizeObserver((W) => {
+      for (const C of W)
+        A(C.contentRect.width);
+    });
+    return p.observe(t), () => {
+      p.disconnect();
+    };
+  }, []);
+  const E = ((t) => {
+    if (t <= 0)
+      return 1;
+    const k = t - 96;
+    if (k <= 40)
+      return 1;
+    const F = Math.floor((k + 8) / 48);
+    return Math.max(1, Math.min(10, F));
+  })($), H = X({
+    page: o + 1,
+    count: y,
+    maxVisiblePages: E
+  }), N = () => {
+    f && s(o - 1);
+  }, P = () => {
+    g && s(o + 1);
+  }, q = (t) => {
+    c(Number(t));
+  };
+  return a === 0 ? null : /* @__PURE__ */ v(r, { flex: 1, row: !0, justifyContent: "space-between", children: [
+    l === "simple" ? /* @__PURE__ */ v(
+      r,
+      {
+        flex: 1,
+        row: !0,
+        gap: b.sm,
+        alignItems: "center",
+        className: D,
+        children: [
+          /* @__PURE__ */ e(
+            M,
+            {
+              width: "auto",
+              size: "sm",
+              color: "neutral",
+              iconLeft: /* @__PURE__ */ e(z, { width: 20, height: 20 }),
+              disabled: !f,
+              onClick: N,
+              children: u
+            }
+          ),
+          /* @__PURE__ */ e(
+            L,
+            {
+              className: x,
+              activeClassName: S,
+              children: o + 1
+            }
+          ),
+          /* @__PURE__ */ e(
+            M,
+            {
+              width: "auto",
+              size: "sm",
+              color: "neutral",
+              iconRight: /* @__PURE__ */ e(B, { width: 20, height: 20 }),
+              disabled: !g,
+              onClick: P,
+              children: O
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ v(
+      r,
+      {
+        ref: w,
+        flex: 1,
+        row: !0,
+        overflow: "hidden",
+        gap: b.sm,
+        children: [
+          /* @__PURE__ */ e(
+            j,
+            {
+              onClick: N,
+              disabled: !f,
+              color: "neutral",
+              size: "sm",
+              children: /* @__PURE__ */ e(z, {})
+            }
+          ),
+          /* @__PURE__ */ e(r, { row: !0, gap: b.sm, children: H.map((t) => /* @__PURE__ */ e(
+            L,
+            {
+              isDots: t === "start-dots" || t === "end-dots",
+              isCurrentPage: t === o + 1,
+              disabled: t === "start-dots" || t === "end-dots",
+              onClick: () => s(t - 1),
+              className: x,
+              activeClassName: S,
+              children: t
+            },
+            t
+          )) }),
+          /* @__PURE__ */ e(
+            j,
+            {
+              color: "neutral",
+              size: "sm",
+              onClick: P,
+              disabled: !g,
+              children: /* @__PURE__ */ e(B, {})
+            }
+          )
+        ]
+      }
+    ),
+    h && /* @__PURE__ */ e(r, { alignItems: "flex-end", className: I, children: /* @__PURE__ */ e(
+      Y,
+      {
+        width: "fit-content",
+        value: n.toString(),
+        size: "sm",
+        items: m.map((t) => ({
+          value: t.toString(),
+          label: t.toString()
+        })),
+        returnedValue: (t) => t.value,
+        renderDropdownItem: T,
+        renderSingleInputItem: V,
+        onChange: (t) => q(t)
+      }
+    ) })
+  ] });
+}, L = ({
+  children: o,
+  isCurrentPage: n = !1,
+  onClick: a,
+  isDots: s = !1,
+  disabled: c = !1,
+  className: l,
+  activeClassName: d
+}) => {
+  const m = R({
+    cursor: c ? "not-allowed" : "pointer",
+    userSelect: "none",
+    width: "40px",
+    height: "40px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: n ? i.fill.accentSecondary : i.fill.bgSecondary,
+    borderRadius: tt.sm,
+    border: n ? `1px solid ${i.fill.accentSecondaryHover}` : `1px solid ${i.border.neutralAlphaBasic}`
+  }), h = R({
+    width: "24px",
+    height: "24px",
+    color: n ? i.icon.secondary : i.icon.tertiary
+  });
+  return /* @__PURE__ */ e(
+    r,
+    {
+      className: G(
+        m,
+        l,
+        n && d
+      ),
+      onClick: c ? void 0 : a,
+      children: s ? /* @__PURE__ */ e(U, { className: h }) : /* @__PURE__ */ e(_, { center: !0, variant: "body-2", fontWeight: "medium", children: o })
+    }
+  );
+};
+export {
+  bt as TablePagination
+};

package/dist/components/builders/Table/TablePagination/TablePagination.utils.d.ts

@@ -16,4 +16,3 @@ export declare function getPageNumbers(props: {
     page: number;
     maxVisiblePages?: number;
 }): (string | number)[];
-//# sourceMappingURL=TablePagination.utils.d.ts.map

package/dist/components/builders/Table/TablePagination/TablePagination.utils.js

@@ -0,0 +1,46 @@
+const i = (o, n) => {
+  const s = n - o + 1;
+  return Array.from({ length: s }, (e, t) => o + t);
+};
+function c(o) {
+  const { count: n = 1, page: s, maxVisiblePages: e = 10 } = o;
+  let t = 1, a = 1;
+  if (e <= 2)
+    return [s];
+  e <= 4 ? (t = 0, a = 0) : e <= 6 ? (t = 1, a = 0) : e <= 7 ? (t = 1, a = Math.max(0, Math.floor((e - 4) / 2))) : (t = 1, a = Math.max(1, Math.floor((e - 5) / 2)));
+  const l = i(1, Math.min(t, n)), g = i(
+    Math.max(n - t + 1, t + 1),
+    n
+  ), r = Math.max(
+    Math.min(
+      // Естественное начало
+      s - a,
+      // Нижняя граница когда страница высокая
+      n - t - a * 2 - 1
+    ),
+    // Больше чем startPages
+    t + 2
+  ), m = Math.min(
+    Math.max(
+      // Естественный конец
+      s + a,
+      // Верхняя граница когда страница низкая
+      t + a * 2 + 2
+    ),
+    // Меньше чем endPages
+    n - t - 1
+  );
+  return [
+    ...l,
+    // Многоточие в начале
+    ...r > t + 2 ? ["start-dots"] : t + 1 < n - t ? [t + 1] : [],
+    // Соседние страницы
+    ...i(r, m),
+    // Многоточие в конце
+    ...m < n - t - 1 ? ["end-dots"] : n - t > t ? [n - t] : [],
+    ...g
+  ];
+}
+export {
+  c as getPageNumbers
+};

package/dist/components/builders/Table/TablePagination/index.d.ts

@@ -1,3 +1,2 @@
 export type { TablePaginationLabels, TablePaginationProps, TablePaginationVariant, } from './TablePagination';
 export { TablePagination } from './TablePagination';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/builders/Table/TablePlaceholder/TablePlaceholder.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+export interface TablePlaceholderLabels {
+    title: string;
+    description: string;
+    action: string | ReactNode;
+}
+export interface TablePlaceholderProps {
+    /** Иконка над текстом (например, спиннер загрузки или лупа) */
+    icon: ReactNode;
+    /** Тексты заголовка, описания и действия */
+    labels: TablePlaceholderLabels;
+    /** Callback для действия-сброса (используется, если `labels.action` — строка) */
+    onReset?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /** Класс для контейнера */
+    className?: string;
+    /** Класс для заголовка */
+    titleClassName?: string;
+    /** Класс для описания */
+    descriptionClassName?: string;
+}
+/**
+ * Универсальный плейсхолдер таблицы для состояний загрузки и «нет данных».
+ */
+export declare const TablePlaceholder: {
+    ({ icon, labels, onReset, className, titleClassName, descriptionClassName, }: TablePlaceholderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/builders/Table/TablePlaceholder/TablePlaceholder.js

@@ -0,0 +1,61 @@
+import { jsxs as d, jsx as i } from "react/jsx-runtime";
+import { Button as l } from "../../../controls/Button/Button.js";
+import { Box as s } from "../../Box/Box.js";
+import { theme as p } from "../../../../utils/theme/index.js";
+import { Text as e } from "../../Text/Text.js";
+const { spacing: o, cornerRadius: h } = p, f = ({
+  icon: r,
+  labels: t,
+  onReset: n,
+  className: c,
+  titleClassName: m,
+  descriptionClassName: a
+}) => /* @__PURE__ */ d(
+  s,
+  {
+    w: "full",
+    borderRadius: h.md,
+    py: o["5xl"],
+    px: o["10xl"],
+    alignItems: "center",
+    className: c,
+    children: [
+      r,
+      /* @__PURE__ */ i(
+        e,
+        {
+          mb: o.xs,
+          variant: "title-3",
+          fontWeight: "semibold",
+          className: m,
+          children: t.title
+        }
+      ),
+      /* @__PURE__ */ i(
+        e,
+        {
+          mb: o.md,
+          colorName: "tertiary",
+          variant: "body-1",
+          fontWeight: "medium",
+          className: a,
+          children: t.description
+        }
+      ),
+      typeof t.action == "string" ? /* @__PURE__ */ i(
+        l,
+        {
+          width: "auto",
+          onClick: n,
+          intensity: "secondary",
+          color: "accent",
+          children: t.action
+        }
+      ) : t.action
+    ]
+  }
+);
+f.displayName = "TablePlaceholder";
+export {
+  f as TablePlaceholder
+};

package/dist/components/builders/Table/TablePlaceholder/index.d.ts

@@ -0,0 +1 @@
+export { TablePlaceholder, type TablePlaceholderLabels, type TablePlaceholderProps, } from './TablePlaceholder';

package/dist/components/builders/Table/TableSortIcon/TableSortIcon.d.ts

@@ -6,4 +6,3 @@ interface TableSortIconProps extends BoxProps {
 }
 export declare const TableSortIcon: FC<TableSortIconProps>;
 export {};
-//# sourceMappingURL=TableSortIcon.d.ts.map

package/dist/components/builders/Table/TableSortIcon/TableSortIcon.js

@@ -0,0 +1,30 @@
+import { jsxs as n, jsx as c } from "react/jsx-runtime";
+import m from "../../../../assets/svg/table/chevron-down.svg.js";
+import i from "../../../../assets/svg/table/chevron-up.svg.js";
+import { Box as s } from "../../Box/Box.js";
+import { theme as l } from "../../../../utils/theme/index.js";
+const { color: o } = l, v = ({
+  sortDirection: r,
+  gap: t = "5px",
+  ...e
+}) => /* @__PURE__ */ n(s, { gap: t, ...e, children: [
+  /* @__PURE__ */ c(
+    i,
+    {
+      style: {
+        color: r === "asc" ? o.icon.accent : o.icon.tertiary
+      }
+    }
+  ),
+  /* @__PURE__ */ c(
+    m,
+    {
+      style: {
+        color: r === "desc" ? o.icon.accent : o.icon.tertiary
+      }
+    }
+  )
+] });
+export {
+  v as TableSortIcon
+};

package/dist/components/builders/Table/TableSortIcon/index.d.ts

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

package/dist/components/builders/Table/TableWrapper/TableWrapper.d.ts

@@ -7,4 +7,3 @@ interface TableWrapperProps extends BoxProps {
 }
 export declare const TableWrapper: import('react').MemoExoticComponent<({ data, children, className, scrollContainerClassName, showBorders, ...props }: TableWrapperProps) => import("react/jsx-runtime").JSX.Element>;
 export {};
-//# sourceMappingURL=TableWrapper.d.ts.map

package/dist/components/builders/Table/TableWrapper/TableWrapper.js

@@ -0,0 +1,87 @@
+import { jsx as i } from "react/jsx-runtime";
+import { css as n, cx as d } from "@emotion/css";
+import { memo as F, useState as f, useRef as L, useCallback as k, useEffect as E } from "react";
+import { theme as W } from "../../../../utils/theme/index.js";
+import { Box as b } from "../../Box/Box.js";
+const { color: s, cornerRadius: C } = W, z = n({
+  position: "relative",
+  borderRadius: C.md,
+  overflow: "hidden",
+  "&::before, &::after": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    bottom: 14,
+    width: 96,
+    pointerEvents: "none",
+    zIndex: 1,
+    transition: "opacity 0.2s ease"
+  },
+  "&::before": {
+    left: 0,
+    background: "linear-gradient(to left, rgba(255, 255, 255, 0.00) 0%, #FFF 100%)"
+  },
+  "&::after": {
+    right: 0,
+    background: "linear-gradient(to right, rgba(255, 255, 255, 0.00) 0%, #FFF 100%)"
+  }
+}), N = n({
+  overflowX: "auto",
+  scrollbarWidth: "thin",
+  scrollbarColor: `${s.scrollbar.thumbPrimary} ${s.scrollbar.trackPrimary}`
+}), T = F(
+  ({
+    data: m,
+    children: h,
+    className: p,
+    scrollContainerClassName: u,
+    showBorders: w = !1,
+    ...S
+  }) => {
+    const [g, v] = f(!1), [y, R] = f(!1), t = L(null), r = k(() => {
+      const e = t.current;
+      if (!e) return;
+      const { scrollLeft: o, scrollWidth: a, clientWidth: l } = e, c = a > l;
+      v(c && o > 0), R(
+        c && o < a - l - 1
+      );
+    }, []);
+    E(() => {
+      const e = t.current;
+      if (!e) return;
+      r();
+      const o = new ResizeObserver(r);
+      return o.observe(e), e.addEventListener("scroll", r), () => {
+        o.disconnect(), e.removeEventListener("scroll", r);
+      };
+    }, [r, m]);
+    const x = n({
+      border: w ? `1px solid ${s.border.neutralAlphaLow}` : "transparent",
+      "&::before": {
+        opacity: g ? 1 : 0
+      },
+      "&::after": {
+        opacity: y ? 1 : 0
+      }
+    });
+    return /* @__PURE__ */ i(
+      b,
+      {
+        className: d(z, x, p),
+        ...S,
+        children: /* @__PURE__ */ i(
+          b,
+          {
+            ref: t,
+            className: d(N, u),
+            children: h
+          }
+        )
+      }
+    );
+  }
+);
+T.displayName = "TableWrapper";
+export {
+  T as TableWrapper
+};

package/dist/components/builders/Table/TableWrapper/index.d.ts

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

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

@@ -1,6 +1,5 @@
-import { createColumnHelper, ColumnFiltersState as TableColumnFiltersState, PaginationState as TablePaginationState, RowSelectionState as TableRowSelectionState, SortingState as TableSortingState, VisibilityState as TableVisibilityState } from '@tanstack/react-table';
-export type { TableColumnFiltersState, TablePaginationState, TableSortingState, TableRowSelectionState, TableVisibilityState, };
+import { createColumnHelper, ColumnFiltersState as TableColumnFiltersState, ColumnPinningState as TableColumnPinningState, PaginationState as TablePaginationState, RowSelectionState as TableRowSelectionState, SortingState as TableSortingState, VisibilityState as TableVisibilityState } from '@tanstack/react-table';
+export type { TableColumnFiltersState, TableColumnPinningState, TablePaginationState, TableSortingState, TableRowSelectionState, TableVisibilityState, };
 export { createColumnHelper };
 export { Table } from './Table';
 export type { TablePaginationProps, TableProps, } from './Table.types';
-//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,11 @@
+import { css as o } from "@emotion/css";
+import { typography as t } from "../../../styles/utils/typography.js";
+const s = {
+  table: o({
+    ...t.body2,
+    fontWeight: 500
+  })
+};
+export {
+  s as styles
+};

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

@@ -345,4 +345,3 @@ export declare const AnimatedText: React.ComponentType<Omit<{
 } & import('framer-motion').MotionProps, "children"> & {
     children?: React.ReactNode | import('motion-dom').MotionValue<number> | import('motion-dom').MotionValue<string>;
 }>;
-//# sourceMappingURL=Text.d.ts.map

package/dist/components/builders/Text/Text.js

@@ -0,0 +1,97 @@
+import { jsx as H } from "react/jsx-runtime";
+import { css as J, cx as K } from "@emotion/css";
+import { motion as O } from "framer-motion";
+import { forwardRef as Q, useState as V } from "react";
+import { styles as o } from "./styles.js";
+import { systemToClass as X } from "./utils/systemToClass.js";
+const i = Q(
+  ({
+    children: c,
+    className: m,
+    variant: l = "body-1",
+    fontWeight: d = "medium",
+    tag: p = "p",
+    colorName: f = "primary",
+    inherit: t = !1,
+    style: u,
+    clickOpacity: y = 0.5,
+    opacityDuration: x = 200,
+    onClick: a,
+    disabled: Y,
+    mt: h,
+    mb: T,
+    ml: C,
+    mr: b,
+    flex: v,
+    cursor: M,
+    wordBreak: P,
+    whiteSpace: S,
+    textOverflow: g,
+    decoration: w,
+    color: I,
+    center: N,
+    left: R,
+    right: j,
+    uppercase: k,
+    lowercase: A,
+    capitalize: B,
+    overflow: D,
+    ...E
+  }, L) => {
+    const [U, n] = V(!1), s = !!a, r = () => s && n(!0), e = () => s && n(!1), W = X({
+      mt: h,
+      mb: T,
+      ml: C,
+      mr: b,
+      flex: v,
+      cursor: M,
+      wordBreak: P,
+      whiteSpace: S,
+      textOverflow: g,
+      decoration: w,
+      color: I,
+      center: N,
+      left: R,
+      right: j,
+      uppercase: k,
+      lowercase: A,
+      capitalize: B,
+      overflow: D
+    }), $ = p, q = o[t ? "inherit" : l], z = o[t ? "inherit" : f], F = o[t ? "inherit" : d], G = s ? J({
+      opacity: U ? y : 1,
+      transition: `opacity ${x}ms ease`
+    }) : "";
+    return /* @__PURE__ */ H(
+      $,
+      {
+        ref: L,
+        ...E,
+        className: K(
+          o.text,
+          q,
+          z,
+          F,
+          G,
+          m,
+          W
+        ),
+        style: u,
+        onClick: a,
+        onMouseDown: r,
+        onMouseUp: e,
+        onMouseLeave: e,
+        onTouchStart: r,
+        onTouchEnd: e,
+        role: s ? "button" : void 0,
+        tabIndex: s ? 0 : void 0,
+        children: c
+      }
+    );
+  }
+);
+i.displayName = "Text";
+const as = O(i);
+export {
+  as as AnimatedText,
+  i as Text
+};

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

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

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

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

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

@@ -0,0 +1,44 @@
+import { css as t } from "@emotion/css";
+import { typography as e } from "../../../styles/utils/typography.js";
+import { theme as r } from "../../../utils/theme/index.js";
+const { transition: n, color: o, fontWeight: i } = r, d = {
+  // Базовый класс: только transition, без fontFamily/wordBreak,
+  // чтобы variant="inherit"/inherit корректно наследовали стили родителя.
+  text: t({
+    transition: n.general
+  }),
+  /**
+   * Пустой класс для значения "inherit": не назначает никаких стилей,
+   * поэтому соответствующее свойство наследуется от родителя.
+   */
+  inherit: t({}),
+  // Typography variants
+  "title-1": t({ ...e.title1 }),
+  "title-2": t({ ...e.title2 }),
+  "title-3": t({ ...e.title3 }),
+  "headline-1": t({ ...e.headline1 }),
+  "headline-2": t({ ...e.headline2 }),
+  "headline-3": t({ ...e.headline3 }),
+  "body-1": t({ ...e.body1 }),
+  "body-2": t({ ...e.body2 }),
+  "caption-1": t({ ...e.caption1 }),
+  "caption-2": t({ ...e.caption2 }),
+  // Color variants
+  primary: t({ color: o.text.primary }),
+  secondary: t({ color: o.text.secondary }),
+  tertiary: t({ color: o.text.tertiary }),
+  positive: t({ color: o.text.positive }),
+  negative: t({ color: o.text.negative }),
+  warning: t({ color: o.text.warning }),
+  accent: t({ color: o.text.accent }),
+  inverse: t({ color: o.text.inverse }),
+  transfer: t({ color: o.text.transfer }),
+  // Font weight variants
+  regular: t({ fontWeight: i.regular }),
+  medium: t({ fontWeight: i.medium }),
+  semibold: t({ fontWeight: i.semibold }),
+  bold: t({ fontWeight: i.bold })
+};
+export {
+  d as styles
+};