@phpsoftbox/react-softbox 0.1.0

package/docs/forms.md

@@ -0,0 +1,166 @@
+# Forms
+
+## Input
+
+```tsx
+<Input>
+  <Input.Label>Email</Input.Label>
+  <Input.Field placeholder="name@example.com" />
+</Input>
+
+<Input>
+  <Input.Label>Ошибка</Input.Label>
+  <Input.Field hasError placeholder="Введите корректные данные" />
+  <Input.ErrorBag>Поле заполнено неверно.</Input.ErrorBag>
+</Input>
+
+<Input layout="row" labelWidth={140}>
+  <Input.Label>Телефон</Input.Label>
+  <Input.Field placeholder="+7 (___) ___‑__‑__" />
+</Input>
+```
+
+## Textarea
+
+```tsx
+<Input>
+  <Input.Label>Комментарий</Input.Label>
+  <Input.TextArea placeholder="Текст..." />
+</Input>
+
+<Input layout="row" labelWidth={140}>
+  <Input.Label>Описание</Input.Label>
+  <Input.TextArea />
+</Input>
+```
+
+## Radio
+
+```tsx
+<Input.Radio name="mode" label="Основной" />
+<Input.Radio name="mode" label="Резервный" />
+```
+
+## Switch
+
+```tsx
+<Input.Switch label="Автообновления" defaultChecked />
+```
+
+## FloatLabel
+
+```tsx
+<Input>
+  <Input.FloatLabel label="Email">
+    <Input.Field name="email" />
+  </Input.FloatLabel>
+</Input>
+
+<Input>
+  <Input.FloatLabel label="Комментарий">
+    <Input.TextArea rows={4} />
+  </Input.FloatLabel>
+</Input>
+```
+
+`FloatLabel` добавляет placeholder и прокидывает `hasError` в вложенное поле.
+
+## Select
+
+### Статический список
+
+```tsx
+const options = [
+  { value: 'dev', label: 'Development' },
+  { value: 'prod', label: 'Production' },
+];
+
+<Input>
+  <Input.Label>Окружение</Input.Label>
+  <Input.Select options={options} />
+</Input>
+```
+
+### Поиск + multiple
+
+```tsx
+<Input>
+  <Input.Label>Сервисы</Input.Label>
+  <Input.Select options={options} multiple searchable />
+</Input>
+```
+
+### Загрузка через axios
+
+```tsx
+<Input>
+  <Input.Label>Пользователь</Input.Label>
+  <Input.Select
+    request={{
+      url: '/api/users',
+      method: 'get',
+      mapOptions: (data) => data.items.map((item) => ({ value: item.id, label: item.name })),
+    }}
+    onAfterRequest={(options, query) => console.log(options, query)}
+  />
+</Input>
+```
+
+## MaskedInput
+
+```tsx
+<Input>
+  <Input.Label>Телефон</Input.Label>
+  <Input.MaskedInput mask="+7 (999) 999-99-99" />
+</Input>
+```
+
+## Number (money)
+
+```tsx
+<Input>
+  <Input.Label>Сумма</Input.Label>
+  <Input.Number placeholder="0.00" />
+</Input>
+```
+
+## Date / Time
+
+```tsx
+<Input>
+  <Input.Label>Дата</Input.Label>
+  <Input.DatePicker />
+</Input>
+
+<Input>
+  <Input.Label>Дата и время</Input.Label>
+  <Input.DatePicker withTime />
+</Input>
+
+<Input>
+  <Input.Label>Время</Input.Label>
+  <Input.TimePicker />
+</Input>
+```
+
+## Интервал дат
+
+```tsx
+<Input>
+  <Input.Label>Период</Input.Label>
+  <Input.DateRange />
+</Input>
+```
+
+## InputGroup
+
+```tsx
+<Input>
+  <Input.Label>Цена</Input.Label>
+  <Input.Group stretch>
+    <Input.Addon>₽</Input.Addon>
+    <Input.Number placeholder="0.00" />
+    <Button appearance="outline">OK</Button>
+  </Input.Group>
+</Input>
+```

package/docs/layout.md

@@ -0,0 +1,39 @@
+# Layout
+
+## Grid
+
+`Grid` — базовая сетка с CSS‑переменными. На брейкпоинтах можно менять колонки.
+
+```tsx
+<Grid columns={12} columnsLg={8} columnsMd={4} columnsSm={1} gap="16px">
+  <div>One</div>
+  <div>Two</div>
+</Grid>
+```
+
+Параметры:
+- `columns` — количество колонок
+- `columnsLg`, `columnsMd`, `columnsSm` — колонки на 1280/1024/720px
+- `gap` — расстояние между колонками
+- `minWidth` — минимальная ширина колонки
+
+## Row / Stack
+
+`Row` — горизонтальный flex, `Stack` — вертикальный flex.
+
+```tsx
+<Row gap="12px" wrap="wrap">
+  <div>A</div>
+  <div>B</div>
+</Row>
+
+<Stack gap="12px">
+  <div>Item</div>
+  <div>Item</div>
+</Stack>
+```
+
+Параметры:
+- `gap` — шаг между элементами
+- `align`, `justify` — соответствуют flex‑свойствам
+- `wrap` — управление переносом для `Row`

