@phpsoftbox/react-softbox 0.1.1 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -3
- package/dist/components/Badge/Badge.module.css +12 -12
- package/dist/components/Image/Image.d.ts +7 -0
- package/dist/components/Image/Image.js +15 -0
- package/dist/components/Image/Image.js.map +1 -0
- package/dist/components/Image/Image.module.css +17 -0
- package/dist/components/Input/FloatLabel/FloatLabel.module.css +14 -0
- package/dist/components/Input/NumberInput.d.ts +3 -1
- package/dist/components/Input/NumberInput.js +97 -28
- package/dist/components/Input/NumberInput.js.map +1 -1
- package/dist/components/Menu/Dropdown.d.ts +36 -3
- package/dist/components/Menu/Dropdown.js +71 -3
- package/dist/components/Menu/Dropdown.js.map +1 -1
- package/dist/components/Menu/Menu.d.ts +4 -1
- package/dist/components/Menu/Menu.js +10 -3
- package/dist/components/Menu/Menu.js.map +1 -1
- package/dist/components/Menu/Menu.module.css +50 -4
- package/dist/foundations/index.css +1 -0
- package/dist/foundations/tokens.css +31 -22
- package/dist/foundations/utilities.css +675 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/docs/README.md +1 -0
- package/docs/forms.md +9 -0
- package/docs/layout.md +15 -0
- package/docs/media.md +12 -0
- package/docs/navigation.md +29 -1
- package/docs/theme.md +28 -0
- package/docs/typography.md +11 -0
- package/package.json +1 -1
package/docs/layout.md
CHANGED
|
@@ -37,3 +37,18 @@
|
|
|
37
37
|
- `gap` — шаг между элементами
|
|
38
38
|
- `align`, `justify` — соответствуют flex‑свойствам
|
|
39
39
|
- `wrap` — управление переносом для `Row`
|
|
40
|
+
|
|
41
|
+
## Утилитарные отступы
|
|
42
|
+
|
|
43
|
+
Глобальные классы для отступов и gap основаны на `--spacing-1…10`.
|
|
44
|
+
|
|
45
|
+
```tsx
|
|
46
|
+
<div className="p-4">Внутренний отступ</div>
|
|
47
|
+
<div className="px-6 py-3">Отступы по осям</div>
|
|
48
|
+
<div className="gap-3">Gap для flex/grid контейнера</div>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
Доступны варианты:
|
|
52
|
+
- `p-`, `px-`, `py-`, `pt-`, `pr-`, `pb-`, `pl-`
|
|
53
|
+
- `m-`, `mx-`, `my-`, `mt-`, `mr-`, `mb-`, `ml-`
|
|
54
|
+
- `gap-`
|
package/docs/media.md
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
# Media
|
|
2
|
+
|
|
3
|
+
## Image
|
|
4
|
+
|
|
5
|
+
`Image` — обертка над `<img>` с преднастроенными вариантами скругления.
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
<Image src="/images/avatar.png" alt="Avatar" width={64} height={64} />
|
|
9
|
+
<Image src="/images/avatar.png" alt="Avatar" width={64} height={64} shape="circle" />
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
По умолчанию используется `shape="rounded"`.
|
package/docs/navigation.md
CHANGED
|
@@ -64,7 +64,35 @@ const topMenu = [
|
|
|
64
64
|
Отдельный dropdown‑компонент, если нужен произвольный триггер.
|
|
65
65
|
|
|
66
66
|
```tsx
|
|
67
|
-
<Dropdown trigger={<span>Открыть</span>}
|
|
67
|
+
<Dropdown trigger={<span>Открыть</span>} orientation="vertical" align="left">
|
|
68
|
+
<Dropdown.Header>Профиль</Dropdown.Header>
|
|
69
|
+
<Dropdown.Item>Настройки</Dropdown.Item>
|
|
70
|
+
<Dropdown.Separator />
|
|
71
|
+
<Dropdown.Item href="/logout">Выход</Dropdown.Item>
|
|
72
|
+
</Dropdown>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
Для ширины dropdown используйте `Dropdown.Nav`:
|
|
76
|
+
|
|
77
|
+
```tsx
|
|
78
|
+
<Dropdown
|
|
79
|
+
trigger={<Button appearance="outline">Профиль</Button>}
|
|
80
|
+
align="right"
|
|
81
|
+
>
|
|
82
|
+
<Dropdown.Nav className="dropdownWide">
|
|
83
|
+
<Dropdown.Header className="f-6">Профиль</Dropdown.Header>
|
|
84
|
+
<Dropdown.Item static>Строка без кнопки</Dropdown.Item>
|
|
85
|
+
</Dropdown.Nav>
|
|
86
|
+
</Dropdown>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
Если нужен не кликабельный текст внутри списка, используйте `Dropdown.Item` с `static`.
|
|
90
|
+
|
|
91
|
+
```tsx
|
|
92
|
+
<Dropdown trigger={<span>Открыть</span>}>
|
|
93
|
+
<Dropdown.Header>Уведомления</Dropdown.Header>
|
|
94
|
+
<Dropdown.Item static>Пока пусто</Dropdown.Item>
|
|
95
|
+
</Dropdown>
|
|
68
96
|
```
|
|
69
97
|
|
|
70
98
|
## CollapseButton
|
package/docs/theme.md
CHANGED
|
@@ -47,3 +47,31 @@ setThemeMode('dark', { storageKey: 'my-app-theme' });
|
|
|
47
47
|
```html
|
|
48
48
|
<html data-theme="light"></html>
|
|
49
49
|
```
|
|
50
|
+
|
|
51
|
+
## Кастомизация тем
|
|
52
|
+
|
|
53
|
+
Все цвета и размеры задаются через CSS‑переменные в `tokens.css`.
|
|
54
|
+
Можно переопределить их в своем CSS:
|
|
55
|
+
|
|
56
|
+
```css
|
|
57
|
+
:root {
|
|
58
|
+
--color-text: #0b1626;
|
|
59
|
+
--surface-panel: rgba(255, 255, 255, 0.98);
|
|
60
|
+
--radius-md: 14px;
|
|
61
|
+
--spacing-4: 18px;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
:root[data-theme="light"] {
|
|
65
|
+
--color-text: #0b1626;
|
|
66
|
+
--surface-panel: rgba(255, 255, 255, 0.98);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
:root[data-theme="dark"] {
|
|
70
|
+
--color-text: #e6f0ff;
|
|
71
|
+
--surface-panel: rgba(12, 24, 42, 0.98);
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
Рекомендуемый подход:
|
|
76
|
+
1. Скопировать нужные переменные из `packages-js/ReactSoftBox/src/foundations/tokens.css`.
|
|
77
|
+
2. Переопределить только отличающиеся значения в своём CSS (до инициализации темы).
|
package/docs/typography.md
CHANGED
|
@@ -24,3 +24,14 @@
|
|
|
24
24
|
```
|
|
25
25
|
|
|
26
26
|
Поддерживаемые варианты: `default`, `primary`, `info`, `success`, `warning`, `danger`.
|
|
27
|
+
|
|
28
|
+
## Утилитарные классы размера
|
|
29
|
+
|
|
30
|
+
Можно задавать размер шрифта через классы `f-1`…`f-9`.
|
|
31
|
+
|
|
32
|
+
```tsx
|
|
33
|
+
<Dropdown.Header className="f-6">Уведомления</Dropdown.Header>
|
|
34
|
+
<Text className="f-3">Подпись</Text>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
Шкала (px): `11, 12, 13, 14, 16, 18, 20, 24, 28`.
|