@dss-kit/ui-kit 0.2.29 → 0.2.31

package/README.md

@@ -1,21 +1,21 @@
-# UI Kit
-
-Библиотека React компонентов с дизайн-системой для внутренних проектов.
-
-## Включает:
-
-- React компоненты
-- CSS переменные и токены дизайна
-- SCSS утилиты и миксины
-- TypeScript типы
-- SVG иконки
-- Провайдеры тем (ThemeProviderScoped)
-
-## Документация
-
-Ссылки на более подробную документацию по разделам
-
-- **[Сборка](./docs/build/index.md)** - команды сборки, публикация в npm, конфигурации Vite и т.д.
-- **[Использование](./docs/usage/index.md)** - как использовать UI Kit в проектах, подключение стилей, примеры компонентов
-- **[Стили](./docs/styles/index.md)** - подключение шрифтов, CSS переменных, базовые стили и миксины
-- **[Утилиты](./docs/utils/index.md)** - функции хелперы
+# UI Kit
+
+Библиотека React компонентов с дизайн-системой для внутренних проектов.
+
+## Включает:
+
+- React компоненты
+- CSS переменные и токены дизайна
+- SCSS утилиты и миксины
+- TypeScript типы
+- SVG иконки
+- Провайдеры тем (ThemeProviderScoped)
+
+## Документация
+
+Ссылки на более подробную документацию по разделам
+
+- **[Сборка](./docs/build/index.md)** - команды сборки, публикация в npm, конфигурации Vite и т.д.
+- **[Использование](./docs/usage/index.md)** - как использовать UI Kit в проектах, подключение стилей, примеры компонентов
+- **[Стили](./docs/styles/index.md)** - подключение шрифтов, CSS переменных, базовые стили и миксины
+- **[Утилиты](./docs/utils/index.md)** - функции хелперы

package/dist/styles/utils/breakpoints/base.scss

@@ -1,11 +1,11 @@
-@mixin breakpoint($breakpoint, $direction: max) {
-  @if $direction == min {
-    @media (min-width: $breakpoint) {
-      @content;
-    }
-  } @else if $direction == max {
-    @media (max-width: ($breakpoint - 1px)) {
-      @content;
-    }
-  }
-}
+@mixin breakpoint($breakpoint, $direction: max) {
+  @if $direction == min {
+    @media (min-width: $breakpoint) {
+      @content;
+    }
+  } @else if $direction == max {
+    @media (max-width: ($breakpoint - 1px)) {
+      @content;
+    }
+  }
+}

package/dist/styles/utils/breakpoints/index.scss

@@ -1,3 +1,3 @@
-@forward "base";
-@forward "screen";
-@forward "semantic";
+@forward "base";
+@forward "screen";
+@forward "semantic";

package/dist/styles/utils/breakpoints/screen.scss

@@ -1,61 +1,61 @@
-@use "./base.scss";
-
-@mixin bp-1920($direction: max) {
-  @include base.breakpoint(1920px, $direction) {
-    @content;
-  }
-}
-
-@mixin bp-1440($direction: max) {
-  @include base.breakpoint(1440px, $direction) {
-    @content;
-  }
-}
-
-@mixin bp-1280($direction: max) {
-  @include base.breakpoint(1280px, $direction) {
-    @content;
-  }
-}
-
-@mixin bp-1200($direction: max) {
-  @include base.breakpoint(1200px, $direction) {
-    @content;
-  }
-}
-
-@mixin bp-1024($direction: max) {
-  @include base.breakpoint(1024px, $direction) {
-    @content;
-  }
-}
-
-@mixin bp-992($direction: max) {
-  @include base.breakpoint(992px, $direction) {
-    @content;
-  }
-}
-
-@mixin bp-768($direction: max) {
-  @include base.breakpoint(768px, $direction) {
-    @content;
-  }
-}
-
-@mixin bp-576($direction: max) {
-  @include base.breakpoint(576px, $direction) {
-    @content;
-  }
-}
-
-@mixin bp-480($direction: max) {
-  @include base.breakpoint(480px, $direction) {
-    @content;
-  }
-}
-
-@mixin bp-375($direction: max) {
-  @include base.breakpoint(375px, $direction) {
-    @content;
-  }
-}
+@use "./base.scss";
+
+@mixin bp-1920($direction: max) {
+  @include base.breakpoint(1920px, $direction) {
+    @content;
+  }
+}
+
+@mixin bp-1440($direction: max) {
+  @include base.breakpoint(1440px, $direction) {
+    @content;
+  }
+}
+
+@mixin bp-1280($direction: max) {
+  @include base.breakpoint(1280px, $direction) {
+    @content;
+  }
+}
+
+@mixin bp-1200($direction: max) {
+  @include base.breakpoint(1200px, $direction) {
+    @content;
+  }
+}
+
+@mixin bp-1024($direction: max) {
+  @include base.breakpoint(1024px, $direction) {
+    @content;
+  }
+}
+
+@mixin bp-992($direction: max) {
+  @include base.breakpoint(992px, $direction) {
+    @content;
+  }
+}
+
+@mixin bp-768($direction: max) {
+  @include base.breakpoint(768px, $direction) {
+    @content;
+  }
+}
+
+@mixin bp-576($direction: max) {
+  @include base.breakpoint(576px, $direction) {
+    @content;
+  }
+}
+
+@mixin bp-480($direction: max) {
+  @include base.breakpoint(480px, $direction) {
+    @content;
+  }
+}
+
+@mixin bp-375($direction: max) {
+  @include base.breakpoint(375px, $direction) {
+    @content;
+  }
+}

