@phpsoftbox/react-softbox 2.0.0 → 2.1.0

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/feedback.md

@@ -1,6 +1,8 @@
 # Feedback
 
-Все статусные компоненты используют единый набор вариантов: `default`, `primary`, `secondary`, `info`, `success`, `warning`, `danger`, `dark`, `light`, `neutral`.
+Все статусные компоненты используют единый набор встроенных вариантов: `default`, `primary`, `secondary`, `info`, `success`, `warning`, `danger`, `dark`, `light`, `neutral`.
+
+Также поддерживаются custom variants через токены `--variant-{name}-*`; пример контракта описан в `theme.md`.
 
 ## Badge
 
@@ -12,6 +14,7 @@
 <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>

package/docs/theme.md

@@ -99,6 +99,31 @@ setThemeMode('dark', { storageKey: 'my-app-theme' });
 
 `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`: так они предсказуемее выглядят на разных масштабах и плотностях экрана.

package/package.json

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