@cloud-ru/ds-ai-suggestion 1.0.0

package/src/AiSuggestionParent/styles.module.scss

@@ -0,0 +1,197 @@
+@use 'sass:map';
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+$sizes: 's', 'm';
+
+$typography: (
+  's': base.$sn-regular-label-m,
+  'm': base.$sn-regular-label-l,
+);
+
+$chip-heights: (
+  's': base.$sn-primitive-dimension-32,
+  'm': base.$sn-primitive-dimension-40,
+);
+
+$chip-padding-inline: (
+  's': base.$sn-primitive-dimension-4,
+  'm': base.$sn-primitive-dimension-8,
+);
+
+// Правый отступ LabelContainer меньше левого: шеврон визуально прижат к тексту
+$label-padding-inline-end: (
+  's': base.$sn-primitive-dimension-0,
+  'm': base.$sn-primitive-dimension-2,
+);
+
+$icon-size: base.$sn-density-size-icon-s;
+
+$outline-transition-duration: 120ms;
+$parent-transition-duration: 450ms;
+$parent-transition-regular:
+  background-color $parent-transition-duration cubic-bezier(1, 0, 0.26, 0.7),
+  border-color $parent-transition-duration cubic-bezier(1, 0, 0.26, 0.7),
+  color $parent-transition-duration cubic-bezier(1, 0, 0.26, 0.7),
+  outline-color $outline-transition-duration ease;
+
+$parent-transition-activated:
+  background-color $parent-transition-duration cubic-bezier(0.7, 0.26, 0, 1.58),
+  border-color $parent-transition-duration cubic-bezier(0.7, 0.26, 0, 1.58),
+  color $parent-transition-duration cubic-bezier(0.7, 0.26, 0, 1.58),
+  outline-color $outline-transition-duration ease;
+
+$chevron-transition-regular: transform $parent-transition-duration cubic-bezier(1, 0, 0.26, 0.7);
+$chevron-transition-activated: transform $parent-transition-duration cubic-bezier(0.7, 0.26, 0, 1.58);
+
+.root {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: base.$sn-primitive-dimension-4;
+  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: $icon-size;
+  height: $icon-size;
+
+  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: base.$sn-primitive-strokeWeight-strokeRegular solid
+    base.$sn-theme-color-material-stateLayer-neutral-border-default-borderColor;
+  border-radius: base.$sn-primitive-dimension-full;
+
+  font-family: inherit;
+  text-decoration: none;
+
+  background-color: base.$sn-theme-color-neutral-background1Level;
+  outline: 0;
+  outline-offset: 0;
+
+  transition: $parent-transition-regular;
+
+  .icon,
+  .label,
+  .chevron {
+    color: base.$sn-theme-color-neutral-text;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: base.$sn-theme-effect-opacity-disabled;
+  }
+
+  &:not(:disabled):focus-visible {
+    outline: base.$sn-primitive-strokeWeight-strokeSemiBold solid base.$sn-theme-color-primary-accent;
+    outline-offset: 0;
+  }
+
+  &[data-activated] {
+    border-color: base.$sn-theme-color-primary-accent;
+    background-color: base.$sn-theme-color-primary-background1Level;
+    transition: $parent-transition-activated;
+
+    .icon,
+    .label,
+    .chevron {
+      color: base.$sn-theme-color-primary-text;
+    }
+
+    @media (hover: hover) {
+      &:hover:not(:disabled) {
+        border-color: color-mix(in srgb, base.$sn-theme-color-primary-accent 80%, transparent);
+        background-color: base.$sn-theme-color-primary-background2Level;
+      }
+    }
+  }
+
+  &:not([data-activated], :disabled) {
+    @media (hover: hover) {
+      &:hover {
+        border-color: base.$sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor;
+      }
+    }
+  }
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include base.composite-var($typography, $size);
+
+      height: map.get($chip-heights, $size);
+      padding-inline: map.get($chip-padding-inline, $size);
+
+      .icon {
+        display: flex;
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: center;
+
+        width: $icon-size;
+        height: $icon-size;
+
+        > svg {
+          display: block;
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .labelContainer {
+        padding-inline: map.get($chip-padding-inline, $size) map.get($label-padding-inline-end, $size);
+      }
+    }
+  }
+}
+
+.labelContainer {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.chevronIcon {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  transition: $chevron-transition-regular;
+}
+
+.chip[data-activated] .chevronIcon {
+  transform: rotate(90deg);
+  transition: $chevron-transition-activated;
+}

package/src/AiSuggestionParent/types.ts

@@ -0,0 +1,49 @@
+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/src/AiSuggestionParent/utils/hasExclusiveParentGroup.ts

@@ -0,0 +1,6 @@
+import { AiSuggestionParentItem } from '../types';
+import { isNestedItem } from './itemGuards';
+
+export function hasExclusiveParentGroup(items: AiSuggestionParentItem[]): boolean {
+  return items.filter(isNestedItem).length >= 2;
+}

package/src/AiSuggestionParent/utils/itemGuards.ts

@@ -0,0 +1,10 @@
+import { CHILD_TYPE } from '../constants';
+import { AiSuggestionParentItem, AiSuggestionParentNestedItem, AiSuggestionParentSuggestionItem } from '../types';
+
+export function isNestedItem(item: AiSuggestionParentItem): item is AiSuggestionParentNestedItem {
+  return item.type === CHILD_TYPE.Parent || item.items !== undefined;
+}
+
+export function isSuggestionItem(item: AiSuggestionParentItem): item is AiSuggestionParentSuggestionItem {
+  return !isNestedItem(item);
+}

package/src/AiSuggestionSimple/AiSuggestionSimple.tsx

@@ -0,0 +1,72 @@
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+
+import { APPEARANCE, SIZE, TEST_IDS } from './constants';
+import styles from './styles.module.scss';
+import { Appearance, Size } from './types';
+import { getLayerState } from './utils';
+
+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 function AiSuggestionSimple({
+  label = 'Label text',
+  icon,
+  appearance = APPEARANCE.Neutral,
+  size = SIZE.S,
+  disabled = false,
+  tabIndex,
+  onClick,
+  className,
+  ...rest
+}: AiSuggestionSimpleProps) {
+  const layerState = getLayerState(appearance);
+  const rootTestId = rest['data-test-id'] ?? TEST_IDS.root;
+
+  return (
+    <button
+      type='button'
+      className={cn(styles.chip, className)}
+      {...extractSupportProps(rest)}
+      data-size={size}
+      data-appearance={appearance}
+      data-disabled={disabled || undefined}
+      data-test-id={rootTestId}
+      disabled={disabled}
+      tabIndex={tabIndex}
+      onClick={disabled ? undefined : onClick}
+    >
+      <span className={styles.stateLayer} aria-hidden data-state={layerState} />
+
+      <span className={styles.content}>
+        {icon && (
+          <span className={styles.icon} data-test-id={TEST_IDS.icon}>
+            {icon}
+          </span>
+        )}
+
+        {label && (
+          <span className={styles.labelContainer}>
+            <span className={styles.label} data-test-id={TEST_IDS.label}>
+              {label}
+            </span>
+          </span>
+        )}
+      </span>
+    </button>
+  );
+}

package/src/AiSuggestionSimple/constants.ts

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

package/src/AiSuggestionSimple/index.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/src/AiSuggestionSimple/styles.module.scss

@@ -0,0 +1,166 @@
+@use 'sass:map';
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-materials' as m;
+
+$sizes: 's', 'm';
+$appearances: 'primary', 'neutral';
+
+$typography: (
+  's': base.$sn-regular-label-m,
+  'm': base.$sn-regular-label-l,
+);
+
+$chip-heights: (
+  's': base.$sn-primitive-dimension-32,
+  'm': base.$sn-primitive-dimension-40,
+);
+
+$chip-padding-inline: (
+  's': base.$sn-primitive-dimension-4,
+  'm': base.$sn-primitive-dimension-8,
+);
+
+$icon-size: base.$sn-density-size-icon-s;
+
+$chip-interaction-transition-duration: 120ms;
+$chip-interaction-transition:
+  background-color $chip-interaction-transition-duration ease,
+  border-color $chip-interaction-transition-duration ease,
+  color $chip-interaction-transition-duration ease;
+
+.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: base.$sn-primitive-strokeWeight-strokeRegular solid transparent;
+  border-radius: base.$sn-primitive-dimension-full;
+
+  font-family: inherit;
+  text-decoration: none;
+
+  background-color: transparent;
+  outline: 0;
+  outline-offset: 0;
+
+  transition: $chip-interaction-transition;
+
+  &:disabled,
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: base.$sn-theme-effect-opacity-disabled;
+  }
+
+  &:focus-visible {
+    background-color: transparent;
+    outline: base.$sn-primitive-strokeWeight-strokeSemiBold solid base.$sn-theme-color-primary-accent;
+    outline-offset: base.$sn-primitive-dimension-2;
+  }
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include base.composite-var($typography, $size);
+
+      height: map.get($chip-heights, $size);
+      padding-inline: map.get($chip-padding-inline, $size);
+
+      .icon {
+        display: flex;
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: center;
+
+        width: $icon-size;
+        height: $icon-size;
+
+        > svg {
+          max-width: 100%;
+          max-height: 100%;
+        }
+      }
+
+      .labelContainer {
+        padding-inline: map.get($chip-padding-inline, $size);
+      }
+    }
+  }
+
+  @each $appearance in $appearances {
+    &:focus-visible {
+      background-color: var(--sn-theme-color-#{$appearance}-background1Level);
+    }
+
+    &[data-appearance='#{$appearance}'] {
+      @if $appearance == 'neutral' {
+        border-color: base.$sn-theme-color-material-stateLayer-neutral-border-default-borderColor;
+
+        .icon,
+        .label {
+          color: base.$sn-theme-color-neutral-text;
+        }
+
+        @media (hover: hover) {
+          &:hover:not(:disabled, [data-disabled]) {
+            border-color: base.$sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor;
+            background-color: base.$sn-theme-color-neutral-background1Level;
+
+            .icon,
+            .label {
+              color: base.$sn-theme-color-available-version-textMain;
+            }
+          }
+        }
+      }
+
+ @else {
+        border-color: base.$sn-theme-color-material-stateLayer-activated-default-filled;
+
+        .icon,
+        .label {
+          color: base.$sn-theme-color-primary-text;
+        }
+
+        @media (hover: hover) {
+          &:hover:not(:disabled, [data-disabled]) {
+            border-color: base.$sn-theme-color-material-stateLayer-activated-hovered-filled;
+            background-color: base.$sn-theme-color-primary-background1Level;
+          }
+        }
+      }
+    }
+  }
+}
+
+.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/src/AiSuggestionSimple/types.ts

@@ -0,0 +1,7 @@
+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/src/AiSuggestionSimple/utils.ts

@@ -0,0 +1,6 @@
+import { APPEARANCE, LAYER_STATE } from './constants';
+import { Appearance, LayerState } from './types';
+
+export function getLayerState(appearance: Appearance): LayerState {
+  return appearance === APPEARANCE.Primary ? LAYER_STATE.ActivatedOnBackground : LAYER_STATE.EmptyNeutralOnBackground;
+}

package/src/index.ts

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