From 49a76654186fa9cce5c90622e2efe289dec98c05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A2=D0=B8=D0=BC=D1=83=D1=80=20=D0=93=D0=BE=D1=80=D0=BE?=
 =?UTF-8?q?=D0=B4=D0=B5=D1=86=D0=BA=D0=B8=D0=B9?=
 <gorodetskiy.timur@tnsu.kz>
Date: Mon, 17 Aug 2026 09:18:18 +0500
Subject: [PATCH] feat: FormHeader (0.6.0)

---
 package.json                          |  2 +-
 src/FormHeader/FormHeader.module.scss | 48 +++++++++++++++++++++++++++
 src/FormHeader/FormHeader.stories.tsx | 26 +++++++++++++++
 src/FormHeader/FormHeader.tsx         | 24 ++++++++++++++
 src/index.ts                          |  2 ++
 5 files changed, 101 insertions(+), 1 deletion(-)
 create mode 100644 src/FormHeader/FormHeader.module.scss
 create mode 100644 src/FormHeader/FormHeader.stories.tsx
 create mode 100644 src/FormHeader/FormHeader.tsx

diff --git a/package.json b/package.json
index 47ce760..d527303 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tnsu/ui-kit",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "TNSU shared UI components for SPFx web parts",
   "author": "Timur Gorodetskiy",
   "license": "ISC",
diff --git a/src/FormHeader/FormHeader.module.scss b/src/FormHeader/FormHeader.module.scss
new file mode 100644
index 0000000..c608913
--- /dev/null
+++ b/src/FormHeader/FormHeader.module.scss
@@ -0,0 +1,48 @@
+@import '../tokens/tokens';
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: $sp-3;
+  padding: 14px 20px;
+  background: $navy-50;
+  border: 1px solid $navy-100;
+  border-left: 3px solid $gold-500; // фирменный золотой акцент
+  border-radius: $r-md;
+}
+
+.icon {
+  flex-shrink: 0;
+  color: $navy-700;
+}
+
+.title {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-family: $font-serif;
+  font-size: $fs-section-title;
+  font-weight: 600;
+  color: $navy-900;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.right {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: $sp-2;
+}
+
+// Мобилка: разрешаем перенос и заголовку, и правому слоту — ничего не обрезается.
+@include below($bp-sm) {
+  .header {
+    flex-wrap: wrap;
+    padding: 12px 14px;
+  }
+
+  .title {
+    white-space: normal;
+  }
+}
diff --git a/src/FormHeader/FormHeader.stories.tsx b/src/FormHeader/FormHeader.stories.tsx
new file mode 100644
index 0000000..c8e0e7d
--- /dev/null
+++ b/src/FormHeader/FormHeader.stories.tsx
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { FormHeader } from './FormHeader';
+import { Badge } from '../Badge/Badge';
+
+const meta: Meta<typeof FormHeader> = {
+  title: 'Формы/FormHeader',
+  component: FormHeader,
+  tags: ['autodocs'],
+  args: { title: 'Сравнительная таблица №1' }
+};
+
+export default meta;
+type Story = StoryObj<typeof FormHeader>;
+
+export const Basic: Story = {};
+
+export const WithStatus: Story = {
+  args: { right: <Badge variant="info">На согласовании</Badge> }
+};
+
+export const LongTitle: Story = {
+  args: {
+    title: 'Сравнительная таблица по закупке материалов для строительства жилого дома в п. Топар',
+    right: <Badge variant="success">Согласована</Badge>
+  }
+};
diff --git a/src/FormHeader/FormHeader.tsx b/src/FormHeader/FormHeader.tsx
new file mode 100644
index 0000000..e15c093
--- /dev/null
+++ b/src/FormHeader/FormHeader.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import styles from './FormHeader.module.scss';
+import { Icon } from '../Icon/Icon';
+import { IconName } from '../Icon/iconNames';
+
+export interface IFormHeaderProps {
+  title: React.ReactNode;
+  /** Иконка слева. По умолчанию 'document'. */
+  icon?: IconName;
+  /**
+   * Правый слот — обычно статус-бейдж (Badge), но может быть что угодно
+   * (номер, кнопки). Смысл статуса задаёт проект, FormHeader про него не знает.
+   */
+  right?: React.ReactNode;
+}
+
+/** Шапка формы: золотой акцент слева, иконка, заголовок и правый слот (статус). */
+export const FormHeader: React.FC<IFormHeaderProps> = ({ title, icon = 'document', right }) => (
+  <div className={styles.header}>
+    <Icon name={icon} className={styles.icon} />
+    <span className={styles.title}>{title}</span>
+    {right && <span className={styles.right}>{right}</span>}
+  </div>
+);
diff --git a/src/index.ts b/src/index.ts
index 51f7a36..325e897 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -14,6 +14,8 @@ export { Badge } from './Badge/Badge';
 export type { IBadgeProps, BadgeVariant } from './Badge/Badge';
 
 // --- Оболочка и раскладка формы ---
+export { FormHeader } from './FormHeader/FormHeader';
+export type { IFormHeaderProps } from './FormHeader/FormHeader';
 export { FormCard } from './FormCard/FormCard';
 export { FormGrid } from './FormGrid/FormGrid';
 export { FormField } from './FormField/FormField';