package/dist/styles/utils/breakpoints/semantic.scss

@@ -1,31 +1,31 @@
-@use "./screen.scss";
-
-@mixin bp-xs($direction: max) {
-  @include screen.bp-480($direction) {
-    @content;
-  }
-}
-
-@mixin bp-sm($direction: max) {
-  @include screen.bp-576($direction) {
-    @content;
-  }
-}
-
-@mixin bp-md($direction: max) {
-  @include screen.bp-768($direction) {
-    @content;
-  }
-}
-
-@mixin bp-lg($direction: max) {
-  @include screen.bp-992($direction) {
-    @content;
-  }
-}
-
-@mixin bp-xl($direction: max) {
-  @include screen.bp-1200($direction) {
-    @content;
-  }
-}
+@use "./screen.scss";
+
+@mixin bp-xs($direction: max) {
+  @include screen.bp-480($direction) {
+    @content;
+  }
+}
+
+@mixin bp-sm($direction: max) {
+  @include screen.bp-576($direction) {
+    @content;
+  }
+}
+
+@mixin bp-md($direction: max) {
+  @include screen.bp-768($direction) {
+    @content;
+  }
+}
+
+@mixin bp-lg($direction: max) {
+  @include screen.bp-992($direction) {
+    @content;
+  }
+}
+
+@mixin bp-xl($direction: max) {
+  @include screen.bp-1200($direction) {
+    @content;
+  }
+}

package/dist/styles/utils/breakpoints.d.ts

@@ -1,15 +1,14 @@
-type Direction = "min" | "max";
+import { BreakpointDirection } from '../../utils';
 export declare const bp: {
-    readonly xs: (direction?: Direction) => string;
-    readonly sm: (direction?: Direction) => string;
-    readonly md: (direction?: Direction) => string;
-    readonly lg: (direction?: Direction) => string;
-    readonly xl: (direction?: Direction) => string;
-    readonly bp1024: (direction?: Direction) => string;
-    readonly bp1280: (direction?: Direction) => string;
-    readonly bp1440: (direction?: Direction) => string;
-    readonly bp1920: (direction?: Direction) => string;
-    readonly bp375: (direction?: Direction) => string;
+    readonly xs: (direction?: BreakpointDirection) => string;
+    readonly sm: (direction?: BreakpointDirection) => string;
+    readonly md: (direction?: BreakpointDirection) => string;
+    readonly lg: (direction?: BreakpointDirection) => string;
+    readonly xl: (direction?: BreakpointDirection) => string;
+    readonly bp375: (direction?: BreakpointDirection) => string;
+    readonly bp1024: (direction?: BreakpointDirection) => string;
+    readonly bp1280: (direction?: BreakpointDirection) => string;
+    readonly bp1440: (direction?: BreakpointDirection) => string;
+    readonly bp1920: (direction?: BreakpointDirection) => string;
 };
-export {};
 //# sourceMappingURL=breakpoints.d.ts.map

package/dist/styles/utils/breakpoints.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../src/styles/utils/breakpoints.ts"],"names":[],"mappings":"AAAA,KAAK,SAAS,GAAG,KAAK,GAAG,KAAK,CAAC;AAS/B,eAAO,MAAM,EAAE;8BACG,SAAS;8BACT,SAAS;8BACT,SAAS;8BACT,SAAS;8BACT,SAAS;kCACL,SAAS;kCACT,SAAS;kCACT,SAAS;kCACT,SAAS;iCACV,SAAS;CACpB,CAAC"}
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../src/styles/utils/breakpoints.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAanD,eAAO,MAAM,EAAE;8BACG,mBAAmB;8BAEnB,mBAAmB;8BAEnB,mBAAmB;8BAEnB,mBAAmB;8BAEnB,mBAAmB;iCAEhB,mBAAmB;kCAElB,mBAAmB;kCAEnB,mBAAmB;kCAEnB,mBAAmB;kCAEnB,mBAAmB;CAE/B,CAAC"}

