@koslibs/components 1.11.1 → 1.13.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @koslibs/components
 
+## 1.13.0
+
+### Minor Changes
+
+- [#15](https://github.com/koslibs/components/pull/15) [`061457d`](https://github.com/koslibs/components/commit/061457d29c63e8fc4ad1929d7c7ca2b9fffae075) Thanks [@holypower777](https://github.com/holypower777)! - Установлен курсор `not-allowed` для disabled-состояний Button и Tab. У Input, Textarea и Select курсор применяется ко всему компоненту, включая внешние подписи и подсказки. У Select disabled имеет приоритет над readOnly.
+
+    Добавлен Sidepanel: панель шириной 500 px с выездом и уходом справа, бекдропом Modal, Header с необязательным заголовком и hasCloser, прокручиваемым Content и Footer только для Button. Поддержаны строковая и вертикальная раскладки кнопок, управляемое закрытие, удержание и возврат фокуса, Portal и блокировка прокрутки до завершения анимации. Добавлены Storybook, типы, тесты и отдельный импорт.
+
+    Общая блокировка прокрутки Modal и Sidepanel вынесена в src/utils/lock-scroll.ts. Она сохраняет положение страницы при временном снятии scrollbar-gutter, чтобы панель доходила до края окна.
+
+    Пустой Header Sidepanel не занимает места. Скроллбар показывает только слайдер без стрелок и фона. Footer поддерживает sticky с дефолтом true; при false кнопки прокручиваются вместе с содержимым. Переключение режима выполнено через классы CSS Modules без служебного data-атрибута.
+
+    Footer Sidepanel принимает компоненты ComponentType<ButtonProps>: обязательный primary справа и необязательный secondary слева. Внешний вид кнопок задаётся снаружи. gap принимает 12/16/24/32 с дефолтом 12; layout — start/end/center/space-between/column с дефолтом space-between.
+
+## 1.12.0
+
+### Minor Changes
+
+- [#14](https://github.com/koslibs/components/pull/14) [`242a16c`](https://github.com/koslibs/components/commit/242a16ca5c8ba04bdfab319bf75752a9c4b62826) Thanks [@holypower777](https://github.com/holypower777)! - Добавлен проп `hasOutline` для Input, Textarea, Select и Collapse. Outline при фокусе и раскрытии Select теперь включается явно через `hasOutline={true}`; по умолчанию он выключен. Для отключения используется `hasOutline={false}`. Select передаёт настройку поисковому Input. В Storybook добавлены переключатели и примеры.
+
 ## 1.11.1
 
 ### Patch Changes

package/dist/components/Button/index_module.css

@@ -21,6 +21,10 @@
   transition: background-color .1s ease-in-out, color .1s ease-in-out, box-shadow .1s ease-in-out;
   display: inline-flex;
   position: relative;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
 }
 
 .size-32-oD8MDp {

package/dist/components/Collapse/collapse.d.ts

@@ -27,6 +27,11 @@ export type CollapseProps = Omit<HTMLAttributes<HTMLDivElement>, 'onTransitionEn
      * @default false
      */
     showLeftChevron?: boolean;
+    /**
+     * Показывает outline кнопки при клавиатурном фокусе.
+     * @default false
+     */
+    hasOutline?: boolean;
     /**
      * Запрос изменения состояния. В controlled-режиме обновите expanded.
      */
@@ -72,6 +77,11 @@ export declare const Collapse: import("react").ForwardRefExoticComponent<Omit<HT
      * @default false
      */
     showLeftChevron?: boolean;
+    /**
+     * Показывает outline кнопки при клавиатурном фокусе.
+     * @default false
+     */
+    hasOutline?: boolean;
     /**
      * Запрос изменения состояния. В controlled-режиме обновите expanded.
      */

package/dist/components/Collapse/collapse.js

@@ -4,7 +4,7 @@ import classnames from "classnames";
 import { forwardRef, useId, useLayoutEffect, useRef, useState } from "react";
 import { TypographyText } from "../Typography/text.js";
 import index_module from "./index.module.js";
-const Collapse = /*#__PURE__*/ forwardRef(({ expanded, defaultExpanded = false, collapsedLabel, expandedLabel, showRightChevron = true, showLeftChevron = false, onExpandedChange, onTransitionEnd, expandedContentClassName, dataTestId, className, children, ...restProps }, ref)=>{
+const Collapse = /*#__PURE__*/ forwardRef(({ expanded, defaultExpanded = false, collapsedLabel, expandedLabel, showRightChevron = true, showLeftChevron = false, hasOutline = false, onExpandedChange, onTransitionEnd, expandedContentClassName, dataTestId, className, children, ...restProps }, ref)=>{
     const [expandedState, setExpandedState] = useState(defaultExpanded);
     const isExpanded = expanded ?? expandedState;
     const contentId = `collapse-${useId()}`;
@@ -51,6 +51,7 @@ const Collapse = /*#__PURE__*/ forwardRef(({ expanded, defaultExpanded = false,
         ...restProps,
         ref: ref,
         className: classnames(index_module.component, className),
+        "data-has-outline": hasOutline || void 0,
         "data-test-id": dataTestId,
         children: [
             label && /*#__PURE__*/ jsxs("button", {

package/dist/components/Collapse/index_module.css

@@ -37,6 +37,7 @@
   cursor: pointer;
   background: none;
   border: 0;
+  outline: none;
   display: inline-flex;
 
   &:hover {
@@ -47,12 +48,12 @@
     text-underline-offset: 3px;
     text-decoration: underline;
   }
+}
 
-  &:focus-visible {
-    outline: 2px solid var(--collapse-focus-color);
-    outline-offset: 2px;
-    border-radius: var(--border-radius-4, 4px);
-  }
+.component-tPiInR[data-has-outline] .toggle-YA8uJB:focus-visible {
+  outline: 2px solid var(--collapse-focus-color);
+  outline-offset: 2px;
+  border-radius: var(--border-radius-4, 4px);
 }
 
 .icon-wFeaQN {

package/dist/components/Input/index_module.css

@@ -42,6 +42,7 @@
     --field-label-color: var(--input-disabled-color);
     --field-placeholder-color: var(--input-disabled-color);
     --field-icon-color: var(--input-disabled-color);
+    cursor: not-allowed;
   }
 }
 
@@ -100,13 +101,13 @@
   }
 }
 
-.component-aUdiT5:not([data-disabled]) .field-MFnvYv:focus-within {
+.component-aUdiT5[data-has-outline]:not([data-disabled]) .field-MFnvYv:focus-within {
   box-shadow: none;
   outline: 2px solid var(--input-focus-border-color);
   outline-offset: 0;
 }
 
-.component-aUdiT5[data-error]:not([data-disabled]) .field-MFnvYv:focus-within {
+.component-aUdiT5[data-has-outline][data-error]:not([data-disabled]) .field-MFnvYv:focus-within {
   outline-color: var(--input-error-border-color);
 }
 
@@ -274,11 +275,6 @@
     color: var(--field-icon-color);
   }
 
-  &:focus-visible {
-    outline: 2px solid var(--input-focus-border-color);
-    outline-offset: 2px;
-  }
-
   & svg {
     width: var(--input-icon-size);
     height: var(--input-icon-size);
@@ -286,6 +282,11 @@
   }
 }
 
+.component-aUdiT5[data-has-outline] .clear-A5Krz8:focus-visible {
+  outline: 2px solid var(--input-focus-border-color);
+  outline-offset: 2px;
+}
+
 .component-aUdiT5 .message-ArUnJU {
   color: var(--input-hint-color);
   overflow-wrap: anywhere;

package/dist/components/Input/input.d.ts

@@ -7,6 +7,7 @@ export declare const Input: import("react").ForwardRefExoticComponent<Omit<impor
     view?: "primary" | "secondary";
     size?: 40 | 48 | 56 | 64 | 72;
     block?: boolean;
+    hasOutline?: boolean;
     label?: import("react").ReactNode;
     labelView?: "outer" | "inner";
     hint?: import("react").ReactNode;

package/dist/components/Input/input.js

@@ -6,7 +6,7 @@ import { useDataTestId } from "../../hooks/use-data-test-id.js";
 import { Button } from "../Button/index.js";
 import { TypographyText } from "../Typography/text.js";
 import index_module from "./index.module.js";
-const Input = /*#__PURE__*/ forwardRef(({ view = 'primary', size = 40, block = false, label, labelView = 'outer', hint, error, leftAddon, rightAddon, clear = false, clearLabel = 'Очистить поле', value, defaultValue, maxLength, showValueLength = false, onChange, onClear, disabled = false, readOnly = false, type = 'text', id, className, style, fieldClassName, inputClassName, labelClassName, messageClassName, dataTestId, ...restProps }, ref)=>{
+const Input = /*#__PURE__*/ forwardRef(({ view = 'primary', size = 40, block = false, hasOutline = false, label, labelView = 'outer', hint, error, leftAddon, rightAddon, clear = false, clearLabel = 'Очистить поле', value, defaultValue, maxLength, showValueLength = false, onChange, onClear, disabled = false, readOnly = false, type = 'text', id, className, style, fieldClassName, inputClassName, labelClassName, messageClassName, dataTestId, ...restProps }, ref)=>{
     const generatedId = useId();
     const inputId = id ?? generatedId;
     const inputRef = useRef(null);
@@ -92,6 +92,7 @@ const Input = /*#__PURE__*/ forwardRef(({ view = 'primary', size = 40, block = f
         style: style,
         "data-view": view,
         "data-block": block || void 0,
+        "data-has-outline": hasOutline || void 0,
         "data-disabled": disabled || void 0,
         "data-read-only": readOnly || void 0,
         "data-error": hasError || void 0,

package/dist/components/Input/types.d.ts

@@ -35,6 +35,11 @@ export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'v
      * @default false
      */
     block?: boolean;
+    /**
+     * Показывает outline при фокусе.
+     * @default false
+     */
+    hasOutline?: boolean;
     /**
      * Название поля. Связывается с input через htmlFor и id.
      */

package/dist/components/Modal/components/modal-surface/index.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef } from "react";
+import { lockScroll } from "../../../../utils/lock-scroll.js";
 import { ModalContext } from "../../context.js";
-import { lockScroll } from "../../utils/lock-scroll.js";
 import colors_module from "../../colors.module.js";
 import index_module from "../../index.module.js";
 const ModalSurface = /*#__PURE__*/ forwardRef(({ onClose, size = 720, escapeKeyDown = true, backdropClick = true, lockScroll: shouldLockScroll = true, className, dataTestId, children, onPointerDown, onClick, ...restProps }, ref)=>{

package/dist/components/Select/components/select-dropdown.d.ts

@@ -1,7 +1,7 @@
 import type { SelectState } from '../hooks/use-select-state.js';
 import type { SelectProps } from '../types.js';
-type Props = Pick<SelectProps, 'multiple' | 'searchable' | 'searchPlaceholder' | 'noResultsText' | 'dataTestId'> & {
+type Props = Pick<SelectProps, 'multiple' | 'searchable' | 'searchPlaceholder' | 'noResultsText' | 'dataTestId' | 'hasOutline'> & {
     state: SelectState;
 };
-export declare function SelectDropdown({ state, multiple, searchable, searchPlaceholder, noResultsText, dataTestId, }: Props): import("react").JSX.Element;
+export declare function SelectDropdown({ state, multiple, searchable, hasOutline, searchPlaceholder, noResultsText, dataTestId, }: Props): import("react").JSX.Element;
 export {};

package/dist/components/Select/components/select-dropdown.js

@@ -7,7 +7,7 @@ import { useDataTestId } from "../../../hooks/use-data-test-id.js";
 import { Input } from "../../Input/index.js";
 import { TypographyText } from "../../Typography/text.js";
 import index_module from "../index.module.js";
-function SelectDropdown({ state, multiple, searchable, searchPlaceholder = 'Поиск по списку', noResultsText = 'Ничего не найдено', dataTestId }) {
+function SelectDropdown({ state, multiple, searchable, hasOutline, searchPlaceholder = 'Поиск по списку', noResultsText = 'Ничего не найдено', dataTestId }) {
     const getDataTestId = useDataTestId(dataTestId);
     const { options, selectedIds, search, activeId, setSearch, handleKeyDown, select } = state;
     const activeOptionRef = useRef(null);
@@ -23,6 +23,7 @@ function SelectDropdown({ state, multiple, searchable, searchPlaceholder = 'По
             searchable && /*#__PURE__*/ jsx(Input, {
                 block: true,
                 autoFocus: true,
+                hasOutline: hasOutline,
                 size: 40,
                 view: "secondary",
                 value: search,

package/dist/components/Select/index_module.css

@@ -41,6 +41,7 @@
     --field-icon-color: var(--select-disabled-color);
     --field-placeholder-color: var(--select-disabled-color);
     --field-border: transparent;
+    cursor: not-allowed;
   }
 }
 
@@ -89,13 +90,13 @@
   }
 }
 
-.component-cM8DTg:not(.disabled-fZIeN_) .field-jGXYY5:focus-within, .component-cM8DTg.open-CCkiBd .field-jGXYY5 {
+.component-cM8DTg[data-has-outline]:not(.disabled-fZIeN_) .field-jGXYY5:focus-within, .component-cM8DTg[data-has-outline].open-CCkiBd .field-jGXYY5 {
   box-shadow: none;
   outline: 2px solid var(--select-focus-border-color);
   outline-offset: 0;
 }
 
-.component-cM8DTg.error-TrKhzv:not(.disabled-fZIeN_) .field-jGXYY5:focus-within, .component-cM8DTg.error-TrKhzv.open-CCkiBd .field-jGXYY5 {
+.component-cM8DTg[data-has-outline].error-TrKhzv:not(.disabled-fZIeN_) .field-jGXYY5:focus-within, .component-cM8DTg[data-has-outline].error-TrKhzv.open-CCkiBd .field-jGXYY5 {
   outline-color: var(--select-error-border-color);
 }
 
@@ -204,11 +205,11 @@
   }
 }
 
-.component-cM8DTg.disabled-fZIeN_ .trigger-nKdmww {
+.component-cM8DTg.disabled-fZIeN_ .trigger-nKdmww, .component-cM8DTg.disabled-fZIeN_ .label-rrakc7 {
   cursor: not-allowed;
 }
 
-.component-cM8DTg.readOnly-zwkIeK .trigger-nKdmww {
+.component-cM8DTg.readOnly-zwkIeK:not(.disabled-fZIeN_) .trigger-nKdmww {
   cursor: default;
 }
 

package/dist/components/Select/select.js

@@ -22,7 +22,7 @@ const dropdownOffset = [
     8
 ];
 const Select = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { view = 'primary', size = 40, label, labelView = 'outer', block = false, placeholder = 'Выберите значение', hint, error, clear = false, disabled = false, readOnly = false, className, style, labelClassName, messageClassName, dropdownClassName, dataTestId, id, name, form, onClear: _onClear, getPortalContainer, options: _options, multiple, value: _value, defaultValue: _defaultValue, onChange: _onChange, searchable, searchPlaceholder, open: _open, defaultOpen: _defaultOpen, onOpenChange: _onOpenChange, noResultsText, ...buttonProps } = props;
+    const { view = 'primary', size = 40, label, labelView = 'outer', block = false, hasOutline = false, placeholder = 'Выберите значение', hint, error, clear = false, disabled = false, readOnly = false, className, style, labelClassName, messageClassName, dropdownClassName, dataTestId, id, name, form, onClear: _onClear, getPortalContainer, options: _options, multiple, value: _value, defaultValue: _defaultValue, onChange: _onChange, searchable, searchPlaceholder, open: _open, defaultOpen: _defaultOpen, onOpenChange: _onOpenChange, noResultsText, ...buttonProps } = props;
     const generatedId = useId();
     const triggerId = id ?? generatedId;
     const getDataTestId = useDataTestId(dataTestId);
@@ -48,6 +48,7 @@ const Select = /*#__PURE__*/ forwardRef((props, ref)=>{
             [index_module.labelRaised]: innerLabel && raisedLabel
         }, className),
         style: style,
+        "data-has-outline": hasOutline || void 0,
         "data-test-id": getDataTestId('form-control'),
         children: [
             hasLabel && 'outer' === labelView && /*#__PURE__*/ jsx("label", {
@@ -149,6 +150,7 @@ const Select = /*#__PURE__*/ forwardRef((props, ref)=>{
                     state: state,
                     multiple: multiple,
                     searchable: searchable,
+                    hasOutline: hasOutline,
                     searchPlaceholder: searchPlaceholder,
                     noResultsText: noResultsText,
                     dataTestId: dataTestId

package/dist/components/Select/types.d.ts

@@ -27,7 +27,7 @@ export type SelectChangePayload<Value = string | null> = {
      */
     selectedOptions: SelectOption[];
 };
-type CommonProps = Pick<InputProps, 'view' | 'size' | 'block' | 'hint' | 'error' | 'clear' | 'className' | 'style' | 'labelClassName' | 'messageClassName'> & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'defaultValue' | 'onChange' | 'children' | 'name' | 'type' | 'className' | 'style'> & {
+type CommonProps = Pick<InputProps, 'view' | 'size' | 'block' | 'hasOutline' | 'hint' | 'error' | 'clear' | 'className' | 'style' | 'labelClassName' | 'messageClassName'> & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'defaultValue' | 'onChange' | 'children' | 'name' | 'type' | 'className' | 'style'> & {
     /**
      * Варианты с уникальными id. Порядок строк сохраняется при выборе.
      */

package/dist/components/Sidepanel/components/content/index.d.ts

@@ -0,0 +1,13 @@
+import { type HTMLAttributes } from 'react';
+export type ContentProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Базовый идентификатор части -content. По умолчанию наследуется от Sidepanel.
+     */
+    dataTestId?: string;
+};
+export declare const Content: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Базовый идентификатор части -content. По умолчанию наследуется от Sidepanel.
+     */
+    dataTestId?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Sidepanel/components/content/index.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef, useContext } from "react";
+import { useDataTestId } from "../../../../hooks/use-data-test-id.js";
+import { SidepanelContext } from "../../context.js";
+import index_module from "../../index.module.js";
+import scrollbar_module from "../../scrollbar.module.js";
+import index_module_0 from "./index.module.js";
+const Content = /*#__PURE__*/ forwardRef(({ className, dataTestId, children, ...restProps }, ref)=>{
+    const { dataTestId: panelDataTestId } = useContext(SidepanelContext);
+    const getDataTestId = useDataTestId(dataTestId ?? panelDataTestId);
+    return /*#__PURE__*/ jsx("div", {
+        ...restProps,
+        ref: ref,
+        className: classnames(index_module_0.component, index_module.content, scrollbar_module.scrollbar, className),
+        "data-test-id": getDataTestId('content'),
+        children: children
+    });
+});
+Content.displayName = 'SidepanelContent';
+export { Content };

package/dist/components/Sidepanel/components/content/index.module.js

@@ -0,0 +1,5 @@
+import "./index_module.css";
+const index_module = {
+    component: "component-vYcjBo"
+};
+export default index_module;

package/dist/components/Sidepanel/components/content/index_module.css

@@ -0,0 +1,14 @@
+.component-vYcjBo {
+  box-sizing: border-box;
+  gap: var(--size-16);
+  min-width: 0;
+  min-height: 0;
+  padding: var(--sidepanel-padding);
+  overscroll-behavior: contain;
+  overflow-wrap: anywhere;
+  flex-direction: column;
+  flex: auto;
+  display: flex;
+  overflow: auto;
+}
+

package/dist/components/Sidepanel/components/footer/index.d.ts

@@ -0,0 +1,66 @@
+import { type ComponentType, type HTMLAttributes } from 'react';
+import type { ButtonProps } from '../../../Button/index.js';
+export type FooterProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'dangerouslySetInnerHTML'> & {
+    /**
+     * Компонент основной кнопки. Обязателен; располагается после secondary (справа в строке).
+     * Внешний вид и обработчики задаются внутри переданного компонента.
+     */
+    primary: ComponentType<ButtonProps>;
+    /**
+     * Компонент вторичной кнопки. Располагается перед primary (слева в строке).
+     * Не выводится, если проп не передан.
+     */
+    secondary?: ComponentType<ButtonProps>;
+    /**
+     * Минимальное расстояние между кнопками в пикселях из общей шкалы отступов.
+     * @default 12
+     */
+    gap?: 12 | 16 | 24 | 32;
+    /**
+     * Оставляет кнопки видимыми при прокрутке. При false Footer прокручивается с Content.
+     * @default true
+     */
+    sticky?: boolean;
+    /**
+     * Выравнивание кнопок. В space-between кнопки находятся у противоположных краёв,
+     * единственная primary — справа. В column secondary находится над primary.
+     * @default 'space-between'
+     */
+    layout?: 'start' | 'end' | 'center' | 'space-between' | 'column';
+    /**
+     * Базовый идентификатор части -footer. По умолчанию наследуется от Sidepanel.
+     */
+    dataTestId?: string;
+};
+export declare const Footer: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "dangerouslySetInnerHTML"> & {
+    /**
+     * Компонент основной кнопки. Обязателен; располагается после secondary (справа в строке).
+     * Внешний вид и обработчики задаются внутри переданного компонента.
+     */
+    primary: ComponentType<ButtonProps>;
+    /**
+     * Компонент вторичной кнопки. Располагается перед primary (слева в строке).
+     * Не выводится, если проп не передан.
+     */
+    secondary?: ComponentType<ButtonProps>;
+    /**
+     * Минимальное расстояние между кнопками в пикселях из общей шкалы отступов.
+     * @default 12
+     */
+    gap?: 12 | 16 | 24 | 32;
+    /**
+     * Оставляет кнопки видимыми при прокрутке. При false Footer прокручивается с Content.
+     * @default true
+     */
+    sticky?: boolean;
+    /**
+     * Выравнивание кнопок. В space-between кнопки находятся у противоположных краёв,
+     * единственная primary — справа. В column secondary находится над primary.
+     * @default 'space-between'
+     */
+    layout?: "start" | "end" | "center" | "space-between" | "column";
+    /**
+     * Базовый идентификатор части -footer. По умолчанию наследуется от Sidepanel.
+     */
+    dataTestId?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Sidepanel/components/footer/index.js

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef, useContext } from "react";
+import { useDataTestId } from "../../../../hooks/use-data-test-id.js";
+import { SidepanelContext } from "../../context.js";
+import index_module from "../../index.module.js";
+import index_module_0 from "./index.module.js";
+const Footer = /*#__PURE__*/ forwardRef(({ primary: Primary, secondary: Secondary, gap = 12, sticky = true, layout = 'space-between', className, dataTestId, ...restProps }, ref)=>{
+    const { dataTestId: panelDataTestId } = useContext(SidepanelContext);
+    const getDataTestId = useDataTestId(dataTestId ?? panelDataTestId);
+    return /*#__PURE__*/ jsxs("div", {
+        ...restProps,
+        ref: ref,
+        className: classnames(index_module_0.component, index_module_0[layout], index_module_0[`gap-${gap}`], {
+            [index_module.nonStickyFooter]: !sticky
+        }, className),
+        "data-test-id": getDataTestId('footer'),
+        children: [
+            Secondary && /*#__PURE__*/ jsx(Secondary, {}),
+            /*#__PURE__*/ jsx(Primary, {})
+        ]
+    });
+});
+Footer.displayName = 'SidepanelFooter';
+export { Footer };

package/dist/components/Sidepanel/components/footer/index.module.js

@@ -0,0 +1,19 @@
+import "./index_module.css";
+const index_module = {
+    component: "component-skRGIM",
+    column: "column-eFrOSV",
+    start: "start-AsGQua",
+    end: "end-GUmizA",
+    center: "center-ZCtISA",
+    "space-between": "space-between-JgT7jT",
+    spaceBetween: "space-between-JgT7jT",
+    "gap-12": "gap-12-vpXLHP",
+    gap12: "gap-12-vpXLHP",
+    "gap-16": "gap-16-YnuaQb",
+    gap16: "gap-16-YnuaQb",
+    "gap-24": "gap-24-Z4lCD9",
+    gap24: "gap-24-Z4lCD9",
+    "gap-32": "gap-32-dJPD9x",
+    gap32: "gap-32-dJPD9x"
+};
+export default index_module;

package/dist/components/Sidepanel/components/footer/index_module.css

@@ -0,0 +1,57 @@
+.component-skRGIM {
+  box-sizing: border-box;
+  padding: var(--sidepanel-padding);
+  flex-shrink: 0;
+  align-items: center;
+  display: flex;
+}
+
+.component-skRGIM:not(.column-eFrOSV) > button[data-block="true"] {
+  flex: 1 1 0;
+}
+
+.start-AsGQua {
+  justify-content: flex-start;
+}
+
+.end-GUmizA {
+  justify-content: flex-end;
+}
+
+.center-ZCtISA {
+  justify-content: center;
+}
+
+.space-between-JgT7jT {
+  justify-content: space-between;
+}
+
+.space-between-JgT7jT > :only-child {
+  margin-left: auto;
+}
+
+.column-eFrOSV {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.column-eFrOSV > button {
+  width: 100%;
+}
+
+.gap-12-vpXLHP {
+  gap: var(--size-12);
+}
+
+.gap-16-YnuaQb {
+  gap: var(--size-16);
+}
+
+.gap-24-Z4lCD9 {
+  gap: var(--size-24);
+}
+
+.gap-32-dJPD9x {
+  gap: var(--size-32);
+}
+

package/dist/components/Sidepanel/components/header/index.d.ts

@@ -0,0 +1,33 @@
+import { type HTMLAttributes } from 'react';
+export type HeaderProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'> & {
+    /**
+     * Необязательный заголовок панели. Без заголовка и крестика Header не выводится.
+     */
+    title?: string;
+    /**
+     * Показывает крестик, который вызывает onClose ближайшего Sidepanel.
+     * @default true
+     */
+    hasCloser?: boolean;
+    /**
+     * Базовый идентификатор частей -header и -closer.
+     * По умолчанию наследуется от Sidepanel.
+     */
+    dataTestId?: string;
+};
+export declare const Header: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "title"> & {
+    /**
+     * Необязательный заголовок панели. Без заголовка и крестика Header не выводится.
+     */
+    title?: string;
+    /**
+     * Показывает крестик, который вызывает onClose ближайшего Sidepanel.
+     * @default true
+     */
+    hasCloser?: boolean;
+    /**
+     * Базовый идентификатор частей -header и -closer.
+     * По умолчанию наследуется от Sidepanel.
+     */
+    dataTestId?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Sidepanel/components/header/index.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CrossHeavyMIcon } from "@koslibs/icons/CrossHeavyMIcon";
+import classnames from "classnames";
+import { forwardRef, useContext } from "react";
+import { useDataTestId } from "../../../../hooks/use-data-test-id.js";
+import { Button } from "../../../Button/index.js";
+import { TypographyText } from "../../../Typography/index.js";
+import { SidepanelContext } from "../../context.js";
+import index_module from "../../index.module.js";
+import index_module_0 from "./index.module.js";
+const Header = /*#__PURE__*/ forwardRef(({ title, hasCloser = true, className, dataTestId, ...restProps }, ref)=>{
+    const { onClose, dataTestId: panelDataTestId } = useContext(SidepanelContext);
+    const getDataTestId = useDataTestId(dataTestId ?? panelDataTestId);
+    if (!title?.trim() && !hasCloser) return null;
+    return /*#__PURE__*/ jsxs("div", {
+        ...restProps,
+        ref: ref,
+        className: classnames(index_module_0.component, index_module.header, className),
+        "data-test-id": getDataTestId('header'),
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: index_module_0.title,
+                children: title && /*#__PURE__*/ jsx(TypographyText, {
+                    size: 20,
+                    weight: "semibold",
+                    children: title
+                })
+            }),
+            hasCloser && /*#__PURE__*/ jsx(Button, {
+                size: 32,
+                view: "transparent",
+                className: index_module_0.closer,
+                labelClassName: index_module_0.closerLabel,
+                onClick: onClose,
+                dataTestId: getDataTestId('closer'),
+                children: /*#__PURE__*/ jsx(CrossHeavyMIcon, {
+                    width: 24,
+                    height: 24
+                })
+            })
+        ]
+    });
+});
+Header.displayName = 'SidepanelHeader';
+export { Header };

package/dist/components/Sidepanel/components/header/index.module.js

@@ -0,0 +1,8 @@
+import "./index_module.css";
+const index_module = {
+    component: "component-pnHhxm",
+    title: "title-nolsR9",
+    closer: "closer-PhFI6O",
+    closerLabel: "closerLabel-q4m2AK"
+};
+export default index_module;