@efficiency-point/design-system 0.0.4

package/README.md

@@ -0,0 +1,334 @@
+# Efficiency Point Design System
+
+React/TypeScript дизайн-система с CSS Modules, публичными типами, Storybook и библиотечной сборкой ESM/CJS.
+
+## Требования
+
+- Node.js, совместимый с Vite 8;
+- React и React DOM `>=18 <20` в приложении-потребителе;
+- npm как пакетный менеджер.
+
+## Подключение
+
+```bash
+npm install @efficiency-point/design-system
+```
+
+```tsx
+import { DSButton, DSInfoBlock } from '@efficiency-point/design-system';
+import '@efficiency-point/design-system/styles.css';
+
+export function Example() {
+    return (
+        <DSInfoBlock title="Информация">
+            <DSButton>Продолжить</DSButton>
+        </DSInfoBlock>
+    );
+}
+```
+
+Компоненты форм контролируемые: `value`/`checked` хранится у приложения и обновляется через callback.
+
+## Темизация
+
+Компоненты используют CSS custom properties из `tokens.css`. Их можно переопределить после импорта библиотечного CSS:
+
+```css
+:root {
+    --color-primary: #2563eb;
+    --border-radius: 12px;
+    --ds-dropdown-menu-max-height: 280px;
+}
+```
+
+## Компоненты
+
+### DSButton
+
+Кнопка с вариантами `primary`, `secondary`, `outline`, `ghost`, `empty`, `destructive`, `destructiveOutline` и размерами `sm`, `md`, `lg`.
+
+```tsx
+<DSButton variant="primary" isLoading={saving} onClick={save}>
+    Сохранить
+</DSButton>
+```
+
+`type` по умолчанию равен `button`. При `isLoading` кнопка блокируется и получает `aria-busy`.
+
+### DSInput
+
+Текстовое или числовое контролируемое поле с label, hint, error, required и очисткой.
+
+```tsx
+<DSInput
+    label="Название"
+    value={name}
+    onChange={(value) => setName(String(value))}
+    error={nameError}
+    required
+/>
+```
+
+### DSCheckbox
+
+Поддерживает controlled state, `indeterminate`, `readOnly`, `disabled`, hint/error и нативные form-атрибуты.
+
+```tsx
+<DSCheckbox checked={enabled} onChange={setEnabled} label="Активен" />
+```
+
+### DSRadioButton
+
+Двухпозиционный switch. Несмотря на историческое имя, в DOM используется checkbox с `role="switch"`.
+
+```tsx
+<DSRadioButton checked={enabled} onChange={setEnabled} label="Уведомления" />
+```
+
+### DSDropDown
+
+Одиночный выбор. Поддерживаются disabled options, hint/error, disabled display и клавиши ArrowUp/ArrowDown, Home, End, Enter, Space, Escape и Tab.
+
+```tsx
+<DSDropDown
+    label="Статус"
+    options={[{ label: 'Активен', value: 'active' }]}
+    value={status}
+    onChange={setStatus}
+    maxMenuHeight={280}
+/>
+```
+
+Высота списка по умолчанию задаётся `--ds-dropdown-menu-max-height: 240px`; содержимое прокручивается, активная keyboard-опция подводится в видимую область.
+
+### DSDropDownMultiple
+
+Множественный controlled dropdown. `onChange` возвращает массив значений и выбранные объекты. По умолчанию меню остаётся открытым после выбора.
+
+```tsx
+<DSDropDownMultiple
+    options={options}
+    value={selectedIds}
+    onChange={setSelectedIds}
+    closeOnSelect={false}
+/>
+```
+
+### DSDateTimePicker
+
+Контролируемое поле для `date`, `time` или `datetime`. Использует нативные browser controls и принимает `Date | null`, `min` и `max`.
+
+```tsx
+<DSDateTimePicker mode="datetime" value={date} onChange={setDate} />
+```
+
+### DSTimePeriodPicker
+
+Композиция выбора типа периода и дат начала/окончания. Публичны `DSTimePeriodPickerValue`, `DSTimePeriodTypeCode` и `DSTimePeriodType`.
+
+```tsx
+<DSTimePeriodPicker value={period} onChange={setPeriod} />
+```
+
+### DSDateRange
+
+Контролируемый диапазон дат или локальных даты/времени. `onChange` получает только завершённую валидную пару `Date`; промежуточное состояние доступно через `onDraftChange`.
+
+```tsx
+<DSDateRange mode="datetime" value={range} onChange={setRange} onDraftChange={setDraftRange} />
+```
+
+### DSDataTable и DSSort
+
+Типизированная таблица на стабильной `@tanstack/react-table` с обязательной сортировкой. По умолчанию мобильный вид отображает строки карточками; `tableOnMobile` сохраняет таблицу. `breakpoint="default"` переключает вид ниже 640 px, `breakpoint="wide"` — ниже 1280 px.
+
+```tsx
+<DSDataTable columns={columns} data={rows} breakpoint="wide" />
+```
+
+`DSSort` можно использовать отдельно для сортировки по полям объектов или строковым значениям.
+
+### DSFilters
+
+Контролируемая композиция фильтров типов `input`, `dropdown`, `multiple`, `checkbox`, `radio` и `dateRange`, построенная из компонентов дизайн-системы.
+
+```tsx
+<DSFilters filters={filters} values={values} onChange={setValues} />
+```
+
+### DSVideoPlayerFrame
+
+Адаптивная оболочка нативного видеоплеера с несколькими sources/tracks, poster, media-настройками и loading/error-состояниями.
+
+```tsx
+<DSVideoPlayerFrame title="Обучение" sources={[{ src: '/video.mp4', type: 'video/mp4' }]} />
+```
+
+### DSInfoBlock
+
+Постоянно видимая карточка-виджет с заголовком и произвольным содержимым. `dismissible` только показывает кнопку; скрытием управляет приложение через `onDismiss`.
+
+```tsx
+{visible && (
+    <DSInfoBlock title="Сводка" dismissible onDismiss={() => setVisible(false)}>
+        Контент
+    </DSInfoBlock>
+)}
+```
+
+### DSBadge
+
+Неинтерактивная метка. Варианты: `neutral`, `info`, `success`, `warning`, `error`; размеры `sm`, `md`; доступны dot и icon.
+
+```tsx
+<DSBadge variant="success" dot>Готово</DSBadge>
+```
+
+### DSSkeleton
+
+Декоративный placeholder с вариантами `text`, `rectangular`, `circular`, несколькими строками и отключаемой анимацией. Skeleton скрыт от accessibility tree; `aria-busy` должен задавать родитель.
+
+```tsx
+<section aria-busy="true"><DSSkeleton lines={3} /></section>
+```
+
+### DSTooltip
+
+Короткая неинтерактивная подсказка. Открывается по hover/focus/touch, закрывается по blur, pointer leave и Escape. Для кнопок и ссылок внутри содержимого используйте popover, а не tooltip.
+
+```tsx
+<DSTooltip content="Редактировать" placement="top">
+    <button type="button">...</button>
+</DSTooltip>
+```
+
+### DSLoader и DSPageLoader
+
+`DSLoader` — компактный индикатор с `role="status"` или декоративным режимом. `DSPageLoader` — центрированный loading-state области страницы.
+
+### DSIcon
+
+Типизированный registry иконок. Публичен union `DSIconName`. Без `title` иконка декоративная; с `title` получает роль изображения и доступное имя.
+
+```tsx
+<DSIcon name="approve" title="Подтверждено" />
+```
+
+### Field primitives
+
+`DSFieldLabel` и `DSFieldMessage` унифицируют label, required marker, optional text, hint/error/success сообщения. Публичны все props и `DSFieldMessageVariant`.
+
+## Toast
+
+Toast использует внутренний Zustand store и публичный `useToast`. Provider обычно подключается один раз рядом с корнем приложения.
+
+```tsx
+function Root() {
+    return (
+        <>
+            <App />
+            <DSToastProvider position="top-right" />
+        </>
+    );
+}
+
+function SaveButton() {
+    const { successToast } = useToast();
+    return (
+        <DSButton onClick={() => successToast({ message: 'Сохранено' })}>
+            Сохранить
+        </DSButton>
+    );
+}
+```
+
+Расширенный API экспортирует `useToastStore`, `ToastStoreState`, `ToastItem`, `ShowToastPayload`, `ToastAction` и `ToastVariant`.
+
+## Modal и реестр приложения
+
+Библиотека не импортирует файлы consumer-проекта. Каждый проект хранит реестр по принятому пути, например `src/shared/ui/modal/modal.registry.tsx`, и явно передаёт его provider.
+
+```tsx
+// src/shared/ui/modal/modal.registry.tsx
+import {
+    builtInModalRegistry,
+    defineModalRegistry,
+    type ModalControls,
+} from '@efficiency-point/design-system';
+import { EmployeeModal } from './EmployeeModal';
+
+export type EmployeeModalPayload = {
+    employeeId: string;
+};
+
+export const modalRegistry = defineModalRegistry({
+    ...builtInModalRegistry,
+    EmployeeModal: ({ employeeId, modalId, close }: EmployeeModalPayload & ModalControls) => (
+        <div data-modal-id={modalId}>
+            Сотрудник: {employeeId}
+            <button onClick={close}>Закрыть</button>
+        </div>
+    ),
+});
+
+export type AppModalRegistry = typeof modalRegistry;
+```
+
+```tsx
+// app providers
+import { ModalSystemProvider } from '@efficiency-point/design-system';
+import { modalRegistry } from '@/shared/ui/modal/modal.registry';
+
+<ModalSystemProvider registry={modalRegistry}>
+    <App />
+</ModalSystemProvider>
+```
+
+```tsx
+const { openModal } = useModals<typeof modalRegistry>();
+openModal('EmployeeModal', { employeeId: '42' });
+```
+
+Modal host поддерживает stack, закрытие верхней модалки по Escape, backdrop-close, focus trap и восстановление focus. Поведение Escape/backdrop настраивается в `openModal`.
+
+Встроенные `ConfirmModal` и `ErrorModal` доступны через `builtInModalRegistry`, `useConfirmModal` и `useErrorModal`.
+
+## Публичные типы
+
+Все component props, callback signatures, variant unions, store states, hook results, modal registry contracts и payload-типы экспортируются из корневого entry point.
+
+## Разработка и проверки
+
+```bash
+npm run lint
+npm run typecheck
+npm run test
+npm run test:coverage
+npm run build
+npm run test:package
+npm run build-storybook
+npm run pack:check
+```
+
+## Подготовка пакета
+
+1. Установить зависимости: `npm ci`.
+2. Запустить `npm run lint`.
+3. Запустить `npm run typecheck`.
+4. Запустить `npm run test` и сохранить результаты в отчёт.
+5. Запустить `npm run test:package`.
+6. Собрать Storybook: `npm run build-storybook`.
+7. Проверить содержимое архива: `npm run pack:check`.
+8. Указать финальные `name`, `version`, `license`, `repository` и при необходимости `publishConfig` в `package.json`.
+9. Создать архив: `npm pack`.
+10. Установить `.tgz` в чистое React-приложение и проверить ESM/CJS, типы и CSS.
+11. После проверки выполнить `npm publish` в выбранный registry. Публикация и изменение версии выполняются отдельно и в текущую задачу не входят.
+
+## Подключение к другому проекту
+
+1. Установить опубликованный пакет или локальный tarball.
+2. Один раз импортировать `@efficiency-point/design-system/styles.css` в entry приложения.
+3. Убедиться, что React/React DOM удовлетворяют peer range.
+4. Подключить `DSToastProvider`, если используются toast.
+5. Создать `shared/ui/modal/modal.registry.tsx` и подключить `ModalSystemProvider`, если используются модалки.
+6. Заменять локальные UI-компоненты постепенно, сохраняя controlled state и импортируя публичные props/payload-типы из пакета.

