@dss-kit/ui-kit 1.0.2 → 1.0.3

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

@@ -5,102 +5,104 @@ import { Loader as f } from "./components/builders/Loader/Loader.js";
 import { Modal as n } from "./components/builders/Modal/index.js";
 import { Portal as T } from "./components/builders/Portal/Portal.js";
 import { Ripple as l } from "./components/builders/Ripple/Ripple.js";
-import { Table as C } from "./components/builders/Table/Table.js";
-import { createColumnHelper as B } from "@tanstack/react-table";
-import { AnimatedText as h, Text as g } from "./components/builders/Text/Text.js";
-import { LineChart as A } from "./components/charts/LineChart/LineChart.js";
-import { PieProgressChart as S } from "./components/charts/PieProgressChart/PieProgressChart.js";
-import { Button as P } from "./components/controls/Button/Button.js";
-import { Checkbox as _ } from "./components/controls/Checkbox/Checkbox.js";
-import { IconButton as I } from "./components/controls/IconButton/IconButton.js";
-import { Input as v } from "./components/controls/Input/Input.js";
-import { MarkdownToolbarAction as D } from "./components/controls/MarkdownTextEditor/hooks/useToolbarActions/useToolbarActions.const.js";
-import { MARKDOWN_TEXT_EDITOR_LOCALE_KEY as O } from "./components/controls/MarkdownTextEditor/MarkdownTextEditor.locale.js";
-import { MarkdownTextEditor as U } from "./components/controls/MarkdownTextEditor/MarkdownTextEditor.js";
-import { OtpInput as y } from "./components/controls/OtpInput/OtpInput.js";
-import { Radio as F } from "./components/controls/RadioGroup/Radio.js";
-import { RadioGroup as N } from "./components/controls/RadioGroup/RadioGroup.js";
-import { SegmentControl as Y } from "./components/controls/SegmentControl/SegmentControl.js";
-import { Select as q } from "./components/controls/Select/Select.js";
-import { Switch as Q } from "./components/controls/Switch/Switch.js";
-import { Tabs as Z } from "./components/controls/Tabs/Tabs.js";
-import { Breadcrumbs as oo } from "./components/navigation/Breadcrumbs/Breadcrumbs.js";
-import { Avatar as eo } from "./components/shared/Avatar/Avatar.js";
-import { Badge as po } from "./components/shared/Badge/Badge.js";
-import { Counter as xo } from "./components/shared/Counter/Counter.js";
-import { Dot as ao } from "./components/shared/Dot/Dot.js";
-import { Hint as io } from "./components/shared/Hint/Hint.js";
-import { MarkdownText as so } from "./components/shared/MarkdownText/MarkdownText.js";
-import { Popover as Co } from "./components/shared/Popover/Popover.js";
-import { Skeleton as Bo } from "./components/shared/Skeleton/Skeleton.js";
-import { Tag as ho } from "./components/shared/Tag/Tag.js";
-import { Toast as ko } from "./components/shared/Toast/Toast.js";
-import { useToast as Eo } from "./components/shared/Toast/Toast.hooks.js";
-import { toast as Mo } from "./components/shared/Toast/Toast.utils.js";
-import { ToastContainer as Ro } from "./components/shared/Toast/ToastContainer.js";
-import { Tooltip as bo } from "./components/shared/Tooltip/Tooltip.js";
-import { ThemeProviderScoped as Lo } from "./providers/ThemeProviderScoped/ThemeProviderScoped.js";
-import { THEME_DATA_ATTRIBUTE as wo } from "./providers/ThemeProviderScoped/ThemeProviderScoped.const.js";
-import { ThemeContext as Ko, useUiKitTheme as Oo } from "./providers/ThemeProviderScoped/ThemeProviderScoped.context.js";
-import { useControlled as Uo } from "./utils/hooks/useControlled.js";
-import { useBreakpoint as yo } from "./utils/hooks/breakpoints/useBreakpoint/useBreakpoint.js";
-import { Breakpoints as Fo, BreakpointsBase as Go } from "./utils/hooks/breakpoints/useBreakpoint/useBreakpoint.const.js";
-import { getFontWeightClass as Xo } from "./utils/styles/getFontWeightClass/getFontWeightClass.js";
-import { getSizeClass as jo } from "./utils/styles/getSizeClass/getSizeClass.js";
-import { getStyleClass as Jo } from "./utils/styles/getStyleClass/getStyleClass.js";
-import { theme as Vo } from "./utils/theme/index.js";
+import { Sheet as C } from "./components/builders/Sheet/index.js";
+import { Table as h } from "./components/builders/Table/Table.js";
+import { createColumnHelper as c } from "@tanstack/react-table";
+import { AnimatedText as k, Text as A } from "./components/builders/Text/Text.js";
+import { LineChart as S } from "./components/charts/LineChart/LineChart.js";
+import { PieProgressChart as P } from "./components/charts/PieProgressChart/PieProgressChart.js";
+import { Button as _ } from "./components/controls/Button/Button.js";
+import { Checkbox as I } from "./components/controls/Checkbox/Checkbox.js";
+import { IconButton as v } from "./components/controls/IconButton/IconButton.js";
+import { Input as D } from "./components/controls/Input/Input.js";
+import { MarkdownToolbarAction as O } from "./components/controls/MarkdownTextEditor/hooks/useToolbarActions/useToolbarActions.const.js";
+import { MARKDOWN_TEXT_EDITOR_LOCALE_KEY as U } from "./components/controls/MarkdownTextEditor/MarkdownTextEditor.locale.js";
+import { MarkdownTextEditor as y } from "./components/controls/MarkdownTextEditor/MarkdownTextEditor.js";
+import { OtpInput as F } from "./components/controls/OtpInput/OtpInput.js";
+import { Radio as N } from "./components/controls/RadioGroup/Radio.js";
+import { RadioGroup as Y } from "./components/controls/RadioGroup/RadioGroup.js";
+import { SegmentControl as q } from "./components/controls/SegmentControl/SegmentControl.js";
+import { Select as Q } from "./components/controls/Select/Select.js";
+import { Switch as Z } from "./components/controls/Switch/Switch.js";
+import { Tabs as oo } from "./components/controls/Tabs/Tabs.js";
+import { Breadcrumbs as eo } from "./components/navigation/Breadcrumbs/Breadcrumbs.js";
+import { Avatar as po } from "./components/shared/Avatar/Avatar.js";
+import { Badge as xo } from "./components/shared/Badge/Badge.js";
+import { Counter as ao } from "./components/shared/Counter/Counter.js";
+import { Dot as io } from "./components/shared/Dot/Dot.js";
+import { Hint as so } from "./components/shared/Hint/Hint.js";
+import { MarkdownText as Co } from "./components/shared/MarkdownText/MarkdownText.js";
+import { Popover as ho } from "./components/shared/Popover/Popover.js";
+import { Skeleton as co } from "./components/shared/Skeleton/Skeleton.js";
+import { Tag as ko } from "./components/shared/Tag/Tag.js";
+import { Toast as Eo } from "./components/shared/Toast/Toast.js";
+import { useToast as Mo } from "./components/shared/Toast/Toast.hooks.js";
+import { toast as Ro } from "./components/shared/Toast/Toast.utils.js";
+import { ToastContainer as bo } from "./components/shared/Toast/ToastContainer.js";
+import { Tooltip as Lo } from "./components/shared/Tooltip/Tooltip.js";
+import { ThemeProviderScoped as wo } from "./providers/ThemeProviderScoped/ThemeProviderScoped.js";
+import { THEME_DATA_ATTRIBUTE as Ko } from "./providers/ThemeProviderScoped/ThemeProviderScoped.const.js";
+import { ThemeContext as Ho, useUiKitTheme as Uo } from "./providers/ThemeProviderScoped/ThemeProviderScoped.context.js";
+import { useControlled as yo } from "./utils/hooks/useControlled.js";
+import { useBreakpoint as Fo } from "./utils/hooks/breakpoints/useBreakpoint/useBreakpoint.js";
+import { Breakpoints as No, BreakpointsBase as Xo } from "./utils/hooks/breakpoints/useBreakpoint/useBreakpoint.const.js";
+import { getFontWeightClass as jo } from "./utils/styles/getFontWeightClass/getFontWeightClass.js";
+import { getSizeClass as Jo } from "./utils/styles/getSizeClass/getSizeClass.js";
+import { getStyleClass as Vo } from "./utils/styles/getStyleClass/getStyleClass.js";
+import { theme as $o } from "./utils/theme/index.js";
 export {
-  h as AnimatedText,
-  eo as Avatar,
-  po as Badge,
+  k as AnimatedText,
+  po as Avatar,
+  xo as Badge,
   m as Box,
-  oo as Breadcrumbs,
-  Fo as Breakpoints,
-  Go as BreakpointsBase,
-  P as Button,
-  _ as Checkbox,
-  xo as Counter,
-  ao as Dot,
-  io as Hint,
-  I as IconButton,
-  v as Input,
-  A as LineChart,
+  eo as Breadcrumbs,
+  No as Breakpoints,
+  Xo as BreakpointsBase,
+  _ as Button,
+  I as Checkbox,
+  ao as Counter,
+  io as Dot,
+  so as Hint,
+  v as IconButton,
+  D as Input,
+  S as LineChart,
   f as Loader,
-  O as MARKDOWN_TEXT_EDITOR_LOCALE_KEY,
-  so as MarkdownText,
-  U as MarkdownTextEditor,
-  D as MarkdownToolbarAction,
+  U as MARKDOWN_TEXT_EDITOR_LOCALE_KEY,
+  Co as MarkdownText,
+  y as MarkdownTextEditor,
+  O as MarkdownToolbarAction,
   n as Modal,
-  y as OtpInput,
-  S as PieProgressChart,
-  Co as Popover,
+  F as OtpInput,
+  P as PieProgressChart,
+  ho as Popover,
   T as Portal,
-  F as Radio,
-  N as RadioGroup,
+  N as Radio,
+  Y as RadioGroup,
   l as Ripple,
-  Y as SegmentControl,
-  q as Select,
-  Bo as Skeleton,
-  Q as Switch,
-  wo as THEME_DATA_ATTRIBUTE,
-  C as Table,
-  Z as Tabs,
-  ho as Tag,
-  g as Text,
-  Ko as ThemeContext,
-  Lo as ThemeProviderScoped,
-  ko as Toast,
-  Ro as ToastContainer,
-  bo as Tooltip,
+  q as SegmentControl,
+  Q as Select,
+  C as Sheet,
+  co as Skeleton,
+  Z as Switch,
+  Ko as THEME_DATA_ATTRIBUTE,
+  h as Table,
+  oo as Tabs,
+  ko as Tag,
+  A as Text,
+  Ho as ThemeContext,
+  wo as ThemeProviderScoped,
+  Eo as Toast,
+  bo as ToastContainer,
+  Lo as Tooltip,
   t as UiKitLocaleProvider,
-  B as createColumnHelper,
-  Xo as getFontWeightClass,
-  jo as getSizeClass,
-  Jo as getStyleClass,
-  Vo as theme,
-  Mo as toast,
-  yo as useBreakpoint,
-  Uo as useControlled,
-  Eo as useToast,
-  Oo as useUiKitTheme
+  c as createColumnHelper,
+  jo as getFontWeightClass,
+  Jo as getSizeClass,
+  Vo as getStyleClass,
+  $o as theme,
+  Ro as toast,
+  Fo as useBreakpoint,
+  yo as useControlled,
+  Mo as useToast,
+  Uo as useUiKitTheme
 };