@chrome-consulting/krit-ui 0.0.49

package/dist/components/ui/number-input.d.ts

@@ -0,0 +1,149 @@
+/**
+ * @fileoverview Компонент NumberInput для ввода числовых значений со строгой валидацией
+ *
+ * Этот файл содержит реализацию компонента NumberInput, который предоставляет
+ * безопасную альтернативу обычному `<input type="number">`. Компонент обеспечивает:
+ * - Строгую валидацию только числовых символов
+ * - Автоматическую замену запятых на точки как десятичного разделителя
+ * - Контроль количества десятичных знаков
+ * - Предотвращение ввода множественных разделителей
+ * - Настраиваемую поддержку отрицательных чисел
+ */
+import * as React from 'react';
+/**
+ * Пропсы для компонента NumberInput
+ *
+ * @interface NumberInputProps
+ * @extends {Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'value'>}
+ */
+export type NumberInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'value'> & {
+    /** Иконка, отображаемая справа от поля ввода */
+    icon?: React.ReactNode;
+    /** Текущее значение поля. Может быть числом или строкой */
+    value?: number | string;
+    /**
+     * Колбэк, вызываемый при изменении значения
+     * @param value - новое числовое значение или null, если значение невалидно
+     */
+    onChange?: (value: number | null) => void;
+    /**
+     * Алиас для onChange. Используется для совместимости с другими компонентами
+     * @param value - новое числовое значение или null, если значение невалидно
+     */
+    onValueChange?: (value: number | null) => void;
+    /**
+     * Колбэк, вызываемый при нажатии клавиши Enter
+     * @param e - событие нажатия клавиши
+     */
+    onEnter?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Количество знаков после десятичной точки.
+     * При значении 0 десятичная точка не разрешена.
+     * @default 0
+     */
+    decimalPlaces?: number;
+    /**
+     * Разрешить ввод отрицательных чисел
+     * @default false
+     */
+    allowNegative?: boolean;
+};
+/**
+ * Компонент для ввода только числовых значений с строгой валидацией.
+ *
+ * Предоставляет безопасную альтернативу обычному `<input type="number">` с более
+ * предсказуемым поведением валидации и обработки десятичных разделителей.
+ * Автоматически заменяет запятые на точки для удобства пользователей.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Целые числа
+ * <NumberInput
+ *   value={count}
+ *   onChange={(value) => setCount(value)}
+ *   decimalPlaces={0}
+ * />
+ *
+ * // Денежные суммы (2 знака после запятой)
+ * // Пользователь может ввести как "12.34", так и "12,34" - оба варианта будут работать
+ * <NumberInput
+ *   value={price}
+ *   onChange={(value) => setPrice(value)}
+ *   decimalPlaces={2}
+ *   placeholder="0.00"
+ * />
+ *
+ * // Только положительные числа
+ * <NumberInput
+ *   value={quantity}
+ *   onChange={(value) => setQuantity(value)}
+ *   allowNegative={false}
+ *   decimalPlaces={0}
+ * />
+ * ```
+ *
+ * @param props - Пропсы компонента NumberInput
+ * @param ref - Ref для доступа к HTML input элементу
+ * @returns JSX элемент поля ввода для чисел
+ *
+ * @see {@link NumberInputProps} для описания всех доступных пропсов
+ *
+ * @public
+ */
+declare const NumberInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "value"> & {
+    /** Иконка, отображаемая справа от поля ввода */
+    icon?: React.ReactNode;
+    /** Текущее значение поля. Может быть числом или строкой */
+    value?: number | string;
+    /**
+     * Колбэк, вызываемый при изменении значения
+     * @param value - новое числовое значение или null, если значение невалидно
+     */
+    onChange?: (value: number | null) => void;
+    /**
+     * Алиас для onChange. Используется для совместимости с другими компонентами
+     * @param value - новое числовое значение или null, если значение невалидно
+     */
+    onValueChange?: (value: number | null) => void;
+    /**
+     * Колбэк, вызываемый при нажатии клавиши Enter
+     * @param e - событие нажатия клавиши
+     */
+    onEnter?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Количество знаков после десятичной точки.
+     * При значении 0 десятичная точка не разрешена.
+     * @default 0
+     */
+    decimalPlaces?: number;
+    /**
+     * Разрешить ввод отрицательных чисел
+     * @default false
+     */
+    allowNegative?: boolean;
+} & React.RefAttributes<HTMLInputElement>>;
+/**
+ * Экспортируемый компонент для ввода числовых значений.
+ *
+ * @example
+ * ```tsx
+ * import { NumberInput } from '@/shared/ui';
+ *
+ * function App() {
+ *   const [amount, setAmount] = useState<number | null>(null);
+ *
+ *   return (
+ *     <NumberInput
+ *       value={amount}
+ *       onChange={setAmount}
+ *       decimalPlaces={2}
+ *       placeholder="Введите сумму"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @public
+ */
+export { NumberInput };

