@phpsoftbox/react-softbox 1.16.0 → 2.0.0

package/dist/index.d.ts

@@ -36,7 +36,7 @@ export { default as Table } from './components/Table/Table';
 export { default as Wizard } from './components/Wizard/Wizard';
 export type { TableBulkAction, TableBulkActions, TableColumn, TableRenderBulkAction, TableSelection, TableSortDirection, TableSortOptions, TableSortState, } from './components/Table/Table';
 export type { TooltipPlacement, TooltipVariant } from './components/Tooltip/Tooltip';
-export type { WizardBlockedTransition, WizardDirection, WizardProgressState, WizardStep, WizardStepProps, WizardStepContentProps, WizardStepRenderProps, WizardStepStatus, WizardUrlSyncMode, WizardSummaryData, WizardSummaryProps, WizardSummaryVariant, WizardTemplateProps, WizardWindowSizeMap, WizardStepVisibilityContext, WizardTransitionContext, } from './components/Wizard/Wizard';
+export type { WizardBlockedTransition, WizardDirection, WizardProgressState, WizardStep, WizardStepProps, WizardStepContentProps, WizardStepRenderProps, WizardStepStatus, WizardStepVariantMap, WizardUrlSyncMode, WizardSummaryData, WizardSummaryProps, WizardSummaryVariant, WizardTemplateProps, WizardWindowSizeMap, WizardStepVisibilityContext, WizardTransitionContext, } from './components/Wizard/Wizard';
 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,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,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;AAErE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAElE,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;AAE3E,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;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AA8B/D,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,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,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;AAErE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAElE,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;AAE3E,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;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AA+B/D,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/dist/types.d.ts

@@ -1 +1 @@
-export type UiVariant = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+export type UiVariant = 'default' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'dark' | 'light' | 'neutral';

package/docs/card.md

@@ -34,7 +34,7 @@
 
 ```tsx
 <Card.Toolbar>
-  <Card.Toolbar.Group>
+  <Card.Toolbar.Group attached>
     <Card.Toolbar.Button icon={<SaveIcon />} label="Сохранить" />
     <Card.Toolbar.Button icon={<RefreshIcon />} />
   </Card.Toolbar.Group>
@@ -43,6 +43,7 @@
 
 `Card.Toolbar.Button` принимает `icon` и/или `label` (минимум одно из них обязательно).
 Если переданы оба, внутри кнопки появится вертикальный разделитель. На средних экранах текстовая часть скрывается.
+`Card.Toolbar.Group attached` склеивает соседние кнопки в одну группу; без `attached` группы остаются разделёнными gap и toolbar-разделителями.
 
 Скрытие текста включено по умолчанию (`md`) и настраивается:
 - на уровне `Card.Toolbar`: `buttonHideLabelOn="md" | "never"`

package/docs/feedback.md

@@ -1,12 +1,13 @@
 # Feedback
 
-Все статусные компоненты используют единый набор вариантов: `default`, `primary`, `info`, `success`, `warning`, `danger`.
+Все статусные компоненты используют единый набор вариантов: `default`, `primary`, `secondary`, `info`, `success`, `warning`, `danger`, `dark`, `light`, `neutral`.
 
 ## Badge
 
 ```tsx
 <Badge>Default</Badge>
 <Badge variant="primary">Primary</Badge>
+<Badge variant="secondary">Secondary</Badge>
 <Badge variant="info">Info</Badge>
 <Badge variant="success">Success</Badge>
 <Badge variant="warning">Warning</Badge>
@@ -14,8 +15,14 @@
 <Badge size="sm" variant="info">Small</Badge>
 <Badge size="md" variant="info">Medium</Badge>
 <Badge size="lg" variant="info">Large</Badge>
+<Badge variant="success" className="rounded-pill">Pill</Badge>
+<Badge variant="warning" className="rounded-circle size-6 p-0 f-2">3</Badge>
+<Badge variant="info" className="border border-info text-uppercase f-2">helper styled</Badge>
+<Badge variant="danger" dot aria-label="Ошибка" className="p-2" />
 ```
 
+`Badge` не меняет регистр текста и не задает font-size. Для декоративных решений используйте helpers: `text-uppercase`, `f-2`, `border`, `rounded-pill`, `rounded-circle` и т.д.
+
 ## Alert
 
 ```tsx

package/docs/forms.md