package/dist/styles/utils/breakpoints.ts

@@ -1,21 +1,35 @@
-type Direction = "min" | "max";
-
-const breakpoint = (px: number, direction: Direction = "max"): string => {
-  if (direction === "min") {
-    return `@media (min-width: ${px}px)`;
-  }
-  return `@media (max-width: ${px - 1}px)`;
-};
-
-export const bp = {
-  xs: (direction: Direction = "max") => breakpoint(480, direction),
-  sm: (direction: Direction = "max") => breakpoint(576, direction),
-  md: (direction: Direction = "max") => breakpoint(768, direction),
-  lg: (direction: Direction = "max") => breakpoint(992, direction),
-  xl: (direction: Direction = "max") => breakpoint(1200, direction),
-  bp1024: (direction: Direction = "max") => breakpoint(1024, direction),
-  bp1280: (direction: Direction = "max") => breakpoint(1280, direction),
-  bp1440: (direction: Direction = "max") => breakpoint(1440, direction),
-  bp1920: (direction: Direction = "max") => breakpoint(1920, direction),
-  bp375: (direction: Direction = "max") => breakpoint(375, direction),
-} as const;
+import type { BreakpointDirection } from "@/utils";
+import { Breakpoints, BreakpointsBase } from "@/utils";
+
+const breakpoint = (
+  px: number,
+  direction: BreakpointDirection = "max"
+): string => {
+  if (direction === "min") {
+    return `@media (min-width: ${px}px)`;
+  }
+  return `@media (max-width: ${px - 1}px)`;
+};
+
+export const bp = {
+  xs: (direction: BreakpointDirection = "max") =>
+    breakpoint(Breakpoints.xs, direction),
+  sm: (direction: BreakpointDirection = "max") =>
+    breakpoint(Breakpoints.sm, direction),
+  md: (direction: BreakpointDirection = "max") =>
+    breakpoint(Breakpoints.md, direction),
+  lg: (direction: BreakpointDirection = "max") =>
+    breakpoint(Breakpoints.lg, direction),
+  xl: (direction: BreakpointDirection = "max") =>
+    breakpoint(Breakpoints.xl, direction),
+  bp375: (direction: BreakpointDirection = "max") =>
+    breakpoint(BreakpointsBase._375, direction),
+  bp1024: (direction: BreakpointDirection = "max") =>
+    breakpoint(BreakpointsBase._1024, direction),
+  bp1280: (direction: BreakpointDirection = "max") =>
+    breakpoint(BreakpointsBase._1280, direction),
+  bp1440: (direction: BreakpointDirection = "max") =>
+    breakpoint(BreakpointsBase._1440, direction),
+  bp1920: (direction: BreakpointDirection = "max") =>
+    breakpoint(BreakpointsBase._1920, direction),
+} as const;

package/dist/styles/utils/fonts/font-family.scss

@@ -1,3 +1,3 @@
-@mixin Inter {
-  font-family: Inter, sans-serif;
-}
+@mixin Inter {
+  font-family: Inter, sans-serif;
+}

package/dist/styles/utils/fonts/index.scss

@@ -1 +1 @@
-@forward "font-family";
+@forward "font-family";

package/dist/styles/utils/index.scss

@@ -1,5 +1,5 @@
-@forward "breakpoints";
-@forward "fonts";
-@forward "size";
-@forward "typography";
-@forward "style";
+@forward "breakpoints";
+@forward "fonts";
+@forward "size";
+@forward "typography";
+@forward "style";

package/dist/styles/utils/size/index.scss

@@ -1 +1 @@
-@forward "modifiers";
+@forward "modifiers";

package/dist/styles/utils/size/modifiers.scss