package/dist/components/ui/page-layout.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+interface PageLayoutProps {
+    /** Слот для заголовка страницы */
+    headerSlot?: ReactNode;
+    /** Слот для фильтров */
+    filterSlot?: ReactNode;
+    /** Слот для основного контента */
+    contentSlot?: ReactNode;
+    /** Ограничить contentSlot по высоте (overflow-hidden) для внутренней прокрутки контента */
+    contentSlotOverflowHidden?: boolean;
+}
+/**
+ * Компонент макета страницы с предустановленными отступами и расположением элементов.
+ * Обеспечивает единообразную структуру страниц с заголовком, фильтрами и контентом.
+ *
+ * @component
+ * @param {PageLayoutProps} props - Пропсы компонента
+ * @returns {JSX.Element}
+ *
+ * @example
+ * <PageLayout
+ *   headerSlot={<PageHeader title="Заголовок" />}
+ *   filterSlot={<Filters />}
+ *   contentSlot={<Table />}
+ * />
+ */
+export declare const PageLayout: ({ headerSlot, filterSlot, contentSlot, contentSlotOverflowHidden, }: PageLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/page-view-mode-toggle.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Значения вкладок переключения вида «список с панелью» / «таблица».
+ */
+export declare const PAGE_VIEW_TAB: {
+    readonly LIST: "list";
+    readonly TABLE: "table";
+};
+export type PageViewTab = (typeof PAGE_VIEW_TAB)[keyof typeof PAGE_VIEW_TAB];
+export interface PageViewModeToggleProps {
+    /** Дополнительные классы для `TabsList` */
+    className?: string;
+    /** Подписи для доступности; по умолчанию ключи `listView` / `tableView` из ThemeProvider */
+    listAriaLabel?: string;
+    tableAriaLabel?: string;
+}
+/**
+ * Переключатель вида «список с панелью» / «таблица» для экранов с {@link PAGE_VIEW_TAB}.
+ * Размещается внутри родительского `Tabs` с соответствующим `value` и `onValueChange`.
+ *
+ * @component
+ */
+export declare const PageViewModeToggle: ({ className, listAriaLabel, tableAriaLabel, }: PageViewModeToggleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/pagination.d.ts

@@ -0,0 +1,121 @@
+export declare const DEFAULT_PAGE_SIZE_OPTIONS: number[];
+/**
+ * Свойства компонента пагинации
+ */
+export interface PaginationProps {
+    /** Горизонтальные отступы компонента */
+    horizontalPadding?: 'small' | 'medium' | 'large';
+    /** Дополнительные CSS-классы для контейнера */
+    className?: string;
+    /** Количество элементов на странице */
+    pageSize?: number;
+    /** Общее количество страниц */
+    pageCount?: number;
+    /** Индекс текущей страницы (начиная с 0) */
+    pageIndex?: number;
+    /** Возможность перейти на предыдущую страницу */
+    canPreviousPage?: boolean;
+    /** Возможность перейти на следующую страницу */
+    canNextPage?: boolean;
+    /** Количество выбранных элементов */
+    selectedCount?: number;
+    /** Общее количество элементов */
+    totalCount?: number;
+    /** Компактный режим без кнопок первой/последней страницы */
+    compact?: boolean;
+    /** Скрыть селектор размера страницы */
+    hideDisplayBy?: boolean;
+    /** Варианты количества элементов на странице для селектора «Показывать по» */
+    pageSizeOptions?: number[];
+    /** Обработчик перехода на предыдущую страницу */
+    previousPage?: () => void;
+    /** Обработчик перехода на следующую страницу */
+    nextPage?: () => void;
+    /** Обработчик изменения размера страницы */
+    setPageSize?: (value: number) => void;
+    /** Обработчик изменения индекса страницы */
+    setPageIndex?: (value: number) => void;
+}
+/**
+ * Компонент пагинации для навигации по страницам данных
+ * Поддерживает выбор размера страницы, отображение выбранных элементов и различные варианты отображения
+ *
+ * @component
+ * @param {PaginationProps} props - Параметры компонента
+ * @param {'small' | 'medium' | 'large'} [props.horizontalPadding='medium'] - Горизонтальные отступы компонента
+ * @param {string} [props.className] - Дополнительные CSS-классы для контейнера
+ * @param {number} [props.pageSize] - Количество элементов на странице
+ * @param {number} [props.pageCount=0] - Общее количество страниц
+ * @param {number} [props.pageIndex=0] - Индекс текущей страницы (начиная с 0)
+ * @param {boolean} [props.canPreviousPage] - Возможность перейти на предыдущую страницу
+ * @param {boolean} [props.canNextPage] - Возможность перейти на следующую страницу
+ * @param {number} [props.selectedCount] - Количество выбранных элементов
+ * @param {number} [props.totalCount] - Общее количество элементов
+ * @param {boolean} [props.compact=false] - Компактный режим без кнопок первой/последней страницы
+ * @param {boolean} [props.hideDisplayBy=false] - Скрыть селектор размера страницы
+ * @param {number[]} [props.pageSizeOptions=DEFAULT_PAGE_SIZE_OPTIONS] - Варианты размера страницы
+ * @param {function} [props.previousPage] - Обработчик перехода на предыдущую страницу
+ * @param {function} [props.nextPage] - Обработчик перехода на следующую страницу
+ * @param {function} [props.setPageSize] - Обработчик изменения размера страницы
+ * @param {function} [props.setPageIndex] - Обработчик изменения индекса страницы
+ * @returns {React.ReactElement} Компонент пагинации
+ *
+ * @example
+ * // Базовое использование
+ * <Pagination
+ *   pageSize={20}
+ *   pageCount={10}
+ *   pageIndex={0}
+ *   canPreviousPage={false}
+ *   canNextPage={true}
+ *   setPageSize={(size) => setPageSize(size)}
+ *   setPageIndex={(index) => setPageIndex(index)}
+ *   previousPage={() => setPageIndex(pageIndex - 1)}
+ *   nextPage={() => setPageIndex(pageIndex + 1)}
+ * />
+ *
+ * @example
+ * // С выбранными элементами
+ * <Pagination
+ *   pageSize={20}
+ *   pageCount={10}
+ *   pageIndex={2}
+ *   canPreviousPage={true}
+ *   canNextPage={true}
+ *   selectedCount={5}
+ *   totalCount={200}
+ *   setPageSize={(size) => setPageSize(size)}
+ *   setPageIndex={(index) => setPageIndex(index)}
+ *   previousPage={() => setPageIndex(pageIndex - 1)}
+ *   nextPage={() => setPageIndex(pageIndex + 1)}
+ * />
+ *
+ * @example
+ * // Компактный режим
+ * <Pagination
+ *   pageSize={20}
+ *   pageCount={10}
+ *   pageIndex={4}
+ *   canPreviousPage={true}
+ *   canNextPage={true}
+ *   compact={true}
+ *   setPageSize={(size) => setPageSize(size)}
+ *   setPageIndex={(index) => setPageIndex(index)}
+ *   previousPage={() => setPageIndex(pageIndex - 1)}
+ *   nextPage={() => setPageIndex(pageIndex + 1)}
+ * />
+ *
+ * @example
+ * // Кастомные варианты размера страницы
+ * <Pagination
+ *   pageSize={15}
+ *   pageSizeOptions={[5, 15, 25, 100]}
+ *   pageCount={10}
+ *   pageIndex={0}
+ *   canPreviousPage={false}
+ *   canNextPage={true}
+ *   setPageSize={(size) => setPageSize(size)}
+ *   setPageIndex={(index) => setPageIndex(index)}
+ * />
+ */
+export declare function Pagination({ horizontalPadding, className, pageSize, pageCount, pageIndex, canPreviousPage, canNextPage, selectedCount, totalCount, compact, hideDisplayBy, pageSizeOptions, previousPage, nextPage, setPageSize, setPageIndex, }: PaginationProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/popover.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+/**
+ * Popover компонент на основе Radix UI
+ * @see https://www.radix-ui.com/docs/primitives/components/popover
+ */
+/**
+ * Основной контейнер Popover
+ * @component
+ */
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+/**
+ * Триггер для открытия/закрытия Popover
+ * @component
+ */
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Кнопка закрытия Popover (должна находиться внутри контекста Popover)
+ */
+declare const PopoverClose: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Кастомная точка привязки для позиционирования содержимого (например, когда триггер шире видимой области).
+ * @see https://www.radix-ui.com/primitives/docs/components/popover#anchor
+ */
+declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Содержимое Popover
+ * @component
+ * @param {Object} props - Свойства компонента
+ * @param {string} [props.className] - Дополнительные CSS-классы
+ * @param {'start'|'center'|'end'} [props.align='center'] - Выравнивание содержимого относительно триггера
+ * @param {number} [props.sideOffset=4] - Отступ от стороны триггера
+ * @param {React.Ref} ref - Ref для содержимого Popover
+ */
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Popover, PopoverAnchor, PopoverClose, PopoverTrigger, PopoverContent };

package/dist/components/ui/post-card.d.ts

@@ -0,0 +1,273 @@
+import * as React from 'react';
+export interface DropdownAction {
+    /** Текст действия */
+    text: string;
+    /** Обработчик клика */
+    onClick: () => void;
+    /** Отключено ли действие */
+    disabled?: boolean;
+}
+interface PostCardHeaderProps {
+    /** Префикс заголовка (отображается серым цветом) */
+    titlePrefix?: string;
+    /** Основной текст заголовка (отображается основным цветом, с обрезкой при переполнении) */
+    titleText?: string;
+    /** Слот для кнопок действий (может содержать одну или несколько кнопок) */
+    buttonsSlot?: React.ReactNode;
+    /** Массив действий для выпадающего меню */
+    dropDownButtons?: DropdownAction[];
+    /** Callback-функция для кнопки "Назад" */
+    onBack?: () => void;
+    /** Дополнительные CSS-классы для корневого элемента */
+    className?: string;
+}
+/**
+ * Компонент заголовка карточки поста с поддержкой заголовка и кнопок действий.
+ * Используется для отображения заголовка карточки с действиями в правой части.
+ *
+ * @component
+ * @param {PostCardHeaderProps} props - Пропсы компонента
+ * @param {string} [props.titlePrefix] - Префикс заголовка (отображается серым цветом)
+ * @param {string} [props.titleText] - Основной текст заголовка (отображается основным цветом, с обрезкой при переполнении)
+ * @param {React.ReactNode} [props.buttonsSlot] - Слот для кнопок действий
+ * @param {DropdownAction[]} [props.dropDownButtons] - Массив действий для выпадающего меню
+ * @param {() => void} [props.onBack] - Callback-функция для кнопки "Назад"
+ * @param {string} [props.className] - Дополнительные CSS-классы
+ * @returns {JSX.Element}
+ *
+ * @example
+ * <PostCardHeader
+ *   titlePrefix="223-CR"
+ *   titleText="Title"
+ *   onBack={() => console.log('back')}
+ *   buttonsSlot={
+ *     <Button variant="theme-filled">Кнопка</Button>
+ *   }
+ *   dropDownButtons={[
+ *     { text: 'Редактировать', onClick: () => console.log('edit') },
+ *     { text: 'Удалить', onClick: () => console.log('delete') },
+ *   ]}
+ * />
+ */
+declare const PostCardHeader: {
+    ({ titlePrefix, titleText, buttonsSlot, dropDownButtons, onBack, className, }: PostCardHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface PostCardBodyField {
+    /** Метка поля */
+    label: string;
+    /** Значение поля (может быть строкой или React-элементом) */
+    value: string | React.ReactNode;
+}
+export interface PostCardBodySection {
+    /** Массив полей в секции */
+    fields: PostCardBodyField[];
+}
+interface PostCardBodyProps {
+    /** Массив секций с полями */
+    sections?: PostCardBodySection[];
+    /** Дополнительные CSS-классы для корневого элемента */
+    className?: string;
+}
+/**
+ * Компонент тела карточки поста для отображения структурированной информации в формате ключ-значение.
+ * Поддерживает группировку полей в секции с разделителями.
+ *
+ * @component
+ * @param {PostCardBodyProps} props - Пропсы компонента
+ * @param {PostCardBodySection[]} [props.sections] - Массив секций с полями
+ * @param {string} [props.className] - Дополнительные CSS-классы
+ * @returns {JSX.Element}
+ *
+ * @example
+ * <PostCardBody
+ *   sections={[
+ *     {
+ *       fields: [
+ *         { label: 'Статус', value: <Badge>Выполнен</Badge> },
+ *         { label: 'Приоритет', value: 'Неотложный' },
+ *         { label: 'Название', value: 'Ремонт конвейерной ленты' },
+ *       ],
+ *     },
+ *     {
+ *       fields: [
+ *         { label: 'Описание', value: 'Длинное описание...' },
+ *       ],
+ *     },
+ *   ]}
+ * />
+ */
+declare const PostCardBody: {
+    ({ sections, className }: PostCardBodyProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+interface PostCardSidebarProps {
+    /** Дочерние элементы сайдбара (вертикально расположенные компоненты) */
+    children?: React.ReactNode;
+    /** Дополнительные CSS-классы для корневого элемента */
+    className?: string;
+}
+/**
+ * Компонент сайдбара карточки поста для вертикального расположения элементов.
+ * Используется для отображения дополнительных компонентов (карусель, виджеты и т.д.) в боковой панели.
+ *
+ * @component
+ * @param {PostCardSidebarProps} props - Пропсы компонента
+ * @param {React.ReactNode} [props.children] - Дочерние элементы сайдбара
+ * @param {string} [props.className] - Дополнительные CSS-классы
+ * @returns {JSX.Element}
+ *
+ * @example
+ * <PostCardSidebar>
+ *   <Carousel>...</Carousel>
+ *   <WidgetPlanFact rows={[...]} />
+ * </PostCardSidebar>
+ */
+declare const PostCardSidebar: {
+    ({ children, className }: PostCardSidebarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface PostCardLeftPanelItemProps {
+    /** Слот для заголовка элемента (flex с gap 16px и space-between) */
+    headerSlot?: React.ReactNode;
+    /** Слот для основного контента элемента */
+    contentSlot?: React.ReactNode;
+    /** Слот для футера элемента (flex с gap 16px и space-between) */
+    footerSlot?: React.ReactNode;
+    /** Выбран ли элемент */
+    selected?: boolean;
+    /** Обработчик клика */
+    onClick?: () => void;
+    /** Дополнительные CSS-классы */
+    className?: string;
+}
+/**
+ * Элемент списка левой панели карточки поста.
+ * Используется для отображения отдельного элемента в списке PostCardLeftPanel.
+ *
+ * @component
+ * @param {PostCardLeftPanelItemProps} props - Пропсы компонента
+ * @param {React.ReactNode} [props.headerSlot] - Слот для заголовка элемента
+ * @param {React.ReactNode} [props.contentSlot] - Слот для основного контента элемента
+ * @param {React.ReactNode} [props.footerSlot] - Слот для футера элемента
+ * @param {boolean} [props.selected] - Выбран ли элемент
+ * @param {() => void} [props.onClick] - Обработчик клика
+ * @param {string} [props.className] - Дополнительные CSS-классы
+ * @returns {JSX.Element}
+ *
+ * @example
+ * <PostCardLeftPanelItem
+ *   selected
+ *   onClick={() => console.log('clicked')}
+ *   headerSlot={<div>223-CR</div>}
+ *   contentSlot={<div>Ремонт конвейерной ленты</div>}
+ *   footerSlot={<div>РМ01—Плановый заказ...</div>}
+ * />
+ */
+declare const PostCardLeftPanelItem: {
+    ({ headerSlot, contentSlot, footerSlot, selected, onClick, className, }: PostCardLeftPanelItemProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+interface PostCardLeftPanelProps {
+    /** Слот для сортировки (отображается сверху) */
+    sortSlot?: React.ReactNode;
+    /** Дочерние элементы списка (PostCardLeftPanelItem) */
+    children?: React.ReactNode;
+    /** Слот для пагинации (отображается снизу) */
+    paginationSlot?: React.ReactNode;
+    /** Дополнительные CSS-классы для корневого элемента */
+    className?: string;
+}
+/**
+ * Левая панель карточки поста со списком элементов.
+ * Используется для отображения списка элементов с поддержкой сортировки и пагинации.
+ *
+ * @component
+ * @param {PostCardLeftPanelProps} props - Пропсы компонента
+ * @param {React.ReactNode} [props.sortSlot] - Слот для сортировки (отображается сверху)
+ * @param {React.ReactNode} [props.children] - Дочерние элементы списка
+ * @param {React.ReactNode} [props.paginationSlot] - Слот для пагинации (отображается снизу)
+ * @param {string} [props.className] - Дополнительные CSS-классы
+ * @returns {JSX.Element}
+ *
+ * @example
+ * <PostCardLeftPanel
+ *   sortSlot={<div>Сортировка</div>}
+ *   paginationSlot={<Pagination />}
+ * >
+ *   <PostCardLeftPanelItem selected>Элемент 1</PostCardLeftPanelItem>
+ *   <PostCardLeftPanelItem>Элемент 2</PostCardLeftPanelItem>
+ * </PostCardLeftPanel>
+ */
+declare const PostCardLeftPanel: {
+    ({ sortSlot, children, paginationSlot, className, }: PostCardLeftPanelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface PostCardLeftPanelResizableConfig {
+    /** Размер левой панели по умолчанию в процентах */
+    defaultSize?: number;
+    /** Минимальный размер левой панели в процентах */
+    minSize?: number;
+    /** Максимальный размер левой панели в процентах */
+    maxSize?: number;
+    /** ID для автоматического сохранения размера панели */
+    autoSaveId?: string;
+}
+interface PostCardProps {
+    /** Слот для левой панели (отображается слева, высота равна headerSlot + bodySlot/sidebarSlot) */
+    leftPanelSlot?: React.ReactNode;
+    /** Конфигурация для изменения размера левой панели. Если передана, левая панель становится изменяемой */
+    leftPanelResizable?: PostCardLeftPanelResizableConfig;
+    /** Слот для заголовка карточки (отображается сверху на всю ширину) */
+    headerSlot?: React.ReactNode;
+    /** Слот для основного контента карточки (отображается слева) */
+    bodySlot?: React.ReactNode;
+    /** Слот для сайдбара карточки (отображается справа, фиксированная ширина 340px) */
+    sidebarSlot?: React.ReactNode;
+    /** Слот для дополнительного контента карточки (отображается под bodySlot и sidebarSlot) */
+    contentSlot?: React.ReactNode;
+    /** Дополнительные CSS-классы для корневого элемента */
+    className?: string;
+    /** Отображать ли верхнюю границу */
+    withTopBorder?: boolean;
+    /** Фиксированная высота с внутренней прокруткой панелей (для list/detail layout) */
+    fixedHeight?: boolean;
+}
+/**
+ * Обертка карточки поста с поддержкой левой панели, заголовка, основного контента и сайдбара.
+ * Используется для отображения структурированной информации в виде карточки.
+ *
+ * @component
+ * @param {PostCardProps} props - Пропсы компонента
+ * @param {React.ReactNode} [props.leftPanelSlot] - Слот для левой панели (отображается слева)
+ * @param {PostCardLeftPanelResizableConfig} [props.leftPanelResizable] - Конфигурация для изменения размера левой панели
+ * @param {React.ReactNode} [props.headerSlot] - Слот для заголовка карточки
+ * @param {React.ReactNode} [props.bodySlot] - Слот для основного контента
+ * @param {React.ReactNode} [props.sidebarSlot] - Слот для сайдбара
+ * @param {React.ReactNode} [props.contentSlot] - Слот для дополнительного контента (отображается под bodySlot и sidebarSlot)
+ * @param {string} [props.className] - Дополнительные CSS-классы
+ * @param {boolean} [props.withTopBorder] - Отображать ли верхнюю границу
+ * @returns {JSX.Element}
+ *
+ * @example
+ * <PostCard
+ *   leftPanelSlot={<PostCardLeftPanel>...</PostCardLeftPanel>}
+ *   headerSlot={<PostCardHeader titlePrefix="223-CR" titleText="Title" />}
+ *   bodySlot={<PostCardBody sections={[...]} />}
+ *   sidebarSlot={<PostCardSidebar>...</PostCardSidebar>}
+ *   contentSlot={<div>Дополнительный контент</div>}
+ * />
+ *
+ * @example
+ * <PostCard
+ *   leftPanelSlot={<PostCardLeftPanel>...</PostCardLeftPanel>}
+ *   leftPanelResizable={{ defaultSize: 25, minSize: 15, maxSize: 50, autoSaveId: 'machinery-panel' }}
+ *   headerSlot={<PostCardHeader titlePrefix="223-CR" titleText="Title" />}
+ *   bodySlot={<PostCardBody sections={[...]} />}
+ * />
+ */
+declare const PostCard: {
+    ({ leftPanelSlot, leftPanelResizable, headerSlot, bodySlot, sidebarSlot, contentSlot, className, withTopBorder, fixedHeight, }: PostCardProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export { PostCardHeader, PostCardBody, PostCardSidebar, PostCard, PostCardLeftPanel, PostCardLeftPanelItem, };

package/dist/components/ui/preloader.d.ts

@@ -0,0 +1,23 @@
+import { CSSProperties } from 'react';
+export interface PreloaderProps {
+    style?: CSSProperties;
+    className?: string;
+}
+/**
+ * Компонент индикатора загрузки с анимацией вращения.
+ * Использует иконку Loader2 из библиотеки lucide-react с применением анимации spin.
+ *
+ * @component
+ * @param {PreloaderProps} props - Параметры компонента
+ * @param {CSSProperties} [props.style] - Объект со стилями для контейнера
+ * @param {string} [props.className] - Дополнительные CSS-классы для контейнера
+ * @returns {React.ReactElement} Компонент индикатора загрузки
+ *
+ * @example
+ * <Preloader />
+ *
+ * @example
+ * <Preloader className="my-custom-class" style={{ background: 'white' }} />
+ */
+declare const Preloader: ({ style, className }: PreloaderProps) => import("react/jsx-runtime").JSX.Element;
+export { Preloader };