@cloud-ru/ds-ai-suggestion 1.0.0

package/dist/cjs/AiSuggestionSimple/styles.module.css

@@ -0,0 +1,138 @@
+@charset "UTF-8";
+.label{
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.icon{
+  color:currentcolor;
+}
+
+.chip{
+  cursor:pointer;
+  position:relative;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  margin:0;
+  padding:0;
+  border:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid transparent;
+  border-radius:var(--sn-primitive-dimension-full, 10000px);
+  font-family:inherit;
+  text-decoration:none;
+  background-color:transparent;
+  outline:0;
+  outline-offset:0;
+  transition:background-color 120ms ease, border-color 120ms ease, color 120ms ease;
+}
+.chip:disabled, .chip[data-disabled]{
+  cursor:not-allowed;
+  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
+}
+.chip:focus-visible{
+  background-color:transparent;
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  outline-offset:var(--sn-primitive-dimension-2, 2px);
+}
+.chip[data-size=s]{
+  font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-550, 550))));
+  line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+  height:var(--sn-primitive-dimension-32, 32px);
+  padding-inline:var(--sn-primitive-dimension-4, 4px);
+}
+.chip[data-size=s] .icon{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+}
+.chip[data-size=s] .icon > svg{
+  max-width:100%;
+  max-height:100%;
+}
+.chip[data-size=s] .labelContainer{
+  padding-inline:var(--sn-primitive-dimension-4, 4px);
+}
+.chip[data-size=m]{
+  font-family:var(--sn-regular-label-l-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-label-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-l, var(--sn-brand-font-fontWeight-light-regular-label-l, var(--sn-primitive-font-fontWeightValue-550, 550))));
+  line-height:var(--sn-regular-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-label-l-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-regular-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+  height:var(--sn-primitive-dimension-40, 40px);
+  padding-inline:var(--sn-primitive-dimension-8, 8px);
+}
+.chip[data-size=m] .icon{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+}
+.chip[data-size=m] .icon > svg{
+  max-width:100%;
+  max-height:100%;
+}
+.chip[data-size=m] .labelContainer{
+  padding-inline:var(--sn-primitive-dimension-8, 8px);
+}
+.chip:focus-visible{
+  background-color:var(--sn-theme-color-primary-background1Level);
+}
+.chip[data-appearance=primary]{
+  border-color:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+}
+.chip[data-appearance=primary] .icon,
+.chip[data-appearance=primary] .label{
+  color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-45, var(--sn-brandRole-color-brandA-45, var(--sn-primitive-color-brandA-45, #22775b))));
+}
+@media (hover: hover){
+  .chip[data-appearance=primary]:hover:not(:disabled, [data-disabled]){
+    border-color:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+    background-color:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, var(--sn-brandRole-color-brandA-95, var(--sn-primitive-color-brandA-95, #f5fdf8))));
+  }
+}
+.chip:focus-visible{
+  background-color:var(--sn-theme-color-neutral-background1Level);
+}
+.chip[data-appearance=neutral]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+}
+.chip[data-appearance=neutral] .icon,
+.chip[data-appearance=neutral] .label{
+  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
+}
+@media (hover: hover){
+  .chip[data-appearance=neutral]:hover:not(:disabled, [data-disabled]){
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+    background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+  }
+  .chip[data-appearance=neutral]:hover:not(:disabled, [data-disabled]) .icon, .chip[data-appearance=neutral]:hover:not(:disabled, [data-disabled]) .label{
+    color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  }
+}
+
+.content{
+  position:relative;
+  z-index:1;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  min-width:0;
+}
+
+.labelContainer{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+}

package/dist/cjs/AiSuggestionSimple/types.d.ts

@@ -0,0 +1,5 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+import { APPEARANCE, LAYER_STATE, SIZE } from './constants';
+export type Size = ValueOf<typeof SIZE>;
+export type Appearance = ValueOf<typeof APPEARANCE>;
+export type LayerState = ValueOf<typeof LAYER_STATE>;

package/dist/cjs/AiSuggestionSimple/types.js

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

package/dist/cjs/AiSuggestionSimple/utils.d.ts

@@ -0,0 +1,2 @@
+import { Appearance, LayerState } from './types';
+export declare function getLayerState(appearance: Appearance): LayerState;

package/dist/cjs/AiSuggestionSimple/utils.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLayerState = getLayerState;
+const constants_1 = require("./constants");
+function getLayerState(appearance) {
+    return appearance === constants_1.APPEARANCE.Primary ? constants_1.LAYER_STATE.ActivatedOnBackground : constants_1.LAYER_STATE.EmptyNeutralOnBackground;
+}

package/dist/cjs/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AiSuggestionParent';
+export * from './AiSuggestionSimple';

package/dist/cjs/index.js

@@ -0,0 +1,18 @@
+"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("./AiSuggestionParent"), exports);
+__exportStar(require("./AiSuggestionSimple"), exports);

package/dist/cjs/package.json

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

package/dist/cjs/style.css

@@ -0,0 +1,317 @@
+.outerChip{
+  contain:layout;
+  display:inline-flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+}
+
+.innerChip{
+  will-change:transform, opacity;
+  transform-origin:center;
+  display:inline-flex;
+}
+
+.innerChipHidden{
+  pointer-events:none;
+}
+
+.triggerWrap{
+  display:inline-flex;
+  flex-shrink:0;
+  margin-right:var(--sn-primitive-dimension-4, 4px);
+}
+.root{
+  display:flex;
+  flex-wrap:wrap;
+  row-gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  min-width:0;
+  max-width:100%;
+}
+
+.root[data-flatten]{
+  display:contents;
+}
+
+.label{
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.icon{
+  color:currentcolor;
+}
+
+.chevron{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  color:currentcolor;
+}
+
+.chip{
+  cursor:pointer;
+  position:relative;
+  display:inline-flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  margin:0;
+  padding:0;
+  border:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  border-radius:var(--sn-primitive-dimension-full, 10000px);
+  font-family:inherit;
+  text-decoration:none;
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+  outline:0;
+  outline-offset:0;
+  transition:background-color 450ms cubic-bezier(1, 0, 0.26, 0.7), border-color 450ms cubic-bezier(1, 0, 0.26, 0.7), color 450ms cubic-bezier(1, 0, 0.26, 0.7), outline-color 120ms ease;
+}
+.chip .icon,
+.chip .label,
+.chip .chevron{
+  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
+}
+.chip:disabled{
+  cursor:not-allowed;
+  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
+}
+.chip:not(:disabled):focus-visible{
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  outline-offset:0;
+}
+.chip[data-activated]{
+  border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  background-color:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, var(--sn-brandRole-color-brandA-95, var(--sn-primitive-color-brandA-95, #f5fdf8))));
+  transition:background-color 450ms cubic-bezier(0.7, 0.26, 0, 1.58), border-color 450ms cubic-bezier(0.7, 0.26, 0, 1.58), color 450ms cubic-bezier(0.7, 0.26, 0, 1.58), outline-color 120ms ease;
+}
+.chip[data-activated] .icon,
+.chip[data-activated] .label,
+.chip[data-activated] .chevron{
+  color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-45, var(--sn-brandRole-color-brandA-45, var(--sn-primitive-color-brandA-45, #22775b))));
+}
+@media (hover: hover){
+  .chip[data-activated]:hover:not(:disabled){
+    border-color:color-mix(in srgb, var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74)))) 80%, transparent);
+    background-color:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, var(--sn-brandRole-color-brandA-99, var(--sn-primitive-color-brandA-99, #fbfffc))));
+  }
+}
+@media (hover: hover){
+  .chip:not([data-activated], :disabled):hover{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+  }
+}
+.chip[data-size=s]{
+  font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-550, 550))));
+  line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+  height:var(--sn-primitive-dimension-32, 32px);
+  padding-inline:var(--sn-primitive-dimension-4, 4px);
+}
+.chip[data-size=s] .icon{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+}
+.chip[data-size=s] .icon > svg{
+  display:block;
+  width:100%;
+  height:100%;
+}
+.chip[data-size=s] .labelContainer{
+  padding-inline:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-0, 0);
+}
+.chip[data-size=m]{
+  font-family:var(--sn-regular-label-l-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-label-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-l, var(--sn-brand-font-fontWeight-light-regular-label-l, var(--sn-primitive-font-fontWeightValue-550, 550))));
+  line-height:var(--sn-regular-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-label-l-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-regular-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+  height:var(--sn-primitive-dimension-40, 40px);
+  padding-inline:var(--sn-primitive-dimension-8, 8px);
+}
+.chip[data-size=m] .icon{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+}
+.chip[data-size=m] .icon > svg{
+  display:block;
+  width:100%;
+  height:100%;
+}
+.chip[data-size=m] .labelContainer{
+  padding-inline:var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-2, 2px);
+}
+
+.labelContainer{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+}
+
+.chevronIcon{
+  display:block;
+  max-width:100%;
+  max-height:100%;
+  transition:transform 450ms cubic-bezier(1, 0, 0.26, 0.7);
+}
+
+.chip[data-activated] .chevronIcon{
+  transform:rotate(90deg);
+  transition:transform 450ms cubic-bezier(0.7, 0.26, 0, 1.58);
+}
+@charset "UTF-8";
+.label{
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.icon{
+  color:currentcolor;
+}
+
+.chip{
+  cursor:pointer;
+  position:relative;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  margin:0;
+  padding:0;
+  border:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid transparent;
+  border-radius:var(--sn-primitive-dimension-full, 10000px);
+  font-family:inherit;
+  text-decoration:none;
+  background-color:transparent;
+  outline:0;
+  outline-offset:0;
+  transition:background-color 120ms ease, border-color 120ms ease, color 120ms ease;
+}
+.chip:disabled, .chip[data-disabled]{
+  cursor:not-allowed;
+  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
+}
+.chip:focus-visible{
+  background-color:transparent;
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  outline-offset:var(--sn-primitive-dimension-2, 2px);
+}
+.chip[data-size=s]{
+  font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-550, 550))));
+  line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+  height:var(--sn-primitive-dimension-32, 32px);
+  padding-inline:var(--sn-primitive-dimension-4, 4px);
+}
+.chip[data-size=s] .icon{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+}
+.chip[data-size=s] .icon > svg{
+  max-width:100%;
+  max-height:100%;
+}
+.chip[data-size=s] .labelContainer{
+  padding-inline:var(--sn-primitive-dimension-4, 4px);
+}
+.chip[data-size=m]{
+  font-family:var(--sn-regular-label-l-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-label-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-l, var(--sn-brand-font-fontWeight-light-regular-label-l, var(--sn-primitive-font-fontWeightValue-550, 550))));
+  line-height:var(--sn-regular-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-label-l-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-regular-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+  height:var(--sn-primitive-dimension-40, 40px);
+  padding-inline:var(--sn-primitive-dimension-8, 8px);
+}
+.chip[data-size=m] .icon{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+}
+.chip[data-size=m] .icon > svg{
+  max-width:100%;
+  max-height:100%;
+}
+.chip[data-size=m] .labelContainer{
+  padding-inline:var(--sn-primitive-dimension-8, 8px);
+}
+.chip:focus-visible{
+  background-color:var(--sn-theme-color-primary-background1Level);
+}
+.chip[data-appearance=primary]{
+  border-color:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+}
+.chip[data-appearance=primary] .icon,
+.chip[data-appearance=primary] .label{
+  color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-45, var(--sn-brandRole-color-brandA-45, var(--sn-primitive-color-brandA-45, #22775b))));
+}
+@media (hover: hover){
+  .chip[data-appearance=primary]:hover:not(:disabled, [data-disabled]){
+    border-color:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+    background-color:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, var(--sn-brandRole-color-brandA-95, var(--sn-primitive-color-brandA-95, #f5fdf8))));
+  }
+}
+.chip:focus-visible{
+  background-color:var(--sn-theme-color-neutral-background1Level);
+}
+.chip[data-appearance=neutral]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+}
+.chip[data-appearance=neutral] .icon,
+.chip[data-appearance=neutral] .label{
+  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
+}
+@media (hover: hover){
+  .chip[data-appearance=neutral]:hover:not(:disabled, [data-disabled]){
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+    background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+  }
+  .chip[data-appearance=neutral]:hover:not(:disabled, [data-disabled]) .icon, .chip[data-appearance=neutral]:hover:not(:disabled, [data-disabled]) .label{
+    color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  }
+}
+
+.content{
+  position:relative;
+  z-index:1;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  min-width:0;
+}
+
+.labelContainer{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+}

package/dist/esm/AiSuggestionParent/AiSuggestionParent.d.ts

@@ -0,0 +1,7 @@
+import { AiSuggestionParentProps } from './types.js';
+type AiSuggestionParentInternalProps = AiSuggestionParentProps & {
+    /** Родительская группа раскрыта — управляет видимостью вложенной ветки */
+    shown?: boolean;
+};
+export declare function AiSuggestionParent({ label, icon, size, disabled, expanded: expandedProp, defaultExpanded, onExpandedChange, items, onItemClick, className, shown: shownProp, ...rest }: AiSuggestionParentInternalProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/AiSuggestionParent/AiSuggestionParent.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { extractSupportProps, useUncontrolledProp } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { useCallback, useEffect, useState } from 'react';
+import { AiSuggestionSimple } from '../AiSuggestionSimple/index.js';
+import { APPEARANCE, SIZE } from '../AiSuggestionSimple/constants.js';
+import { AiSuggestionParentChip } from './AiSuggestionParentChip.js';
+import { AnimatedExpandableItem, AnimatedTriggerWrap } from './animation/AnimatedExpandableItem.js';
+import { TEST_IDS } from './constants.js';
+import { AiSuggestionParentGroupProvider, useAiSuggestionParentGroup } from './context/AiSuggestionParentGroupContext.js';
+import styles from './styles.module.css';
+import { hasExclusiveParentGroup } from './utils/hasExclusiveParentGroup.js';
+import { isNestedItem, isSuggestionItem } from './utils/itemGuards.js';
+function renderSuggestionLeaf({ item, index, total, shown, size, onLeafClick }) {
+    const key = item.key ?? String(index);
+    return (_jsx(AnimatedExpandableItem, { index: index, total: total, shown: shown, children: _jsx(AiSuggestionSimple, { label: item.label, icon: item.icon, size: size, disabled: item.disabled, appearance: APPEARANCE.Primary, tabIndex: shown ? 0 : -1, onClick: (event) => {
+                event.stopPropagation();
+                item.onClick?.(event);
+                onLeafClick?.(event);
+            } }) }, key));
+}
+function useNestedExpandedState(groupKey, shown) {
+    const group = useAiSuggestionParentGroup();
+    const isGroupControlled = group !== null && groupKey !== undefined;
+    const [localExpanded, setLocalExpanded] = useState(false);
+    const expanded = isGroupControlled ? group.expandedKey === groupKey : localExpanded;
+    useEffect(() => {
+        if (!shown) {
+            if (isGroupControlled && groupKey) {
+                group.collapseKey(groupKey);
+            }
+            else {
+                setLocalExpanded(false);
+            }
+        }
+    }, [group, groupKey, isGroupControlled, shown]);
+    const handleExpandedChange = useCallback((next) => {
+        if (isGroupControlled && groupKey) {
+            group.requestExpand(groupKey);
+            return;
+        }
+        setLocalExpanded(next);
+    }, [group, groupKey, isGroupControlled]);
+    return { expanded, handleExpandedChange };
+}
+function NestedAiSuggestionParent({ index, total, shown, node, size, groupKey, onItemClick, }) {
+    const { expanded, handleExpandedChange } = useNestedExpandedState(groupKey, shown);
+    const childShown = shown && expanded;
+    const items = node.items ?? [];
+    const nestedChildren = items.filter(isNestedItem);
+    const leaves = items.filter(isSuggestionItem);
+    const hasExclusiveGroup = hasExclusiveParentGroup(items);
+    const nestedContent = (_jsxs(_Fragment, { children: [nestedChildren.map((child, childIndex) => {
+                const childKey = child.key ?? `${node.label}-${child.label ?? childIndex}`;
+                return (_jsx(NestedAiSuggestionParent, { index: childIndex, total: nestedChildren.length, shown: childShown, node: child, size: size, groupKey: hasExclusiveGroup ? childKey : undefined, onItemClick: onItemClick }, childKey));
+            }), leaves.map((leaf, leafIndex) => renderSuggestionLeaf({
+                item: leaf,
+                index: leafIndex,
+                total: leaves.length,
+                shown: childShown,
+                size,
+            }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(AnimatedExpandableItem, { index: index, total: total, shown: shown, children: _jsx(AiSuggestionParentChip, { label: node.label, icon: node.icon, size: size, disabled: node.disabled, expanded: expanded, onExpandedChange: handleExpandedChange, tabIndex: shown ? 0 : -1 }) }), hasExclusiveGroup ? (_jsx(AiSuggestionParentGroupProvider, { children: nestedContent })) : (nestedContent)] }));
+}
+function wrapExclusiveItems(items, content) {
+    return hasExclusiveParentGroup(items) ? (_jsx(AiSuggestionParentGroupProvider, { children: content })) : (content);
+}
+export function AiSuggestionParent({ label = 'Label text', icon, size = SIZE.S, disabled = false, expanded: expandedProp, defaultExpanded = false, onExpandedChange, items = [], onItemClick, className, shown: shownProp = true, ...rest }) {
+    const [expanded, setExpanded] = useUncontrolledProp(expandedProp, defaultExpanded, onExpandedChange);
+    const shown = shownProp;
+    const childShown = shown && expanded;
+    const totalItems = items.length;
+    const hasExclusiveGroup = hasExclusiveParentGroup(items);
+    const rootTestId = rest['data-test-id'] ?? TEST_IDS.root;
+    useEffect(() => {
+        if (!shown && expanded) {
+            setExpanded(false);
+        }
+    }, [shown, expanded, setExpanded]);
+    const handleExpandedChange = useCallback((next) => {
+        if (disabled) {
+            return;
+        }
+        setExpanded(next);
+    }, [disabled, setExpanded]);
+    const renderItem = (item, index) => {
+        if (isNestedItem(item)) {
+            const key = item.key ?? String(index);
+            return (_jsx(NestedAiSuggestionParent, { index: index, total: totalItems, shown: childShown, node: item, size: size, groupKey: hasExclusiveGroup ? key : undefined, onItemClick: onItemClick }, key));
+        }
+        return renderSuggestionLeaf({
+            item,
+            index,
+            total: totalItems,
+            shown: childShown,
+            size,
+            onLeafClick: event => onItemClick?.(index, event),
+        });
+    };
+    return (_jsxs("div", { className: cn(styles.root, className), ...extractSupportProps(rest), "data-flatten": true, "data-test-id": rootTestId, children: [_jsx(AnimatedTriggerWrap, { children: _jsx(AiSuggestionParentChip, { label: label, icon: icon, size: size, disabled: disabled, expanded: expanded, onExpandedChange: handleExpandedChange, tabIndex: shown ? undefined : -1 }) }), wrapExclusiveItems(items, items.map(renderItem))] }));
+}

package/dist/esm/AiSuggestionParent/AiSuggestionParentChip.d.ts

@@ -0,0 +1,26 @@
+import { ButtonHTMLAttributes, MouseEvent, ReactNode } from 'react';
+import { Size } from '../AiSuggestionSimple/types.js';
+export type AiSuggestionParentChipProps = {
+    label?: string;
+    icon?: ReactNode;
+    size?: Size;
+    disabled?: boolean;
+    expanded?: boolean;
+    onExpandedChange?(expanded: boolean): void;
+    chevron?: ReactNode;
+    className?: string;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> & {
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+};
+export declare const AiSuggestionParentChip: import("react").ForwardRefExoticComponent<{
+    label?: string;
+    icon?: ReactNode;
+    size?: Size;
+    disabled?: boolean;
+    expanded?: boolean;
+    onExpandedChange?(expanded: boolean): void;
+    chevron?: ReactNode;
+    className?: string;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & {
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/esm/AiSuggestionParent/AiSuggestionParentChip.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRightSVG } from '@cloud-ru/ds-icons/interface/system';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { forwardRef } from 'react';
+import { SIZE } from '../AiSuggestionSimple/constants.js';
+import { TEST_IDS } from './constants.js';
+import styles from './styles.module.css';
+export const AiSuggestionParentChip = forwardRef(function AiSuggestionParentChip({ label = 'Label text', icon, size = SIZE.S, disabled = false, expanded = false, onExpandedChange, chevron, className, type = 'button', onClick, ...rest }, ref) {
+    const handleClick = (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented || disabled) {
+            return;
+        }
+        onExpandedChange?.(!expanded);
+    };
+    return (_jsxs("button", { ref: ref, type: type, className: cn(styles.chip, className), ...extractSupportProps(rest), "data-size": size, "data-activated": expanded || undefined, "data-test-id": TEST_IDS.trigger, disabled: disabled, "aria-expanded": expanded, onClick: handleClick, children: [icon !== undefined && (_jsx("span", { className: styles.icon, "aria-hidden": true, children: icon })), label !== undefined && (_jsx("span", { className: styles.labelContainer, children: _jsx("span", { className: styles.label, children: label }) })), _jsx("span", { className: styles.chevron, "data-test-id": TEST_IDS.chevron, "aria-hidden": true, children: chevron ?? _jsx(ChevronRightSVG, { className: styles.chevronIcon, size: 24 }) })] }));
+});