@phpsoftbox/react-softbox 1.16.1 → 2.1.0

package/dist/index.d.ts

@@ -36,10 +36,10 @@ 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';
-export type { UiVariant } from './types';
+export type { BuiltinUiVariant, CustomUiVariant, UiVariant } from './types';
 export { applyTheme, setThemeMode, getStoredThemeMode, initTheme } from './theme';
 export type { ThemeMode, ThemeOptions } from './theme';

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,3 @@
-export type UiVariant = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+export type BuiltinUiVariant = 'default' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'dark' | 'light' | 'neutral';
+export type CustomUiVariant = string & {};
+export type UiVariant = BuiltinUiVariant | CustomUiVariant;

package/dist/utils/uiVariant.d.ts

@@ -0,0 +1,16 @@
+import type React from 'react';
+import type { BuiltinUiVariant, UiVariant } from '../types';
+export type CssVarStyle = React.CSSProperties & Record<`--${string}`, string | number | undefined>;
+export declare const builtinUiVariants: readonly ["default", "primary", "secondary", "info", "success", "warning", "danger", "dark", "light", "neutral"];
+export declare const isBuiltinUiVariant: (variant: UiVariant | undefined) => variant is BuiltinUiVariant;
+export declare const getBuiltinUiVariantClass: (classMap: Record<BuiltinUiVariant, string>, variant: UiVariant | undefined) => string | undefined;
+export declare const normalizeUiVariantToken: (variant: UiVariant | undefined, fallback?: BuiltinUiVariant) => string;
+export declare const mergeStyles: (base: React.CSSProperties | undefined, override: React.CSSProperties | undefined) => React.CSSProperties | undefined;
+export declare const buildButtonVariantStyle: (variant: UiVariant) => CssVarStyle;
+export declare const buildBadgeVariantStyle: (variant: UiVariant) => CssVarStyle;
+export declare const buildProgressVariantStyle: (variant: UiVariant) => CssVarStyle;
+export declare const buildNotifierVariantStyle: (variant: UiVariant) => CssVarStyle;
+export declare const buildAlertVariantStyle: (variant: UiVariant) => CssVarStyle;
+export declare const buildTextVariantStyle: (variant: UiVariant) => React.CSSProperties;
+export declare const buildTooltipVariantStyle: (variant: UiVariant) => CssVarStyle;
+export declare const buildWizardStepVariantStyle: (variant: UiVariant) => CssVarStyle;

package/dist/utils/uiVariant.js

