@phpsoftbox/react-softbox 0.2.0 → 0.4.0

package/dist/components/Tooltip/Tooltip.module.css

@@ -0,0 +1,124 @@
+.tooltip {
+  position: fixed;
+  z-index: 1200;
+  pointer-events: none;
+  opacity: 0;
+  transform: translateY(6px) scale(0.98);
+  transition: opacity 0.16s ease, transform 0.16s ease;
+  will-change: opacity, transform;
+}
+
+.tooltip[data-state='open'] {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.interactive {
+  pointer-events: auto;
+}
+
+.bubble {
+  max-width: var(--tooltip-max-width, 280px);
+  background: var(--tooltip-bg, var(--surface-panel));
+  color: var(--tooltip-color, var(--color-text));
+  border: 1px solid var(--tooltip-border, var(--color-line));
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-soft);
+  padding: var(--spacing-2) var(--spacing-3);
+  font-size: var(--font-size-2);
+  line-height: 1.4;
+  position: relative;
+}
+
+.variantDefault {
+  --tooltip-bg: var(--surface-panel);
+  --tooltip-border: var(--color-line);
+  --tooltip-color: var(--color-text);
+}
+
+.variantInfo {
+  --tooltip-bg: rgba(20, 42, 76, 0.95);
+  --tooltip-border: rgba(64, 110, 200, 0.65);
+  --tooltip-color: #cfe0ff;
+}
+
+.variantSuccess {
+  --tooltip-bg: rgba(16, 59, 42, 0.95);
+  --tooltip-border: rgba(47, 186, 122, 0.6);
+  --tooltip-color: #d3f6e4;
+}
+
+.variantWarning {
+  --tooltip-bg: rgba(64, 46, 18, 0.95);
+  --tooltip-border: rgba(246, 200, 106, 0.6);
+  --tooltip-color: #ffe6b3;
+}
+
+.variantDanger {
+  --tooltip-bg: rgba(64, 26, 26, 0.95);
+  --tooltip-border: rgba(255, 107, 107, 0.7);
+  --tooltip-color: #ffd2d2;
+}
+
+.bubble::after {
+  content: '';
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: var(--tooltip-bg, var(--surface-panel));
+  border: 1px solid var(--tooltip-border, var(--color-line));
+  transform: rotate(45deg);
+}
+
+.bubble[data-placement='top']::after {
+  left: 50%;
+  bottom: -6px;
+  transform: translateX(-50%) rotate(45deg);
+  border-left: none;
+  border-top: none;
+}
+
+.bubble[data-placement='bottom']::after {
+  left: 50%;
+  top: -6px;
+  transform: translateX(-50%) rotate(45deg);
+  border-right: none;
+  border-bottom: none;
+}
+
+.bubble[data-placement='left']::after {
+  top: 50%;
+  right: -6px;
+  transform: translateY(-50%) rotate(45deg);
+  border-left: none;
+  border-bottom: none;
+}
+
+.bubble[data-placement='right']::after {
+  top: 50%;
+  left: -6px;
+  transform: translateY(-50%) rotate(45deg);
+  border-right: none;
+  border-top: none;
+}
+
+.header {
+  font-weight: 600;
+  margin-bottom: var(--spacing-1);
+}
+
+.body {
+  font-size: inherit;
+}
+
+.footer {
+  margin-top: var(--spacing-2);
+  font-size: var(--font-size-2);
+  color: var(--color-muted);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tooltip {
+    transition: none;
+  }
+}

package/dist/{components/Button/Button.module.css → foundations/buttons.css}

@@ -1,45 +1,73 @@
-.button {
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
   border: 1px solid var(--btn-border, rgba(30, 51, 85, 0.6));
   cursor: pointer;
   font-weight: 600;
+  font-family: inherit;
+  line-height: 1;
   padding: 12px 18px;
   border-radius: var(--radius-sm);
+  font-size: var(--font-size-3);
   background: var(--btn-bg, rgba(15, 30, 51, 0.9));
   color: var(--btn-color, var(--color-text));
   box-shadow: var(--btn-shadow, none);
   transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease,
     color 0.2s ease;
+  text-decoration: none;
 }
 
