@dss-kit/ui-kit 1.0.2 → 1.0.4

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

@@ -0,0 +1,135 @@
+import { css as o } from "@emotion/css";
+import { SHEET_HANDLE_HEIGHT as n, SHEET_OVERDRAG_LIMIT as a, SHEET_SNAP_POINT_VAR as i } from "./Sheet.const.js";
+import { getDialogPartSelector as r } from "../Dialog/Dialog.const.js";
+import { theme as t } from "../../../utils/theme/index.js";
+const e = "env(safe-area-inset-top, 0px)", l = "env(safe-area-inset-bottom, 0px)", c = {
+  content: o({
+    maxHeight: [
+      `calc(100vh - ${e})`,
+      `calc(100dvh - ${e})`
+    ]
+  }),
+  full: o({
+    height: ["100vh", "100dvh"],
+    paddingTop: e,
+    borderRadius: 0
+  }),
+  // Значение с var() браузер не отбросит при разборе даже без поддержки dvh,
+  // поэтому фолбэк через @supports, а не повтором свойства
+  snap: o({
+    height: `calc(var(${i}) * (100vh - ${e}))`,
+    "@supports (height: 100dvh)": {
+      height: `calc(var(${i}) * (100dvh - ${e}))`
+    }
+  })
+}, f = {
+  bottom: {
+    panel: o({
+      right: 0,
+      bottom: 0,
+      left: 0,
+      flexDirection: "column",
+      paddingBottom: l,
+      borderTopLeftRadius: t.cornerRadius.md,
+      borderTopRightRadius: t.cornerRadius.md,
+      boxShadow: `0 -4px 20px 0 ${t.color.effect.shadow_s}`,
+      // Продолжение фона за нижним краем: при перетягивании вверх за открытое
+      // положение («резинка») у края экрана не появляется просвет. Нахлёст
+      // в 1px убирает шов на дробных смещениях
+      "&::after": {
+        content: '""',
+        position: "absolute",
+        top: "calc(100% - 1px)",
+        right: 0,
+        left: 0,
+        height: a + 1,
+        backgroundColor: "inherit"
+      }
+    }),
+    handle: o({
+      alignItems: "flex-start",
+      paddingTop: t.spacing.sm
+    }),
+    handleBar: o({
+      width: 36,
+      height: 4
+    }),
+    sizing: c
+  }
+}, u = {
+  root: o({
+    position: "fixed",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    zIndex: 1
+  }),
+  // Пока Sheet уезжает, страница под ним уже доступна для кликов
+  rootClosing: o({
+    pointerEvents: "none"
+  }),
+  backdrop: o({
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    backgroundColor: t.color.fill.bg_overlay_primary,
+    backdropFilter: "blur(5px)"
+  }),
+  panel: o({
+    position: "absolute",
+    display: "flex",
+    outline: "none",
+    // Шапка — зона перетаскивания: жест не прокручивает страницу и не выделяет текст
+    [`& ${r("header")}`]: {
+      touchAction: "none",
+      userSelect: "none"
+    },
+    // Main занимает свободное место (в режимах full и snap футер прижат к низу)
+    // и не передаёт прокрутку странице, когда доходит до края
+    [`& ${r("main")}`]: {
+      flex: "1 1 auto",
+      overscrollBehavior: "contain"
+    },
+    // У футера `flex: 1` (Box): у Modal высота по контенту и это незаметно,
+    // у Sheet высота бывает фиксированной — футер не растягиваем
+    [`& ${r("footer")}`]: {
+      flex: "0 0 auto"
+    }
+  }),
+  // Первым сжимается Main. Если шапка и футер всё равно не помещаются
+  // (мелкая точка фиксации, низкий экран в landscape), прокручивается всё
+  // содержимое — футер остаётся достижимым
+  content: o({
+    display: "flex",
+    flex: "1 1 auto",
+    flexDirection: "column",
+    minWidth: 0,
+    minHeight: 0,
+    overflowX: "hidden",
+    overflowY: "auto",
+    overscrollBehavior: "contain"
+  }),
+  handle: o({
+    display: "flex",
+    flexShrink: 0,
+    justifyContent: "center",
+    height: n,
+    cursor: "grab",
+    touchAction: "none",
+    userSelect: "none",
+    "&:active": {
+      cursor: "grabbing"
+    }
+  }),
+  handleBar: o({
+    borderRadius: t.cornerRadius.fullRound,
+    backgroundColor: t.color.icon.tertiary
+  })
+};
+export {
+  f as positionStyles,
+  u as styles
+};

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