@@ -1,41 +1,41 @@
-@mixin xxs-modifier {
-  &_2xsSize {
-    @content;
-  }
-}
-
-@mixin xs-modifier {
-  &_xsSize {
-    @content;
-  }
-}
-
-@mixin sm-modifier {
-  &_smSize {
-    @content;
-  }
-}
-
-@mixin md-modifier {
-  &_mdSize {
-    @content;
-  }
-}
-
-@mixin lg-modifier {
-  &_lgSize {
-    @content;
-  }
-}
-
-@mixin xl-modifier {
-  &_xlSize {
-    @content;
-  }
-}
-
-@mixin xxl-modifier {
-  &_2xlSize {
-    @content;
-  }
+@mixin xxs-modifier {
+  &_2xsSize {
+    @content;
+  }
+}
+
+@mixin xs-modifier {
+  &_xsSize {
+    @content;
+  }
+}
+
+@mixin sm-modifier {
+  &_smSize {
+    @content;
+  }
+}
+
+@mixin md-modifier {
+  &_mdSize {
+    @content;
+  }
+}
+
+@mixin lg-modifier {
+  &_lgSize {
+    @content;
+  }
+}
+
+@mixin xl-modifier {
+  &_xlSize {
+    @content;
+  }
+}
+
+@mixin xxl-modifier {
+  &_2xlSize {
+    @content;
+  }
 }

package/dist/styles/utils/style/index.scss

@@ -1 +1 @@
-@forward "variants";
+@forward "variants";

package/dist/styles/utils/style/variants.scss

@@ -1,34 +1,34 @@
-@mixin style-variant-text($map, $pseudo-class: null, $postfix: "") {
-  @each $style, $color in $map {
-    &_#{$style}#{$postfix}#{if($pseudo-class, ':' + $pseudo-class, '')} {
-      color: $color;
-    }
-  }
-}
-
-@mixin style-variant-border($width: 1px, $map, $pseudo-class: null, $postfix: "") {
-  border: $width solid transparent;
-  @each $style, $color in $map {
-    &_#{$style}#{$postfix}#{if($pseudo-class, ':' + $pseudo-class, '')} {
-      border-color: $color;
-    }
-  }
-}
-
-@mixin style-variant-bg($map, $pseudo-class: null, $postfix: "") {
-  @each $style, $color in $map {
-    &_#{$style}#{$postfix}#{if($pseudo-class, ':' + $pseudo-class, '')} {
-      background-color: $color;
-    }
-  }
-}
-
-@mixin style-variant-svg($map, $pseudo-class: null, $postfix: "") {
-  @each $style, $color in $map {
-    &_#{$style}#{$postfix}#{if($pseudo-class, ':' + $pseudo-class, '')} {
-      svg {
-        color: $color;
-      }
-    }
-  }
-}
+@mixin style-variant-text($map, $pseudo-class: null, $postfix: "") {
+  @each $style, $color in $map {
+    &_#{$style}#{$postfix}#{if($pseudo-class, ':' + $pseudo-class, '')} {
+      color: $color;
+    }
+  }
+}
+
+@mixin style-variant-border($width: 1px, $map, $pseudo-class: null, $postfix: "") {
+  border: $width solid transparent;
+  @each $style, $color in $map {
+    &_#{$style}#{$postfix}#{if($pseudo-class, ':' + $pseudo-class, '')} {
+      border-color: $color;
+    }
+  }
+}
+
+@mixin style-variant-bg($map, $pseudo-class: null, $postfix: "") {
+  @each $style, $color in $map {
+    &_#{$style}#{$postfix}#{if($pseudo-class, ':' + $pseudo-class, '')} {
+      background-color: $color;
+    }
+  }
+}
+
+@mixin style-variant-svg($map, $pseudo-class: null, $postfix: "") {
+  @each $style, $color in $map {
+    &_#{$style}#{$postfix}#{if($pseudo-class, ':' + $pseudo-class, '')} {
+      svg {
+        color: $color;
+      }
+    }
+  }
+}

package/dist/styles/utils/typography/_font-weight.scss

@@ -1,33 +1,33 @@
-@use "sass:map";
-
-$font-weight: (
-  regular: 400,
-  medium: 500,
-  semibold: 600,
-  bold: 700,
-) !default;
-
-@function font-weight-token($name) {
-  @if not map.has-key($font-weight, $name) {
-    @error "Unknown font-weight token `#{$name}`";
-  }
-  @return map.get($font-weight, $name);
-}
-
-@mixin font-weight($name) {
-  font-weight: font-weight-token($name);
-}
-
-// опциональные алиасы ради DX/совместимости
-@mixin font-regular {
-  @include font-weight(regular);
-}
-@mixin font-medium {
-  @include font-weight(medium);
-}
-@mixin font-semibold {
-  @include font-weight(semibold);
-}
-@mixin font-bold {
-  @include font-weight(bold);
-}
+@use "sass:map";
+
+$font-weight: (
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+) !default;
+
+@function font-weight-token($name) {
+  @if not map.has-key($font-weight, $name) {
+    @error "Unknown font-weight token `#{$name}`";
+  }
+  @return map.get($font-weight, $name);
+}
+
+@mixin font-weight($name) {
+  font-weight: font-weight-token($name);
+}
+
+// опциональные алиасы ради DX/совместимости
+@mixin font-regular {
+  @include font-weight(regular);
+}
+@mixin font-medium {
+  @include font-weight(medium);
+}
+@mixin font-semibold {
+  @include font-weight(semibold);
+}
+@mixin font-bold {
+  @include font-weight(bold);
+}