@dss-kit/ui-kit 1.0.2 → 1.0.4

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

@@ -1,128 +1,131 @@
-import { css as i } from "@emotion/css";
-import { theme as c } from "../../../utils/theme/index.js";
-const { color: t, cornerRadius: r, height: h, spacing: s, transition: e } = c, l = {
-  container: i({
+import { css as t } from "@emotion/css";
+import { theme as s } from "../../../utils/theme/index.js";
+const { color: i, cornerRadius: h, height: e, spacing: r, transition: c } = s, l = {
+  container: t({
     width: "100%",
     cursor: "pointer",
-    outline: "none",
     userSelect: "none",
     display: "flex",
     justifyContent: "space-between",
-    gap: s.md,
-    "&.disabled": {
-      cursor: "not-allowed",
-      opacity: 0.5
-    },
-    "&.reverse": {
-      flexDirection: "row-reverse"
-    }
+    gap: r.md
   }),
-  disabled: i({
+  disabled: t({
     cursor: "not-allowed",
     opacity: 0.5
   }),
-  reverse: i({
+  reverse: t({
     flexDirection: "row-reverse"
   }),
-  switchContainer: i({
+  switchContainer: t({
+    position: "relative",
+    display: "flex",
+    flexShrink: 0,
+    alignSelf: "flex-start",
     "--width-switch-sm": "34px",
     "--width-switch-md": "40px",
     "--width-switch-lg": "52px",
     "--size-thumb-sm": "18px",
     "--size-thumb-md": "20px",
     "--size-thumb-lg": "28px",
-    "--thumb-translate": "0px",
-    "&:has(input:checked)": {
-      "--thumb-translate": "calc(var(--switch-width) - var(--thumb-width) - 4px)"
-    }
+    // Выключенное состояние у всех вариантов одинаковое
+    "--switch-bg-unchecked": i.fill.bg_tertiary,
+    "--thumb-bg-unchecked": i.fill.bg_primary
   }),
-  // Variant classes — each handles both checked and unchecked states
-  variant_accent: i({
-    "&:has(input:not(:checked))": {
-      "--switch-bg-color": t.fill.bg_tertiary,
-      "--thumb-bg-color": t.fill.bg_primary
-    },
-    "&:has(input:checked)": {
-      "--switch-bg-color": t.fill.accent_primary,
-      "--thumb-bg-color": t.fill.bg_primary
-    }
+  // Нативный input прозрачен и лежит поверх трека: остаётся в tab-порядке и
+  // в дереве доступности, а relative-контейнер не даёт фокусу прокручивать
+  // страницу к случайной точке.
+  input: t({
+    position: "absolute",
+    inset: 0,
+    width: "100%",
+    height: "100%",
+    margin: 0,
+    opacity: 0,
+    cursor: "inherit"
   }),
-  variant_secondary: i({
-    "&:has(input:not(:checked))": {
-      "--switch-bg-color": t.fill.bg_tertiary,
-      "--thumb-bg-color": t.fill.bg_primary
-    },
-    "&:has(input:checked)": {
-      "--switch-bg-color": t.fill.accent_secondary,
-      "--thumb-bg-color": t.fill.accent_primary
-    }
+  // Variant classes — задают цвета включённого состояния
+  variant_accent: t({
+    "--switch-bg-checked": i.fill.accent_primary,
+    "--thumb-bg-checked": i.fill.bg_primary
   }),
-  variant_positive: i({
-    "&:has(input:not(:checked))": {
-      "--switch-bg-color": t.fill.bg_tertiary,
-      "--thumb-bg-color": t.fill.bg_primary
-    },
-    "&:has(input:checked)": {
-      "--switch-bg-color": t.fill.positive_primary,
-      "--thumb-bg-color": t.fill.bg_primary
-    }
+  variant_secondary: t({
+    "--switch-bg-checked": i.fill.accent_secondary,
+    "--thumb-bg-checked": i.fill.accent_primary
   }),
-  variant_theme: i({
-    "&:has(input:not(:checked))": {
-      "--switch-bg-color": t.fill.bg_tertiary,
-      "--thumb-bg-color": t.fill.bg_primary
-    },
-    "&:has(input:checked)": {
-      "--switch-bg-color": t.fill.bg_secondary,
-      "--thumb-bg-color": t.fill.bg_tertiary
-    }
+  variant_positive: t({
+    "--switch-bg-checked": i.fill.positive_primary,
+    "--thumb-bg-checked": i.fill.bg_primary
+  }),
+  variant_theme: t({
+    "--switch-bg-checked": i.fill.bg_secondary,
+    "--thumb-bg-checked": i.fill.bg_tertiary
   }),
   // Size classes
-  size_sm: i({
+  size_sm: t({
     "--switch-width": "var(--width-switch-sm)",
-    "--switch-height": h.switch.sm,
+    "--switch-height": e.switch.sm,
     "--thumb-width": "var(--size-thumb-sm)",
     "--thumb-height": "var(--size-thumb-sm)"
   }),
-  size_md: i({
+  size_md: t({
     "--switch-width": "var(--width-switch-md)",
-    "--switch-height": h.switch.md,
+    "--switch-height": e.switch.md,
     "--thumb-width": "var(--size-thumb-md)",
     "--thumb-height": "var(--size-thumb-md)"
   }),
-  size_lg: i({
+  size_lg: t({
     "--switch-width": "var(--width-switch-lg)",
-    "--switch-height": h.switch.lg,
+    "--switch-height": e.switch.lg,
     "--thumb-width": "var(--size-thumb-lg)",
     "--thumb-height": "var(--size-thumb-lg)"
   }),
-  switch: i({
+  switch: t({
+    "--switch-bg-color": "var(--switch-bg-unchecked)",
+    "--thumb-bg-color": "var(--thumb-bg-unchecked)",
+    "--thumb-translate": "0px",
     width: "var(--switch-width)",
     height: "var(--switch-height)",
-    transition: e.general,
+    transition: c.general,
+    transitionProperty: "background-color",
     display: "flex",
     alignItems: "center",
     padding: 2,
     backgroundColor: "var(--switch-bg-color)",
-    borderRadius: r.xl
+    borderRadius: h.xl,
+    // Прозрачный outline не виден, но в режиме высокой контрастности
+    // (forced-colors) браузер красит его системным цветом — без него фон
+    // трека и ручки заменяется на Canvas и переключатель пропадает.
+    outline: "1px solid transparent",
+    "input:checked + &": {
+      "--switch-bg-color": "var(--switch-bg-checked)",
+      "--thumb-bg-color": "var(--thumb-bg-checked)",
+      "--thumb-translate": "calc(var(--switch-width) - var(--thumb-width) - 4px)"
+    },
+    "input:focus-visible + &": {
+      outline: `2px solid ${i.border.accent_primary}`,
+      outlineOffset: 2
+    }
   }),
-  thumb: i({
+  thumb: t({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     padding: 4,
-    transition: e.general,
+    transition: c.general,
+    transitionProperty: "transform, background-color",
     transform: "translateX(var(--thumb-translate, 0))",
     width: "var(--thumb-width)",
     height: "var(--thumb-height)",
     backgroundColor: "var(--thumb-bg-color)",
-    borderRadius: r.fullRound
+    borderRadius: h.fullRound,
+    outline: "1px solid transparent"
   }),
-  moon: i({
-    width: "100%",
-    height: "100%"
+  labelsContainer: t({
+    display: "flex",
+    flexDirection: "column",
+    gap: r.xs
   }),
-  fire: i({
+  icon: t({
     width: "100%",
     height: "100%"
   })

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