package/docs/navigation.md

@@ -0,0 +1,80 @@
+# Navigation
+
+## Menu
+
+`Menu` — единый компонент для вертикальных и горизонтальных меню.
+
+```tsx
+const items = [
+  { label: 'Главная', href: '/' },
+  { label: 'Документы', href: '/docs' },
+  { divider: true },
+  { label: 'Настройки', href: '/settings' },
+];
+
+<Menu items={items} />
+<Menu items={items} orientation="horizontal" />
+```
+
+### Кастомный компонент ссылок
+
+По умолчанию используется `<a href>`. Если нужен `Link` (например, из Inertia/Next/React Router),
+передайте его через `as` или укажите `as` у конкретного пункта.
+
+```tsx
+import { Link } from '@inertiajs/react';
+
+<Menu items={items} as={Link} />
+
+const customItems = [
+  { label: 'Главная', href: '/', as: Link },
+  { label: 'Документы', href: '/docs' },
+];
+```
+
+### Collapsible (vertical)
+
+```tsx
+const groups = [
+  {
+    label: 'Сервисы',
+    open: true,
+    children: [{ label: 'Database' }, { label: 'Cache' }],
+  },
+];
+
+<Menu items={groups} />
+```
+
+### Dropdown (horizontal)
+
+```tsx
+const topMenu = [
+  { label: 'Главная', href: '/' },
+  { label: 'Команда', children: [{ label: 'Участники' }, { label: 'Роли' }] },
+];
+
+<Menu items={topMenu} orientation="horizontal" />
+```
+
+В `MenuItem` можно указать `align: 'left' | 'right'` для выравнивания dropdown‑меню.
+
+## Dropdown
+
+Отдельный dropdown‑компонент, если нужен произвольный триггер.
+
+```tsx
+<Dropdown trigger={<span>Открыть</span>} items={items} orientation="vertical" align="left" />
+```
+
+## CollapseButton
+
+Универсальная кнопка для коллапса/бургер‑меню.
+
+```tsx
+<CollapseButton targetId="filters-panel" open={open} onClick={() => setOpen((v) => !v)}>
+  Фильтры
+</CollapseButton>
+```
+
+Варианты: `burger` или `chevron`.

package/docs/overlays.md

@@ -0,0 +1,31 @@
+# Overlays
+
+## Modal
+
+```tsx
+<Modal open={open} title="Заголовок" onClose={() => setOpen(false)}>
+  Контент модалки
+</Modal>
+```
+
+Поддерживает `footer` для действий.
+
+## Drawer
+
+```tsx
+<Drawer open={open} title="Меню" position="left" onClose={() => setOpen(false)}>
+  Контент шторки
+</Drawer>
+```
+
+`position` может быть `left` или `right`.
+
+### Inline режим
+
+Если нужен «постоянный» сайдбар:
+
+```tsx
+<Drawer open mode="inline" position="left" showHeader={false} showClose={false}>
+  Контент навигации
+</Drawer>
+```

package/docs/pagination.md

@@ -0,0 +1,50 @@
+# Pagination
+
+`Pagination` — компонент навигации по страницам, совместимый с `links/meta` из бекенд‑пагинатора.
+
+## Базовое использование
+
+```tsx
+const pagination = {
+  links: {
+    first: 'https://api.local/users?page=1',
+    last: 'https://api.local/users?page=5',
+    prev: null,
+    next: 'https://api.local/users?page=2',
+  },
+  meta: {
+    current_page: 1,
+    last_page: 5,
+    per_page: 15,
+    total: 70,
+    from: 1,
+    to: 15,
+    path: 'https://api.local/users',
+  },
+};
+
+<Pagination meta={pagination.meta} links={pagination.links} />
+```
+
+## Управление навигацией вручную
+
+Если нужен контроль над переходом (например, через Inertia), используйте `onNavigate`.
+
+```tsx
+<Pagination
+  meta={pagination.meta}
+  links={pagination.links}
+  onNavigate={(page, url) => {
+    // Можно отправить запрос или обновить состояние
+    console.log(page, url);
+  }}
+/>;
+```
+
+## Полезные параметры
+
+- `window` — количество страниц вокруг текущей.
+- `showEdges` — показывать первую/последнюю страницу.
+- `showInfo` — показывать текст `from–to из total`.
+- `pageParam` — имя query‑параметра, по умолчанию `page`.
+- `buildUrl` — собственный способ собрать URL.

