@cloud-ru/ds-uikit-product-toggles-predefined 1.0.0

package/dist/esm/components/ToggleCard/styles.module.css

@@ -0,0 +1,143 @@
+@charset "UTF-8";
+.card{
+  cursor:pointer;
+}
+.card[data-disabled]{
+  cursor:not-allowed;
+}
+
+.promoBadge{
+  pointer-events:none;
+  position:absolute;
+  z-index:1;
+  top:0;
+  right:0;
+  display:flex;
+  box-sizing:border-box;
+}
+.promoBadge[data-size=s]{
+  padding-top:var(--sn-card-anatomy-radius-s-container-badge-paddingTop, var(--sn-primitive-dimension-4, 4px));
+  padding-right:var(--sn-card-anatomy-radius-s-container-badge-paddingLeft, var(--sn-primitive-dimension-4, 4px));
+}
+.promoBadge[data-size=m]{
+  padding-top:var(--sn-card-anatomy-radius-m-container-badge-paddingTop, var(--sn-primitive-dimension-6, 6px));
+  padding-right:var(--sn-card-anatomy-radius-m-container-badge-paddingLeft, var(--sn-primitive-dimension-6, 6px));
+}
+.promoBadge[data-size=l]{
+  padding-top:var(--sn-card-anatomy-radius-l-container-badge-paddingTop, var(--sn-primitive-dimension-8, 8px));
+  padding-right:var(--sn-card-anatomy-radius-l-container-badge-paddingLeft, var(--sn-primitive-dimension-8, 8px));
+}
+
+.content{
+  display:flex;
+  align-items:center;
+  box-sizing:border-box;
+  width:100%;
+}
+.content[data-size=s]{
+  gap:var(--sn-density-spacing-interval-xs, var(--sn-primitive-dimension-4, 4px));
+  padding:var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px));
+}
+.content[data-size=m]{
+  gap:var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px));
+  padding:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
+}
+.content[data-size=l]{
+  gap:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
+  padding:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+}
+
+.emblem{
+  display:inline-flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+}
+
+.picture{
+  overflow:hidden;
+  box-sizing:border-box;
+  -o-object-fit:cover;
+     object-fit:cover;
+}
+.picture[data-size=m]{
+  width:var(--sn-iconPredefined-anatomy-size-m-square, var(--sn-primitive-dimension-32, 32px));
+  height:var(--sn-iconPredefined-anatomy-size-m-square, var(--sn-primitive-dimension-32, 32px));
+  border-radius:var(--sn-iconPredefined-anatomy-size-m-rounded-borderRadius, var(--sn-primitive-dimension-full, 10000px));
+}
+.picture[data-size=l]{
+  width:var(--sn-iconPredefined-anatomy-size-l-square, var(--sn-primitive-dimension-40, 40px));
+  height:var(--sn-iconPredefined-anatomy-size-l-square, var(--sn-primitive-dimension-40, 40px));
+  border-radius:var(--sn-iconPredefined-anatomy-size-l-rounded-borderRadius, var(--sn-primitive-dimension-full, 10000px));
+}
+.picture[data-size="5xl"]{
+  width:var(--sn-iconPredefined-anatomy-size-5xl-square, var(--sn-primitive-dimension-80, 80px));
+  height:var(--sn-iconPredefined-anatomy-size-5xl-square, var(--sn-primitive-dimension-80, 80px));
+  border-radius:var(--sn-iconPredefined-anatomy-size-5xl-rounded-borderRadius, var(--sn-primitive-dimension-full, 10000px));
+}
+
+.textContent{
+  display:flex;
+  flex:1 0 0;
+  flex-direction:column;
+  align-items:flex-start;
+  min-width:0;
+}
+
+.title{
+  width:100%;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+.content[data-size=s] .title{
+  font-family:var(--sn-regular-title-s-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-title-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-s, var(--sn-brand-font-fontWeight-light-regular-title-s, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-title-s-lineHeight, var(--sn-density-typography-roleTitle-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-title-s-fontSize, var(--sn-density-typography-roleTitle-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-title-s-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
+  paragraph-spacing:var(--sn-regular-title-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+.content[data-size=m] .title{
+  font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-title-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-m, var(--sn-brand-font-fontWeight-light-regular-title-m, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-title-m-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
+  paragraph-spacing:var(--sn-regular-title-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+}
+.content[data-size=l] .title{
+  font-family:var(--sn-regular-title-l-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-title-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-l, var(--sn-brand-font-fontWeight-light-regular-title-l, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-title-l-lineHeight, var(--sn-density-typography-roleTitle-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-title-l-fontSize, var(--sn-density-typography-roleTitle-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-title-l-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
+  paragraph-spacing:var(--sn-regular-title-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize20, 10px));
+}
+
+.description{
+  width:100%;
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+.content[data-size=s] .description{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+.content[data-size=m] .description{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+.content[data-size=l] .description{
+  font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+}

package/dist/esm/components/ToggleCard/utils.d.ts

@@ -0,0 +1,8 @@
+import { Size as IconSize } from '@cloud-ru/ds-icon-predefined';
+import { Emblem, EmblemPicture, Size } from '../../types.js';
+/**
+ * Эмблема масштабируется вместе с карточкой (как в продуктовом ките):
+ * размер `IconPredefined` выводится из `size` карточки, а не задаётся снаружи.
+ */
+export declare function sizeToEmblemSize(size: Size): IconSize;
+export declare function isEmblemPicture(emblem: Emblem): emblem is EmblemPicture;

package/dist/esm/components/ToggleCard/utils.js

@@ -0,0 +1,20 @@
+import { SIZE as ICON_SIZE } from '@cloud-ru/ds-icon-predefined';
+import { SIZE } from '../../constants.js';
+/**
+ * Эмблема масштабируется вместе с карточкой (как в продуктовом ките):
+ * размер `IconPredefined` выводится из `size` карточки, а не задаётся снаружи.
+ */
+export function sizeToEmblemSize(size) {
+    switch (size) {
+        case SIZE.S:
+            return ICON_SIZE.M;
+        case SIZE.L:
+            return ICON_SIZE['5XL'];
+        case SIZE.M:
+        default:
+            return ICON_SIZE.L;
+    }
+}
+export function isEmblemPicture(emblem) {
+    return 'src' in emblem;
+}

package/dist/esm/components/ToggleGroup/ToggleGroup.d.ts

@@ -0,0 +1,7 @@
+import { ToggleGroupProps } from '../../types.js';
+/**
+ * ToggleGroup — провайдер выбора + grid-раскладка карточек `ToggleCard`.
+ * Состояние (controlled/uncontrolled, single/multiple) держит `@cloud-ru/ds-toggles::ToggleGroup`;
+ * обёртка добавляет ориентацию, gap и breakpoint горизонтальной раскладки.
+ */
+export declare function ToggleGroup(props: ToggleGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/ToggleGroup/ToggleGroup.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ToggleGroup as ToggleGroupBase } from '@cloud-ru/ds-toggles';
+import { excludeSupportProps, extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { GAP, ORIENTATION, TEST_IDS } from '../../constants.js';
+import styles from './styles.module.css';
+/**
+ * ToggleGroup — провайдер выбора + grid-раскладка карточек `ToggleCard`.
+ * Состояние (controlled/uncontrolled, single/multiple) держит `@cloud-ru/ds-toggles::ToggleGroup`;
+ * обёртка добавляет ориентацию, gap и breakpoint горизонтальной раскладки.
+ */
+export function ToggleGroup(props) {
+    const { children, orientation = ORIENTATION.Vertical, gap = GAP.S, breakpoint = 0, className, ...rest } = props;
+    const restProps = rest;
+    const supportProps = extractSupportProps(restProps);
+    const groupProps = excludeSupportProps(restProps);
+    return (_jsx(ToggleGroupBase, { ...groupProps, children: _jsx("div", { className: cn(styles.toggleGroup, className), style: { '--toggle-group-breakpoint': `${breakpoint}px` }, "data-orientation": orientation, "data-gap": gap, "data-test-id": TEST_IDS.group, ...supportProps, children: children }) }));
+}

package/dist/esm/components/ToggleGroup/index.d.ts

@@ -0,0 +1 @@
+export * from './ToggleGroup.js';

package/dist/esm/components/ToggleGroup/index.js

@@ -0,0 +1 @@
+export * from './ToggleGroup.js';

package/dist/esm/components/ToggleGroup/styles.module.css

@@ -0,0 +1,17 @@
+@charset "UTF-8";
+.toggleGroup{
+  display:grid;
+}
+.toggleGroup[data-gap=s]{
+  gap:var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px));
+}
+.toggleGroup[data-gap=m]{
+  gap:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
+}
+.toggleGroup[data-gap=l]{
+  gap:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+}
+.toggleGroup[data-orientation=horizontal]{
+  grid-auto-rows:1fr;
+  grid-template-columns:repeat(auto-fit, minmax(var(--toggle-group-breakpoint, 0), 1fr));
+}

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

@@ -0,0 +1,3 @@
+export * from './ToggleCard/index.js';
+export * from './ToggleGroup/index.js';
+export { useToggleGroup } from '@cloud-ru/ds-toggles';

package/dist/esm/components/index.js

@@ -0,0 +1,3 @@
+export * from './ToggleCard/index.js';
+export * from './ToggleGroup/index.js';
+export { useToggleGroup } from '@cloud-ru/ds-toggles';

package/dist/esm/constants.d.ts

@@ -0,0 +1,22 @@
+export declare const SIZE: {
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+};
+export declare const ORIENTATION: {
+    readonly Horizontal: "horizontal";
+    readonly Vertical: "vertical";
+};
+export declare const GAP: {
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+};
+export declare const TEST_IDS: {
+    readonly card: "toggle-card";
+    readonly cardEmblem: "toggle-card__emblem";
+    readonly cardTitle: "toggle-card__title";
+    readonly cardDescription: "toggle-card__description";
+    readonly promoBadge: "toggle-card__promo-badge";
+    readonly group: "toggle-group";
+};

package/dist/esm/constants.js

@@ -0,0 +1,22 @@
+export const SIZE = {
+    S: 's',
+    M: 'm',
+    L: 'l',
+};
+export const ORIENTATION = {
+    Horizontal: 'horizontal',
+    Vertical: 'vertical',
+};
+export const GAP = {
+    S: 's',
+    M: 'm',
+    L: 'l',
+};
+export const TEST_IDS = {
+    card: 'toggle-card',
+    cardEmblem: 'toggle-card__emblem',
+    cardTitle: 'toggle-card__title',
+    cardDescription: 'toggle-card__description',
+    promoBadge: 'toggle-card__promo-badge',
+    group: 'toggle-group',
+};

package/dist/esm/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components/index.js';
+export * from './constants.js';
+export * from './types.js';

package/dist/esm/index.js

@@ -0,0 +1,3 @@
+export * from './components/index.js';
+export * from './constants.js';
+export * from './types.js';

package/dist/esm/style.css

@@ -0,0 +1,160 @@
+@charset "UTF-8";
+.card{
+  cursor:pointer;
+}
+.card[data-disabled]{
+  cursor:not-allowed;
+}
+
+.promoBadge{
+  pointer-events:none;
+  position:absolute;
+  z-index:1;
+  top:0;
+  right:0;
+  display:flex;
+  box-sizing:border-box;
+}
+.promoBadge[data-size=s]{
+  padding-top:var(--sn-card-anatomy-radius-s-container-badge-paddingTop, var(--sn-primitive-dimension-4, 4px));
+  padding-right:var(--sn-card-anatomy-radius-s-container-badge-paddingLeft, var(--sn-primitive-dimension-4, 4px));
+}
+.promoBadge[data-size=m]{
+  padding-top:var(--sn-card-anatomy-radius-m-container-badge-paddingTop, var(--sn-primitive-dimension-6, 6px));
+  padding-right:var(--sn-card-anatomy-radius-m-container-badge-paddingLeft, var(--sn-primitive-dimension-6, 6px));
+}
+.promoBadge[data-size=l]{
+  padding-top:var(--sn-card-anatomy-radius-l-container-badge-paddingTop, var(--sn-primitive-dimension-8, 8px));
+  padding-right:var(--sn-card-anatomy-radius-l-container-badge-paddingLeft, var(--sn-primitive-dimension-8, 8px));
+}
+
+.content{
+  display:flex;
+  align-items:center;
+  box-sizing:border-box;
+  width:100%;
+}
+.content[data-size=s]{
+  gap:var(--sn-density-spacing-interval-xs, var(--sn-primitive-dimension-4, 4px));
+  padding:var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px));
+}
+.content[data-size=m]{
+  gap:var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px));
+  padding:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
+}
+.content[data-size=l]{
+  gap:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
+  padding:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+}
+
+.emblem{
+  display:inline-flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+}
+
+.picture{
+  overflow:hidden;
+  box-sizing:border-box;
+  -o-object-fit:cover;
+     object-fit:cover;
+}
+.picture[data-size=m]{
+  width:var(--sn-iconPredefined-anatomy-size-m-square, var(--sn-primitive-dimension-32, 32px));
+  height:var(--sn-iconPredefined-anatomy-size-m-square, var(--sn-primitive-dimension-32, 32px));
+  border-radius:var(--sn-iconPredefined-anatomy-size-m-rounded-borderRadius, var(--sn-primitive-dimension-full, 10000px));
+}
+.picture[data-size=l]{
+  width:var(--sn-iconPredefined-anatomy-size-l-square, var(--sn-primitive-dimension-40, 40px));
+  height:var(--sn-iconPredefined-anatomy-size-l-square, var(--sn-primitive-dimension-40, 40px));
+  border-radius:var(--sn-iconPredefined-anatomy-size-l-rounded-borderRadius, var(--sn-primitive-dimension-full, 10000px));
+}
+.picture[data-size="5xl"]{
+  width:var(--sn-iconPredefined-anatomy-size-5xl-square, var(--sn-primitive-dimension-80, 80px));
+  height:var(--sn-iconPredefined-anatomy-size-5xl-square, var(--sn-primitive-dimension-80, 80px));
+  border-radius:var(--sn-iconPredefined-anatomy-size-5xl-rounded-borderRadius, var(--sn-primitive-dimension-full, 10000px));
+}
+
+.textContent{
+  display:flex;
+  flex:1 0 0;
+  flex-direction:column;
+  align-items:flex-start;
+  min-width:0;
+}
+
+.title{
+  width:100%;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+.content[data-size=s] .title{
+  font-family:var(--sn-regular-title-s-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-title-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-s, var(--sn-brand-font-fontWeight-light-regular-title-s, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-title-s-lineHeight, var(--sn-density-typography-roleTitle-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-title-s-fontSize, var(--sn-density-typography-roleTitle-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-title-s-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
+  paragraph-spacing:var(--sn-regular-title-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+.content[data-size=m] .title{
+  font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-title-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-m, var(--sn-brand-font-fontWeight-light-regular-title-m, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-title-m-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
+  paragraph-spacing:var(--sn-regular-title-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+}
+.content[data-size=l] .title{
+  font-family:var(--sn-regular-title-l-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-title-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-l, var(--sn-brand-font-fontWeight-light-regular-title-l, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-title-l-lineHeight, var(--sn-density-typography-roleTitle-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-title-l-fontSize, var(--sn-density-typography-roleTitle-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-title-l-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
+  paragraph-spacing:var(--sn-regular-title-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize20, 10px));
+}
+
+.description{
+  width:100%;
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+.content[data-size=s] .description{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+.content[data-size=m] .description{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+.content[data-size=l] .description{
+  font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+}
+@charset "UTF-8";
+.toggleGroup{
+  display:grid;
+}
+.toggleGroup[data-gap=s]{
+  gap:var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px));
+}
+.toggleGroup[data-gap=m]{
+  gap:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
+}
+.toggleGroup[data-gap=l]{
+  gap:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+}
+.toggleGroup[data-orientation=horizontal]{
+  grid-auto-rows:1fr;
+  grid-template-columns:repeat(auto-fit, minmax(var(--toggle-group-breakpoint, 0), 1fr));
+}

package/dist/esm/types.d.ts

@@ -0,0 +1,61 @@
+import { IconPredefinedProps } from '@cloud-ru/ds-icon-predefined';
+import { PromoTagProps } from '@cloud-ru/ds-promo-tag';
+import { ToggleGroupProps as ToggleGroupPropsDs } from '@cloud-ru/ds-toggles';
+import { ValueOf, WithSupportProps } from '@cloud-ru/ds-utils';
+import { ReactNode } from 'react';
+import { GAP, ORIENTATION, SIZE } from './constants.js';
+export type Size = ValueOf<typeof SIZE>;
+export type Orientation = ValueOf<typeof ORIENTATION>;
+export type Gap = ValueOf<typeof GAP>;
+export type EmblemPicture = {
+    /** URL картинки-эмблемы */
+    src: string;
+    /** Альтернативный текст картинки */
+    alt: string;
+};
+export type EmblemIcon = Pick<IconPredefinedProps, 'icon' | 'appearance' | 'background' | 'shape'>;
+/** Эмблема карточки: параметры встроенного `IconPredefined` либо картинка (`src` / `alt`). */
+export type Emblem = EmblemPicture | EmblemIcon;
+export type ToggleCardProps = WithSupportProps<{
+    /** Заголовок карточки */
+    title: string;
+    /** Значение карточки в контексте `ToggleGroup` */
+    value: string;
+    /** Основной текст под заголовком */
+    description?: string;
+    /**
+     * Ведущая эмблема. Передаются только параметры — сам `IconPredefined`
+     * встроен в компонент; `size` эмблемы выводится из `size` карточки.
+     */
+    emblem?: Emblem;
+    /** Промо-бейдж в правом верхнем углу карточки */
+    promoBadge?: Pick<PromoTagProps, 'label' | 'appearance'> | string;
+    /** Размер карточки — масштабирует padding, gap, типографику и `radius` контейнера `@cloud-ru/ds-card` */
+    size?: Size;
+    /**
+     * Максимальное число строк до обрезки.
+     * @default '{ title: 1; description: 2; }'
+     */
+    truncate?: {
+        /** Максимум строк заголовка */
+        title?: number;
+        /** Максимум строк содержимого */
+        description?: number;
+    };
+    /** Заблокированное состояние: интерактив отключён */
+    disabled?: boolean;
+    /** CSS-класс корневого элемента */
+    className?: string;
+}>;
+export type ToggleGroupProps = ToggleGroupPropsDs & WithSupportProps<{
+    /** Дочерние карточки `ToggleCard` */
+    children?: ReactNode;
+    /** Направление раскладки */
+    orientation?: Orientation;
+    /** Расстояние между карточками */
+    gap?: Gap;
+    /** Минимальная ширина карточки для горизонтальной раскладки (px) */
+    breakpoint?: number;
+    /** CSS-класс корневого элемента */
+    className?: string;
+}>;

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};