package/dist/components/DSBadge/DSBadge.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export type DSBadgeVariant = 'neutral' | 'info' | 'success' | 'warning' | 'error';
+export type DSBadgeSize = 'sm' | 'md';
+export type DSBadgeProps = {
+    children: ReactNode;
+    variant?: DSBadgeVariant;
+    size?: DSBadgeSize;
+    dot?: boolean;
+    icon?: ReactNode;
+    className?: string;
+};
+export declare const DSBadge: ({ children, variant, size, dot, icon, className, }: DSBadgeProps) => import("react").JSX.Element;
+//# sourceMappingURL=DSBadge.d.ts.map

package/dist/components/DSBadge/DSBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DSBadge.d.ts","sourceRoot":"","sources":["../../../src/components/DSBadge/DSBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAClF,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtC,MAAM,MAAM,YAAY,GAAG;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,oDAOrB,YAAY,gCAad,CAAC"}

package/dist/components/DSButton/DSButton.d.ts

@@ -0,0 +1,12 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+export type DSButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'empty' | 'destructive' | 'destructiveOutline';
+export type DSButtonSize = 'sm' | 'md' | 'lg';
+export interface DSButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    children: ReactNode;
+    variant?: DSButtonVariant;
+    size?: DSButtonSize;
+    isLoading?: boolean;
+    loadingLabel?: string;
+}
+export declare const DSButton: import('react').ForwardRefExoticComponent<DSButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=DSButton.d.ts.map

