@cloud-ru/ds-ai-suggestion 1.0.0

package/dist/cjs/AiSuggestionParent/animation/constants.d.ts

@@ -0,0 +1,33 @@
+import type { Transition } from 'framer-motion';
+/**
+ * Animation contract — двухслойный chip + FLIP-spring layout (1:1 из ai-components).
+ *
+ * Per-property timing:
+ *   width / marginRight / scale  → sync, одна duration, один easing.
+ *   opacity                      → со stagger (visual ripple).
+ *   layout (FLIP)                → spring (110, 22, 1).
+ *
+ * Длительности:
+ *   enter width/scale  → 650ms     opacity → 450ms, stagger 60ms
+ *   exit  width/scale  → 550ms     opacity → 280ms, stagger 80ms
+ */
+/** easings:
+ *   enter — easeOutQuart
+ *   exit  — easeInQuart
+ *   bubble — easeOutBack overshoot ~5% для inner scale
+ */
+export declare const ENTER_EASE: Transition['ease'];
+export declare const EXIT_EASE: Transition['ease'];
+export declare const BUBBLE_ENTER_EASE: Transition['ease'];
+export declare const ENTER_WIDTH_S = 0.65;
+export declare const ENTER_OPACITY_S = 0.45;
+export declare const EXIT_OPACITY_S = 0.28;
+export declare const EXIT_WIDTH_S = 0.55;
+export declare const STAGGER_FORWARD_OPACITY_S = 0.06;
+export declare const STAGGER_BACKWARD_OPACITY_S = 0.08;
+export declare const MAX_STAGGER_WINDOW_S = 0.5;
+export declare const GAP_PX = 4;
+export declare const layoutSpring: Transition;
+export declare const cappedStagger: (idealPerChip: number, total: number, index: number) => number;
+export declare const outerChipTransition: (activated: boolean) => Transition;
+export declare const innerChipTransition: (index: number, total: number, activated: boolean) => Transition;

package/dist/cjs/AiSuggestionParent/animation/constants.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.innerChipTransition = exports.outerChipTransition = exports.cappedStagger = exports.layoutSpring = exports.GAP_PX = exports.MAX_STAGGER_WINDOW_S = exports.STAGGER_BACKWARD_OPACITY_S = exports.STAGGER_FORWARD_OPACITY_S = exports.EXIT_WIDTH_S = exports.EXIT_OPACITY_S = exports.ENTER_OPACITY_S = exports.ENTER_WIDTH_S = exports.BUBBLE_ENTER_EASE = exports.EXIT_EASE = exports.ENTER_EASE = void 0;
+/**
+ * Animation contract — двухслойный chip + FLIP-spring layout (1:1 из ai-components).
+ *
+ * Per-property timing:
+ *   width / marginRight / scale  → sync, одна duration, один easing.
+ *   opacity                      → со stagger (visual ripple).
+ *   layout (FLIP)                → spring (110, 22, 1).
+ *
+ * Длительности:
+ *   enter width/scale  → 650ms     opacity → 450ms, stagger 60ms
+ *   exit  width/scale  → 550ms     opacity → 280ms, stagger 80ms
+ */
+/** easings:
+ *   enter — easeOutQuart
+ *   exit  — easeInQuart
+ *   bubble — easeOutBack overshoot ~5% для inner scale
+ */
+exports.ENTER_EASE = [0.22, 1, 0.36, 1];
+exports.EXIT_EASE = [0.64, 0, 0.78, 0];
+exports.BUBBLE_ENTER_EASE = [0.34, 1.5, 0.64, 1];
+exports.ENTER_WIDTH_S = 0.65;
+exports.ENTER_OPACITY_S = 0.45;
+exports.EXIT_OPACITY_S = 0.28;
+exports.EXIT_WIDTH_S = 0.55;
+exports.STAGGER_FORWARD_OPACITY_S = 0.06;
+exports.STAGGER_BACKWARD_OPACITY_S = 0.08;
+exports.MAX_STAGGER_WINDOW_S = 0.5;
+exports.GAP_PX = 4;
+exports.layoutSpring = {
+    type: 'spring',
+    stiffness: 110,
+    damping: 22,
+    mass: 1,
+};
+const cappedStagger = (idealPerChip, total, index) => {
+    if (total <= 1) {
+        return 0;
+    }
+    const perChip = Math.min(idealPerChip, exports.MAX_STAGGER_WINDOW_S / (total - 1));
+    return index * perChip;
+};
+exports.cappedStagger = cappedStagger;
+const sizeTransition = (activated) => ({
+    duration: activated ? exports.ENTER_WIDTH_S : exports.EXIT_WIDTH_S,
+    ease: activated ? exports.ENTER_EASE : exports.EXIT_EASE,
+});
+const outerChipTransition = (activated) => ({
+    width: sizeTransition(activated),
+    marginRight: sizeTransition(activated),
+    layout: exports.layoutSpring,
+});
+exports.outerChipTransition = outerChipTransition;
+const innerChipTransition = (index, total, activated) => ({
+    scale: {
+        duration: activated ? exports.ENTER_WIDTH_S : exports.EXIT_WIDTH_S,
+        ease: activated ? exports.BUBBLE_ENTER_EASE : exports.EXIT_EASE,
+    },
+    opacity: {
+        duration: activated ? exports.ENTER_OPACITY_S : exports.EXIT_OPACITY_S,
+        ease: activated ? exports.ENTER_EASE : exports.EXIT_EASE,
+        delay: activated
+            ? (0, exports.cappedStagger)(exports.STAGGER_FORWARD_OPACITY_S, total, index)
+            : (0, exports.cappedStagger)(exports.STAGGER_BACKWARD_OPACITY_S, total, total - 1 - index),
+    },
+});
+exports.innerChipTransition = innerChipTransition;

