@chrome-consulting/krit-ui 0.0.49

package/dist/components/ui/filters-column-header.d.ts

@@ -0,0 +1,28 @@
+import { Column, Table } from '@tanstack/react-table';
+import { Locale } from 'date-fns/locale';
+import { Options } from './select-header-filter';
+type FilterType = 'search' | 'date-range' | 'select' | 'reset' | 'sort';
+export interface BaseFilterProps {
+    type: FilterType;
+    column?: Column<any, unknown>;
+    table?: Table<any>;
+    applyText?: string;
+    locale?: Locale;
+    options?: Options<any>;
+    excludeFilterValues?: unknown[];
+    /** Включить сортировку по клику на заголовок */
+    sortable?: boolean;
+    /** Текущее направление сортировки (если не передано — берётся из column.getIsSorted()) */
+    sorted?: ColumnSortDirection;
+    /** Включить сброс сортировки третьим кликом */
+    allowSortingReset?: boolean;
+    /** Контент заголовка (подпись колонки) */
+    children?: React.ReactNode;
+}
+/** Состояние сортировки колонки (TanStack Table getIsSorted()) */
+export type ColumnSortDirection = false | 'asc' | 'desc';
+interface FiltersColumnHeaderProps extends BaseFilterProps {
+    className?: string;
+}
+export declare const FiltersColumnHeader: ({ children, type, column, table, applyText, locale, options, excludeFilterValues, className, sortable, sorted, allowSortingReset, }: FiltersColumnHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,86 @@
+import { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
+import { DatePickerProps } from './date-picker';
+import { InputProps } from './input';
+import { MultiSelectProps } from './multi-select';
+import { SelectProps } from './select';
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+/**
+ * Провайдер формы, оборачивающий react-hook-form FormProvider
+ * @component
+ * @see https://react-hook-form.com/api/useform/formprovider
+ */
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import('react-hook-form').FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+/**
+ * Компонент поля формы, оборачивающий Controller из react-hook-form
+ * @component
+ * @template TFieldValues - Тип значений формы
+ * @template TName - Имя поля в форме
+ * @param {ControllerProps<TFieldValues, TName>} props - Свойства Controller
+ * @returns {JSX.Element}
+ */
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
+interface FormItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Расположение элементов по горизонтали */
+    horizontal?: boolean;
+}
+/**
+ * Контейнер для элементов формы
+ * @component
+ * @param {FormItemProps} props - Свойства компонента
+ * @returns {JSX.Element}
+ */
+declare const FormItem: React.ForwardRefExoticComponent<FormItemProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Метка для поля формы
+ * @component
+ * @param {React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & { required?: boolean }} props - Свойства компонента
+ * @returns {JSX.Element}
+ */
+declare const FormLabel: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & {
+    required?: boolean;
+} & React.RefAttributes<HTMLLabelElement>>;
+/**
+ * Контроллер для управления состоянием поля формы
+ * @component
+ * @param {React.ComponentPropsWithoutRef<typeof Slot>} props - Свойства компонента
+ * @returns {JSX.Element}
+ */
+declare const FormControl: React.ForwardRefExoticComponent<Omit<import('@radix-ui/react-slot').SlotProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+/**
+ * Компонент для отображения описания поля формы
+ * @component
+ * @param {React.HTMLAttributes<HTMLParagraphElement>} props - Свойства компонента
+ * @returns {JSX.Element}
+ */
+declare const FormDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+/**
+ * Компонент для отображения сообщений об ошибках формы
+ * @component
+ * @param {React.HTMLAttributes<HTMLParagraphElement>} props - Свойства компонента
+ * @returns {JSX.Element | null}
+ */
+declare const FormMessage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const FormItemInput: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+/**
+ * Композитный компонент: поле ввода в контейнере формы
+ * @component
+ * @param {InputProps} props - Свойства компонента Input
+ * @returns {JSX.Element}
+ */
+declare const FormItemSelect: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Композитный компонент: выпадающий список в контейнере формы
+ * @component
+ * @param {SelectProps} props - Свойства компонента Select
+ * @returns {JSX.Element}
+ */
+declare const FormItemMultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Композитный компонент: выбор даты в контейнере формы
+ * @component
+ * @param {DatePickerProps} props - Свойства компонента DatePicker
+ * @returns {JSX.Element}
+ */
+declare const FormItemDatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
+export { Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, FormItemInput, FormItemSelect, FormItemMultiSelect, FormItemDatePicker, };

package/dist/components/ui/form.lib.d.ts

@@ -0,0 +1,23 @@
+import { FieldPath, FieldValues } from 'react-hook-form';
+import * as React from 'react';
+type FormFieldContextValue<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+    name: TName;
+};
+declare const FormFieldContext: React.Context<FormFieldContextValue<FieldValues, string>>;
+type FormItemContextValue = {
+    id: string;
+};
+declare const FormItemContext: React.Context<FormItemContextValue>;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: import('react-hook-form').FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+export { useFormField, FormFieldContext, FormItemContext };

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

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+interface PageHeaderProps {
+    /** Дополнительные CSS-классы для корневого элемента */
+    className?: string;
+    /** Заголовок страницы (может быть строкой или React-элементом) */
+    title?: ReactNode;
+    /** Действия, связанные с заголовком (отображаются рядом с заголовком) */
+    titleActions?: ReactNode;
+    /** Дополнительная мета-информация слева от заголовка */
+    leftMeta?: string | number;
+    /** Дополнительная мета-информация рядом с заголовком */
+    meta?: string | number;
+    /** Действия в правой части заголовка */
+    actions?: ReactNode;
+    /** Callback-функция для кнопки "Назад" */
+    onBack?: () => void;
+    /** Callback-функция для кнопки "Вперед" */
+    onNext?: () => void;
+    /** Callback-функция для кнопки "Назад" в контексте навигации */
+    onPrevious?: () => void;
+}
+/**
+ * Компонент заголовка страницы с навигацией и дополнительными действиями.
+ * Поддерживает кнопки навигации (назад, вперед), мета-информацию и действия.
+ *
+ * @component
+ * @param {PageHeaderProps} props - Пропсы компонента
+ * @returns {JSX.Element}
+ *
+ * @example
+ * <PageHeader
+ *   title="Заголовок страницы"
+ *   meta="Мета-информация"
+ *   onBack={() => console.log('Назад')}
+ *   actions={<Button>Действие</Button>}
+ * />
+ */
+export declare const PageHeader: ({ className, title, titleActions, leftMeta, meta, actions, onBack, onNext, onPrevious, }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /** Сообщение об ошибке или флаг наличия ошибки */
+    error?: string | boolean;
+    /** Режим поискового поля с иконкой поиска */
+    asSearch?: boolean;
+    /** Иконка справа от поля ввода */
+    rightIcon?: React.ReactNode;
+    /** Отображение счетчика символов */
+    withCount?: boolean;
+    /** Callback при нажатии клавиши Enter */
+    onEnter?: (value: string) => void;
+}
+/**
+ * Компонент поля ввода с поддержкой различных состояний и дополнительных элементов.
+ * Поддерживает валидацию, иконки, счетчик символов и режим поиска.
+ *
+ * @component
+ * @param {InputProps} props - Параметры компонента
+ * @param {React.Ref<HTMLInputElement>} ref - Реф для доступа к DOM-элементу
+ * @returns {React.ReactElement} Поле ввода с заданными свойствами
+ *
+ * @example
+ * <Input placeholder="Введите текст" />
+ * <Input asSearch placeholder="Поиск" />
+ * <Input type="password" withCount />
+ * <Input error="Обязательное поле" />
+ */
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { Input };

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