package/dist/components/DSButton/DSButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DSButton.d.ts","sourceRoot":"","sources":["../../../src/components/DSButton/DSButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI9E,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,aAAa,GAAG,oBAAoB,CAAC;AAC7H,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC5F,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,QAAQ,6GA0BnB,CAAC"}

package/dist/components/DSCheckbox/DSCheckbox.d.ts

@@ -0,0 +1,20 @@
+import { FocusEventHandler } from 'react';
+export type DSCheckboxProps = {
+    checked: boolean;
+    onChange?: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
+    label?: string;
+    hint?: string;
+    error?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    className?: string;
+    name?: string;
+    id?: string;
+    value?: string;
+    indeterminate?: boolean;
+    required?: boolean;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+};
+export declare const DSCheckbox: ({ checked, onChange, label, hint, error, disabled, readOnly, className, name, id, indeterminate, ...props }: DSCheckboxProps) => import("react").JSX.Element;
+//# sourceMappingURL=DSCheckbox.d.ts.map

package/dist/components/DSCheckbox/DSCheckbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DSCheckbox.d.ts","sourceRoot":"","sources":["../../../src/components/DSCheckbox/DSCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAIzE,MAAM,MAAM,eAAe,GAAG;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAClF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;CACjD,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,6GAaxB,eAAe,gCAiDjB,CAAC"}