package/dist/cjs/AiSuggestionParent/animation/styles.module.css

@@ -0,0 +1,23 @@
+.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);
+}

package/dist/cjs/AiSuggestionParent/constants.d.ts

@@ -0,0 +1,9 @@
+export declare const CHILD_TYPE: {
+    readonly Suggestion: "suggestion";
+    readonly Parent: "parent";
+};
+export declare const TEST_IDS: {
+    readonly root: "ai-suggestion-parent";
+    readonly trigger: "ai-suggestion-parent__trigger";
+    readonly chevron: "ai-suggestion-parent__chevron";
+};

package/dist/cjs/AiSuggestionParent/constants.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TEST_IDS = exports.CHILD_TYPE = void 0;
+exports.CHILD_TYPE = {
+    Suggestion: 'suggestion',
+    Parent: 'parent',
+};
+exports.TEST_IDS = {
+    root: 'ai-suggestion-parent',
+    trigger: 'ai-suggestion-parent__trigger',
+    chevron: 'ai-suggestion-parent__chevron',
+};

package/dist/cjs/AiSuggestionParent/context/AiSuggestionParentGroupContext.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+type AiSuggestionParentGroupContextValue = {
+    expandedKey: string | null;
+    requestExpand(key: string): void;
+    collapseKey(key: string): void;
+};
+export type AiSuggestionParentGroupProviderProps = {
+    children: ReactNode;
+    initialExpandedKey?: string | null;
+};
+export declare function AiSuggestionParentGroupProvider({ children, initialExpandedKey, }: AiSuggestionParentGroupProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useAiSuggestionParentGroup(): AiSuggestionParentGroupContextValue | null;
+export {};

package/dist/cjs/AiSuggestionParent/context/AiSuggestionParentGroupContext.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AiSuggestionParentGroupProvider = AiSuggestionParentGroupProvider;
+exports.useAiSuggestionParentGroup = useAiSuggestionParentGroup;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const AiSuggestionParentGroupContext = (0, react_1.createContext)(null);
+function AiSuggestionParentGroupProvider({ children, initialExpandedKey = null, }) {
+    const [expandedKey, setExpandedKey] = (0, react_1.useState)(initialExpandedKey);
+    const requestExpand = (0, react_1.useCallback)((key) => {
+        setExpandedKey(prev => (prev === key ? null : key));
+    }, []);
+    const collapseKey = (0, react_1.useCallback)((key) => {
+        setExpandedKey(prev => (prev === key ? null : prev));
+    }, []);
+    const value = (0, react_1.useMemo)(() => ({
+        expandedKey,
+        requestExpand,
+        collapseKey,
+    }), [collapseKey, expandedKey, requestExpand]);
+    return (0, jsx_runtime_1.jsx)(AiSuggestionParentGroupContext.Provider, { value: value, children: children });
+}
+function useAiSuggestionParentGroup() {
+    return (0, react_1.useContext)(AiSuggestionParentGroupContext);
+}

package/dist/cjs/AiSuggestionParent/index.d.ts

@@ -0,0 +1,4 @@
+export * from './AiSuggestionParent';
+export { AiSuggestionParentChip } from './AiSuggestionParentChip';
+export { CHILD_TYPE, TEST_IDS as AI_SUGGESTION_PARENT_TEST_IDS } from './constants';
+export * from './types';

package/dist/cjs/AiSuggestionParent/index.js

@@ -0,0 +1,24 @@
+"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.AI_SUGGESTION_PARENT_TEST_IDS = exports.CHILD_TYPE = exports.AiSuggestionParentChip = void 0;
+__exportStar(require("./AiSuggestionParent"), exports);
+var AiSuggestionParentChip_1 = require("./AiSuggestionParentChip");
+Object.defineProperty(exports, "AiSuggestionParentChip", { enumerable: true, get: function () { return AiSuggestionParentChip_1.AiSuggestionParentChip; } });
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "CHILD_TYPE", { enumerable: true, get: function () { return constants_1.CHILD_TYPE; } });
+Object.defineProperty(exports, "AI_SUGGESTION_PARENT_TEST_IDS", { enumerable: true, get: function () { return constants_1.TEST_IDS; } });
+__exportStar(require("./types"), exports);

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

