@cloud-ru/ds-tooltip 1.0.0

package/dist/cjs/components/WithTooltip/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("./WithTooltip"), exports);

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

@@ -0,0 +1,3 @@
+export * from './QuestionTooltip';
+export * from './Tooltip';
+export * from './WithTooltip';

package/dist/cjs/components/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("./QuestionTooltip"), exports);
+__exportStar(require("./Tooltip"), exports);
+__exportStar(require("./WithTooltip"), exports);

package/dist/cjs/constants.d.ts

@@ -0,0 +1,10 @@
+export declare const SIZE: {
+    readonly XS: "xs";
+    readonly S: "s";
+};
+/** Стабильные `data-test-id` на внутренних слотах, которые компонент ставит сам. */
+export declare const TEST_IDS: {
+    readonly questionTooltip: {
+        readonly triggerOpen: "question-tooltip-trigger";
+    };
+};

package/dist/cjs/constants.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TEST_IDS = exports.SIZE = void 0;
+exports.SIZE = {
+    XS: 'xs',
+    S: 's',
+};
+/** Стабильные `data-test-id` на внутренних слотах, которые компонент ставит сам. */
+exports.TEST_IDS = {
+    questionTooltip: {
+        triggerOpen: 'question-tooltip-trigger',
+    },
+};

package/dist/cjs/index.d.ts

@@ -0,0 +1,5 @@
+export { TRIGGER, PLACEMENT } from '@cloud-ru/ds-popover-private';
+export * from './components';
+export type { Placement } from './types';
+export { SIZE } from './constants';
+export type { Size } from './types';

package/dist/cjs/index.js

@@ -0,0 +1,23 @@
+"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.SIZE = exports.PLACEMENT = exports.TRIGGER = void 0;
+var popover_private_1 = require("@cloud-ru/ds-popover-private");
+Object.defineProperty(exports, "TRIGGER", { enumerable: true, get: function () { return popover_private_1.TRIGGER; } });
+Object.defineProperty(exports, "PLACEMENT", { enumerable: true, get: function () { return popover_private_1.PLACEMENT; } });
+__exportStar(require("./components"), exports);
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "SIZE", { enumerable: true, get: function () { return constants_1.SIZE; } });

package/dist/cjs/package.json

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

package/dist/cjs/style.css