package/dist/components/DSDataTable/DSDataTable.d.ts

@@ -0,0 +1,48 @@
+import { CSSProperties, ReactNode } from 'react';
+import { SortingState } from '@tanstack/react-table';
+export type DSDataTableBreakpoint = 'default' | 'wide';
+export type DSDataTableData = Record<string, unknown>;
+export type DSDataTableMobileColumnMeta<TData> = {
+    hideOnMobile?: boolean;
+    primary?: boolean;
+    secondary?: boolean;
+    mobileLabel?: ReactNode;
+    mobileOrder?: number;
+    mobileSpan?: 1 | 2;
+    mobileVariant?: 'field' | 'badge' | 'actions';
+    renderMobile?: (row: TData, value: unknown) => ReactNode;
+};
+export type DSDataTableColumn<TData extends object> = {
+    id: string;
+    header: ReactNode;
+    accessor: keyof TData | ((row: TData) => unknown);
+    cell?: (row: TData, value: unknown) => ReactNode;
+    dataType?: 'text' | 'number' | 'date' | 'boolean' | 'custom';
+    sortDescFirst?: boolean;
+    mobile?: DSDataTableMobileColumnMeta<TData>;
+};
+export type DSDataTableMobileRowContext<TData extends object> = {
+    row: TData;
+    columns: DSDataTableColumn<TData>[];
+};
+export type DSDataTableProps<TData extends object> = {
+    columns: DSDataTableColumn<TData>[];
+    data: TData[];
+    tableOnMobile?: boolean;
+    breakpoint?: DSDataTableBreakpoint;
+    sorting?: SortingState;
+    onSortingChange?: (sorting: SortingState) => void;
+    renderMobileCard?: (context: DSDataTableMobileRowContext<TData>) => ReactNode;
+    getRowId?: (row: TData, index: number) => string;
+    caption?: string;
+    ariaLabel?: string;
+    loading?: boolean;
+    error?: ReactNode;
+    emptyState?: ReactNode;
+    stickyHeader?: boolean;
+    maxHeight?: CSSProperties['maxHeight'];
+    className?: string;
+};
+export declare const validateDSDataTableData: <TData extends object>(columns: DSDataTableColumn<TData>[], data: TData[]) => string | null;
+export declare const DSDataTable: <TData extends object>({ columns, data, tableOnMobile, breakpoint, sorting: controlledSorting, onSortingChange, renderMobileCard, getRowId, caption, ariaLabel, loading, error, emptyState, stickyHeader, maxHeight, className, }: DSDataTableProps<TData>) => import("react").JSX.Element;
+//# sourceMappingURL=DSDataTable.d.ts.map

