skillgrid 0.0.91 → 0.0.93

package/dist/assets/components/Notification/Notification.module-BVePCO8H.css

@@ -0,0 +1 @@
+:root{--ease-in-out: cubic-bezier(.4, .24, 0, 1);--duration-100: .1s;--duration-300: .3s;--duration-400: .4s;--duration-500: .5s}._semantic-animation_y2jij_1{transition-property:transform,opacity;transition-timing-function:var(--ease-in-out)}._semantic-animation--100_y2jij_1{transition-duration:var(--duration-100)}._semantic-animation--300_y2jij_1{transition-duration:var(--duration-300)}._semantic-animation--400_y2jij_1{transition-duration:var(--duration-400)}._semantic-animation--500_y2jij_1{transition-duration:var(--duration-500)}._notification_y2jij_3{--notification-padding: 1rem;--notification-gap: 1rem;--notification-radius: .75rem;--notification-icon-padding: .5rem;--notification-actions-gap: .75rem;display:flex;gap:var(--notification-gap);align-items:flex-start;box-sizing:border-box;width:100%;padding:var(--notification-padding);background:var(--notification-bg, var(--bg-primary));border:none;border-radius:var(--notification-radius);box-shadow:var(--shadow-medium)}._notification_y2jij_3._desktop_y2jij_24{max-width:25rem}._notification_y2jij_3._mobile_y2jij_28{max-width:20.375rem}._notification_y2jij_3._mobile_y2jij_28._narrow_y2jij_32{max-width:17.9375rem}._entering_y2jij_36{will-change:transform,opacity;animation-name:_notificationEnter_y2jij_1;animation-duration:var(--duration-300);animation-timing-function:var(--ease-in-out);animation-fill-mode:both}._exiting_y2jij_45{will-change:transform,opacity;animation-name:_notificationExit_y2jij_1;animation-duration:var(--duration-300);animation-timing-function:var(--ease-in-out);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){._entering_y2jij_36,._exiting_y2jij_45{animation:none}}._iconSlot_y2jij_61{display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:var(--notification-icon-padding);color:var(--notification-icon-color);background:var(--notification-icon-bg);border-radius:50%}._iconSlotInner_y2jij_75{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--notification-icon-size, 1rem);height:var(--notification-icon-size, 1rem)}._iconSlotInner_y2jij_75>*{display:flex;align-items:center;justify-content:center}._content_y2jij_91{display:flex;flex:1;flex-direction:column;gap:var(--notification-gap);min-width:0}._header_y2jij_100{display:flex;gap:.5rem;align-items:flex-start;justify-content:space-between}._title_y2jij_107{flex:1;min-width:0;margin:0;color:var(--text-primary)}._collapseToggle_y2jij_114{cursor:pointer;display:block;flex:1;min-width:0;margin:0;padding:0;color:var(--text-primary);text-align:left;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none}._body_y2jij_132{margin:0;color:var(--text-secondary);word-break:break-word}._bodyCollapsed_y2jij_138{display:none}._controls_y2jij_142{display:flex;flex-shrink:0;gap:.25rem;align-items:center}._actions_y2jij_149{display:flex;flex-wrap:wrap;gap:var(--notification-actions-gap);align-items:center}._linkRow_y2jij_156{display:flex;flex-wrap:wrap}._referenceComposition_y2jij_161 ._content_y2jij_91{gap:.75rem}._referenceTextStack_y2jij_165{display:flex;flex:1;flex-direction:column;gap:.25rem;min-width:0}._referenceTopRow_y2jij_174{display:flex;gap:.5rem;align-items:flex-start;justify-content:space-between}._referenceControlsColumn_y2jij_181{flex-direction:column;align-items:flex-end;align-self:stretch;justify-content:space-between}._referenceRootAside_y2jij_188{flex-shrink:0}._referenceGuidelines326_y2jij_193{--notification-padding: 13.04px;--notification-gap: .625rem;--notification-icon-padding: 6.52px;--notification-icon-size: .8125rem;--notification-actions-gap: .625rem}._referenceGuidelines287_y2jij_201{--notification-padding: 11.48px;--notification-gap: .5rem;--notification-icon-padding: 5.74px;--notification-icon-size: .75rem;--notification-actions-gap: .5rem}._referenceGuidelines326_y2jij_193 ._iconSlotInner_y2jij_75>*,._referenceGuidelines287_y2jij_201 ._iconSlotInner_y2jij_75>*{transform-origin:center center;transform:scale(calc(var(--notification-icon-size) / 1rem))}._referenceGeometry32611573_y2jij_220,._referenceGeometry3268034_y2jij_221{width:326px;max-width:326px}._referenceGeometry28794925_y2jij_226,._referenceGeometry28770315_y2jij_227{width:287px;max-width:287px}._referenceGeometry400142_y2jij_232{width:400px;max-width:400px}@keyframes _notificationEnter_y2jij_1{0%{transform:translateY(-.5rem) scale(.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes _notificationExit_y2jij_1{0%{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(-.5rem) scale(.98);opacity:0}}

package/dist/components/Notification/Notification.d.ts

@@ -0,0 +1,7 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { NotificationProps } from './Notification.type';
+/**
+ * Публичный тип — без reference props.
+ * Reference props остаются runtime-capable через {@link NotificationComponentProps} в stories/tests.
+ */
+export declare const Notification: ForwardRefExoticComponent<NotificationProps & RefAttributes<HTMLDivElement>>;

package/dist/components/Notification/Notification.i18n.json.d.ts

@@ -0,0 +1,17 @@
+declare const _default: {
+  "en": {
+    "notification": {
+      "close": "Close",
+      "copy": "Copy"
+    }
+  },
+  "ru": {
+    "notification": {
+      "close": "Закрыть",
+      "copy": "Копировать"
+    }
+  }
+}
+;
+
+export default _default;

package/dist/components/Notification/Notification.i18n.json.js

@@ -0,0 +1,9 @@
+const o = { notification: { close: "Close", copy: "Copy" } }, n = { notification: { close: "Закрыть", copy: "Копировать" } }, t = {
+  en: o,
+  ru: n
+};
+export {
+  t as default,
+  o as en,
+  n as ru
+};

package/dist/components/Notification/Notification.js

@@ -0,0 +1,299 @@
+import { jsxs as s, jsx as o, Fragment as J } from "react/jsx-runtime";
+import { forwardRef as Le, useState as L, useCallback as W, useRef as Ae, useEffect as K } from "react";
+import { clsx as r } from "clsx";
+import Ie from "../../styles/typography.module.css.js";
+import { resolveReferenceGuidelinesGeometry as Re } from "./lib/referenceGuidelinesGeometry.js";
+import { NotificationControls as Y } from "./NotificationControls.js";
+import t from "./Notification.module.css.js";
+import { useLocale as we } from "../ConfigProvider/ConfigProvider.hook.js";
+import { NOTIFICATION_STYLE_CONFIG as ve, ASSERTIVE_NOTIFICATION_STYLES as xe } from "./lib/notificationStyleConfig.js";
+import { Typography as A } from "../Typography/Typography.js";
+import { Button as j } from "../Button/Button.js";
+const Ge = {
+  "326-11573": t.referenceGeometry32611573,
+  "287-94925": t.referenceGeometry28794925,
+  "400-142": t.referenceGeometry400142,
+  "287-70315": t.referenceGeometry28770315,
+  "326-8034": t.referenceGeometry3268034
+}, Oe = 300, P = 16, ke = 16;
+function ee() {
+  return typeof window > "u" ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function Q() {
+  return ee() ? 0 : Oe;
+}
+const te = Le((oe, ne) => {
+  const {
+    platform: I = "desktop",
+    style: R = "neutral",
+    showButton: ie = !0,
+    collapse: re = !1,
+    open: U,
+    onOpenChange: p,
+    referenceComposition: w = !1,
+    referenceControlsColumn: v = !1,
+    referenceGuidelinesScale: x,
+    title: l,
+    body: m,
+    width: le = "default",
+    showClose: d = !0,
+    showCopy: f = !1,
+    onClose: y,
+    onCopy: G,
+    closeAriaLabel: ae,
+    copyAriaLabel: ce,
+    primaryAction: a,
+    secondaryAction: c,
+    linkProps: Z,
+    className: se,
+    classNames: e,
+    rootStyle: de,
+    "data-testid": n = "notification",
+    ...h
+  } = oe, { notification: q } = we(), O = ae ?? q.close, k = ce ?? q.copy, b = ve[R], fe = b.icon, N = U !== void 0, [ue, pe] = L(!1), _ = N ? U : ue, me = W(
+    (i) => {
+      N || pe(i), p == null || p(i);
+    },
+    [N, p]
+  ), z = !!(re && l), B = !z || _, V = xe.includes(R), ye = z, X = w && !!l && !!m && !z, he = X && !v && (d || f), [g, S] = L(() => !ee()), [u, be] = L(!1), [ge, Se] = L(!0), C = Ae(null), T = W(() => {
+    C.current && (clearTimeout(C.current), C.current = null);
+  }, []);
+  K(() => T, [T]), K(() => {
+    if (!g) return;
+    const i = Q();
+    if (i === 0) {
+      S(!1);
+      return;
+    }
+    const E = setTimeout(() => S(!1), i);
+    return () => clearTimeout(E);
+  }, [g]);
+  const Ce = (i) => {
+    i.target === i.currentTarget && g && !u && S(!1);
+  }, M = W(() => {
+    u || (S(!1), be(!0), T(), C.current = setTimeout(() => {
+      Se(!1), y == null || y();
+    }, Q()));
+  }, [T, u, y]), Te = () => {
+    me(!_);
+  }, D = ie && B && ((a == null ? void 0 : a.children) || (c == null ? void 0 : c.children)), H = !!Z, $ = Re({
+    referenceComposition: w,
+    referenceGuidelinesScale: x,
+    referenceControlsColumn: v,
+    hasActions: !!D,
+    hasLink: !!H
+  }), Ee = {
+    ...de,
+    "--notification-bg": b.background,
+    "--notification-icon-color": b.iconColor,
+    "--notification-icon-bg": b.iconBackground
+  }, F = r(
+    t.title,
+    Ie["typography-subtitle-1-semibold"],
+    e == null ? void 0 : e.title
+  );
+  return ge ? /* @__PURE__ */ s(
+    "div",
+    {
+      ref: ne,
+      role: V ? "alert" : "status",
+      "aria-live": V ? "assertive" : "polite",
+      "aria-atomic": "true",
+      "data-testid": n,
+      "data-style": R,
+      "data-platform": I,
+      "data-expanded": B ? "true" : "false",
+      "data-reference-geometry": $,
+      className: r(
+        t.notification,
+        t[I],
+        le === "narrow" && I === "mobile" && t.narrow,
+        w && t.referenceComposition,
+        x === "326" && t.referenceGuidelines326,
+        x === "287" && t.referenceGuidelines287,
+        $ && Ge[$],
+        g && !u && t.entering,
+        u && t.exiting,
+        se,
+        e == null ? void 0 : e.root
+      ),
+      style: Ee,
+      ...h,
+      onAnimationEnd: (i) => {
+        var E;
+        (E = h.onAnimationEnd) == null || E.call(h, i), Ce(i);
+      },
+      children: [
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: r(t.iconSlot, e == null ? void 0 : e.icon),
+            "data-testid": `${n}-icon`,
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ o("span", { className: t.iconSlotInner, children: /* @__PURE__ */ o(
+              fe,
+              {
+                iconSize: ke,
+                as: "div",
+                style: "none",
+                padding: !1
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ s("div", { className: r(t.content, e == null ? void 0 : e.content), children: [
+          X ? /* @__PURE__ */ o(J, { children: /* @__PURE__ */ s("div", { className: r(t.referenceTopRow, e == null ? void 0 : e.header), children: [
+            /* @__PURE__ */ s("div", { className: t.referenceTextStack, children: [
+              /* @__PURE__ */ o(
+                A.Subtitle,
+                {
+                  as: "h3",
+                  size: 1,
+                  fontWeight: "semibold",
+                  className: F,
+                  "data-testid": `${n}-title`,
+                  children: l
+                }
+              ),
+              /* @__PURE__ */ o(
+                A.Label,
+                {
+                  as: "p",
+                  size: 3,
+                  fontWeight: "regular",
+                  typographyStyle: "secondary",
+                  className: r(t.body, e == null ? void 0 : e.body),
+                  "data-testid": `${n}-body`,
+                  children: m
+                }
+              )
+            ] }),
+            v && /* @__PURE__ */ o(
+              Y,
+              {
+                showClose: d,
+                showCopy: f,
+                closeAriaLabel: O,
+                copyAriaLabel: k,
+                iconSize: P,
+                order: "close-first",
+                column: !0,
+                className: e == null ? void 0 : e.controls,
+                dataTestId: n,
+                onClose: M,
+                onCopy: G
+              }
+            )
+          ] }) }) : /* @__PURE__ */ s(J, { children: [
+            (l || d || f) && /* @__PURE__ */ s("div", { className: r(t.header, e == null ? void 0 : e.header), children: [
+              l && (ye ? /* @__PURE__ */ o(
+                "button",
+                {
+                  type: "button",
+                  className: r(t.collapseToggle, F),
+                  "aria-expanded": _,
+                  "data-testid": `${n}-collapse-toggle`,
+                  onClick: Te,
+                  children: l
+                }
+              ) : /* @__PURE__ */ o(
+                A.Subtitle,
+                {
+                  as: "h3",
+                  size: 1,
+                  fontWeight: "semibold",
+                  className: F,
+                  "data-testid": `${n}-title`,
+                  children: l
+                }
+              )),
+              /* @__PURE__ */ o(
+                Y,
+                {
+                  showClose: d,
+                  showCopy: f,
+                  closeAriaLabel: O,
+                  copyAriaLabel: k,
+                  iconSize: P,
+                  order: "copy-first",
+                  className: e == null ? void 0 : e.controls,
+                  dataTestId: n,
+                  onClose: M,
+                  onCopy: G
+                }
+              )
+            ] }),
+            m && /* @__PURE__ */ o(
+              A.Label,
+              {
+                as: "p",
+                size: 3,
+                fontWeight: "regular",
+                typographyStyle: "secondary",
+                className: r(
+                  t.body,
+                  !B && t.bodyCollapsed,
+                  e == null ? void 0 : e.body
+                ),
+                "data-testid": `${n}-body`,
+                children: m
+              }
+            )
+          ] }),
+          H && /* @__PURE__ */ o("div", { className: t.linkRow, children: /* @__PURE__ */ o(j.Link, { size: "m", buttonStyle: "accent", ...Z }) }),
+          D && /* @__PURE__ */ s(
+            "div",
+            {
+              className: r(t.actions, e == null ? void 0 : e.actions),
+              "data-testid": `${n}-actions`,
+              children: [
+                (c == null ? void 0 : c.children) && /* @__PURE__ */ o(
+                  j,
+                  {
+                    as: "button",
+                    mode: "tertiary",
+                    size: "s",
+                    buttonStyle: "neutral",
+                    ...c
+                  }
+                ),
+                (a == null ? void 0 : a.children) && /* @__PURE__ */ o(
+                  j,
+                  {
+                    as: "button",
+                    mode: "secondary",
+                    size: "s",
+                    buttonStyle: "neutral",
+                    ...a
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        he && /* @__PURE__ */ o(
+          Y,
+          {
+            showClose: d,
+            showCopy: f,
+            closeAriaLabel: O,
+            copyAriaLabel: k,
+            iconSize: P,
+            order: "close-first",
+            column: !0,
+            aside: !0,
+            className: e == null ? void 0 : e.controls,
+            dataTestId: n,
+            onClose: M,
+            onCopy: G
+          }
+        )
+      ]
+    }
+  ) : null;
+});
+te.displayName = "Notification";
+const Ue = te;
+export {
+  Ue as Notification
+};

package/dist/components/Notification/Notification.module.css.js

@@ -0,0 +1,72 @@
+import '../../assets/components/Notification/Notification.module-BVePCO8H.css';const e = "_notification_y2jij_3", n = "_desktop_y2jij_24", o = "_mobile_y2jij_28", i = "_narrow_y2jij_32", t = "_entering_y2jij_36", r = "_notificationEnter_y2jij_1", c = "_exiting_y2jij_45", _ = "_notificationExit_y2jij_1", s = "_iconSlot_y2jij_61", j = "_iconSlotInner_y2jij_75", a = "_content_y2jij_91", y = "_header_y2jij_100", f = "_title_y2jij_107", l = "_collapseToggle_y2jij_114", m = "_body_y2jij_132", d = "_bodyCollapsed_y2jij_138", G = "_controls_y2jij_142", p = "_actions_y2jij_149", g = "_linkRow_y2jij_156", C = "_referenceComposition_y2jij_161", u = "_referenceTextStack_y2jij_165", x = "_referenceTopRow_y2jij_174", b = "_referenceControlsColumn_y2jij_181", k = "_referenceRootAside_y2jij_188", w = "_referenceGuidelines326_y2jij_193", R = "_referenceGuidelines287_y2jij_201", S = "_referenceGeometry32611573_y2jij_220", T = "_referenceGeometry3268034_y2jij_221", E = "_referenceGeometry28794925_y2jij_226", h = "_referenceGeometry28770315_y2jij_227", A = "_referenceGeometry400142_y2jij_232", I = {
+  "semantic-animation": "_semantic-animation_y2jij_1",
+  "semantic-animation--100": "_semantic-animation--100_y2jij_1",
+  "semantic-animation--300": "_semantic-animation--300_y2jij_1",
+  "semantic-animation--400": "_semantic-animation--400_y2jij_1",
+  "semantic-animation--500": "_semantic-animation--500_y2jij_1",
+  notification: e,
+  desktop: n,
+  mobile: o,
+  narrow: i,
+  entering: t,
+  notificationEnter: r,
+  exiting: c,
+  notificationExit: _,
+  iconSlot: s,
+  iconSlotInner: j,
+  content: a,
+  header: y,
+  title: f,
+  collapseToggle: l,
+  body: m,
+  bodyCollapsed: d,
+  controls: G,
+  actions: p,
+  linkRow: g,
+  referenceComposition: C,
+  referenceTextStack: u,
+  referenceTopRow: x,
+  referenceControlsColumn: b,
+  referenceRootAside: k,
+  referenceGuidelines326: w,
+  referenceGuidelines287: R,
+  referenceGeometry32611573: S,
+  referenceGeometry3268034: T,
+  referenceGeometry28794925: E,
+  referenceGeometry28770315: h,
+  referenceGeometry400142: A
+};
+export {
+  p as actions,
+  m as body,
+  d as bodyCollapsed,
+  l as collapseToggle,
+  a as content,
+  G as controls,
+  I as default,
+  n as desktop,
+  t as entering,
+  c as exiting,
+  y as header,
+  s as iconSlot,
+  j as iconSlotInner,
+  g as linkRow,
+  o as mobile,
+  i as narrow,
+  e as notification,
+  r as notificationEnter,
+  _ as notificationExit,
+  C as referenceComposition,
+  b as referenceControlsColumn,
+  h as referenceGeometry28770315,
+  E as referenceGeometry28794925,
+  S as referenceGeometry32611573,
+  T as referenceGeometry3268034,
+  A as referenceGeometry400142,
+  R as referenceGuidelines287,
+  w as referenceGuidelines326,
+  k as referenceRootAside,
+  u as referenceTextStack,
+  x as referenceTopRow,
+  f as title
+};

package/dist/components/Notification/Notification.type.d.ts

@@ -0,0 +1,146 @@
+import { CSSProperties, HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+import { LinkButtonProps } from '../Button';
+/** Платформа отображения уведомления. */
+export type NotificationPlatform = 'desktop' | 'mobile';
+/** Визуальный стиль уведомления. */
+export type NotificationStyle = 'neutral' | 'positive' | 'warning' | 'error' | 'negative';
+/** Узкие ширины из Figma guidelines (326 / 287 px). */
+export type NotificationWidth = 'default' | 'narrow';
+type NotificationField = 'root' | 'icon' | 'content' | 'header' | 'title' | 'body' | 'actions' | 'controls';
+/** Параметры основной action-кнопки (secondary). */
+export type NotificationPrimaryAction = {
+    children?: ReactNode;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    disabled?: boolean;
+    loading?: boolean;
+    'data-testid'?: string;
+};
+/** Параметры дополнительной action-кнопки (tertiary). */
+export type NotificationSecondaryAction = NotificationPrimaryAction;
+/**
+ * Публичные props компонента Notification.
+ *
+ * @interface
+ */
+export interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'onCopy' | 'style'> {
+    /**
+     * Платформа: desktop фиксирует max-width 400px, mobile — 326px (или 287px при `width="narrow"`).
+     * @default 'desktop'
+     */
+    platform?: NotificationPlatform;
+    /**
+     * Визуальный стиль и семантика иконки/фона.
+     * @default 'neutral'
+     */
+    style?: NotificationStyle;
+    /**
+     * Показывать группу action-кнопок в footer.
+     * Не скрывает close/copy и link.
+     * @default true
+     */
+    showButton?: boolean;
+    /**
+     * Компактный режим: body и actions скрыты, пока `open=false`.
+     * Без `title` игнорируется (контент остаётся развёрнутым).
+     * @default false
+     */
+    collapse?: boolean;
+    /**
+     * Развёрнутое состояние при `collapse=true` и наличии `title`.
+     * Игнорируется, если `collapse=false` или нет `title`.
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Callback при смене `open` (раскрытие/сворачивание).
+     * Без `open` при активном collapse используется внутреннее состояние (uncontrolled).
+     * С переданным `open` состояние полностью controlled снаружи.
+     * @optional
+     */
+    onOpenChange?: (open: boolean) => void;
+    /** Заголовок уведомления. */
+    title?: ReactNode;
+    /** Основной текст уведомления. */
+    body?: ReactNode;
+    /**
+     * Узкая ширина для mobile (287px). На desktop игнорируется.
+     * @default 'default'
+     */
+    width?: NotificationWidth;
+    /**
+     * Показывать кнопку закрытия.
+     * @default true
+     */
+    showClose?: boolean;
+    /**
+     * Показывать кнопку копирования.
+     * @default false
+     */
+    showCopy?: boolean;
+    /**
+     * Вызывается после завершения exit-анимации при закрытии.
+     * @optional
+     */
+    onClose?: () => void;
+    /**
+     * Вызывается при нажатии на copy.
+     * @optional
+     */
+    onCopy?: () => void;
+    /**
+     * Aria-label для кнопки закрытия.
+     * По умолчанию из ConfigProvider locale (`notification.close`).
+     */
+    closeAriaLabel?: string;
+    /**
+     * Aria-label для кнопки копирования.
+     * По умолчанию из ConfigProvider locale (`notification.copy`).
+     */
+    copyAriaLabel?: string;
+    /**
+     * Основная action-кнопка (Button secondary, size s — 32px).
+     * @optional
+     */
+    primaryAction?: NotificationPrimaryAction;
+    /**
+     * Дополнительная action-кнопка (Button tertiary, size s — 32px).
+     * @optional
+     */
+    secondaryAction?: NotificationSecondaryAction;
+    /**
+     * Ссылка под текстом (Button.Link).
+     * @optional
+     */
+    linkProps?: LinkButtonProps;
+    /** CSS-классы для частей компонента. */
+    classNames?: Partial<Record<NotificationField, string>>;
+    /** Inline-стили корневого контейнера (не путать с prop `style`). */
+    rootStyle?: CSSProperties;
+    /** data-testid корневого элемента. @default 'notification' */
+    'data-testid'?: string;
+}
+/**
+ * Internal / Storybook / Visual QA props.
+ * Не входят в публичный `NotificationProps` и не экспортируются из package index.
+ *
+ * @internal
+ */
+export type NotificationReferenceProps = {
+    /**
+     * Компоновка guidelines/Figma reference: title+body в одном stack.
+     * @default false
+     */
+    referenceComposition?: boolean;
+    /**
+     * В referenceComposition: close/copy в колонке справа (Figma 326×80.34).
+     * @default false
+     */
+    referenceControlsColumn?: boolean;
+    /**
+     * Масштаб guidelines instance (padding/типографика/controls + fixed geometry).
+     */
+    referenceGuidelinesScale?: 'desktop' | '326' | '287';
+};
+/** Полные props реализации (публичные + reference). @internal */
+export type NotificationComponentProps = NotificationProps & NotificationReferenceProps;
+export {};

package/dist/components/Notification/NotificationControls.d.ts

@@ -0,0 +1,21 @@
+export type NotificationControlsProps = {
+    showClose: boolean;
+    showCopy: boolean;
+    closeAriaLabel: string;
+    copyAriaLabel: string;
+    iconSize?: number;
+    /** Порядок: close→copy (reference column) или copy→close (header). */
+    order?: 'close-first' | 'copy-first';
+    column?: boolean;
+    aside?: boolean;
+    className?: string;
+    dataTestId: string;
+    onClose: () => void;
+    onCopy?: () => void;
+};
+/**
+ * Кнопки close/copy уведомления.
+ *
+ * @param props - {@link NotificationControlsProps}
+ */
+export declare function NotificationControls({ showClose, showCopy, closeAriaLabel, copyAriaLabel, iconSize, order, column, aside, className, dataTestId, onClose, onCopy, }: NotificationControlsProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Notification/NotificationControls.js

@@ -0,0 +1,70 @@
+import { jsx as t, jsxs as c, Fragment as d } from "react/jsx-runtime";
+import { clsx as C } from "clsx";
+import { CrossOutlined as g, CopyOutlined as j } from "../Icon/categories/general.js";
+import e from "./Notification.module.css.js";
+function $({
+  showClose: r,
+  showCopy: o,
+  closeAriaLabel: u,
+  copyAriaLabel: f,
+  iconSize: l = 16,
+  order: m = "copy-first",
+  column: p = !1,
+  aside: y = !1,
+  className: b,
+  dataTestId: n,
+  onClose: x,
+  onCopy: i
+}) {
+  if (!r && !o)
+    return null;
+  const s = r ? /* @__PURE__ */ t(
+    g,
+    {
+      as: "button",
+      type: "button",
+      iconSize: l,
+      mode: "tertiary",
+      style: "neutral",
+      padding: 4,
+      "aria-label": u,
+      "data-testid": `${n}-close`,
+      onClick: x
+    }
+  ) : null, a = o ? /* @__PURE__ */ t(
+    j,
+    {
+      as: "button",
+      type: "button",
+      iconSize: l,
+      mode: "tertiary",
+      style: "neutral",
+      padding: 6,
+      "aria-label": f,
+      "data-testid": `${n}-copy`,
+      disabled: !i,
+      onClick: i
+    }
+  ) : null;
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: C(
+        e.controls,
+        p && e.referenceControlsColumn,
+        y && e.referenceRootAside,
+        b
+      ),
+      children: m === "close-first" ? /* @__PURE__ */ c(d, { children: [
+        s,
+        a
+      ] }) : /* @__PURE__ */ c(d, { children: [
+        a,
+        s
+      ] })
+    }
+  );
+}
+export {
+  $ as NotificationControls
+};

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

@@ -0,0 +1,2 @@
+export { Notification } from './Notification';
+export type { NotificationPlatform, NotificationPrimaryAction, NotificationProps, NotificationSecondaryAction, NotificationStyle, NotificationWidth, } from './Notification.type';