@@ -237,9 +237,35 @@ const statusOptions = [
 <Input>
   <Input.Label>Цена</Input.Label>
   <Input.Group stretch>
-    <Input.Addon>₽</Input.Addon>
+    <Input.Group.Label>₽</Input.Group.Label>
     <Input.Number placeholder="0.00" />
-    <Button appearance="outline">OK</Button>
+    <Input.Group.Text>без НДС</Input.Group.Text>
+  </Input.Group>
+</Input>
+
+<Input>
+  <Input.Label>Телефон</Input.Label>
+  <Input.Group stretch>
+    <Input.Select
+      value={country}
+      options={countryOptions}
+      style={{ flex: '0 0 150px' }}
+      onChange={(next) => {
+        setCountry(next);
+        setPhone('');
+      }}
+    />
+    <Input.MaskedInput mask={phoneMasks[country]} value={phone} onChange={setPhone} />
+  </Input.Group>
+</Input>
+
+<Input>
+  <Input.Label>Скидка</Input.Label>
+  <Input.Group stretch>
+    <Input.Group.Choice>
+      <Input.Radio name="discount" label="%" />
+    </Input.Group.Choice>
+    <Input.Number placeholder="10" />
   </Input.Group>
 </Input>
 ```

package/docs/layout.md

@@ -56,7 +56,15 @@ const [open, setOpen] = useState(false);
 </Collapse>
 ```
 
-## Утилитарные отступы
+## Utility helpers
+
+Utility helpers — публичный слой поверх дизайн-токенов. Компоненты должны держать только структурный минимум, состояния и accessibility; декоративные решения вроде регистра текста, border, radius, размера текста, позиционирования и простого layout лучше добавлять через helpers в `className`.
+
+План миграции компонентов:
+1. Новые component styles не должны добавлять opinionated-оформление, если это можно выразить helper-классом.
+2. Существующие компоненты упрощаются по одному: сначала убираются декоративные typography/background/border/radius правила, затем примеры переводятся на helpers.
+3. Цветовые состояния компонентов должны брать палитру из `UiVariant` tokens, а не из component-specific color tokens.
+4. Component-specific CSS variables оставляются только для внутренней геометрии или сложного поведения, которое нельзя удобно описать helper-классом.
 
 Глобальные классы для отступов и gap основаны на `--spacing-1…10`.
 
@@ -70,6 +78,31 @@ const [open, setOpen] = useState(false);
 - `p-`, `px-`, `py-`, `pt-`, `pr-`, `pb-`, `pl-`
 - `m-`, `mx-`, `my-`, `mt-`, `mr-`, `mb-`, `ml-`
 - `gap-`
+- zero helpers: `p-0`, `px-0`, `py-0`, `m-0`, `gap-0`
+
+Typography и text:
+- размеры: `f-1`…`f-9`
+- вес: `fw-normal`, `fw-medium`, `fw-semibold`, `fw-bold`
+- line-height: `lh-1`, `lh-sm`, `lh-base`, `lh-lg`
+- цвет: `text-body`, `text-muted`, `text-muted-2`, `text-default`, `text-primary`, `text-secondary`, `text-info`, `text-success`, `text-warning`, `text-danger`, `text-dark`, `text-light`, `text-neutral`
+- выравнивание и регистр: `text-start`, `text-center`, `text-end`, `text-uppercase`, `text-lowercase`, `text-capitalize`, `text-normalcase`
+- переносы: `text-wrap`, `text-nowrap`, `text-break`, `text-truncate`, `line-clamp-1`, `line-clamp-2`, `line-clamp-3`
+
+Background, border и radius:
+- фон: `bg-surface`, `bg-surface-2`, `bg-panel`, `bg-transparent`
+- solid variant background: `bg-default`, `bg-primary`, `bg-secondary`, `bg-info`, `bg-success`, `bg-warning`, `bg-danger`, `bg-dark`, `bg-light`, `bg-neutral`
+- soft background: `bg-default-soft`, `bg-primary-soft`, `bg-secondary-soft`, `bg-info-soft`, `bg-success-soft`, `bg-warning-soft`, `bg-danger-soft`, `bg-dark-soft`, `bg-light-soft`, `bg-neutral-soft`
+- border: `border`, `border-0`, `border-top`, `border-right`, `border-bottom`, `border-left`, `border-1`, `border-2`, `border-3`
+- border color: `border-default`, `border-primary`, `border-secondary`, `border-info`, `border-success`, `border-warning`, `border-danger`, `border-dark`, `border-light`, `border-neutral`
+- radius: `rounded-0`, `rounded`, `rounded-xs`, `rounded-sm`, `rounded-md`, `rounded-lg`, `rounded-pill`, `rounded-circle`
+
+Display, flex, grid и position:
+- display: `d-none`, `d-block`, `d-inline-block`, `d-flex`, `d-inline-flex`, `d-grid`
+- flex: `flex-row`, `flex-column`, `flex-wrap`, `flex-nowrap`, `flex-1`, `flex-auto`, `flex-none`, `grow-0`, `grow-1`, `shrink-0`, `shrink-1`
+- align/justify: `items-start`, `items-center`, `items-end`, `items-stretch`, `justify-start`, `justify-center`, `justify-end`, `justify-between`, `justify-around`, `justify-evenly`
+- grid: `grid-cols-1`, `grid-cols-2`, `grid-cols-3`, `grid-cols-4`, `grid-cols-6`, `grid-cols-12`, `col-span-1`, `col-span-2`, `col-span-3`, `col-span-4`, `col-span-6`, `col-span-12`
+- position: `position-static`, `position-relative`, `position-absolute`, `position-fixed`, `position-sticky`, `inset-0`, `top-0`, `top-100`, `right-0`, `right-100`, `bottom-0`, `bottom-100`, `left-0`, `left-100`, `translate-none`, `translate-middle`, `translate-middle-x`, `translate-middle-y`, `z-0`, `z-1`, `z-10`, `z-20`, `z-50`
+- размеры/overflow/link: `w-100`, `h-100`, `size-1`…`size-10`, `min-w-0`, `overflow-hidden`, `overflow-auto`, `stretched-link`
 
 ## Классы кнопок
 
@@ -79,10 +112,17 @@ const [open, setOpen] = useState(false);
 <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>
+
+<div className="btn-group btn-group-horizontal" role="group" aria-label="Режим просмотра">
+  <button className="btn btn-neutral btn-outline">День</button>
+  <button className="btn btn-neutral btn-outline">Неделя</button>
+  <button className="btn btn-neutral btn-outline">Месяц</button>
+</div>
 ```
 
 Доступны:
 - базовый класс: `btn`
-- варианты: `btn-default`, `btn-primary`, `btn-info`, `btn-success`, `btn-warning`, `btn-danger`
+- варианты: `btn-default`, `btn-primary`, `btn-secondary`, `btn-info`, `btn-success`, `btn-warning`, `btn-danger`, `btn-dark`, `btn-light`, `btn-neutral`
 - внешность: `btn-solid`, `btn-outline`, `btn-ghost`
 - размеры: `btn-sm`, `btn-md`, `btn-lg`
+- группы: `btn-group`, `btn-group-horizontal`, `btn-group-vertical`, `btn-group-stretch`

package/docs/theme.md

@@ -57,8 +57,8 @@ setThemeMode('dark', { storageKey: 'my-app-theme' });
 :root {
   --color-text: #0b1626;
   --surface-panel: rgba(255, 255, 255, 0.98);
-  --radius-md: 14px;
-  --spacing-4: 18px;
+  --radius-md: 0.875rem;
+  --spacing-4: 1.125rem;
 }
 
 :root[data-theme="light"] {
@@ -75,3 +75,47 @@ setThemeMode('dark', { storageKey: 'my-app-theme' });
 Рекомендуемый подход:
 1. Скопировать нужные переменные из `packages-js/ReactSoftBox/src/foundations/tokens.css`.
 2. Переопределить только отличающиеся значения в своём CSS (до инициализации темы).
+
+## UiVariant tokens
+
+Для каждого варианта доступны токены:
+
+```css
+:root {
+  --variant-primary-bg: #14c9d6;
+  --variant-primary-hover: #18d1de;
+  --variant-primary-active: #0faeb9;
+  --variant-primary-border: rgba(20, 201, 214, 0.72);
+  --variant-primary-text: #06201c;
+  --variant-primary-accent: var(--variant-primary-bg);
+  --variant-primary-soft: rgba(20, 201, 214, 0.18);
+  --variant-primary-disabled-bg: var(--variant-disabled-bg);
+  --variant-primary-disabled-border: var(--variant-disabled-border);
+  --variant-primary-disabled-text: var(--variant-disabled-text);
+}
+```
+
+Та же схема есть для `default`, `primary`, `secondary`, `info`, `success`, `warning`, `danger`, `dark`, `light`, `neutral`.
+
+`default` и `neutral` — разные варианты. `default` используется для обычного UI-состояния компонента, а `neutral` — для явного нейтрального/status-варианта в общей палитре.
+
+## Radius and Units
+
+Базовые размеры, отступы, font-size и radius задаются в `rem`, чтобы интерфейс корректно масштабировался вместе с настройками шрифта пользователя. Hairline-границы (`1px`, `2px`) остаются в `px`: так они предсказуемее выглядят на разных масштабах и плотностях экрана.
+
+Основные radius-токены:
+
+```css
+:root {
+  --radius-default: 0.25rem;
+  --radius-pill: 50rem;
+  --radius-circle: 50%;
+
+  --btn-border-radius: var(--radius-default);
+  --badge-border-radius: var(--radius-default);
+  --card-border-radius: var(--radius-default);
+  --input-border-radius: var(--radius-default);
+}
+```
+
+Компоненты используют собственные `*-border-radius` переменные с fallback на базовые radius-токены. Для project-level кастомизации достаточно переопределить нужную component variable.

package/package.json

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