package/dist/components/DSDataTable/DSDataTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DSDataTable.d.ts","sourceRoot":"","sources":["../../../src/components/DSDataTable/DSDataTable.tsx"],"names":[],"mappings":"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"}

package/dist/components/DSDateRange/DSDateRange.d.ts

@@ -0,0 +1,28 @@
+export type DSDateRangeMode = 'date' | 'datetime' | 'time';
+export type DSDateRangeValue = {
+    from: Date | null;
+    to: Date | null;
+};
+export type DSDateRangeChangeValue = {
+    from: Date;
+    to: Date;
+};
+export type DSDateRangeProps = {
+    value: DSDateRangeValue;
+    onChange?: (value: DSDateRangeChangeValue) => void;
+    onDraftChange?: (value: DSDateRangeValue) => void;
+    mode?: DSDateRangeMode;
+    fromLabel?: string;
+    toLabel?: string;
+    hint?: string;
+    error?: string;
+    min?: Date;
+    max?: Date;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    className?: string;
+};
+export declare const isValidDateRange: (value: DSDateRangeValue) => value is DSDateRangeChangeValue;
+export declare const DSDateRange: ({ value, onChange, onDraftChange, mode, fromLabel, toLabel, hint, error, min, max, disabled, readOnly, required, className, }: DSDateRangeProps) => import("react").JSX.Element;
+//# sourceMappingURL=DSDateRange.d.ts.map

package/dist/components/DSDateRange/DSDateRange.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DSDateRange.d.ts","sourceRoot":"","sources":["../../../src/components/DSDateRange/DSDateRange.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;AAC3D,MAAM,MAAM,gBAAgB,GAAG;IAAE,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAAC,EAAE,EAAE,IAAI,GAAG,IAAI,CAAA;CAAE,CAAC;AACtE,MAAM,MAAM,sBAAsB,GAAG;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,EAAE,EAAE,IAAI,CAAA;CAAE,CAAC;AAE9D,MAAM,MAAM,gBAAgB,GAAG;IAC3B,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACnD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,IAAI,CAAC;IACX,GAAG,CAAC,EAAE,IAAI,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,OAAO,gBAAgB,KAAG,KAAK,IAAI,sBAEnE,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,+HAezB,gBAAgB,gCAwClB,CAAC"}

package/dist/components/DSDateTimePicker/DSDateTimePicker.d.ts

@@ -0,0 +1,21 @@
+export type DSDateTimePickerMode = 'date' | 'time' | 'datetime';
+export type DSDateTimePickerProps = {
+    value: Date | null;
+    onChange?: (value: Date | null) => void;
+    mode?: DSDateTimePickerMode;
+    label?: string;
+    hint?: string;
+    error?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    min?: Date;
+    max?: Date;
+    id?: string;
+    name?: string;
+    className?: string;
+};
+export declare const formatDateTimeLocalValue: (value: Date | null, mode: DSDateTimePickerMode) => string;
+export declare const parseDateTimeLocalValue: (value: string, mode: DSDateTimePickerMode) => Date | null;
+export declare const DSDateTimePicker: ({ value, onChange, mode, label, hint, error, disabled, readOnly, required, min, max, id, name, className, }: DSDateTimePickerProps) => import("react").JSX.Element;
+//# sourceMappingURL=DSDateTimePicker.d.ts.map

package/dist/components/DSDateTimePicker/DSDateTimePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DSDateTimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DSDateTimePicker/DSDateTimePicker.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC;AAEhE,MAAM,MAAM,qBAAqB,GAAG;IAChC,KAAK,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,IAAI,CAAC;IACX,GAAG,CAAC,EAAE,IAAI,CAAC;IACX,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAIF,eAAO,MAAM,wBAAwB,GAAI,OAAO,IAAI,GAAG,IAAI,EAAE,MAAM,oBAAoB,WAOtF,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,OAAO,MAAM,EAAE,MAAM,oBAAoB,gBAUhF,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,6GAe9B,qBAAqB,gCAyCvB,CAAC"}

