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

package/dist/cjs/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/cjs/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';
+/**
+ * Эмблема масштабируется вместе с карточкой (как в продуктовом ките):
+ * размер `IconPredefined` выводится из `size` карточки, а не задаётся снаружи.
+ */
+export declare function sizeToEmblemSize(size: Size): IconSize;
+export declare function isEmblemPicture(emblem: Emblem): emblem is EmblemPicture;

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sizeToEmblemSize = sizeToEmblemSize;
+exports.isEmblemPicture = isEmblemPicture;
+const icon_predefined_1 = require("@cloud-ru/ds-icon-predefined");
+const constants_1 = require("../../constants");
+/**
+ * Эмблема масштабируется вместе с карточкой (как в продуктовом ките):
+ * размер `IconPredefined` выводится из `size` карточки, а не задаётся снаружи.
+ */
+function sizeToEmblemSize(size) {
+    switch (size) {
+        case constants_1.SIZE.S:
+            return icon_predefined_1.SIZE.M;
+        case constants_1.SIZE.L:
+            return icon_predefined_1.SIZE['5XL'];
+        case constants_1.SIZE.M:
+        default:
+            return icon_predefined_1.SIZE.L;
+    }
+}
+function isEmblemPicture(emblem) {
+    return 'src' in emblem;
+}

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

@@ -0,0 +1,7 @@
+import { ToggleGroupProps } from '../../types';
+/**
+ * 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/cjs/components/ToggleGroup/ToggleGroup.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleGroup = ToggleGroup;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const toggles_1 = require("@cloud-ru/ds-toggles");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const constants_1 = require("../../constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+/**
+ * ToggleGroup — провайдер выбора + grid-раскладка карточек `ToggleCard`.
+ * Состояние (controlled/uncontrolled, single/multiple) держит `@cloud-ru/ds-toggles::ToggleGroup`;
+ * обёртка добавляет ориентацию, gap и breakpoint горизонтальной раскладки.
+ */
+function ToggleGroup(props) {
+    const { children, orientation = constants_1.ORIENTATION.Vertical, gap = constants_1.GAP.S, breakpoint = 0, className, ...rest } = props;
+    const restProps = rest;
+    const supportProps = (0, utils_1.extractSupportProps)(restProps);
+    const groupProps = (0, utils_1.excludeSupportProps)(restProps);
+    return ((0, jsx_runtime_1.jsx)(toggles_1.ToggleGroup, { ...groupProps, children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.toggleGroup, className), style: { '--toggle-group-breakpoint': `${breakpoint}px` }, "data-orientation": orientation, "data-gap": gap, "data-test-id": constants_1.TEST_IDS.group, ...supportProps, children: children }) }));
+}

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ToggleGroup"), exports);

package/dist/cjs/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/cjs/components/index.d.ts

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

package/dist/cjs/components/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToggleGroup = void 0;
+__exportStar(require("./ToggleCard"), exports);
+__exportStar(require("./ToggleGroup"), exports);
+var toggles_1 = require("@cloud-ru/ds-toggles");
+Object.defineProperty(exports, "useToggleGroup", { enumerable: true, get: function () { return toggles_1.useToggleGroup; } });

package/dist/cjs/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/cjs/constants.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TEST_IDS = exports.GAP = exports.ORIENTATION = exports.SIZE = void 0;
+exports.SIZE = {
+    S: 's',
+    M: 'm',
+    L: 'l',
+};
+exports.ORIENTATION = {
+    Horizontal: 'horizontal',
+    Vertical: 'vertical',
+};
+exports.GAP = {
+    S: 's',
+    M: 'm',
+    L: 'l',
+};
+exports.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/cjs/index.d.ts

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

package/dist/cjs/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);
+__exportStar(require("./constants"), exports);
+__exportStar(require("./types"), exports);

