@phpsoftbox/react-softbox 0.3.0 → 0.4.1

package/docs/forms.md

@@ -20,6 +20,24 @@
 </Input>
 ```
 
+### Ошибка через Tooltip
+
+```tsx
+<Input>
+  <Input.Label>Почта</Input.Label>
+  <Input.Control>
+    <Input.Field hasError placeholder="name@example.com" />
+    <Input.ErrorTooltip content="Некорректный email" />
+  </Input.Control>
+</Input>
+
+<Input>
+  <Input.Label>Телефон</Input.Label>
+  <Input.Field hasError placeholder="+7 (___) ___-__-__" />
+  <Input.ErrorTooltip target="input" content="Введите номер" placement="right" />
+</Input>
+```
+
 ## Textarea
 
 ```tsx
@@ -88,6 +106,28 @@ const options = [
 </Input>
 ```
 
+`value` и `options.value` могут быть `string` или `number`.
+
+Для строгой типизации можно указать тип значения:
+
+```tsx
+import type { SelectOption } from '@phpsoftbox/react-softbox';
+
+type StatusValue = 10 | 20 | 30;
+
+const statusOptions: SelectOption<StatusValue>[] = [
+  { value: 10, label: 'Active' },
+  { value: 20, label: 'Blocked' },
+  { value: 30, label: 'Deleted' },
+];
+
+<Input.Select<StatusValue>
+  options={statusOptions}
+  value={status}
+  onChange={(value) => setStatus(value)}
+/>;
+```
+
 ### Поиск + multiple
 
 ```tsx
@@ -97,6 +137,21 @@ const options = [
 </Input>
 ```
 
+### Пустое значение и сброс
+
+```tsx
+<Input>
+  <Input.Label>Статус</Input.Label>
+  <Input.Select
+    options={options}
+    allowEmptyValue
+    emptyOptionLabel="Не выбрано"
+    searchable
+    clearable
+  />
+</Input>
+```
+
 ### Загрузка через axios
 
 ```tsx

package/docs/overlays.md

@@ -3,12 +3,12 @@
 ## Modal
 
 ```tsx
-<Modal open={open} title="Заголовок" onClose={() => setOpen(false)}>
+<Modal open={open} title="Заголовок" lockScroll onClose={() => setOpen(false)}>
   Контент модалки
 </Modal>
 ```
 
-Поддерживает `footer` для действий.
+Поддерживает `footer` для действий и `lockScroll` для блокировки скролла страницы (по умолчанию `true`).
 
 ## Drawer
 

package/docs/table.md

@@ -0,0 +1,137 @@
+# Table
+
+`Table` — табличный компонент с декларативными колонками, сортировкой и футером.
+
+## Базовый пример
+
+```tsx
+const columns = [
+  { id: 'name', header: 'Название', accessor: 'name' },
+  { id: 'status', header: 'Статус', accessor: 'status' },
+  { id: 'amount', header: 'Сумма', accessor: (row) => `${row.amount} ₽`, align: 'right' },
+];
+
+<Table columns={columns} data={rows} />;
+```
+
+## Колонки из бэкенда
+
+```tsx
+const backendColumns = [
+  { id: 'client', title: 'Клиент', field: 'client', sortable: true },
+  { id: 'project', title: 'Проект', field: 'project' },
+  { id: 'amount', title: 'Сумма', field: 'amount', sortable: true, align: 'right' },
+];
+
+<Table columns={backendColumns} data={rows} />;
+```
+
+`header`, `label`, `title`, `field` используются по цепочке как заголовок. `accessor` может быть ключом или функцией.
+
+## Сортировка с обновлением query‑параметров
+
+```tsx
+const [sort, setSort] = useState({ key: 'amount', direction: 'asc' });
+
+<Table
+  columns={[
+    { id: 'client', header: 'Клиент', accessor: 'client', sortable: true },
+    { id: 'amount', header: 'Сумма', accessor: 'amount', sortable: true, align: 'right' },
+  ]}
+  data={rows}
+  sort={{
+    key: sort.key,
+    direction: sort.direction,
+    param: 'sort',
+    orderParam: 'order',
+    onChange: (next, url) => {
+      setSort(next);
+      window.history.replaceState(null, '', url);
+    },
+  }}
+/>;
+```
+
+## Футер
+
+```tsx
+const columns = [
+  { id: 'name', header: 'Товар', accessor: 'name', footer: 'Итого' },
+  {
+    id: 'amount',
+    header: 'Сумма',
+    accessor: 'amount',
+    align: 'right',
+    footer: (rows) => rows.reduce((sum, row) => sum + row.amount, 0),
+  },
+];
+
+<Table columns={columns} data={rows} showFooter />;
+```
+
+### Футер только в нужных колонках
+
+```tsx
+const columns = [
+  { id: 'a', header: 'A', accessor: 'a' },
+  { id: 'b', header: 'B', accessor: 'b' },
+  { id: 'c', header: 'C', accessor: 'c' },
+  { id: 'd', header: 'D', accessor: 'd', footer: 'Итого' },
+  { id: 'e', header: 'E', accessor: 'e', footer: (rows) => rows.reduce((sum, row) => sum + row.e, 0) },
+];
+
+<Table columns={columns} data={rows} showFooter />;
+```
+
+## Выбор строк + renderBulkAction
+
+```tsx
+const [selected, setSelected] = useState<React.Key[]>([]);
+
+<Table
+  columns={columns}
+  data={rows}
+  selection={{
+    selectedIds: selected,
+    onToggle: (id) => setSelected((prev) => prev.includes(id) ? prev.filter((key) => key !== id) : [...prev, id]),
+    onToggleAll: (ids) => setSelected((prev) => ids.length > 0 && ids.every((id) => prev.includes(id)) ? [] : ids),
+  }}
+  renderBulkAction={(ids) => (
+    <div>
+      Выбрано: {ids.length}
+    </div>
+  )}
+/>;
+```
+
+## Bulk actions
+
+```tsx
+<Table
+  columns={columns}
+  data={rows}
+  selection={{
+    selectedIds: selected,
+    onToggle: (id) => setSelected((prev) => prev.includes(id) ? prev.filter((key) => key !== id) : [...prev, id]),
+  }}
+  bulkActions={{
+    selectedIds: selected,
+    actions: [
+      { id: 'remove', label: 'Удалить', onClick: (ids) => console.log(ids) },
+    ],
+    disabled: false,
+    placement: 'both',
+  }}
+/>;
+```
+
+По умолчанию `placement` = `both`.
+
+## Полезные поля колонки
+
+- `field` / `accessor` / `cell` — источник данных
+- `sortable`, `sortKey` — сортировка для колонки
+- `footer` — значение в футере (node или функция)
+- `hideOn` — скрыть колонку на `sm`/`md`/`lg`
+- `width` / `minWidth` — размеры колонки
+- `align` — `left` | `center` | `right`

package/docs/tabs.md

@@ -32,3 +32,20 @@ const [activeId, setActiveId] = useState('overview');
 
 - `badge` — дополнительная метка справа (например, `<Badge variant="info">3</Badge>`).
 - `defaultActiveId` — активная вкладка по умолчанию (uncontrolled).
+
+## CSS‑классы для ссылок
+
+Можно использовать стили табов для ссылок:
+
+```tsx
+<div className="tabs tabs-horizontal">
+  <div className="tabs-list">
+    <a className="tab tab-active" href="#overview">
+      <span className="tab-label">Обзор</span>
+    </a>
+    <a className="tab" href="#metrics">
+      <span className="tab-label">Метрики</span>
+    </a>
+  </div>
+</div>
+```

package/docs/tooltip.md

@@ -0,0 +1,68 @@
+# Tooltip
+
+`Tooltip` — всплывающая подсказка для элементов интерфейса.
+
+## Базовый пример
+
+```tsx
+<Tooltip content="Подсказка">
+  <Button>Наведи</Button>
+</Tooltip>
+```
+
+## Направление
+
+`placement`: `auto` | `top` | `bottom` | `left` | `right`.
+
+```tsx
+<Tooltip content="Справа" placement="right">
+  <span>Help</span>
+</Tooltip>
+```
+
+## Интерактивный контент
+
+Если нужно, чтобы подсказка не исчезала при наведении мышью на сам tooltip (например, есть ссылки), включите `interactive`.
+
+```tsx
+<Tooltip
+  interactive
+  content={
+    <>
+      <Tooltip.Header>Подробности</Tooltip.Header>
+      <Tooltip.Body>
+        Перейдите в <a href="/docs">документацию</a>.
+      </Tooltip.Body>
+      <Tooltip.Footer>Последнее обновление: сегодня</Tooltip.Footer>
+    </>
+  }
+>
+  <Button>Подробнее</Button>
+</Tooltip>
+```
+
+## Варианты
+
+`variant`: `default` | `info` | `success` | `warning` | `danger`.
+
+```tsx
+<Tooltip content="Важно" variant="warning">
+  <span>!</span>
+</Tooltip>
+```
+
+## Header / Body / Footer
+
+```tsx
+<Tooltip
+  content={
+    <>
+      <Tooltip.Header>Заголовок</Tooltip.Header>
+      <Tooltip.Body>Подробности и описание.</Tooltip.Body>
+      <Tooltip.Footer>Доп. инфо</Tooltip.Footer>
+    </>
+  }
+>
+  <Button>Подробнее</Button>
+</Tooltip>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phpsoftbox/react-softbox",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",