@@ -5,10 +5,10 @@ import z from "../../../../assets/svg/table/chevron-left.svg.js";
 import M from "../../../../assets/svg/table/chevron-right.svg.js";
 import Q from "../../../../assets/svg/table/dots.svg.js";
 import { getPageNumbers as U } from "./TablePagination.utils.js";
+import { Select as X } from "../../../controls/Select/Select.js";
 import { Button as _ } from "../../../controls/Button/Button.js";
 import { IconButton as B } from "../../../controls/IconButton/IconButton.js";
 import { Box as r } from "../../Box/Box.js";
-import { Select as X } from "../../../controls/Select/Select.js";
 import { theme as Y } from "../../../../utils/theme/index.js";
 import { Text as Z } from "../../Text/Text.js";
 const { color: i, cornerRadius: tt, spacing: b } = Y, bt = ({

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

@@ -332,11 +332,11 @@ export declare const AnimatedText: React.ComponentType<Omit<{
     textOverflow?: import("csstype").Property.TextOverflow | undefined;
     whiteSpace?: import("csstype").Property.WhiteSpace | undefined;
     wordBreak?: import("csstype").Property.WordBreak | undefined;
-    disabled?: boolean | undefined;
     capitalize?: boolean | undefined;
     lowercase?: boolean | undefined;
     uppercase?: boolean | undefined;
     decoration?: import("csstype").Property.TextDecoration<string | number> | undefined;
+    disabled?: boolean | undefined;
     variant?: "inherit" | TextVariant | undefined;
     tag?: TextTag | undefined;
     colorName?: "inherit" | TextColorName | undefined;

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

@@ -3,5 +3,6 @@ export * from './Loader';
 export * from './Modal';
 export * from './Portal';
 export * from './Ripple';
+export * from './Sheet';
 export * from './Table';
 export * from './Text';

package/dist/components/controls/Checkbox/Checkbox.js

@@ -4,8 +4,8 @@ import { forwardRef as q, useState as A } from "react";
 import D from "../../../assets/svg/shared/check.svg.js";
 import E from "../../../assets/svg/shared/minus.svg.js";
 import { styles as e, checkboxVariantsStyles as F } from "./styles.js";
-import { Text as b } from "../../builders/Text/Text.js";
-import { Box as g } from "../../builders/Box/Box.js";
+import { Box as b } from "../../builders/Box/Box.js";
+import { Text as g } from "../../builders/Text/Text.js";
 const G = { sm: 20, md: 24 }, H = q(
   ({
     checked: m,
@@ -45,7 +45,7 @@ const G = { sm: 20, md: 24 }, H = q(
         ),
         children: [
           /* @__PURE__ */ i(
-            g,
+            b,
             {
               relative: !0,
               display: "inline-flex",
@@ -95,9 +95,9 @@ const G = { sm: 20, md: 24 }, H = q(
               ]
             }
           ),
-          (a || t) && /* @__PURE__ */ i(g, { gap: 4, children: [
+          (a || t) && /* @__PURE__ */ i(b, { gap: 4, children: [
             a && /* @__PURE__ */ r(
-              b,
+              g,
               {
                 colorName: N,
                 variant: d === "sm" ? "body-2" : "body-1",
@@ -106,7 +106,7 @@ const G = { sm: 20, md: 24 }, H = q(
               }
             ),
             t && /* @__PURE__ */ r(
-              b,
+              g,
               {
                 variant: "body-2",
                 colorName: u,

package/dist/components/controls/Select/Select.js

@@ -7,9 +7,9 @@ import Me from "../../../assets/svg/shared/chevron-down.svg.js";
 import Oe from "../../../assets/svg/shared/empty-box.svg.js";
 import { styles as n, selectArrowSizesStyles as Ve } from "./styles.js";
 import { useControlled as Ae } from "../../../utils/hooks/useControlled.js";
-import { Checkbox as De } from "../Checkbox/Checkbox.js";
-import { Tag as We } from "../../shared/Tag/Tag.js";
-import { Portal as ze } from "../../builders/Portal/Portal.js";
+import { Portal as De } from "../../builders/Portal/Portal.js";
+import { Checkbox as We } from "../Checkbox/Checkbox.js";
+import { Tag as ze } from "../../shared/Tag/Tag.js";
 import { Box as i } from "../../builders/Box/Box.js";
 import { Text as d } from "../../builders/Text/Text.js";
 import { Ripple as Be } from "../../builders/Ripple/Ripple.js";
@@ -149,7 +149,7 @@ function Ye({
       }) : /* @__PURE__ */ t(i, { flexWrap: "wrap", row: !0, gap: 10, children: s.map((r) => {
         const c = S.get(r);
         return c ? /* @__PURE__ */ t(
-          We,
+          ze,
           {
             size: "sm",
             label: l ? l(c) : String(r),
@@ -180,7 +180,7 @@ function Ye({
         children: o
       }
     ) : /* @__PURE__ */ t(ye, { children: o });
-  }, he = V && /* @__PURE__ */ t(ze, { children: /* @__PURE__ */ t(
+  }, he = V && /* @__PURE__ */ t(De, { children: /* @__PURE__ */ t(
     i,
     {
       row: !0,
@@ -258,7 +258,7 @@ function Ye({
                   relative: !0,
                   onClick: () => de(e),
                   children: [
-                    a && /* @__PURE__ */ t(De, { size: "sm", checked: c }),
+                    a && /* @__PURE__ */ t(We, { size: "sm", checked: c }),
                     D ? /* @__PURE__ */ t(
                       d,
                       {

package/dist/components/controls/Switch/Switch.d.ts

@@ -38,11 +38,15 @@ interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,
      */
     variant?: SwitchVariant;
     /**
-     * Заголовок переключателя.
+     * Заголовок переключателя — его доступное имя.
+     * Рендерится внутри `<label>`, поэтому `ReactNode` должен быть строчным
+     * контентом (без `div`, `p` и интерактивных элементов).
+     * Без `title` и `text` передайте `aria-label`.
      */
     title?: string | React.ReactNode;
     /**
-     * Текст переключателя.
+     * Текст переключателя. Вместе с `title` связывается с переключателем
+     * через `aria-describedby`. Ограничения на `ReactNode` те же, что у `title`.
      */
     text?: string | React.ReactNode;
     /**
@@ -73,13 +77,13 @@ interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,
     className?: string;
     /** Класс для внешнего `Box`-обёртки над `<label>`. */
     wrapperClassName?: string;
-    /** Класс для контейнера переключателя (`Box` со `switchContainer`). */
+    /** Класс для контейнера переключателя (`<span>` со `switchContainer`). */
     switchContainerClassName?: string;
-    /** Класс для рельса-трека переключателя (`<div>` с `switch`). */
+    /** Класс для рельса-трека переключателя (`<span>` с `switch`). */
     trackClassName?: string;
-    /** Класс для перемещаемой ручки переключателя (`<div>` с `thumb`). */
+    /** Класс для перемещаемой ручки переключателя (`<span>` с `thumb`). */
     thumbClassName?: string;
-    /** Класс для скрытого нативного `<input>`. */
+    /** Класс для визуально скрытого нативного `<input>` поверх трека. */
     inputClassName?: string;
     /** Класс для блока с заголовком/описанием. */
     labelsContainerClassName?: string;

package/dist/components/controls/Switch/Switch.js

@@ -1,140 +1,163 @@
-import { jsx as t, jsxs as l } from "react/jsx-runtime";
-import { cx as u } from "@emotion/css";
-import { forwardRef as B, useRef as D, useImperativeHandle as H, useCallback as T, useMemo as k } from "react";
-import q from "../../../assets/svg/switch/fire.svg.js";
-import A from "../../../assets/svg/switch/moon.svg.js";
-import { styles as r } from "./styles.js";
-import { useControlled as G } from "../../../utils/hooks/useControlled.js";
-import { Text as v } from "../../builders/Text/Text.js";
-import { Box as f } from "../../builders/Box/Box.js";
-import { theme as J } from "../../../utils/theme/index.js";
-const { spacing: b } = J, K = B(
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
+import { cx as o } from "@emotion/css";
+import { forwardRef as q, useId as A, useRef as G, useImperativeHandle as J, useCallback as K, useMemo as I } from "react";
+import L from "../../../assets/svg/switch/fire.svg.js";
+import O from "../../../assets/svg/switch/moon.svg.js";
+import { styles as e } from "./styles.js";
+import { useControlled as Q } from "../../../utils/hooks/useControlled.js";
+import { Text as x } from "../../builders/Text/Text.js";
+import { Box as U } from "../../builders/Box/Box.js";
+import { theme as X } from "../../../utils/theme/index.js";
+const { spacing: Y } = X, Z = q(
   ({
-    title: a,
-    text: i,
-    icon: w,
-    disabled: m,
-    onChange: c,
-    checked: x,
-    defaultValue: d,
-    className: S,
-    wrapperClassName: R,
-    switchContainerClassName: V,
-    trackClassName: j,
-    thumbClassName: C,
-    inputClassName: E,
-    labelsContainerClassName: F,
+    title: c,
+    text: s,
+    icon: B,
+    disabled: d,
+    onChange: n,
+    checked: S,
+    defaultValue: p,
+    className: $,
+    wrapperClassName: j,
+    switchContainerClassName: C,
+    trackClassName: R,
+    thumbClassName: V,
+    inputClassName: D,
+    labelsContainerClassName: E,
     titleClassName: h,
-    textClassName: p,
-    size: I = "md",
-    variant: g = "accent",
+    textClassName: b,
+    size: F = "md",
+    variant: y = "accent",
     reverse: M = !1,
     w: W = "auto",
-    ..._
-  }, $) => {
-    const [o, n] = G(x, d), s = D(null);
-    H(
-      $,
+    "aria-describedby": _,
+    ...g
+  }, z) => {
+    const [l, a] = Q(
+      S,
+      p ?? !1
+    ), N = A(), m = `${N}-title`, u = `${N}-text`, k = !!(c && s), H = [k && u, _].filter(Boolean).join(" ") || void 0, i = G(null);
+    J(
+      z,
       () => ({
         focus: () => {
-          s.current?.focus();
+          i.current?.focus();
         },
         blur: () => {
-          s.current?.blur();
+          i.current?.blur();
         },
         get checked() {
-          return o ?? !1;
+          return l ?? !1;
         },
-        setChecked: (e) => {
-          n(e), c?.(e);
+        setChecked: (r) => {
+          a(r), n?.(r);
         },
         toggle: () => {
-          const e = !o;
-          n(e), c?.(e);
+          const r = !l;
+          a(r), n?.(r);
         },
-        isFocused: () => document.activeElement === s.current,
-        isDisabled: () => m ?? !1,
-        getInputElement: () => s.current,
-        checkValidity: () => s.current?.checkValidity() ?? !0,
+        isFocused: () => document.activeElement === i.current,
+        isDisabled: () => d ?? !1,
+        getInputElement: () => i.current,
+        checkValidity: () => i.current?.checkValidity() ?? !0,
         reset: () => {
-          const e = d ?? !1;
-          n(e), c?.(e);
+          const r = p ?? !1;
+          a(r), n?.(r);
         }
       }),
-      [o, n, c, m, d]
+      [l, a, n, d, p]
     );
-    const z = T(
-      (e) => {
-        n(e.target.checked), c?.(e.target.checked);
+    const T = K(
+      (r) => {
+        a(r.target.checked), n?.(r.target.checked);
       },
-      [c]
-    ), N = k(() => typeof a == "string" ? /* @__PURE__ */ t(
-      v,
+      [n, a]
+    ), v = I(() => c ? typeof c == "string" ? /* @__PURE__ */ t(
+      x,
       {
+        id: m,
+        tag: "span",
         variant: "body-1",
         colorName: "primary",
         fontWeight: "medium",
         className: h,
-        children: a
+        children: c
       }
-    ) : a, [a, h]), y = k(() => typeof i == "string" ? /* @__PURE__ */ t(
-      v,
+    ) : /* @__PURE__ */ t("span", { id: m, children: c }) : null, [c, h, m]), w = I(() => s ? typeof s == "string" ? /* @__PURE__ */ t(
+      x,
       {
+        id: u,
+        tag: "span",
         variant: "body-2",
         colorName: "secondary",
         fontWeight: "regular",
-        className: p,
-        children: i
+        className: b,
+        children: s
       }
-    ) : i, [i, p]);
-    return /* @__PURE__ */ l(f, { row: !0, w: W, gap: b.sm, className: R, children: [
-      /* @__PURE__ */ l(
+    ) : /* @__PURE__ */ t("span", { id: u, children: s }) : null, [s, b, u]);
+    return /* @__PURE__ */ f(U, { row: !0, w: W, gap: Y.sm, className: j, children: [
+      /* @__PURE__ */ f(
         "label",
         {
-          className: u(r.container, S, {
-            [r.disabled]: m,
-            [r.reverse]: M
+          className: o(e.container, $, {
+            [e.disabled]: d,
+            [e.reverse]: M
           }),
           children: [
-            /* @__PURE__ */ l(
-              f,
+            /* @__PURE__ */ f(
+              "span",
               {
-                className: u(
-                  r.switchContainer,
-                  r[`size_${I}`],
-                  r[`variant_${g}`],
-                  V
+                className: o(
+                  e.switchContainer,
+                  e[`size_${F}`],
+                  e[`variant_${y}`],
+                  C
                 ),
                 children: [
                   /* @__PURE__ */ t(
                     "input",
                     {
-                      ref: s,
+                      ref: i,
                       type: "checkbox",
-                      checked: o,
-                      hidden: !0,
-                      onChange: z,
-                      disabled: m,
-                      className: E,
-                      ..._
+                      role: "switch",
+                      checked: l,
+                      onChange: T,
+                      disabled: d,
+                      "aria-labelledby": k && !g["aria-label"] ? m : void 0,
+                      "aria-describedby": H,
+                      className: o(e.input, D),
+                      ...g
                     }
                   ),
-                  /* @__PURE__ */ t("div", { className: u(r.switch, j), children: /* @__PURE__ */ t("div", { className: u(r.thumb, C), children: g === "theme" && (o ? /* @__PURE__ */ t(A, { className: r.moon }) : /* @__PURE__ */ t(q, { className: r.fire })) }) })
+                  /* @__PURE__ */ t(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: o(e.switch, R),
+                      children: /* @__PURE__ */ t("span", { className: o(e.thumb, V), children: y === "theme" && (l ? /* @__PURE__ */ t(O, { className: e.icon }) : /* @__PURE__ */ t(L, { className: e.icon })) })
+                    }
+                  )
                 ]
               }
             ),
-            (N || y) && /* @__PURE__ */ l(f, { gap: b.xs, className: F, children: [
-              N,
-              y
-            ] })
+            (v || w) && /* @__PURE__ */ f(
+              "span",
+              {
+                className: o(e.labelsContainer, E),
+                children: [
+                  v,
+                  w
+                ]
+              }
+            )
           ]
         }
       ),
-      w
+      B
     ] });
   }
 );
-K.displayName = "Switch";
+Z.displayName = "Switch";
 export {
-  K as Switch
+  Z as Switch
 };

package/dist/components/controls/Switch/styles.d.ts

@@ -3,6 +3,7 @@ export declare const styles: {
     disabled: string;
     reverse: string;
     switchContainer: string;
+    input: string;
     variant_accent: string;
     variant_secondary: string;
     variant_positive: string;
@@ -12,6 +13,6 @@ export declare const styles: {
     size_lg: string;
     switch: string;
     thumb: string;
-    moon: string;
-    fire: string;
+    labelsContainer: string;
+    icon: string;
 };