package/dist/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/dist/cjs/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/cjs/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';
+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/cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,8 @@
+import { ToggleCardProps } from '../../types.js';
+/**
+ * ToggleCard — кликабельная карточка выбора. Работает внутри `ToggleGroup`:
+ * клик / Enter / Space по карточке переключает её значение в контексте группы.
+ * Визуальный chrome (acrylic-фон, state-layer выбора, outline, focus-ring)
+ * приходит из `@cloud-ru/ds-card`; карточка добавляет раскладку контента и клавиатуру.
+ */
+export declare function ToggleCard({ title, value, description, emblem, promoBadge, size, truncate, disabled, className, ...rest }: ToggleCardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, VIEW } from '@cloud-ru/ds-card';
+import { IconPredefined } from '@cloud-ru/ds-icon-predefined';
+import { PromoTag } from '@cloud-ru/ds-promo-tag';
+import { useToggleGroup } from '@cloud-ru/ds-toggles';
+import { TruncateString } from '@cloud-ru/ds-truncate-string';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { SIZE, TEST_IDS } from '../../constants.js';
+import styles from './styles.module.css';
+import { isEmblemPicture, sizeToEmblemSize } from './utils.js';
+const TRUNCATE_DEFAULTS = { title: 1, description: 2 };
+/**
+ * ToggleCard — кликабельная карточка выбора. Работает внутри `ToggleGroup`:
+ * клик / Enter / Space по карточке переключает её значение в контексте группы.
+ * Визуальный chrome (acrylic-фон, state-layer выбора, outline, focus-ring)
+ * приходит из `@cloud-ru/ds-card`; карточка добавляет раскладку контента и клавиатуру.
+ */
+export function ToggleCard({ title, value, description, emblem, promoBadge, size = SIZE.M, truncate, disabled = false, className, ...rest }) {
+    const { isChecked, handleClick, multipleSelection } = useToggleGroup({ value });
+    const handleKeyDown = e => {
+        if (disabled)
+            return;
+        if (e.code === 'Enter' || e.code === 'Space') {
+            e.preventDefault();
+            handleClick();
+        }
+    };
+    // `?? DEFAULT` вместо spread: явный `truncate={{ description: undefined }}`
+    // (сборка объекта из optional-переменной) не должен перетирать дефолт.
+    const maxLines = {
+        title: truncate?.title ?? TRUNCATE_DEFAULTS.title,
+        description: truncate?.description ?? TRUNCATE_DEFAULTS.description,
+    };
+    return (_jsxs(Card, { className: cn(styles.card, className), view: VIEW.Outline, radius: size, checked: isChecked, disabled: disabled, role: multipleSelection ? 'checkbox' : 'radio', "aria-checked": isChecked, onClick: !disabled ? handleClick : undefined, onKeyDown: handleKeyDown, "data-test-id": TEST_IDS.card, ...extractSupportProps(rest), children: [promoBadge && (_jsx("div", { className: styles.promoBadge, "data-size": size, "data-test-id": TEST_IDS.promoBadge, children: _jsx(PromoTag, { ...(typeof promoBadge === 'string' ? { label: promoBadge } : promoBadge), roleAppearance: 'decor' }) })), _jsxs("div", { className: styles.content, "data-size": size, children: [emblem && (_jsx("span", { className: styles.emblem, "data-test-id": TEST_IDS.cardEmblem, "aria-hidden": isEmblemPicture(emblem) ? undefined : true, children: isEmblemPicture(emblem) ? (_jsx("img", { className: styles.picture, src: emblem.src, alt: emblem.alt, "data-size": sizeToEmblemSize(size) })) : (_jsx(IconPredefined, { ...emblem, size: sizeToEmblemSize(size), background: emblem.background ?? false })) })), _jsxs("div", { className: styles.textContent, children: [_jsx("span", { className: styles.title, "data-test-id": TEST_IDS.cardTitle, children: _jsx(TruncateString, { text: title, maxLines: maxLines.title }) }), description && (_jsx("span", { className: styles.description, "data-test-id": TEST_IDS.cardDescription, children: _jsx(TruncateString, { text: description, maxLines: maxLines.description }) }))] })] })] }));
+}

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

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

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

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