@cloud-ru/ds-block 1.0.0

package/src/styles.module.scss

@@ -0,0 +1,59 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/block.module' as block;
+@use '@cloud-ru/ds-materials' as m;
+
+$sizes: 's', 'm', 'l';
+
+.acrylic {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+
+// Блок — подложка, а не layout-контейнер: раскладку содержимого задаёт потребитель на своём
+// контенте. Собственный flex с вертикальным центрированием ломал вёрстку внутри блока.
+.block {
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+
+  &[data-view='outline'] {
+    .borderLayer {
+      position: absolute;
+      inset: 0;
+
+      border-color: base.$sn-theme-color-available-borderColor;
+      border-style: solid;
+      border-radius: inherit;
+    }
+  }
+
+  &[data-view='elevated'] {
+    &[data-size='l'] {
+      box-shadow: base.$sn-boxShadow-elevation-level2;
+    }
+
+    &[data-size='m'],
+    &[data-size='s'] {
+      box-shadow: base.$sn-boxShadow-elevation-level1;
+    }
+  }
+
+  @include m.with-material('acrylic', #{acrylic});
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include base.composite-var(block.$block, 'anatomy', $size);
+
+      &[data-view='outline'] .borderLayer {
+        border-width: base.simple-var(block.$block, 'anatomy', $size, 'border-width');
+      }
+    }
+  }
+}
+
+.content {
+  position: relative;
+  min-width: 0;
+}

package/src/types.ts

@@ -0,0 +1,6 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+
+import { SIZE, VIEW } from './constants';
+
+export type Size = ValueOf<typeof SIZE>;
+export type View = ValueOf<typeof VIEW>;