package/dist/components/DSDropDown/DSDropDown.d.ts

@@ -0,0 +1,25 @@
+import { CSSProperties } from 'react';
+export type DropDownOption = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+export type DSDropDownProps = {
+    options: DropDownOption[];
+    value: string;
+    onChange?: (value: string, option: DropDownOption) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    stringWhileDisabled?: boolean;
+    label?: string;
+    error?: string;
+    hint?: string;
+    className?: string;
+    name?: string;
+    id?: string;
+    needMark?: boolean;
+    maxMenuHeight?: CSSProperties['maxHeight'];
+};
+export declare const getNextEnabledOptionIndex: (options: DropDownOption[], startIndex: number, direction: 1 | -1) => number;
+export declare const DSDropDown: ({ options, value, onChange, placeholder, disabled, stringWhileDisabled, label, error, hint, className, name, id, needMark, maxMenuHeight, }: DSDropDownProps) => import("react").JSX.Element;
+//# sourceMappingURL=DSDropDown.d.ts.map

package/dist/components/DSDropDown/DSDropDown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DSDropDown.d.ts","sourceRoot":"","sources":["../../../src/components/DSDropDown/DSDropDown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+C,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAGxF,MAAM,MAAM,cAAc,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC1B,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CAC9C,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAClC,SAAS,cAAc,EAAE,EACzB,YAAY,MAAM,EAClB,WAAW,CAAC,GAAG,CAAC,CAAC,WAOpB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,6IAexB,eAAe,gCAyLjB,CAAC"}

package/dist/components/DSDropDownMultiple/DSDropDownMultiple.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties } from 'react';
+import { DropDownOption } from '../DSDropDown/DSDropDown';
+export type DSDropDownMultipleProps = {
+    options: DropDownOption[];
+    value: string[];
+    onChange?: (value: string[], selectedOptions: DropDownOption[]) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    label?: string;
+    error?: string;
+    hint?: string;
+    className?: string;
+    name?: string;
+    id?: string;
+    closeOnSelect?: boolean;
+    maxMenuHeight?: CSSProperties['maxHeight'];
+};
+export declare const DSDropDownMultiple: ({ options, value, onChange, placeholder, disabled, label, error, hint, className, name, id, closeOnSelect, maxMenuHeight, }: DSDropDownMultipleProps) => import("react").JSX.Element;
+//# sourceMappingURL=DSDropDownMultiple.d.ts.map

package/dist/components/DSDropDownMultiple/DSDropDownMultiple.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DSDropDownMultiple.d.ts","sourceRoot":"","sources":["../../../src/components/DSDropDownMultiple/DSDropDownMultiple.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+C,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AACxF,OAAO,EAA6B,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAG1F,MAAM,MAAM,uBAAuB,GAAG;IAClC,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,eAAe,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CAC9C,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,6HAchC,uBAAuB,gCAoKzB,CAAC"}

package/dist/components/DSFilters/DSFilters.d.ts

@@ -0,0 +1,54 @@
+import { DSDateRangeValue } from '../DSDateRange/DSDateRange';
+import { DropDownOption } from '../DSDropDown/DSDropDown';
+import { DSInputValue } from '../DSInput/DSInput';
+type CommonFilter = {
+    id: string;
+    label: string;
+    disabled?: boolean;
+    hidden?: boolean;
+    hint?: string;
+};
+export type DSInputFilter = CommonFilter & {
+    type: 'input';
+    placeholder?: string;
+    inputType?: 'text' | 'number';
+};
+export type DSDropDownFilter = CommonFilter & {
+    type: 'dropdown';
+    options: DropDownOption[];
+    placeholder?: string;
+};
+export type DSMultipleFilter = CommonFilter & {
+    type: 'multiple';
+    options: DropDownOption[];
+    placeholder?: string;
+};
+export type DSCheckboxFilter = CommonFilter & {
+    type: 'checkbox';
+};
+export type DSRadioFilter = CommonFilter & {
+    type: 'radio';
+};
+export type DSDateRangeFilter = CommonFilter & {
+    type: 'dateRange';
+    mode?: 'date' | 'datetime' | 'time';
+    min?: Date;
+    max?: Date;
+};
+export type DSFilterDefinition = DSInputFilter | DSDropDownFilter | DSMultipleFilter | DSCheckboxFilter | DSRadioFilter | DSDateRangeFilter;
+export type DSFilterValue = DSInputValue | string[] | boolean | DSDateRangeValue;
+export type DSFilterValues = Record<string, DSFilterValue>;
+export type DSFiltersProps<TValues extends DSFilterValues = DSFilterValues> = {
+    filters: DSFilterDefinition[];
+    values: TValues;
+    onChange?: (values: TValues, changedId: string) => void;
+    onApply?: (values: TValues) => void;
+    onReset?: () => void;
+    applyMode?: 'instant' | 'manual';
+    loading?: boolean;
+    disabled?: boolean;
+    className?: string;
+};
+export declare const DSFilters: <TValues extends DSFilterValues>({ filters, values, onChange, onApply, onReset, applyMode, loading, disabled, className, }: DSFiltersProps<TValues>) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=DSFilters.d.ts.map