@@ -0,0 +1,23 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+/**
+ * Компонент метки для полей ввода с поддержкой обозначения обязательных полей.
+ * Основан на Radix UI Label с дополнительными стилями и функциональностью.
+ *
+ * @component
+ * @param {object} props - Параметры компонента
+ * @param {string} [props.className] - Дополнительные CSS-классы
+ * @param {boolean} [props.required] - Флаг обязательного поля
+ * @param {React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>} props - Стандартные свойства Label из Radix UI
+ * @param {React.Ref<React.ElementRef<typeof LabelPrimitive.Root>>} ref - Реф для доступа к DOM-элементу
+ * @returns {React.ReactElement} Метка с заданными свойствами
+ *
+ * @example
+ * <Label htmlFor="email">Email адрес</Label>
+ * <Label required htmlFor="password">Пароль</Label>
+ */
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: ({
+    required?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
+export { Label };

package/dist/components/ui/multi-select.d.ts

@@ -0,0 +1,100 @@
+import { ButtonVariant } from './button';
+import * as React from 'react';
+export type MultiSelectOptionType = {
+    label: string;
+    value: string;
+    hidden?: boolean;
+    disabled?: boolean;
+    children?: MultiSelectOptionType[];
+    defaultExpanded?: boolean;
+};
+export interface MultiSelectProps {
+    className?: string;
+    triggerClassName?: string;
+    popoverContentClassName?: string;
+    variant?: ButtonVariant;
+    placeholder?: string;
+    options: MultiSelectOptionType[];
+    value: string[];
+    maxSelected?: number;
+    shouldFilter?: boolean;
+    open?: boolean;
+    children?: React.ReactNode;
+    isLoading?: boolean;
+    isError?: boolean;
+    disabled?: boolean;
+    searchPlaceholder?: string;
+    showAllOption?: boolean;
+    showReset?: boolean;
+    required?: boolean;
+    showBadge?: boolean;
+    maxVisibleRowsBadge?: number;
+    showCountBadge?: boolean;
+    defaultSearchedValue?: string;
+    createLabel?: string;
+    autoSelectSingleOption?: boolean;
+    onCreate?: (query: string) => void;
+    renderOption?: (option: MultiSelectOptionType, isChecked: boolean) => React.ReactNode;
+    renderBadge?: (option: MultiSelectOptionType, onRemove: () => void) => React.ReactNode;
+    onRefetch?: () => void;
+    onOpenChange?: (open: boolean) => void;
+    onSearch?: (value: string) => void;
+    isLoadingMore?: boolean;
+    hasMore?: boolean;
+    onLoadMore?: () => Promise<unknown>;
+    onChange?: (value: string[], labels?: string[]) => void;
+    onClick?: () => void;
+    onRemoveClick?: () => void;
+}
+/**
+ * Компонент для множественного выбора опций с поддержкой поиска, группировки и создания новых опций.
+ * Поддерживает различные варианты отображения выбранных значений, включая бейджи.
+ *
+ * @component
+ * @param {MultiSelectProps} props - Параметры компонента
+ * @param {string} [props.className] - Дополнительные CSS-классы для контейнера
+ * @param {string} [props.triggerClassName] - Дополнительные CSS-классы для триггера
+ * @param {ButtonVariant} [props.variant='fade-contrast-outlined'] - Вариант стиля кнопки-триггера
+ * @param {string} [props.placeholder] - Текст-заполнитель при отсутствии выбранных значений
+ * @param {MultiSelectOptionType[]} props.options - Опции для выбора
+ * @param {string[]} props.value - Выбранные значения
+ * @param {number} [props.maxSelected] - Максимальное количество выбираемых элементов
+ * @param {boolean} [props.shouldFilter=true] - Флаг включения фильтрации опций
+ * @param {boolean} [props.open] - Контролируемое состояние открытия попапа
+ * @param {React.ReactNode} [props.children] - Кастомное содержимое триггера
+ * @param {boolean} [props.isLoading] - Флаг состояния загрузки
+ * @param {boolean} [props.isError] - Флаг состояния ошибки
+ * @param {boolean} [props.disabled] - Флаг неактивного состояния
+ * @param {string} [props.searchPlaceholder] - Текст-заполнитель для поля поиска
+ * @param {boolean} [props.showAllOption=false] - Флаг отображения опции "Выбрать все"
+ * @param {boolean} [props.showReset] - Флаг отображения кнопки сброса
+ * @param {boolean} [props.required] - Флаг обязательного поля
+ * @param {boolean} [props.showBadge=false] - Флаг отображения выбранных значений в виде бейджей
+ * @param {number} [props.maxVisibleRowsBadge] - Максимальное количество строк для отображения бейджей
+ * @param {(option: MultiSelectOptionType, onRemove: () => void) => React.ReactNode} [props.renderBadge] - Функция для кастомного рендеринга бейджа выбранного элемента
+ * @param {string} [props.defaultSearchedValue] - Значение поиска по умолчанию
+ * @param {string} [props.createLabel] - Текст для создания новой опции
+ * @param {boolean} [props.autoSelectSingleOption] - Автоматически выбирать единственную доступную опцию
+ * @param {Function} [props.onCreate] - Callback создания новой опции
+ * @param {Function} [props.renderOption] - Кастомный рендер опции
+ * @param {Function} [props.onRefetch] - Callback повторной загрузки данных
+ * @param {Function} [props.onOpenChange] - Callback изменения состояния открытия попапа
+ * @param {Function} [props.onSearch] - Callback поиска
+ * @param {Function} [props.onChange] - Callback изменения выбранных значений
+ * @param {Function} [props.onClick] - Callback клика по триггеру
+ * @param {Function} [props.onRemoveClick] - Callback клика по кнопке удаления
+ * @returns {React.ReactElement} Компонент множественного выбора
+ *
+ * @example
+ * <MultiSelect
+ *   options={[
+ *     { label: 'Option 1', value: '1' },
+ *     { label: 'Option 2', value: '2' }
+ *   ]}
+ *   value={['1']}
+ *   onChange={(values) => console.log(values)}
+ *   placeholder="Select options"
+ * />
+ */
+declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLButtonElement>>;
+export { MultiSelect };

package/dist/components/ui/nav-panel.d.ts

@@ -0,0 +1,52 @@
+import { default as React } from 'react';
+import { Location } from 'react-router-dom';
+import { NavItem } from './nav';
+export interface NavPanelProps {
+    /** @description Состояние сворачивания навигации */
+    isCollapsed: boolean;
+    /** @description Список навигации */
+    navItems: NavItem[][];
+    /** @description Название проекта */
+    projectName: React.ReactNode;
+    /** @description Компонент для отображения ссылок */
+    linkComponent: React.ElementType;
+    /** @description Слот для отображения профиля пользователя и смены темы
+     * @example
+     * <Nav
+     *   isCollapsed={sidebar.isCollapsed}
+     *   items={[
+     *     {
+     *       title: t('theme'),
+     *       icon: theme === 'light' ? Sun : Moon,
+     *       onClick: toggleTheme,
+     *       variant: 'fade-contrast-transparent',
+     *     },
+     *     { title: t('logout'), icon: AccountCircle, onClick: logout, variant: 'fade-contrast-transparent' },
+     *   ]}
+     *   LinkComponent={NavLink}
+     * />
+     */
+    profileNavSlot?: React.ReactNode;
+    /** @description Слот для расширения навигации
+     * @example
+     * <Nav
+     *   isCollapsed={sidebar.isCollapsed}
+     *   items={[
+     *     {
+     *       title: sidebar.isCollapsed ? t('expand') : t('collapse'),
+     *       icon: sidebar.isCollapsed ? LastPage : FirstPage,
+     *       onClick: sidebar.isCollapsed ? sidebar.expand : sidebar.collapse,
+     *       variant: 'fade-contrast-transparent',
+     *     },
+     *   ]}
+     *   LinkComponent={NavLink}
+     * />*/
+    expandableNavSlot?: React.ReactNode;
+    location?: Location;
+    bottomSlot?: React.ReactNode;
+}
+declare const NavPanel: {
+    (props: NavPanelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { NavPanel };

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

@@ -0,0 +1,52 @@
+import { default as React, FunctionComponent } from 'react';
+import { Location } from 'react-router-dom';
+import { LucideIcon } from 'lucide-react';
+import { ButtonVariant } from './button';
+/**
+ * Интерфейс для элемента навигации
+ * @interface NavItem
+ * @property {string} title - Заголовок элемента навигации
+ * @property {string} [label] - Дополнительная метка элемента
+ * @property {LucideIcon|FunctionComponent} [icon] - Иконка элемента (Lucide или React компонент)
+ * @property {string} [to] - Ссылка для перехода
+ * @property {ButtonVariant} [variant] - Вариант стиля кнопки
+ * @property {string} [className] - Дополнительные CSS-классы
+ * @property {function} [onClick] - Обработчик клика
+ * @property {NavItem[]} [children] - Вложенные элементы навигации
+ */
+export interface NavItem {
+    title: string;
+    label?: string;
+    icon?: LucideIcon | FunctionComponent<React.SVGProps<SVGSVGElement> & {
+        title?: string | undefined;
+    }>;
+    to?: string;
+    variant?: ButtonVariant;
+    className?: string;
+    onClick?: () => void;
+    children?: NavItem[];
+}
+/**
+ * Пропсы компонента навигации
+ * @interface NavProps
+ * @property {boolean} isCollapsed - Состояние сворачивания навигации
+ * @property {NavItem[]} items - Массив элементов навигации
+ * @property {function} [itemVariant] - Функция для определения варианта стиля элемента
+ * @property {React.ElementType} LinkComponent - Компонент для отображения ссылок
+ * @property {Location} [location] - Объект location из react-router для определения активных элементов
+ */
+interface NavProps {
+    isCollapsed: boolean;
+    items: NavItem[];
+    itemVariant?: (item: NavItem) => ButtonVariant;
+    LinkComponent: React.ElementType;
+    location?: Location;
+}
+export declare function Nav(props: NavProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Разделитель для навигации
+ * @component
+ * @returns {JSX.Element} Элемент разделителя
+ */
+export declare function NavSeparator(): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/network-error-message.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Пропсы компонента NetworkErrorMessage
+ * @interface NetworkErrorMessageProps
+ * @property {string} [className] - Дополнительные CSS-классы для контейнера
+ * @property {'base'|'sm'} [textSize='base'] - Размер текста
+ * @property {boolean} [isLoading] - Флаг состояния загрузки
+ * @property {boolean} [isError] - Флаг состояния ошибки
+ * @property {boolean} [center] - Выравнивание по центру
+ * @property {boolean} [inline] - Inline-режим отображения
+ * @property {function} [onRefetch] - Функция для повторной попытки загрузки
+ */
+export interface NetworkErrorMessageProps {
+    className?: string;
+    textSize?: 'base' | 'sm';
+    isLoading?: boolean;
+    isError?: boolean;
+    center?: boolean;
+    inline?: boolean;
+    onRefetch?: () => void;
+}
+/**
+ * Компонент для отображения состояния загрузки или ошибки сети
+ * @component
+ * @param {NetworkErrorMessageProps} props - Пропсы компонента
+ * @returns {JSX.Element|null} Компонент сообщения об ошибке или состоянии загрузки, либо null если не активен
+ *
+ * @example
+ * // Базовое использование
+ * <NetworkErrorMessage
+ *   isLoading={isLoading}
+ *   isError={isError}
+ *   onRefetch={refetchData}
+ * />
+ *
+ * @example
+ * // Inline-режим
+ * <div>
+ *   Загрузка данных
+ *   <NetworkErrorMessage
+ *     isLoading={isLoading}
+ *     isError={isError}
+ *     inline
+ *   />
+ * </div>
+ */
+export declare const NetworkErrorMessage: ({ className, textSize, isLoading, isError, center, inline, onRefetch, }: NetworkErrorMessageProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,34 @@
+import { VariantProps } from 'class-variance-authority';
+import { notificationVariants } from './notificationVariants';
+import * as React from 'react';
+/**
+ * Пропсы компонента Notification
+ */
+export interface NotificationProps extends React.ComponentPropsWithoutRef<'div'>, VariantProps<typeof notificationVariants> {
+    /** Текст уведомления */
+    children?: React.ReactNode;
+    /** Показывать ли кнопку закрытия */
+    showClose?: boolean;
+    /** Обработчик закрытия уведомления */
+    onClose?: () => void;
+    /** Кастомная иконка (если не указана, используется иконка по умолчанию для варианта) */
+    icon?: React.ReactNode;
+}
+/**
+ * Компонент для отображения уведомлений.
+ * Поддерживает различные варианты отображения (error, success, info) и размеры (sm, default).
+ *
+ * @component
+ * @param {NotificationProps} props - Параметры компонента
+ * @returns {React.ReactElement} Компонент уведомления
+ *
+ * @example
+ * <Notification variant="success" size="default">Операция выполнена</Notification>
+ *
+ * @example
+ * <Notification variant="error" size="sm" showClose onClose={() => console.log('closed')}>
+ *   Что-то пошло не так
+ * </Notification>
+ */
+declare const Notification: React.ForwardRefExoticComponent<NotificationProps & React.RefAttributes<HTMLDivElement>>;
+export { Notification };

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

@@ -0,0 +1,4 @@
+export declare const notificationVariants: (props?: ({
+    variant?: "success" | "error" | "info" | null | undefined;
+    size?: "default" | "sm" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;