package/docs/progress.md

@@ -0,0 +1,18 @@
+# Progress
+
+`Progress` — индикатор выполнения задач.
+
+## Примеры
+
+```tsx
+<Progress value={40} label="Миграции" />
+<Progress value={72} label="Сборка" variant="primary" />
+<Progress value={88} label="Тесты" variant="info" showValue />
+<Progress label="Синхронизация" indeterminate />
+```
+
+## Варианты
+
+- `variant`: `default`, `primary`, `info`, `success`, `warning`, `danger`.
+- `size`: `sm`, `md`, `lg`.
+- `indeterminate`: бесконечная анимация, без значения.

package/docs/tabs.md

@@ -0,0 +1,34 @@
+# Tabs
+
+`Tabs` — переключатель контентных панелей. Поддерживает горизонтальное и вертикальное расположение.
+
+## Базовое использование
+
+```tsx
+const items = [
+  { id: 'overview', label: 'Обзор', content: 'Основная информация' },
+  { id: 'metrics', label: 'Метрики', content: 'Графики и показатели' },
+  { id: 'settings', label: 'Настройки', content: 'Скоро', disabled: true },
+];
+
+<Tabs items={items} />
+```
+
+## Управляемое состояние
+
+```tsx
+const [activeId, setActiveId] = useState('overview');
+
+<Tabs items={items} activeId={activeId} onChange={setActiveId} />;
+```
+
+## Вертикальная ориентация
+
+```tsx
+<Tabs items={items} orientation="vertical" />;
+```
+
+## Дополнительно
+
+- `badge` — дополнительная метка справа (например, `<Badge variant="info">3</Badge>`).
+- `defaultActiveId` — активная вкладка по умолчанию (uncontrolled).

package/docs/theme.md

@@ -0,0 +1,49 @@
+# Theme
+
+ReactSoftBox поддерживает светлую, темную и системную темы, а также режим `auto` (днем светлая, вечером темная).
+
+## Быстрый старт
+
+```ts
+import { initTheme } from '@phpsoftbox/react-softbox';
+
+initTheme({ defaultMode: 'system' });
+```
+
+## Смена темы
+
+```ts
+import { setThemeMode } from '@phpsoftbox/react-softbox';
+
+setThemeMode('light');
+setThemeMode('dark');
+setThemeMode('system');
+setThemeMode('auto');
+```
+
+## Настройка auto‑режима
+
+```ts
+setThemeMode('auto', {
+  autoStartHour: 7,  // с 07:00 светлая
+  autoEndHour: 19,   // с 19:00 темная
+});
+```
+
+## Хранение выбора
+
+По умолчанию режим сохраняется в `localStorage` по ключу `psb-theme-mode`.
+Можно переопределить:
+
+```ts
+initTheme({ storageKey: 'my-app-theme' });
+setThemeMode('dark', { storageKey: 'my-app-theme' });
+```
+
+## CSS‑переключение без JS
+
+Если нужно вручную переключать тему без JS, можно выставить атрибут:
+
+```html
+<html data-theme="light"></html>
+```

package/docs/typography.md

@@ -0,0 +1,26 @@
+# Typography
+
+Компоненты для текста и заголовков с единым набором цветовых вариантов.
+
+## Heading
+
+```tsx
+<Heading level={1}>Dashboard</Heading>
+<Heading level={2} variant="primary">Сводка</Heading>
+<Heading level={4} muted>Вспомогательный заголовок</Heading>
+```
+
+## Text
+
+```tsx
+<Text>Базовый текст</Text>
+<Text size="sm" muted>Подпись</Text>
+<Text weight="semibold">Полужирный</Text>
+<Text italic>Курсив</Text>
+<Text underline>Подчеркнутый</Text>
+<Text strike>Зачеркнутый</Text>
+<Text code>npm run dev</Text>
+<Text variant="warning">Предупреждение</Text>
+```
+
+Поддерживаемые варианты: `default`, `primary`, `info`, `success`, `warning`, `danger`.

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@phpsoftbox/react-softbox",
+  "version": "0.1.0",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "docs"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./theme": {
+      "types": "./dist/theme.d.ts",
+      "import": "./dist/theme.js"
+    },
+    "./types": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/types.js"
+    },
+    "./foundations/index.css": "./dist/foundations/index.css"
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "tsc -p tsconfig.build.json && node scripts/copy-css.mjs",
+    "prepublishOnly": "yarn clean && yarn build"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "axios": "^1.12.2"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "typescript": "^5.9.3"
+  }
+}