package/dist/components/DSFilters/DSFilters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DSFilters.d.ts","sourceRoot":"","sources":["../../../src/components/DSFilters/DSFilters.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAChF,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE3E,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAIhE,KAAK,YAAY,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AACvG,MAAM,MAAM,aAAa,GAAG,YAAY,GAAG;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAA;CAAE,CAAC;AAClH,MAAM,MAAM,gBAAgB,GAAG,YAAY,GAAG;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,OAAO,EAAE,cAAc,EAAE,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AACpH,MAAM,MAAM,gBAAgB,GAAG,YAAY,GAAG;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,OAAO,EAAE,cAAc,EAAE,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AACpH,MAAM,MAAM,gBAAgB,GAAG,YAAY,GAAG;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,CAAC;AACnE,MAAM,MAAM,aAAa,GAAG,YAAY,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC;AAC7D,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,IAAI,CAAC;IAAC,GAAG,CAAC,EAAE,IAAI,CAAA;CAAE,CAAC;AAClI,MAAM,MAAM,kBAAkB,GAAG,aAAa,GAAG,gBAAgB,GAAG,gBAAgB,GAAG,gBAAgB,GAAG,aAAa,GAAG,iBAAiB,CAAC;AAC5I,MAAM,MAAM,aAAa,GAAG,YAAY,GAAG,MAAM,EAAE,GAAG,OAAO,GAAG,gBAAgB,CAAC;AACjF,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAE3D,MAAM,MAAM,cAAc,CAAC,OAAO,SAAS,cAAc,GAAG,cAAc,IAAI;IAC1E,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,SAAS,cAAc,EAAE,2FAUvD,cAAc,CAAC,OAAO,CAAC,gCA8BzB,CAAC"}

package/dist/components/DSIcon/DSIcon.d.ts

@@ -0,0 +1,8 @@
+import { SVGProps } from 'react';
+export type DSIconName = 'approve' | 'reject' | 'edit' | 'cross' | 'chevron' | 'basket' | 'info' | 'warning';
+export type DSIconProps = SVGProps<SVGSVGElement> & {
+    name: DSIconName;
+    title?: string;
+};
+export declare const DSIcon: ({ name, title, width, height, ...props }: DSIconProps) => import("react").JSX.Element;
+//# sourceMappingURL=DSIcon.d.ts.map

package/dist/components/DSIcon/DSIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DSIcon.d.ts","sourceRoot":"","sources":["../../../src/components/DSIcon/DSIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAC7G,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG;IAChD,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAaF,eAAO,MAAM,MAAM,GAAI,0CAAoD,WAAW,gCAkBrF,CAAC"}

package/dist/components/DSInfoBlock/DSInfoBlock.d.ts

@@ -0,0 +1,12 @@
+import { ElementType, ReactNode } from 'react';
+export type DSInfoBlockProps = {
+    title: ReactNode;
+    children: ReactNode;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    dismissLabel?: string;
+    headingAs?: Extract<ElementType, 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
+    className?: string;
+};
+export declare const DSInfoBlock: ({ title, children, dismissible, onDismiss, dismissLabel, headingAs: Heading, className, }: DSInfoBlockProps) => import("react").JSX.Element;
+//# sourceMappingURL=DSInfoBlock.d.ts.map