@@ -0,0 +1,77 @@
+.questionTooltipTrigger{
+  position:relative;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+}
+
+.button{
+  cursor:pointer;
+  position:relative;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  margin:0;
+  padding:0;
+  border:none;
+  font:inherit;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  background:transparent;
+}
+.button:focus-visible{
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
+}
+.button:active{
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+@media (hover: hover){
+  .button:hover:not(:active){
+    color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+  }
+}
+.button[data-size=xs]{
+  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+}
+.button[data-size=s]{
+  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));
+}
+.triggerClassName{
+  --offset:var(--sn-popover-anatomy-privatePopover-offset, var(--sn-primitive-dimension-4, 4px));
+}
+
+.tooltipContainer{
+  border-radius:var(--sn-tooltip-anatomy-container-borderRadius, var(--sn-brand-anatomy-radius-tooltip-xs, var(--sn-primitive-dimension-4, 4px)));
+  padding:var(--sn-tooltip-anatomy-container-padding, var(--sn-brand-anatomy-spacing-tooltip-padding, var(--sn-primitive-dimension-8, 8px)));
+  max-width:256px;
+  min-width:var(--sn-tooltip-anatomy-container-minWidth, var(--sn-primitive-dimension-32, 32px));
+  min-height:var(--sn-tooltip-anatomy-container-minHeight, var(--sn-primitive-dimension-32, 32px));
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+  display:flex;
+  flex-direction:column;
+  box-sizing:border-box;
+  color:var(--sn-theme-color-available-inversion-textMain, var(--sn-brand-color-text-inversion-main, #e6e8ef));
+  overflow-wrap:break-word;
+  background:var(--sn-theme-color-invertNeutral-background2Level, var(--sn-brand-color-neutral-15, var(--sn-primitive-color-gray-15, #333342)));
+}
+.tooltipContainer[data-disable-max-width=true]{
+  max-width:calc(100vw - var(--sn-primitive-dimension-16, 16px));
+}
+
+.pointerWrapper{
+  position:absolute;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  color:var(--sn-theme-color-invertNeutral-background2Level, var(--sn-brand-color-neutral-15, var(--sn-primitive-color-gray-15, #333342)));
+}
+
+.pointerShape{
+  fill:currentcolor;
+}

package/dist/cjs/types.d.ts

@@ -0,0 +1,5 @@
+import { PLACEMENT } from '@cloud-ru/ds-popover-private';
+import { ValueOf } from '@cloud-ru/ds-utils';
+import { SIZE } from './constants';
+export type Placement = (typeof PLACEMENT)[keyof typeof PLACEMENT];
+export type Size = ValueOf<typeof SIZE>;

package/dist/cjs/types.js

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

package/dist/cjs/utils.d.ts

@@ -0,0 +1,2 @@
+import { Size } from './types';
+export declare function getIconSize(size?: Size): 16 | 24;

package/dist/cjs/utils.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getIconSize = getIconSize;
+const constants_1 = require("./constants");
+function getIconSize(size) {
+    switch (size) {
+        case constants_1.SIZE.XS: {
+            return 16;
+        }
+        case constants_1.SIZE.S:
+        default: {
+            return 24;
+        }
+    }
+}

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

@@ -0,0 +1,6 @@
+import { QuestionTooltipProps } from './types.js';
+/**
+ * QuestionTooltip — иконка «?» с тултипом-popover для подсказок к полям форм.
+ * Поверхность одна на всех раскладках (по договорённости с дизайном mobile не свапается на BottomSheet).
+ */
+export declare function QuestionTooltip({ tip, triggerLabel, trigger, className, tooltipClassname, open, onOpenChange, tabIndex, size, triggerRef, ...rest }: QuestionTooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/QuestionTooltip/QuestionTooltip.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { QuestionSVG } from '@cloud-ru/ds-icons/interface/system';
+import { TRIGGER } from '@cloud-ru/ds-popover-private';
+import { useUncontrolledProp } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { SIZE, TEST_IDS } from '../../constants.js';
+import { getIconSize } from '../../utils.js';
+import { Tooltip } from '../Tooltip/index.js';
+import styles from './styles.module.css';
+/**
+ * QuestionTooltip — иконка «?» с тултипом-popover для подсказок к полям форм.
+ * Поверхность одна на всех раскладках (по договорённости с дизайном mobile не свапается на BottomSheet).
+ */
+export function QuestionTooltip({ tip, triggerLabel = 'Подсказка', trigger = TRIGGER.Hover, className, tooltipClassname, open, onOpenChange, tabIndex = 0, size = SIZE.XS, triggerRef, ...rest }) {
+    const [isOpen, setIsOpen] = useUncontrolledProp(open, false, onOpenChange);
+    return (_jsx(Tooltip, { tip: tip, className: tooltipClassname, triggerClassName: styles.questionTooltipTrigger, open: isOpen, onOpenChange: setIsOpen, trigger: trigger, ...rest, children: _jsx("button", { type: 'button', "aria-label": triggerLabel, "data-opened": isOpen, "data-trigger": trigger, tabIndex: tabIndex, className: cn(styles.button, className), "data-size": size, "data-test-id": TEST_IDS.questionTooltip.triggerOpen, 
+            // Ref ведёт на саму кнопку, а не на span-обёртку popover'а: потребителю
+            // нужен настоящий триггер (позиционирование, фокус).
+            ref: triggerRef, children: _jsx(QuestionSVG, { size: getIconSize(size) }) }) }));
+}

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

@@ -0,0 +1,2 @@
+export * from './QuestionTooltip.js';
+export * from './types.js';

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

@@ -0,0 +1,2 @@
+export * from './QuestionTooltip.js';
+export * from './types.js';

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

@@ -0,0 +1,39 @@
+.questionTooltipTrigger{
+  position:relative;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+}
+
+.button{
+  cursor:pointer;
+  position:relative;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  margin:0;
+  padding:0;
+  border:none;
+  font:inherit;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  background:transparent;
+}
+.button:focus-visible{
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
+}
+.button:active{
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+@media (hover: hover){
+  .button:hover:not(:active){
+    color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+  }
+}
+.button[data-size=xs]{
+  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+}
+.button[data-size=s]{
+  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));
+}

package/dist/esm/components/QuestionTooltip/types.d.ts

@@ -0,0 +1,19 @@
+import { Size } from '../../types.js';
+import { TooltipProps } from '../Tooltip/index.js';
+/**
+ * QuestionTooltip: иконка «?» с тултипом-popover. Поверхность одна на всех раскладках.
+ * `tooltipClassname` применяется к контейнеру подсказки.
+ */
+export type QuestionTooltipProps = TooltipProps & {
+    /** CSS-класс контейнера подсказки */
+    tooltipClassname?: string;
+    /** Доступное имя для иконки-триггера */
+    triggerLabel?: string;
+    /** Tab index для кнопки-триггера */
+    tabIndex?: number;
+    /**
+     * Размер
+     * @default xs
+     */
+    size?: Size;
+};

package/dist/esm/components/QuestionTooltip/types.js

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

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

@@ -0,0 +1,16 @@
+import { PopoverPrivateProps } from '@cloud-ru/ds-popover-private';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { ReactNode } from 'react';
+export type TooltipProps = WithSupportProps<{
+    /** Содержимое тултипа (текст или разметка) */
+    tip: ReactNode;
+    /** Отключение ограничения ширины тултипа @default false */
+    disableMaxWidth?: boolean;
+}> & Pick<PopoverPrivateProps, 'className' | 'triggerClassName' | 'offset' | 'open' | 'onOpenChange' | 'hoverDelayOpen' | 'hoverDelayClose' | 'triggerRef' | 'disableSpanWrapper' | 'fallbackPlacements' | 'closeOnPopstate'> & Partial<Pick<PopoverPrivateProps, 'trigger' | 'placement' | 'children'>>;
+export declare const DEFAULT_FALLBACK_PLACEMENTS: ("left" | "right" | "top" | "bottom")[];
+/**
+ * Tooltip — всплывающая подсказка при наведении.
+ * Стили и анатомия (отступы, скругления, макс. ширина) из @cloud-ru/ds-figma-variables.
+ * DOM повторяет структуру из Figma: корневой контейнер и слои (фон, контейнер контента, указатель) с position: absolute.
+ */
+export declare function Tooltip({ children, tip, placement, trigger, hoverDelayOpen, hoverDelayClose, triggerClassName, disableMaxWidth, ...otherProps }: TooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Tooltip/Tooltip.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PLACEMENT, PopoverPrivate, TRIGGER } from '@cloud-ru/ds-popover-private';
+import cn from 'classnames';
+import styles from './styles.module.css';
+export const DEFAULT_FALLBACK_PLACEMENTS = [PLACEMENT.Top, PLACEMENT.Right, PLACEMENT.Bottom, PLACEMENT.Left];
+/**
+ * Tooltip — всплывающая подсказка при наведении.
+ * Стили и анатомия (отступы, скругления, макс. ширина) из @cloud-ru/ds-figma-variables.
+ * DOM повторяет структуру из Figma: корневой контейнер и слои (фон, контейнер контента, указатель) с position: absolute.
+ */
+export function Tooltip({ children, tip, placement = PLACEMENT.Top, trigger = TRIGGER.HoverAndFocusVisible, hoverDelayOpen = 0, hoverDelayClose = 0, triggerClassName, disableMaxWidth = false, ...otherProps }) {
+    return (_jsx(PopoverPrivate, { trigger: trigger, placement: placement, hasArrow: true, arrowContainerClassName: styles.pointerWrapper, arrowElementClassName: styles.pointerShape, hoverDelayOpen: hoverDelayOpen, hoverDelayClose: hoverDelayClose, fallbackPlacements: DEFAULT_FALLBACK_PLACEMENTS, triggerClassName: cn(styles.triggerClassName, triggerClassName), popoverContent: _jsx("div", { className: styles.tooltipContainer, "data-disable-max-width": disableMaxWidth, role: 'tooltip', children: tip }), ...otherProps, children: children }));
+}

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

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

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

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

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

@@ -0,0 +1,38 @@
+.triggerClassName{
+  --offset:var(--sn-popover-anatomy-privatePopover-offset, var(--sn-primitive-dimension-4, 4px));
+}
+
+.tooltipContainer{
+  border-radius:var(--sn-tooltip-anatomy-container-borderRadius, var(--sn-brand-anatomy-radius-tooltip-xs, var(--sn-primitive-dimension-4, 4px)));
+  padding:var(--sn-tooltip-anatomy-container-padding, var(--sn-brand-anatomy-spacing-tooltip-padding, var(--sn-primitive-dimension-8, 8px)));
+  max-width:256px;
+  min-width:var(--sn-tooltip-anatomy-container-minWidth, var(--sn-primitive-dimension-32, 32px));
+  min-height:var(--sn-tooltip-anatomy-container-minHeight, var(--sn-primitive-dimension-32, 32px));
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+  display:flex;
+  flex-direction:column;
+  box-sizing:border-box;
+  color:var(--sn-theme-color-available-inversion-textMain, var(--sn-brand-color-text-inversion-main, #e6e8ef));
+  overflow-wrap:break-word;
+  background:var(--sn-theme-color-invertNeutral-background2Level, var(--sn-brand-color-neutral-15, var(--sn-primitive-color-gray-15, #333342)));
+}
+.tooltipContainer[data-disable-max-width=true]{
+  max-width:calc(100vw - var(--sn-primitive-dimension-16, 16px));
+}
+
+.pointerWrapper{
+  position:absolute;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  color:var(--sn-theme-color-invertNeutral-background2Level, var(--sn-brand-color-neutral-15, var(--sn-primitive-color-gray-15, #333342)));
+}
+
+.pointerShape{
+  fill:currentcolor;
+}

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

@@ -0,0 +1,9 @@
+import { TooltipProps } from '../Tooltip/index.js';
+type WithTooltipProps = {
+    /** Настройки для тултипа */
+    tooltip?: Omit<TooltipProps, 'children'>;
+    /** Триггер поповера (подробнее в TooltipProps) */
+    children: TooltipProps['children'];
+};
+export declare function WithTooltip({ tooltip, children }: WithTooltipProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/WithTooltip/WithTooltip.js

@@ -0,0 +1,8 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip } from '../Tooltip/index.js';
+export function WithTooltip({ tooltip, children }) {
+    if (!tooltip?.tip) {
+        return _jsx(_Fragment, { children: children });
+    }
+    return _jsx(Tooltip, { ...tooltip, children: children });
+}

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

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

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

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

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

@@ -0,0 +1,3 @@
+export * from './QuestionTooltip/index.js';
+export * from './Tooltip/index.js';
+export * from './WithTooltip/index.js';

package/dist/esm/components/index.js

@@ -0,0 +1,3 @@
+export * from './QuestionTooltip/index.js';
+export * from './Tooltip/index.js';
+export * from './WithTooltip/index.js';

package/dist/esm/constants.d.ts

@@ -0,0 +1,10 @@
+export declare const SIZE: {
+    readonly XS: "xs";
+    readonly S: "s";
+};
+/** Стабильные `data-test-id` на внутренних слотах, которые компонент ставит сам. */
+export declare const TEST_IDS: {
+    readonly questionTooltip: {
+        readonly triggerOpen: "question-tooltip-trigger";
+    };
+};

package/dist/esm/constants.js

@@ -0,0 +1,10 @@
+export const SIZE = {
+    XS: 'xs',
+    S: 's',
+};
+/** Стабильные `data-test-id` на внутренних слотах, которые компонент ставит сам. */
+export const TEST_IDS = {
+    questionTooltip: {
+        triggerOpen: 'question-tooltip-trigger',
+    },
+};

package/dist/esm/index.d.ts

@@ -0,0 +1,5 @@
+export { TRIGGER, PLACEMENT } from '@cloud-ru/ds-popover-private';
+export * from './components/index.js';
+export type { Placement } from './types.js';
+export { SIZE } from './constants.js';
+export type { Size } from './types.js';

package/dist/esm/index.js

@@ -0,0 +1,3 @@
+export { TRIGGER, PLACEMENT } from '@cloud-ru/ds-popover-private';
+export * from './components/index.js';
+export { SIZE } from './constants.js';

package/dist/esm/style.css

@@ -0,0 +1,77 @@
+.questionTooltipTrigger{
+  position:relative;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+}
+
+.button{
+  cursor:pointer;
+  position:relative;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  margin:0;
+  padding:0;
+  border:none;
+  font:inherit;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  background:transparent;
+}
+.button:focus-visible{
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
+}
+.button:active{
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+@media (hover: hover){
+  .button:hover:not(:active){
+    color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+  }
+}
+.button[data-size=xs]{
+  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+}
+.button[data-size=s]{
+  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));
+}
+.triggerClassName{
+  --offset:var(--sn-popover-anatomy-privatePopover-offset, var(--sn-primitive-dimension-4, 4px));
+}
+
+.tooltipContainer{
+  border-radius:var(--sn-tooltip-anatomy-container-borderRadius, var(--sn-brand-anatomy-radius-tooltip-xs, var(--sn-primitive-dimension-4, 4px)));
+  padding:var(--sn-tooltip-anatomy-container-padding, var(--sn-brand-anatomy-spacing-tooltip-padding, var(--sn-primitive-dimension-8, 8px)));
+  max-width:256px;
+  min-width:var(--sn-tooltip-anatomy-container-minWidth, var(--sn-primitive-dimension-32, 32px));
+  min-height:var(--sn-tooltip-anatomy-container-minHeight, var(--sn-primitive-dimension-32, 32px));
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+  display:flex;
+  flex-direction:column;
+  box-sizing:border-box;
+  color:var(--sn-theme-color-available-inversion-textMain, var(--sn-brand-color-text-inversion-main, #e6e8ef));
+  overflow-wrap:break-word;
+  background:var(--sn-theme-color-invertNeutral-background2Level, var(--sn-brand-color-neutral-15, var(--sn-primitive-color-gray-15, #333342)));
+}
+.tooltipContainer[data-disable-max-width=true]{
+  max-width:calc(100vw - var(--sn-primitive-dimension-16, 16px));
+}
+
+.pointerWrapper{
+  position:absolute;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  color:var(--sn-theme-color-invertNeutral-background2Level, var(--sn-brand-color-neutral-15, var(--sn-primitive-color-gray-15, #333342)));
+}
+
+.pointerShape{
+  fill:currentcolor;
+}

package/dist/esm/types.d.ts

@@ -0,0 +1,5 @@
+import { PLACEMENT } from '@cloud-ru/ds-popover-private';
+import { ValueOf } from '@cloud-ru/ds-utils';
+import { SIZE } from './constants.js';
+export type Placement = (typeof PLACEMENT)[keyof typeof PLACEMENT];
+export type Size = ValueOf<typeof SIZE>;

package/dist/esm/types.js

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

package/dist/esm/utils.d.ts

@@ -0,0 +1,2 @@
+import { Size } from './types.js';
+export declare function getIconSize(size?: Size): 16 | 24;

package/dist/esm/utils.js

@@ -0,0 +1,12 @@
+import { SIZE } from './constants.js';
+export function getIconSize(size) {
+    switch (size) {
+        case SIZE.XS: {
+            return 16;
+        }
+        case SIZE.S:
+        default: {
+            return 24;
+        }
+    }
+}