@orcestr/ui 0.0.1

package/dist/example/ExampleThemePlayground.js

@@ -0,0 +1,596 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Badge, Button, Flex, ScrollArea, Stack, Text, } from '..';
+export const themePlaygroundPresets = [
+    {
+        id: 'orcestr-dark',
+        label: {
+            ru: 'Orcestr темная',
+            en: 'Orcestr dark',
+        },
+        description: {
+            ru: 'Нейтральная темная база платформы.',
+            en: 'Neutral dark platform base.',
+        },
+        mode: 'dark',
+        surface: 'orcestr',
+        accent: '#6ea0ff',
+        previewBg: '#111318',
+        previewPanel: '#171a21',
+        previewText: '#f4f6f8',
+        group: 'dark',
+    },
+    {
+        id: 'operations-dark',
+        label: {
+            ru: 'Operations',
+            en: 'Operations',
+        },
+        description: {
+            ru: 'Плотная тема для повторяющейся операционной работы.',
+            en: 'Dense theme for repeated operational work.',
+        },
+        mode: 'dark',
+        surface: 'operations',
+        accent: '#34d399',
+        previewBg: '#07140f',
+        previewPanel: '#0d2119',
+        previewText: '#e8fff5',
+        group: 'dark',
+        overrides: {
+            colors: {
+                bg: '#07140f',
+                panel: '#0d2119',
+                panelSoft: '#133126',
+                floating: '#0d2119',
+                brand: '#34d399',
+                brandStrong: '#86efac',
+                brandSolid: '#059669',
+                brandSolidHover: '#10b981',
+                brandSoft: 'rgb(52 211 153 / 16%)',
+                selected: 'rgb(52 211 153 / 14%)',
+                info: '#7dd3fc',
+                infoSoft: '#0b3240',
+            },
+        },
+    },
+    {
+        id: 'deep-black',
+        label: {
+            ru: 'Глубокий черный',
+            en: 'Deep black',
+        },
+        description: {
+            ru: 'Абсолютно черная база для OLED-интерфейсов.',
+            en: 'Absolute black base for OLED interfaces.',
+        },
+        mode: 'dark',
+        surface: 'orcestr',
+        accent: '#8ab4ff',
+        previewBg: '#000000',
+        previewPanel: '#050505',
+        previewText: '#f7f7f7',
+        group: 'dark',
+        overrides: {
+            colors: {
+                bg: '#000000',
+                panel: '#050505',
+                panelSoft: '#0a0a0a',
+                floating: '#050505',
+                section: 'rgb(255 255 255 / 1.5%)',
+                sectionNested: 'rgb(255 255 255 / 1%)',
+                pad: 'rgb(255 255 255 / 2.5%)',
+                padHover: 'rgb(255 255 255 / 5%)',
+                controlHover: 'rgb(255 255 255 / 6%)',
+                border: 'rgb(255 255 255 / 7%)',
+                borderStrong: 'rgb(255 255 255 / 12%)',
+                text: '#f7f7f7',
+                muted: '#9a9a9a',
+                brand: '#8ab4ff',
+                brandStrong: '#b7d1ff',
+                brandSolid: '#2759c7',
+                brandSolidHover: '#3369e6',
+                brandSoft: 'rgb(138 180 255 / 17%)',
+                selected: 'rgb(138 180 255 / 14%)',
+                focusRing: '0 0 0 3px rgb(138 180 255 / 20%)',
+                skeletonShimmer: 'rgb(255 255 255 / 7%)',
+            },
+            shadows: {
+                sm: 'none',
+                md: '0 18px 58px rgb(0 0 0 / 72%)',
+                overlay: '0 28px 90px rgb(0 0 0 / 82%)',
+                section: 'none',
+            },
+            components: {
+                buttonRadius: '5px',
+            },
+        },
+    },
+    {
+        id: 'graphite',
+        label: {
+            ru: 'Графит',
+            en: 'Graphite',
+        },
+        description: {
+            ru: 'Сдержанная аналитика и административные экраны.',
+            en: 'Restrained analytics and admin screens.',
+        },
+        mode: 'dark',
+        surface: 'orcestr',
+        accent: '#c4d3e8',
+        previewBg: '#111111',
+        previewPanel: '#1a1a1a',
+        previewText: '#eeeeee',
+        group: 'dark',
+        overrides: {
+            colors: {
+                bg: '#111111',
+                panel: '#1a1a1a',
+                panelSoft: '#242424',
+                floating: '#1b1b1b',
+                brand: '#c4d3e8',
+                brandStrong: '#e4edf8',
+                brandSolid: '#5d6f87',
+                brandSolidHover: '#71839b',
+                brandSoft: 'rgb(196 211 232 / 14%)',
+                selected: 'rgb(196 211 232 / 12%)',
+                info: '#8ecae6',
+                infoSoft: '#122f3a',
+            },
+            radii: {
+                md: '5px',
+                lg: '7px',
+                xl: '10px',
+            },
+        },
+    },
+    {
+        id: 'media-dark',
+        label: {
+            ru: 'Media dark',
+            en: 'Media dark',
+        },
+        description: {
+            ru: 'Мягкая темная тема для контентных интерфейсов.',
+            en: 'Soft dark theme for content-heavy interfaces.',
+        },
+        mode: 'dark',
+        surface: 'media',
+        accent: '#fb7185',
+        previewBg: '#120d0e',
+        previewPanel: '#2a1222',
+        previewText: '#fff0f6',
+        group: 'dark',
+        overrides: {
+            colors: {
+                bg: '#120d0e',
+                panel: '#2a1222',
+                panelSoft: '#3a1830',
+                floating: '#2a1222',
+                brand: '#fb7185',
+                brandStrong: '#fda4af',
+                brandSolid: '#be123c',
+                brandSolidHover: '#e11d48',
+                brandSoft: 'rgb(251 113 133 / 18%)',
+                selected: 'rgb(251 113 133 / 15%)',
+                warning: '#fbbf24',
+                warningSoft: '#4a2f0b',
+            },
+        },
+    },
+    {
+        id: 'catalog-dark',
+        label: {
+            ru: 'Catalog dark',
+            en: 'Catalog dark',
+        },
+        description: {
+            ru: 'Точная темная тема для структурированных каталогов.',
+            en: 'Precise dark theme for structured index surfaces.',
+        },
+        mode: 'dark',
+        surface: 'catalog',
+        accent: '#e6c26a',
+        previewBg: '#11100d',
+        previewPanel: '#191712',
+        previewText: '#f8f1dd',
+        group: 'dark',
+    },
+    {
+        id: 'midnight',
+        label: {
+            ru: 'Полночь',
+            en: 'Midnight',
+        },
+        description: {
+            ru: 'Сине-черная диспетчерская тема.',
+            en: 'Blue-black dispatcher theme.',
+        },
+        mode: 'dark',
+        surface: 'orcestr',
+        accent: '#a78bfa',
+        previewBg: '#09091f',
+        previewPanel: '#121234',
+        previewText: '#edf5ff',
+        group: 'dark',
+        overrides: {
+            colors: {
+                bg: '#09091f',
+                panel: '#121234',
+                panelSoft: '#1b1b4a',
+                floating: '#121234',
+                brand: '#a78bfa',
+                brandStrong: '#c4b5fd',
+                brandSolid: '#7c3aed',
+                brandSolidHover: '#8b5cf6',
+                brandSoft: 'rgb(167 139 250 / 17%)',
+                selected: 'rgb(167 139 250 / 14%)',
+                info: '#22d3ee',
+                infoSoft: '#083344',
+            },
+        },
+    },
+    {
+        id: 'orcestr-light',
+        label: {
+            ru: 'Orcestr светлая',
+            en: 'Orcestr light',
+        },
+        description: {
+            ru: 'Чистая светлая база продукта.',
+            en: 'Clean light product base.',
+        },
+        mode: 'light',
+        surface: 'orcestr',
+        accent: '#2563eb',
+        previewBg: '#f8fafc',
+        previewPanel: '#ffffff',
+        previewText: '#111827',
+        group: 'light',
+    },
+    {
+        id: 'operations-light',
+        label: {
+            ru: 'Operations light',
+            en: 'Operations light',
+        },
+        description: {
+            ru: 'Плотная светлая тема для повторяющейся операционной работы.',
+            en: 'Dense light theme for repeated operational work.',
+        },
+        mode: 'light',
+        surface: 'operations',
+        accent: '#047857',
+        previewBg: '#eefbf4',
+        previewPanel: '#ffffff',
+        previewText: '#092016',
+        group: 'light',
+        overrides: {
+            colors: {
+                bg: '#eefbf4',
+                panel: '#ffffff',
+                panelSoft: '#ddf4e8',
+                brand: '#047857',
+                brandStrong: '#065f46',
+                brandSolid: '#047857',
+                brandSolidHover: '#065f46',
+                brandSoft: 'rgb(4 120 87 / 12%)',
+                selected: 'rgb(4 120 87 / 10%)',
+            },
+        },
+    },
+    {
+        id: 'media-light',
+        label: {
+            ru: 'Media light',
+            en: 'Media light',
+        },
+        description: {
+            ru: 'Мягкая светлая тема для контентных интерфейсов.',
+            en: 'Soft light theme for content-heavy interfaces.',
+        },
+        mode: 'light',
+        surface: 'media',
+        accent: '#db2777',
+        previewBg: '#fff1f8',
+        previewPanel: '#ffffff',
+        previewText: '#181018',
+        group: 'light',
+        overrides: {
+            colors: {
+                bg: '#fff1f8',
+                panel: '#ffffff',
+                panelSoft: '#ffe4f2',
+                brand: '#db2777',
+                brandStrong: '#be185d',
+                brandSolid: '#db2777',
+                brandSolidHover: '#be185d',
+                brandSoft: 'rgb(219 39 119 / 12%)',
+                selected: 'rgb(219 39 119 / 10%)',
+            },
+        },
+    },
+    {
+        id: 'catalog-light',
+        label: {
+            ru: 'Catalog light',
+            en: 'Catalog light',
+        },
+        description: {
+            ru: 'Теплая светлая тема для структурированных каталогов.',
+            en: 'Warm light theme for structured index surfaces.',
+        },
+        mode: 'light',
+        surface: 'catalog',
+        accent: '#9b6f12',
+        previewBg: '#fbfaf6',
+        previewPanel: '#ffffff',
+        previewText: '#211a0f',
+        group: 'light',
+    },
+    {
+        id: 'porcelain',
+        label: {
+            ru: 'Фарфор',
+            en: 'Porcelain',
+        },
+        description: {
+            ru: 'Спокойная белая редакционная среда.',
+            en: 'Calm white editorial workspace.',
+        },
+        mode: 'light',
+        surface: 'orcestr',
+        accent: '#7c3aed',
+        previewBg: '#f8f5ff',
+        previewPanel: '#ffffff',
+        previewText: '#1d1435',
+        group: 'light',
+        overrides: {
+            colors: {
+                bg: '#f8f5ff',
+                panel: '#ffffff',
+                panelSoft: '#ede9fe',
+                brand: '#7c3aed',
+                brandStrong: '#5b21b6',
+                brandSolid: '#7c3aed',
+                brandSolidHover: '#6d28d9',
+                brandSoft: 'rgb(124 58 237 / 10%)',
+                selected: 'rgb(124 58 237 / 8%)',
+                section: 'rgb(124 58 237 / 3%)',
+                sectionNested: 'rgb(124 58 237 / 2%)',
+            },
+            shadows: {
+                section: 'none',
+            },
+        },
+    },
+    {
+        id: 'mint-light',
+        label: {
+            ru: 'Мята светлая',
+            en: 'Mint light',
+        },
+        description: {
+            ru: 'Свежая светлая тема для плотных рабочих экранов.',
+            en: 'Fresh light theme for dense work screens.',
+        },
+        mode: 'light',
+        surface: 'orcestr',
+        accent: '#0f9f6e',
+        previewBg: '#f4fbf8',
+        previewPanel: '#ffffff',
+        previewText: '#0f1f19',
+        group: 'light',
+        overrides: {
+            colors: {
+                bg: '#f4fbf8',
+                panel: '#ffffff',
+                panelSoft: '#eaf7f1',
+                brand: '#0f9f6e',
+                brandStrong: '#087a54',
+                brandSolid: '#0f9f6e',
+                brandSolidHover: '#0b8a5e',
+                brandSoft: 'rgb(15 159 110 / 11%)',
+                selected: 'rgb(15 159 110 / 9%)',
+            },
+        },
+    },
+];
+const themePresetGroups = [
+    { key: 'dark', label: { ru: 'Темные', en: 'Dark' } },
+    { key: 'light', label: { ru: 'Светлые', en: 'Light' } },
+];
+export function getThemePlaygroundPreset(id) {
+    return themePlaygroundPresets.find((preset) => preset.id === id) ?? themePlaygroundPresets[0];
+}
+export function themePresetLabel(preset, locale) {
+    return preset.label[locale];
+}
+export function themePresetDescription(preset, locale) {
+    return preset.description[locale];
+}
+const flatTokenSections = [
+    'colors',
+    'radii',
+    'spacing',
+    'breakpoints',
+    'shadows',
+    'typography',
+    'motion',
+    'toast',
+    'states',
+    'density',
+    'zIndex',
+    'components',
+];
+const statusKeys = ['neutral', 'brand', 'success', 'warning', 'danger', 'info'];
+const COLOR_TOKEN_COMMIT_DELAY_MS = 180;
+const themePlaygroundCopy = {
+    ru: {
+        title: 'Песочница тем',
+        description: 'Выберите базовую тему и редактируйте токены вживую. Вся страница примеров использует текущий набор токенов.',
+        tokenEditor: 'Редактор токенов',
+        resetPreset: 'Сбросить пресет',
+        primaryAction: 'Основное действие',
+        surface: 'Поверхность',
+        secondary: 'Вторичное',
+        ready: 'готово',
+        warning: 'внимание',
+        statuses: 'Статусы',
+        tokenSections: {
+            colors: 'Цвета',
+            radii: 'Радиусы',
+            spacing: 'Отступы',
+            breakpoints: 'Брейкпоинты',
+            shadows: 'Тени',
+            typography: 'Типографика',
+            motion: 'Движение',
+            toast: 'Toast',
+            states: 'Состояния',
+            density: 'Плотность',
+            zIndex: 'Z-index',
+            components: 'Компоненты',
+        },
+    },
+    en: {
+        title: 'Theme playground',
+        description: 'Choose a base theme and edit tokens live. The whole example page uses the current token set.',
+        tokenEditor: 'Token editor',
+        resetPreset: 'Reset preset',
+        primaryAction: 'Primary action',
+        surface: 'Surface',
+        secondary: 'Secondary',
+        ready: 'ready',
+        warning: 'warning',
+        statuses: 'Statuses',
+        tokenSections: {
+            colors: 'Colors',
+            radii: 'Radii',
+            spacing: 'Spacing',
+            breakpoints: 'Breakpoints',
+            shadows: 'Shadows',
+            typography: 'Typography',
+            motion: 'Motion',
+            toast: 'Toast',
+            states: 'States',
+            density: 'Density',
+            zIndex: 'Z-index',
+            components: 'Components',
+        },
+    },
+};
+export function ExampleThemePlayground({ activePresetId, theme, locale, onPresetChange, onThemeOverridesChange, }) {
+    const activePreset = getThemePlaygroundPreset(activePresetId);
+    const copy = themePlaygroundCopy[locale];
+    return (_jsxs("section", { id: 'theme', className: 'oui-section oui-ui-section', children: [_jsx("div", { className: 'oui-ui-section-head', children: _jsxs("div", { children: [_jsx("h2", { className: 'oui-ui-section-title', children: copy.title }), _jsx("p", { className: 'oui-ui-description', children: copy.description })] }) }), _jsxs("div", { className: 'oui-theme-playground', children: [_jsx(Stack, { className: 'oui-theme-playground-presets', g: 2, children: _jsx(ThemePresetSelector, { activePresetId: activePreset.id, locale: locale, onPresetChange: onPresetChange }) }), _jsxs("div", { className: 'oui-section oui-theme-preview', children: [_jsxs("div", { className: 'oui-theme-preview-head', children: [_jsx(Text, { fw: 760, children: copy.tokenEditor }), _jsx(Button, { size: 1, v: 'surface', onClick: () => onPresetChange(activePreset), children: copy.resetPreset })] }), _jsxs(ScrollArea, { className: 'oui-theme-preview-scroll', highlights: true, highlightColor: 'var(--oui-section-nested-solid-bg)', highlightTop: {
+                                    start: 2,
+                                    fadeDistance: 28,
+                                    maxOpacity: 0.94,
+                                }, highlightBottom: {
+                                    start: 2,
+                                    fadeDistance: 28,
+                                    maxOpacity: 0.94,
+                                }, children: [_jsxs("div", { className: 'oui-theme-token-editor', children: [flatTokenSections.map((section) => (_jsx(TokenSection, { title: tokenSectionLabel(section, locale), section: section, values: theme[section], onTokenChange: (key, value) => updateFlatToken(onThemeOverridesChange, section, key, value) }, section))), statusKeys.map((statusKey) => (_jsx(TokenSection, { title: `${copy.statuses} / ${statusKey}`, section: 'status', statusKey: statusKey, values: theme.status[statusKey], onTokenChange: (key, value) => updateStatusToken(onThemeOverridesChange, statusKey, key, String(value)) }, `status-${statusKey}`)))] }), _jsxs(Flex, { g: 2, wrap: true, children: [_jsx(Button, { size: 1, children: copy.primaryAction }), _jsx(Button, { size: 1, v: 'surface', children: copy.surface }), _jsx(Button, { size: 1, v: 'ghost', children: copy.secondary }), _jsx(Badge, { tone: 'success', children: copy.ready }), _jsx(Badge, { tone: 'warning', children: copy.warning })] })] })] })] })] }));
+}
+export function ThemePresetSelector({ activePresetId, locale, onPresetChange, }) {
+    return (_jsx("div", { className: 'oui-theme-preset-grid', children: themePresetGroups.map((group) => (_jsxs("div", { className: 'oui-theme-preset-group', children: [_jsx("div", { className: 'oui-theme-preset-group-label', children: group.label[locale] }), _jsx(ScrollArea, { className: 'oui-theme-preset-scroll', highlights: true, highlightColor: 'var(--oui-section-solid-bg)', highlightTop: {
+                        start: 1,
+                        fadeDistance: 18,
+                        maxOpacity: 0.94,
+                    }, highlightBottom: {
+                        start: 1,
+                        fadeDistance: 18,
+                        maxOpacity: 0.94,
+                    }, children: _jsx("div", { className: 'oui-theme-preset-list', children: themePlaygroundPresets
+                            .filter((preset) => preset.group === group.key)
+                            .map((preset) => (_jsxs("button", { type: 'button', className: 'oui-theme-preset-card', "data-active": activePresetId === preset.id ? 'true' : undefined, style: themePresetPreviewStyle(preset), onClick: () => onPresetChange(preset), children: [_jsxs("span", { className: 'oui-theme-preset-preview', children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }), _jsxs("span", { className: 'oui-theme-preset-body', children: [_jsx("strong", { children: themePresetLabel(preset, locale) }), _jsx("span", { children: themePresetDescription(preset, locale) })] })] }, preset.id))) }) })] }, group.key))) }));
+}
+export function themePresetPreviewStyle(preset) {
+    return {
+        '--oui-theme-preset-bg': preset.previewBg,
+        '--oui-theme-preset-panel': preset.previewPanel,
+        '--oui-theme-preset-text': preset.previewText,
+        '--oui-theme-preset-accent': preset.accent,
+    };
+}
+function TokenSection({ title, section, statusKey, values, onTokenChange, }) {
+    return (_jsxs("div", { className: 'oui-theme-token-section', children: [_jsx(Text, { fs: '12px', fw: 760, tone: 'muted', children: title }), _jsx("div", { className: 'oui-theme-token-grid', children: Object.entries(values).map(([key, value]) => (_jsx(ThemeTokenControl, { label: readableTokenName(key), path: statusKey ? `${statusKey}.${key}` : key, section: section, value: value, onChange: (next) => onTokenChange(key, next) }, `${title}-${key}`))) })] }));
+}
+function ThemeTokenControl({ label, path, section, value, onChange, }) {
+    const valueText = String(value);
+    const colorInputValue = colorInputHex(valueText);
+    const [colorDraft, setColorDraft] = useState(colorInputValue);
+    const selectOptions = selectOptionsForToken(path);
+    const visibleColorValue = colorDraft ?? colorInputValue;
+    useEffect(() => {
+        setColorDraft(colorInputValue);
+    }, [colorInputValue]);
+    useEffect(() => {
+        if (!colorDraft || colorDraft === colorInputValue)
+            return;
+        const timer = window.setTimeout(() => onChange(colorDraft), COLOR_TOKEN_COMMIT_DELAY_MS);
+        return () => window.clearTimeout(timer);
+    }, [colorDraft, colorInputValue, onChange]);
+    const commitColorDraft = () => {
+        if (!colorDraft || colorDraft === colorInputValue)
+            return;
+        onChange(colorDraft);
+    };
+    return (_jsxs("div", { className: 'oui-theme-token oui-theme-token-control', children: [_jsx("span", { className: 'oui-theme-token-swatch', style: {
+                    background: visibleColorValue ?? (section === 'colors' || section === 'status'
+                        ? valueText
+                        : 'var(--oui-brand-soft)'),
+                }, children: colorInputValue ? (_jsx("input", { className: 'oui-theme-token-swatch-input', type: 'color', value: visibleColorValue ?? colorInputValue, "aria-label": `${label} color`, onChange: (event) => setColorDraft(event.target.value), onBlur: commitColorDraft })) : null }), _jsxs("span", { className: 'oui-theme-token-text', children: [_jsx(Text, { fs: '12px', fw: 700, children: label }), _jsx(Text, { fs: '11px', tone: 'muted', children: path })] }), _jsx("span", { className: 'oui-theme-token-control-field', children: selectOptions ? (_jsx("select", { value: valueText, "aria-label": label, onChange: (event) => onChange(event.target.value), children: selectOptions.map((option) => (_jsx("option", { value: option, children: option }, option))) })) : (_jsx("input", { type: typeof value === 'number' ? 'number' : 'text', value: valueText, "aria-label": label, onChange: (event) => onChange(typeof value === 'number' ? Number(event.target.value) : event.target.value) })) })] }));
+}
+function updateFlatToken(updateOverrides, section, key, value) {
+    updateOverrides((current) => ({
+        ...current,
+        [section]: {
+            ...(current[section] ?? {}),
+            [key]: value,
+        },
+    }));
+}
+function updateStatusToken(updateOverrides, statusKey, key, value) {
+    updateOverrides((current) => ({
+        ...current,
+        status: {
+            ...current.status,
+            [statusKey]: {
+                ...(current.status?.[statusKey] ?? {}),
+                [key]: value,
+            },
+        },
+    }));
+}
+function tokenSectionLabel(section, locale) {
+    return themePlaygroundCopy[locale].tokenSections[section];
+}
+function readableTokenName(value) {
+    return value.replace(/([A-Z])/g, ' $1').replace(/^./, (letter) => letter.toUpperCase());
+}
+function colorInputHex(value) {
+    const hex = value.trim();
+    if (/^#[0-9a-f]{6}$/i.test(hex))
+        return hex;
+    if (/^#[0-9a-f]{3}$/i.test(hex)) {
+        const [, r, g, b] = hex;
+        return `#${r}${r}${g}${g}${b}${b}`;
+    }
+    const rgb = hex.match(/^rgba?\((\d+)[,\s]+(\d+)[,\s]+(\d+)/i);
+    if (!rgb)
+        return null;
+    return `#${toHex(Number(rgb[1]))}${toHex(Number(rgb[2]))}${toHex(Number(rgb[3]))}`;
+}
+function toHex(value) {
+    return Math.max(0, Math.min(255, value)).toString(16).padStart(2, '0');
+}
+function selectOptionsForToken(path) {
+    if (path === 'modalAnimation')
+        return ['zoom-blur', 'rise', 'fade'];
+    if (path === 'pressAnimation')
+        return ['translate', 'scale', 'soft', 'none'];
+    return null;
+}

package/dist/example/UiExamplePage.d.ts

@@ -0,0 +1,2 @@
+export declare function UiExamplePage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=UiExamplePage.d.ts.map

package/dist/example/UiExamplePage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiExamplePage.d.ts","sourceRoot":"","sources":["../../src/example/UiExamplePage.tsx"],"names":[],"mappings":"AAwmBA,wBAAgB,aAAa,4CAmC5B"}