@@ -0,0 +1,156 @@
+.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);
+}

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

@@ -0,0 +1,44 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { MouseEvent, ReactNode } from 'react';
+import { Size } from '../AiSuggestionSimple/types';
+import { CHILD_TYPE } from './constants';
+export type AiSuggestionParentProps = WithSupportProps<{
+    /** Текст на триггере */
+    label?: string;
+    /** Иконка слева от текста */
+    icon?: ReactNode;
+    /** Размер (Figma: Mobile Off → `s`, Mobile On → `m`) */
+    size?: Size;
+    /** Блокирует взаимодействие */
+    disabled?: boolean;
+    /** Controlled — раскрыт (Figma: Activated=On) */
+    expanded?: boolean;
+    /** Uncontrolled — initial expanded */
+    defaultExpanded?: boolean;
+    /** Колбэк toggle (controlled и uncontrolled) */
+    onExpandedChange?(expanded: boolean): void;
+    /** Вложенные подсказки и группы */
+    items?: AiSuggestionParentItem[];
+    /** Колбэк клика по вложенной подсказке */
+    onItemClick?(index: number, event: MouseEvent<HTMLButtonElement>): void;
+    /** Дополнительный CSS-класс */
+    className?: string;
+}>;
+export type AiSuggestionParentSuggestionItem = {
+    type?: typeof CHILD_TYPE.Suggestion;
+    key?: string;
+    items?: never;
+    label?: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    onClick?(event: MouseEvent<HTMLButtonElement>): void;
+};
+export type AiSuggestionParentNestedItem = {
+    type?: typeof CHILD_TYPE.Parent;
+    key?: string;
+    label?: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    items?: AiSuggestionParentItem[];
+};
+export type AiSuggestionParentItem = AiSuggestionParentSuggestionItem | AiSuggestionParentNestedItem;

package/dist/cjs/AiSuggestionParent/types.js

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

package/dist/cjs/AiSuggestionParent/utils/hasExclusiveParentGroup.d.ts

@@ -0,0 +1,2 @@
+import { AiSuggestionParentItem } from '../types';
+export declare function hasExclusiveParentGroup(items: AiSuggestionParentItem[]): boolean;

package/dist/cjs/AiSuggestionParent/utils/hasExclusiveParentGroup.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasExclusiveParentGroup = hasExclusiveParentGroup;
+const itemGuards_1 = require("./itemGuards");
+function hasExclusiveParentGroup(items) {
+    return items.filter(itemGuards_1.isNestedItem).length >= 2;
+}

package/dist/cjs/AiSuggestionParent/utils/itemGuards.d.ts

@@ -0,0 +1,3 @@
+import { AiSuggestionParentItem, AiSuggestionParentNestedItem, AiSuggestionParentSuggestionItem } from '../types';
+export declare function isNestedItem(item: AiSuggestionParentItem): item is AiSuggestionParentNestedItem;
+export declare function isSuggestionItem(item: AiSuggestionParentItem): item is AiSuggestionParentSuggestionItem;

package/dist/cjs/AiSuggestionParent/utils/itemGuards.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isNestedItem = isNestedItem;
+exports.isSuggestionItem = isSuggestionItem;
+const constants_1 = require("../constants");
+function isNestedItem(item) {
+    return item.type === constants_1.CHILD_TYPE.Parent || item.items !== undefined;
+}
+function isSuggestionItem(item) {
+    return !isNestedItem(item);
+}

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