-.button:focus-visible {
+.btn:focus-visible {
   outline: none;
   box-shadow: 0 0 0 3px rgba(20, 201, 214, 0.3);
 }
 
-.button:hover:not(:disabled) {
+.btn:hover:not(.btn-disabled):not(:disabled) {
   background: var(--btn-bg-hover, var(--btn-bg));
   box-shadow: var(--btn-shadow-hover, var(--btn-shadow, none));
 }
 
-.button:active:not(:disabled) {
+.btn:active:not(.btn-disabled):not(:disabled) {
   transform: translateY(1px);
 }
 
-.button:disabled {
+.btn:disabled,
+.btn.btn-disabled {
   opacity: 0.6;
   cursor: not-allowed;
+  pointer-events: none;
 }
 
-.solid {
+.btn-solid {
   transform: translateY(0);
 }
 
-.solid:hover:not(:disabled) {
+.btn-solid:hover:not(.btn-disabled):not(:disabled) {
   transform: translateY(-1px);
 }
 
-.outline,
-.ghost {
+.btn-sm {
+  padding: 8px 14px;
+  font-size: var(--font-size-2);
+  border-radius: var(--radius-xs);
+}
+
+.btn-md {
+  padding: 12px 18px;
+  font-size: var(--font-size-3);
+  border-radius: var(--radius-sm);
+}
+
+.btn-lg {
+  padding: 14px 22px;
+  font-size: var(--font-size-4);
+  border-radius: var(--radius-md);
+}
+
+.btn-outline,
+.btn-ghost {
   background: transparent;
   color: var(--btn-accent, var(--color-teal));
   border-color: var(--btn-accent, var(--color-teal));
@@ -48,16 +76,16 @@
   --btn-shadow-hover: none;
 }
 
-.ghost {
+.btn-ghost {
   border-color: transparent;
 }
 
-.outline:hover:not(:disabled),
-.ghost:hover:not(:disabled) {
+.btn-outline:hover:not(.btn-disabled):not(:disabled),
+.btn-ghost:hover:not(.btn-disabled):not(:disabled) {
   background: var(--btn-accent-soft, rgba(20, 201, 214, 0.12));
 }
 
-.variantDefault {
+.btn-default {
   --btn-accent: var(--btn-default-accent, rgba(158, 178, 204, 0.9));
   --btn-accent-soft: var(--btn-default-soft, rgba(30, 51, 85, 0.35));
   --btn-bg: linear-gradient(135deg, var(--btn-default-start, #2a3750), var(--btn-default-end, #1b263c));
@@ -68,7 +96,7 @@
   --btn-shadow-hover: 0 14px 30px rgba(10, 20, 35, 0.28);
 }
 
-.variantPrimary {
+.btn-primary {
   --btn-accent: var(--btn-primary-accent, rgba(20, 201, 214, 0.9));
   --btn-accent-soft: var(--btn-primary-soft, rgba(20, 201, 214, 0.18));
   --btn-bg: linear-gradient(135deg, var(--btn-primary-start, #14c9d6), var(--btn-primary-end, #1e63e9));
@@ -79,7 +107,7 @@
   --btn-shadow-hover: 0 16px 36px rgba(20, 201, 214, 0.4);
 }
 
-.variantInfo {
+.btn-info {
   --btn-accent: var(--btn-info-accent, rgba(30, 99, 233, 0.9));
   --btn-accent-soft: var(--btn-info-soft, rgba(30, 99, 233, 0.18));
   --btn-bg: linear-gradient(135deg, var(--btn-info-start, #4f7bff), var(--btn-info-end, #2e5be6));
@@ -90,7 +118,7 @@
   --btn-shadow-hover: 0 16px 36px rgba(30, 99, 233, 0.4);
 }
 
-.variantSuccess {
+.btn-success {
   --btn-accent: var(--btn-success-accent, rgba(79, 230, 163, 0.9));
   --btn-accent-soft: var(--btn-success-soft, rgba(79, 230, 163, 0.16));
   --btn-bg: linear-gradient(135deg, var(--btn-success-start, #35d092), var(--btn-success-end, #1faf75));
@@ -101,7 +129,7 @@
   --btn-shadow-hover: 0 16px 36px rgba(79, 230, 163, 0.36);
 }
 
-.variantWarning {
+.btn-warning {
   --btn-accent: var(--btn-warning-accent, rgba(246, 200, 106, 0.95));
   --btn-accent-soft: var(--btn-warning-soft, rgba(246, 200, 106, 0.2));
   --btn-bg: linear-gradient(135deg, var(--btn-warning-start, #ffd166), var(--btn-warning-end, #f4a62a));
@@ -112,7 +140,7 @@
   --btn-shadow-hover: 0 16px 36px rgba(246, 200, 106, 0.36);
 }
 
-.variantDanger {
+.btn-danger {
   --btn-accent: var(--btn-danger-accent, rgba(255, 107, 107, 0.95));
   --btn-accent-soft: var(--btn-danger-soft, rgba(255, 107, 107, 0.2));
   --btn-bg: linear-gradient(135deg, var(--btn-danger-start, #ff8f8f), var(--btn-danger-end, #ff5b5b));
@@ -124,7 +152,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .button {
+  .btn {
     transition: none;
   }
 }

package/dist/foundations/index.css

@@ -1,4 +1,5 @@
 @import "./tokens.css";
 @import "./typography.css";
 @import "./layout.css";
+@import "./buttons.css";
 @import "./utilities.css";

package/dist/foundations/tokens.css

@@ -135,6 +135,12 @@
   --spacing-8: 40px;
   --spacing-9: 48px;
   --spacing-10: 64px;
+
+  --ui-control-height: 48px;
+  --ui-control-padding-x: 16px;
+  --ui-control-padding-y: 12px;
+  --ui-control-font-size: var(--font-size-3);
+  --ui-control-line-height: 1.2;
 }
 
 :root[data-theme="light"] {

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { default as Input } from './components/Input/Input';
 export { default as Textarea } from './components/Input/Textarea/Textarea';
 export { default as Radio } from './components/Input/Radio/Radio';
 export { default as Switch } from './components/Input/Switch/Switch';
+export { default as Checkbox } from './components/Input/Checkbox/Checkbox';
 export { default as Select } from './components/Input/Select/Select';
 export { default as Alert } from './components/Alert/Alert';
 export { default as Notifier } from './components/Notifier/Notifier';
@@ -23,6 +24,11 @@ export { default as Tabs } from './components/Tabs/Tabs';
 export { default as Progress } from './components/Progress/Progress';
 export { default as Breadcrumbs } from './components/Breadcrumbs/Breadcrumbs';
 export { default as Image } from './components/Image/Image';
+export { default as FileUploader } from './components/FileUploader/FileUploader';
+export { default as Tooltip } from './components/Tooltip/Tooltip';
+export { default as Table } from './components/Table/Table';
+export type { TableBulkAction, TableBulkActions, TableColumn, TableRenderBulkAction, TableSelection, TableSortDirection, TableSortOptions, TableSortState, } from './components/Table/Table';
+export type { TooltipPlacement, TooltipVariant } from './components/Tooltip/Tooltip';
 export { default as Text } from './components/Typography/Text';
 export { default as Heading } from './components/Typography/Heading';
 export { default as useMediaQuery } from './hooks/useMediaQuery';

package/dist/index.js

@@ -7,6 +7,7 @@ export { default as Input } from './components/Input/Input';
 export { default as Textarea } from './components/Input/Textarea/Textarea';
 export { default as Radio } from './components/Input/Radio/Radio';
 export { default as Switch } from './components/Input/Switch/Switch';
+export { default as Checkbox } from './components/Input/Checkbox/Checkbox';
 export { default as Select } from './components/Input/Select/Select';
 export { default as Alert } from './components/Alert/Alert';
 export { default as Notifier } from './components/Notifier/Notifier';
@@ -23,6 +24,9 @@ export { default as Tabs } from './components/Tabs/Tabs';
 export { default as Progress } from './components/Progress/Progress';
 export { default as Breadcrumbs } from './components/Breadcrumbs/Breadcrumbs';
 export { default as Image } from './components/Image/Image';
+export { default as FileUploader } from './components/FileUploader/FileUploader';
+export { default as Tooltip } from './components/Tooltip/Tooltip';
+export { default as Table } from './components/Table/Table';
 export { default as Text } from './components/Typography/Text';
 export { default as Heading } from './components/Typography/Heading';
 export { default as useMediaQuery } from './hooks/useMediaQuery';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,4CAA4C,CAAC;AACvF,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,0CAA0C,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,4CAA4C,CAAC;AACvF,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,0CAA0C,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAY5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}

package/docs/README.md

@@ -28,7 +28,9 @@ import { Button, Card, Menu } from '@phpsoftbox/react-softbox';
 
 - `layout.md` — Grid, Flex, утилиты
 - `navigation.md` — Menu, Dropdown, CollapseButton
-- `forms.md` — Input (Field/Select/FloatLabel), Switch, Radio
+- `forms.md` — Input (Field/Select/FloatLabel), Switch, Radio, Checkbox, FileUploader
+- `table.md` — Table, сортировка, футер
+- `tooltip.md` — Tooltip и варианты
 - `overlays.md` — Modal, Drawer
 - `feedback.md` — Badge, Alert, Notifier
 - `card.md` — Card и его секции

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
@@ -41,6 +59,13 @@
 <Input.Radio name="mode" label="Резервный" />
 ```
 
+## Checkbox
+
+```tsx
+<Input.Checkbox label="Согласен с условиями" />
+<Input.Checkbox label="Премиум" description="Расширенные права" />
+```
+
 ## Switch
 
 ```tsx
@@ -90,6 +115,21 @@ const options = [
 </Input>
 ```
 
+### Пустое значение и сброс
+
+```tsx
+<Input>
+  <Input.Label>Статус</Input.Label>
+  <Input.Select
+    options={options}
+    allowEmptyValue
+    emptyOptionLabel="Не выбрано"
+    searchable
+    clearable
+  />
+</Input>
+```
+
 ### Загрузка через axios
 
 ```tsx
@@ -173,3 +213,23 @@ const options = [
   </Input.Group>
 </Input>
 ```
+
+## FileUploader
+
+```tsx
+<FileUploader
+  allowedTypes={['.jpg', '.png', '.pdf']}
+  maxFileSizeKb={2048}
+  multiple
+  showPreview
+  onChange={(files) => console.log(files)}
+  onUpload={(files) => api.upload(files)}
+/>;
+```
+
+Параметры:
+- `allowedTypes` — допустимые типы (расширения `.png` или MIME `image/*`)
+- `maxFileSizeKb` — ограничение размера
+- `multiple` — разрешить множественный выбор
+- `showPreview` — превью для изображений
+- `onUpload` — колбэк загрузки (опционально)

package/docs/layout.md

@@ -52,3 +52,19 @@
 - `p-`, `px-`, `py-`, `pt-`, `pr-`, `pb-`, `pl-`
 - `m-`, `mx-`, `my-`, `mt-`, `mr-`, `mb-`, `ml-`
 - `gap-`
+
+## Классы кнопок
+
+Глобальные классы для кнопок, которые можно применять к `a`/`button`.
+
+```tsx
+<a className="btn btn-primary btn-solid" href="/create">Создать</a>
+<a className="btn btn-info btn-outline" href="/details">Подробнее</a>
+<button className="btn btn-danger btn-ghost">Удалить</button>
+```
+
+Доступны:
+- базовый класс: `btn`
+- варианты: `btn-default`, `btn-primary`, `btn-info`, `btn-success`, `btn-warning`, `btn-danger`
+- внешность: `btn-solid`, `btn-outline`, `btn-ghost`
+- размеры: `btn-sm`, `btn-md`, `btn-lg`

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,114 @@
+# 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>
+  )}
+/>;
+```
+
+## Полезные поля колонки
+
+- `field` / `accessor` / `cell` — источник данных
+- `sortable`, `sortKey` — сортировка для колонки
+- `footer` — значение в футере (node или функция)
+- `hideOn` — скрыть колонку на `sm`/`md`/`lg`
+- `width` / `minWidth` — размеры колонки
+- `align` — `left` | `center` | `right`

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.2.0",
+  "version": "0.4.0",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -42,6 +42,10 @@
     "axios": "^1.12.2"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/jest": "^30.0.0",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
     "typescript": "^5.9.3"