@@ -0,0 +1,106 @@
+export const builtinUiVariants = [
+    'default',
+    'primary',
+    'secondary',
+    'info',
+    'success',
+    'warning',
+    'danger',
+    'dark',
+    'light',
+    'neutral',
+];
+const builtinUiVariantSet = new Set(builtinUiVariants);
+const cssIdentPattern = /^-?[_a-zA-Z][-_a-zA-Z0-9]*$/;
+export const isBuiltinUiVariant = (variant) => (typeof variant === 'string' && builtinUiVariantSet.has(variant));
+export const getBuiltinUiVariantClass = (classMap, variant) => (isBuiltinUiVariant(variant) ? classMap[variant] : undefined);
+export const normalizeUiVariantToken = (variant, fallback = 'default') => {
+    const token = String(variant ?? fallback).trim();
+    return cssIdentPattern.test(token) ? token : fallback;
+};
+const variantVar = (token, key, fallbackVariant = 'default', fallbackKey = key) => `var(--variant-${token}-${key}, var(--variant-${fallbackVariant}-${fallbackKey}))`;
+export const mergeStyles = (base, override) => {
+    if (!base) {
+        return override;
+    }
+    if (!override) {
+        return base;
+    }
+    return { ...base, ...override };
+};
+export const buildButtonVariantStyle = (variant) => {
+    const token = normalizeUiVariantToken(variant);
+    return {
+        '--btn-accent': variantVar(token, 'accent'),
+        '--btn-accent-soft': variantVar(token, 'soft'),
+        '--btn-bg': variantVar(token, 'bg'),
+        '--btn-bg-hover': variantVar(token, 'hover'),
+        '--btn-bg-active': variantVar(token, 'active'),
+        '--btn-border': variantVar(token, 'border'),
+        '--btn-border-hover': variantVar(token, 'border'),
+        '--btn-border-active': variantVar(token, 'border'),
+        '--btn-color': variantVar(token, 'text'),
+        '--btn-bg-disabled': variantVar(token, 'disabled-bg', 'default', 'disabled-bg'),
+        '--btn-border-disabled': variantVar(token, 'disabled-border', 'default', 'disabled-border'),
+        '--btn-color-disabled': variantVar(token, 'disabled-text', 'default', 'disabled-text'),
+        '--btn-shadow': `0 12px 30px color-mix(in srgb, ${variantVar(token, 'bg')} 28%, transparent)`,
+        '--btn-shadow-hover': `0 16px 36px color-mix(in srgb, ${variantVar(token, 'bg')} 36%, transparent)`,
+    };
+};
+export const buildBadgeVariantStyle = (variant) => {
+    const token = normalizeUiVariantToken(variant);
+    return {
+        '--badge-bg': variantVar(token, 'bg'),
+        '--badge-color': variantVar(token, 'text'),
+        '--badge-border': variantVar(token, 'border'),
+    };
+};
+export const buildProgressVariantStyle = (variant) => {
+    const token = normalizeUiVariantToken(variant);
+    return {
+        '--progress-bg': variantVar(token, 'accent', 'default', 'accent'),
+    };
+};
+export const buildNotifierVariantStyle = (variant) => {
+    const token = normalizeUiVariantToken(variant);
+    return {
+        borderColor: variantVar(token, 'border'),
+        '--toast-accent': variantVar(token, 'accent', 'default', 'accent'),
+    };
+};
+export const buildAlertVariantStyle = (variant) => {
+    const token = normalizeUiVariantToken(variant);
+    return {
+        borderColor: variantVar(token, 'border'),
+        boxShadow: `0 0 0 1px color-mix(in srgb, ${variantVar(token, 'bg')} 20%, transparent)`,
+        '--alert-icon-color': variantVar(token, 'accent', 'default', 'accent'),
+        '--alert-icon-bg': variantVar(token, 'soft'),
+        '--alert-icon-bg-border': `color-mix(in srgb, ${variantVar(token, 'border')} 55%, transparent)`,
+    };
+};
+export const buildTextVariantStyle = (variant) => {
+    const token = normalizeUiVariantToken(variant);
+    return {
+        color: variantVar(token, 'accent', 'default', 'accent'),
+    };
+};
+export const buildTooltipVariantStyle = (variant) => {
+    const token = normalizeUiVariantToken(variant);
+    return {
+        '--tooltip-bg': `color-mix(in srgb, ${variantVar(token, 'bg')} 28%, var(--surface-panel))`,
+        '--tooltip-border': variantVar(token, 'border'),
+        '--tooltip-color': variantVar(token, 'text', 'default', 'text'),
+    };
+};
+export const buildWizardStepVariantStyle = (variant) => {
+    const token = normalizeUiVariantToken(variant);
+    return {
+        '--wizard-step-bg': variantVar(token, 'soft'),
+        '--wizard-step-border': variantVar(token, 'border'),
+        '--wizard-step-color': variantVar(token, 'accent', 'default', 'accent'),
+        '--wizard-step-index-bg': variantVar(token, 'bg'),
+        '--wizard-step-index-color': variantVar(token, 'text'),
+        '--wizard-step-shadow': `color-mix(in srgb, ${variantVar(token, 'bg')} 22%, transparent)`,
+    };
+};
+//# sourceMappingURL=uiVariant.js.map

package/dist/utils/uiVariant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"uiVariant.js","sourceRoot":"","sources":["../../src/utils/uiVariant.ts"],"names":[],"mappings":"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"}

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,21 +1,31 @@
 # Feedback
 
-Все статусные компоненты используют единый набор вариантов: `default`, `primary`, `info`, `success`, `warning`, `danger`.
+Все статусные компоненты используют единый набор встроенных вариантов: `default`, `primary`, `secondary`, `info`, `success`, `warning`, `danger`, `dark`, `light`, `neutral`.
+
+Также поддерживаются custom variants через токены `--variant-{name}-*`; пример контракта описан в `theme.md`.
 
 ## 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>
 <Badge variant="danger">Danger</Badge>
+<Badge variant="brand">Brand</Badge>
 <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/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,72 @@ 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-варианта в общей палитре.
+
+Можно добавлять project-level custom variants. Имя должно быть валидным CSS identifier (`brand`, `crm-accent`, `tenant_1`). Компоненты будут искать токены по схеме `--variant-{name}-*`:
+
+```css
+:root {
+  --variant-brand-bg: #8b5cf6;
+  --variant-brand-hover: #9468ff;
+  --variant-brand-active: #7c3aed;
+  --variant-brand-border: #7c3aed;
+  --variant-brand-text: #ffffff;
+  --variant-brand-accent: #a78bfa;
+  --variant-brand-soft: rgba(139, 92, 246, 0.18);
+  --variant-brand-disabled-bg: var(--variant-disabled-bg);
+  --variant-brand-disabled-border: var(--variant-disabled-border);
+  --variant-brand-disabled-text: var(--variant-disabled-text);
+}
+```
+
+```tsx
+<Button variant="brand">Brand</Button>
+<Badge variant="brand">Brand</Badge>
+<Progress variant="brand" value={64} />
+```
+
+Если токен custom variant не задан, компонент использует fallback из `default`.
+
+## 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.1",
+  "version": "2.1.0",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",