@@ -0,0 +1,18 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { Appearance, Size } from './types';
+export type AiSuggestionSimpleProps = WithSupportProps<{
+    /** Текст подсказки */
+    label?: string;
+    /** Иконка слева от текста */
+    icon?: ReactNode;
+    /** Внешний вид (Figma: Primary On/Off) */
+    appearance?: Appearance;
+    /** Размер (Figma: Mobile Off → `s`, Mobile On → `m`) */
+    size?: Size;
+    /** Блокирует взаимодействие */
+    disabled?: boolean;
+    /** Дополнительный CSS-класс */
+    className?: string;
+}> & Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onClick'>;
+export declare function AiSuggestionSimple({ label, icon, appearance, size, disabled, tabIndex, onClick, className, ...rest }: AiSuggestionSimpleProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/AiSuggestionSimple/AiSuggestionSimple.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AiSuggestionSimple = AiSuggestionSimple;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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'));
+const utils_2 = require("./utils");
+function AiSuggestionSimple({ label = 'Label text', icon, appearance = constants_1.APPEARANCE.Neutral, size = constants_1.SIZE.S, disabled = false, tabIndex, onClick, className, ...rest }) {
+    const layerState = (0, utils_2.getLayerState)(appearance);
+    const rootTestId = rest['data-test-id'] ?? constants_1.TEST_IDS.root;
+    return ((0, jsx_runtime_1.jsxs)("button", { type: 'button', className: (0, classnames_1.default)(styles_module_scss_1.default.chip, className), ...(0, utils_1.extractSupportProps)(rest), "data-size": size, "data-appearance": appearance, "data-disabled": disabled || undefined, "data-test-id": rootTestId, disabled: disabled, tabIndex: tabIndex, onClick: disabled ? undefined : onClick, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.stateLayer, "aria-hidden": true, "data-state": layerState }), (0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.content, children: [icon && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.icon, "data-test-id": constants_1.TEST_IDS.icon, children: icon })), label && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.labelContainer, children: (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.label, "data-test-id": constants_1.TEST_IDS.label, children: label }) }))] })] }));
+}

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

@@ -0,0 +1,18 @@
+export declare const SIZE: {
+    readonly S: "s";
+    readonly M: "m";
+};
+export declare const APPEARANCE: {
+    readonly Primary: "primary";
+    readonly Neutral: "neutral";
+};
+export declare const TEST_IDS: {
+    readonly root: "ai-suggestion-simple";
+    readonly chip: "ai-suggestion-simple__chip";
+    readonly icon: "ai-suggestion-simple__icon";
+    readonly label: "ai-suggestion-simple__label";
+};
+export declare const LAYER_STATE: {
+    readonly ActivatedOnBackground: "activatedOnBackground";
+    readonly EmptyNeutralOnBackground: "emptyNeutralOnBackground";
+};

package/dist/cjs/AiSuggestionSimple/constants.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LAYER_STATE = exports.TEST_IDS = exports.APPEARANCE = exports.SIZE = void 0;
+exports.SIZE = {
+    S: 's',
+    M: 'm',
+};
+exports.APPEARANCE = {
+    Primary: 'primary',
+    Neutral: 'neutral',
+};
+exports.TEST_IDS = {
+    root: 'ai-suggestion-simple',
+    chip: 'ai-suggestion-simple__chip',
+    icon: 'ai-suggestion-simple__icon',
+    label: 'ai-suggestion-simple__label',
+};
+exports.LAYER_STATE = {
+    ActivatedOnBackground: 'activatedOnBackground',
+    EmptyNeutralOnBackground: 'emptyNeutralOnBackground',
+};

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

@@ -0,0 +1,3 @@
+export * from './AiSuggestionSimple';
+export { APPEARANCE, LAYER_STATE, SIZE, TEST_IDS as AI_SUGGESTION_SIMPLE_TEST_IDS } from './constants';
+export * from './types';

package/dist/cjs/AiSuggestionSimple/index.js

@@ -0,0 +1,24 @@
+"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.AI_SUGGESTION_SIMPLE_TEST_IDS = exports.SIZE = exports.LAYER_STATE = exports.APPEARANCE = void 0;
+__exportStar(require("./AiSuggestionSimple"), exports);
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "APPEARANCE", { enumerable: true, get: function () { return constants_1.APPEARANCE; } });
+Object.defineProperty(exports, "LAYER_STATE", { enumerable: true, get: function () { return constants_1.LAYER_STATE; } });
+Object.defineProperty(exports, "SIZE", { enumerable: true, get: function () { return constants_1.SIZE; } });
+Object.defineProperty(exports, "AI_SUGGESTION_SIMPLE_TEST_IDS", { enumerable: true, get: function () { return constants_1.TEST_IDS; } });
+__exportStar(require("./types"), exports);