@orcestr/ui 0.0.3 → 0.1.0

package/dist/example/ExampleThemePlayground.js

@@ -44,14 +44,19 @@ export const themePlaygroundPresets = [
                 panel: '#0d2119',
                 panelSoft: '#133126',
                 floating: '#0d2119',
-                brand: '#34d399',
-                brandStrong: '#86efac',
-                brandSolid: '#059669',
-                brandSolidHover: '#10b981',
-                brandSoft: 'rgb(52 211 153 / 16%)',
+                primary: {
+                    base: '#059669',
+                    text: '#86efac',
+                    surface: 'rgb(52 211 153 / 16%)',
+                    border: 'rgb(52 211 153 / 16%)',
+                    contrast: '#ffffff',
+                },
                 selected: 'rgb(52 211 153 / 14%)',
-                info: '#7dd3fc',
-                infoSoft: '#0b3240',
+                info: {
+                    base: '#7dd3fc',
+                    text: '#7dd3fc',
+                    surface: '#0b3240',
+                },
             },
         },
     },
@@ -87,11 +92,13 @@ export const themePlaygroundPresets = [
                 borderStrong: 'rgb(255 255 255 / 12%)',
                 text: '#f7f7f7',
                 muted: '#9a9a9a',
-                brand: '#8ab4ff',
-                brandStrong: '#b7d1ff',
-                brandSolid: '#2759c7',
-                brandSolidHover: '#3369e6',
-                brandSoft: 'rgb(138 180 255 / 17%)',
+                primary: {
+                    base: '#2759c7',
+                    text: '#b7d1ff',
+                    surface: 'rgb(138 180 255 / 17%)',
+                    border: 'rgb(138 180 255 / 17%)',
+                    contrast: '#ffffff',
+                },
                 selected: 'rgb(138 180 255 / 14%)',
                 focusRing: '0 0 0 3px rgb(138 180 255 / 20%)',
                 skeletonShimmer: 'rgb(255 255 255 / 7%)',
@@ -130,14 +137,19 @@ export const themePlaygroundPresets = [
                 panel: '#1a1a1a',
                 panelSoft: '#242424',
                 floating: '#1b1b1b',
-                brand: '#c4d3e8',
-                brandStrong: '#e4edf8',
-                brandSolid: '#5d6f87',
-                brandSolidHover: '#71839b',
-                brandSoft: 'rgb(196 211 232 / 14%)',
+                primary: {
+                    base: '#5d6f87',
+                    text: '#e4edf8',
+                    surface: 'rgb(196 211 232 / 14%)',
+                    border: 'rgb(196 211 232 / 14%)',
+                    contrast: '#ffffff',
+                },
                 selected: 'rgb(196 211 232 / 12%)',
-                info: '#8ecae6',
-                infoSoft: '#122f3a',
+                info: {
+                    base: '#8ecae6',
+                    text: '#8ecae6',
+                    surface: '#122f3a',
+                },
             },
             radii: {
                 md: '5px',
@@ -169,14 +181,19 @@ export const themePlaygroundPresets = [
                 panel: '#1d1820',
                 panelSoft: '#29212d',
                 floating: '#1d1820',
-                brand: '#f0a6d8',
-                brandStrong: '#ffc1e7',
-                brandSolid: '#a84486',
-                brandSolidHover: '#bc5399',
-                brandSoft: 'rgb(240 166 216 / 17%)',
+                primary: {
+                    base: '#a84486',
+                    text: '#ffc1e7',
+                    surface: 'rgb(240 166 216 / 17%)',
+                    border: 'rgb(240 166 216 / 17%)',
+                    contrast: '#ffffff',
+                },
                 selected: 'rgb(240 166 216 / 16%)',
-                warning: '#fbbf24',
-                warningSoft: '#49371c',
+                warning: {
+                    base: '#fbbf24',
+                    text: '#fbbf24',
+                    surface: '#49371c',
+                },
             },
         },
     },
@@ -221,14 +238,19 @@ export const themePlaygroundPresets = [
                 panel: '#101a2b',
                 panelSoft: '#172338',
                 floating: '#101a2b',
-                brand: '#7dd3fc',
-                brandStrong: '#bae6fd',
-                brandSolid: '#0369a1',
-                brandSolidHover: '#0284c7',
-                brandSoft: 'rgb(125 211 252 / 16%)',
+                primary: {
+                    base: '#0369a1',
+                    text: '#bae6fd',
+                    surface: 'rgb(125 211 252 / 16%)',
+                    border: 'rgb(125 211 252 / 16%)',
+                    contrast: '#ffffff',
+                },
                 selected: 'rgb(125 211 252 / 13%)',
-                info: '#22d3ee',
-                infoSoft: '#083344',
+                info: {
+                    base: '#22d3ee',
+                    text: '#22d3ee',
+                    surface: '#083344',
+                },
             },
         },
     },
@@ -272,11 +294,13 @@ export const themePlaygroundPresets = [
                 bg: '#eefbf4',
                 panel: '#ffffff',
                 panelSoft: '#ddf4e8',
-                brand: '#047857',
-                brandStrong: '#065f46',
-                brandSolid: '#047857',
-                brandSolidHover: '#065f46',
-                brandSoft: 'rgb(4 120 87 / 12%)',
+                primary: {
+                    base: '#047857',
+                    text: '#065f46',
+                    surface: 'rgb(4 120 87 / 12%)',
+                    border: 'rgb(4 120 87 / 12%)',
+                    contrast: '#ffffff',
+                },
                 selected: 'rgb(4 120 87 / 10%)',
             },
         },
@@ -303,11 +327,13 @@ export const themePlaygroundPresets = [
                 bg: '#fff1f8',
                 panel: '#ffffff',
                 panelSoft: '#ffe4f2',
-                brand: '#db2777',
-                brandStrong: '#be185d',
-                brandSolid: '#db2777',
-                brandSolidHover: '#be185d',
-                brandSoft: 'rgb(219 39 119 / 12%)',
+                primary: {
+                    base: '#db2777',
+                    text: '#be185d',
+                    surface: 'rgb(219 39 119 / 12%)',
+                    border: 'rgb(219 39 119 / 12%)',
+                    contrast: '#ffffff',
+                },
                 selected: 'rgb(219 39 119 / 10%)',
             },
         },
@@ -352,11 +378,13 @@ export const themePlaygroundPresets = [
                 bg: '#f8f5ff',
                 panel: '#ffffff',
                 panelSoft: '#ede9fe',
-                brand: '#7c3aed',
-                brandStrong: '#5b21b6',
-                brandSolid: '#7c3aed',
-                brandSolidHover: '#6d28d9',
-                brandSoft: 'rgb(124 58 237 / 10%)',
+                primary: {
+                    base: '#7c3aed',
+                    text: '#5b21b6',
+                    surface: 'rgb(124 58 237 / 10%)',
+                    border: 'rgb(124 58 237 / 10%)',
+                    contrast: '#ffffff',
+                },
                 selected: 'rgb(124 58 237 / 8%)',
                 section: 'rgb(124 58 237 / 3%)',
                 sectionNested: 'rgb(124 58 237 / 2%)',
@@ -388,11 +416,13 @@ export const themePlaygroundPresets = [
                 bg: '#f4fbf8',
                 panel: '#ffffff',
                 panelSoft: '#eaf7f1',
-                brand: '#0f9f6e',
-                brandStrong: '#087a54',
-                brandSolid: '#0f9f6e',
-                brandSolidHover: '#0b8a5e',
-                brandSoft: 'rgb(15 159 110 / 11%)',
+                primary: {
+                    base: '#0f9f6e',
+                    text: '#087a54',
+                    surface: 'rgb(15 159 110 / 11%)',
+                    border: 'rgb(15 159 110 / 11%)',
+                    contrast: '#ffffff',
+                },
                 selected: 'rgb(15 159 110 / 9%)',
             },
         },
@@ -425,7 +455,7 @@ const flatTokenSections = [
     'zIndex',
     'components',
 ];
-const statusKeys = ['neutral', 'brand', 'success', 'warning', 'danger', 'info'];
+const statusKeys = ['neutral', 'primary', 'secondary', 'success', 'warning', 'danger', 'info'];
 const COLOR_TOKEN_COMMIT_DELAY_MS = 180;
 const themePlaygroundCopy = {
     ru: {
@@ -492,7 +522,7 @@ export function ExampleThemePlayground({ activePresetId, theme, locale, onPreset
                                     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 })] })] })] })] })] }));
+                                }, children: [_jsxs("div", { className: 'oui-theme-token-editor', children: [flatTokenSections.map((section) => (_jsx(TokenSection, { title: tokenSectionLabel(section, locale), section: section, values: tokenSectionValues(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: {
@@ -541,10 +571,24 @@ function ThemeTokenControl({ label, path, section, value, onChange, }) {
     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)'),
+                        : 'var(--oui-primary-surface)'),
                 }, 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) {
+    if (section === 'colors' && key.includes('.')) {
+        const [roleKey, slotKey] = key.split('.', 2);
+        updateOverrides((current) => ({
+            ...current,
+            colors: {
+                ...current.colors,
+                [roleKey]: {
+                    ...current.colors?.[roleKey],
+                    [slotKey]: value,
+                },
+            },
+        }));
+        return;
+    }
     updateOverrides((current) => ({
         ...current,
         [section]: {
@@ -553,6 +597,25 @@ function updateFlatToken(updateOverrides, section, key, value) {
         },
     }));
 }
+function tokenSectionValues(theme, section) {
+    const values = theme[section];
+    if (section !== 'colors')
+        return values;
+    return flattenTokenValues(values);
+}
+function flattenTokenValues(values, prefix = '') {
+    return Object.entries(values).reduce((result, [key, value]) => {
+        const path = prefix ? `${prefix}.${key}` : key;
+        if (typeof value === 'string' || typeof value === 'number' || value === false) {
+            result[path] = value;
+            return result;
+        }
+        if (value && typeof value === 'object' && !Array.isArray(value)) {
+            Object.assign(result, flattenTokenValues(value, path));
+        }
+        return result;
+    }, {});
+}
 function updateStatusToken(updateOverrides, statusKey, key, value) {
     updateOverrides((current) => ({
         ...current,

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

@@ -1 +1 @@
-{"version":3,"file":"UiExamplePage.d.ts","sourceRoot":"","sources":["../../src/example/UiExamplePage.tsx"],"names":[],"mappings":"AAWA,OAAO,EAYH,KAAK,eAAe,EACvB,MAAM,IAAI,CAAC;AA4lBZ,MAAM,MAAM,kBAAkB,GAAG;IAC7B,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;CACtD,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC1B,MAAM,EAAE,gBAAgB,EACxB,aAAoB,EACpB,cAAc,GACjB,GAAE,kBAAuB,2CA8CzB"}
+{"version":3,"file":"UiExamplePage.d.ts","sourceRoot":"","sources":["../../src/example/UiExamplePage.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAWH,KAAK,eAAe,EACvB,MAAM,IAAI,CAAC;AA2mBZ,MAAM,MAAM,kBAAkB,GAAG;IAC7B,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;CACtD,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC1B,MAAM,EAAE,gBAAgB,EACxB,aAAoB,EACpB,cAAc,GACjB,GAAE,kBAAuB,2CA8CzB"}

package/dist/example/UiExamplePage.js

@@ -1,16 +1,17 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { LuBell, LuCheck, LuExternalLink, LuRefreshCw, LuTrash2, } from 'react-icons/lu';
-import { AppShell, AppShellContent, AppShellHeader, AppShellNav, AppShellSidebar, OrcestrUiProvider, ScrollArea, useOrcestrTheme, useToast, } from '..';
+import { LuBell, LuBox, LuCalendar, LuCheck, LuClipboardList, LuExternalLink, LuFileText, LuLayoutDashboard, LuMousePointerClick, LuPanelTop, LuRefreshCw, LuSettings, LuTrash2, } from 'react-icons/lu';
+import { AppShell, AppShellContent, AppShellHeader, AppSidebar, OrcestrUiProvider, ScrollArea, useOrcestrTheme, useToast, } from '..';
 import { LayoutSection, TypographySection } from './ExampleBasicsSections';
 import { ActionsSection } from './ExampleActionsSection';
+import { ApplicationSection } from './ExampleApplicationSection';
 import { FieldsSection } from './ExampleFieldsSection';
 import { SelectionSection } from './ExampleSelectionSection';
 import { DataSection } from './ExampleDataSection';
 import { OverlaysSection } from './ExampleOverlaysSection';
 import { FoundationsSection } from './ExampleFoundationsSection';
-import { IconTextSection, StateCardSection } from './ExampleStateSection';
+import { BadgeSection, IconTextSection, StateCardSection } from './ExampleStateSection';
 import { ExampleThemePlayground, getThemePlaygroundPreset, themePlaygroundPresets, themePresetLabel, themePresetPreviewStyle, } from './ExampleThemePlayground';
 import { CodePreviewModal } from './CodePreview';
 import { ExampleOverlays } from './ExampleOverlays';
@@ -56,6 +57,7 @@ function UiExampleContent({ activePresetId, onThemePresetChange, onThemeOverride
     const [selectPlainValue, setSelectPlainValue] = useState('blocked');
     const [comboValue, setComboValue] = useState('ready');
     const [entityValue, setEntityValue] = useState(null);
+    const [paginatedValue, setPaginatedValue] = useState(null);
     const [ownerValues, setOwnerValues] = useState(['anna', 'ops']);
     const [radioValue, setRadioValue] = useState('manual');
     const [tabValue, setTabValue] = useState('overview');
@@ -171,7 +173,7 @@ function UiExampleContent({ activePresetId, onThemePresetChange, onThemeOverride
             },
         ];
     }, [locale, toast]);
-    return (_jsxs(AppShell, { sidebarOpen: mobileNavOpen, onSidebarOpenChange: setMobileNavOpen, header: _jsx(AppShellHeader, { visibility: 'mobile', sidebarOpen: mobileNavOpen, onSidebarOpenChange: setMobileNavOpen, actions: _jsx(UiExampleHeaderActions, { compact: true, locale: locale, onLocaleChange: onLocaleChange }), children: _jsx(UiExampleBrand, { compact: true }) }), sidebar: _jsx(AppShellSidebar, { title: _jsx(UiExampleBrand, {}), onClose: () => setMobileNavOpen(false), children: _jsx(UiExampleSidebar, { onNavigate: () => setMobileNavOpen(false) }) }), children: [_jsxs("div", { className: 'oui-ui-workspace', children: [_jsxs("div", { className: 'oui-ui-workspace-main', children: [_jsx(UiExampleTopBar, { locale: locale, onLocaleChange: onLocaleChange }), _jsxs(AppShellContent, { children: [_jsx(ExampleThemePlayground, { activePresetId: activePresetId, theme: theme, locale: locale, onPresetChange: onThemePresetChange, onThemeOverridesChange: onThemeOverridesChange }), _jsx(FoundationsSection, { onOpenCode: setCodeExample }), _jsx(TypographySection, { onOpenCode: setCodeExample }), _jsx(IconTextSection, { onOpenCode: setCodeExample }), _jsx(LayoutSection, { onOpenCode: setCodeExample }), _jsx(ActionsSection, { menuItems: menuItems, onOpenCode: setCodeExample, onOpenPalette: () => setPaletteOpen(true) }), _jsx(FieldsSection, { stepperValue: stepperValue, onStepperValueChange: setStepperValue, dateValue: dateValue, onDateValueChange: setDateValue, dateRange: dateRange, onDateRangeChange: setDateRange, onOpenCode: setCodeExample }), _jsx(SelectionSection, { locale: locale, segment: segment, onSegmentChange: setSegment, selectValue: selectValue, onSelectValueChange: setSelectValue, selectNoChevronValue: selectNoChevronValue, onSelectNoChevronValueChange: setSelectNoChevronValue, selectPlainValue: selectPlainValue, onSelectPlainValueChange: setSelectPlainValue, comboValue: comboValue, onComboValueChange: setComboValue, entityValue: entityValue, onEntityValueChange: setEntityValue, ownerValues: ownerValues, onOwnerValuesChange: setOwnerValues, radioValue: radioValue, onRadioValueChange: setRadioValue, tabValue: tabValue, onTabValueChange: setTabValue, onOpenCode: setCodeExample, onToast: toast.push }), _jsx(StateCardSection, { onOpenCode: setCodeExample }), _jsx(DataSection, { onOpenCode: setCodeExample }), _jsx(OverlaysSection, { setModalOpen: setModalOpen, setBlurModalOpen: setBlurModalOpen, setFastModalOpen: setFastModalOpen, setRiseModalOpen: setRiseModalOpen, setSlowModalOpen: setSlowModalOpen, setDangerModalOpen: setDangerModalOpen, onOpenCode: setCodeExample })] })] }), _jsx(UiExampleThemeRail, { activePresetId: activePresetId, locale: locale, onThemePresetChange: onThemePresetChange })] }), _jsx(CodePreviewModal, { example: codeExample, onClose: () => setCodeExample(null) }), _jsx(ExampleOverlays, { locale: locale, modalOpen: modalOpen, setModalOpen: setModalOpen, nestedOpen: nestedOpen, setNestedOpen: setNestedOpen, blurModalOpen: blurModalOpen, setBlurModalOpen: setBlurModalOpen, blurNestedOpen: blurNestedOpen, setBlurNestedOpen: setBlurNestedOpen, blurFinalOpen: blurFinalOpen, setBlurFinalOpen: setBlurFinalOpen, fastModalOpen: fastModalOpen, setFastModalOpen: setFastModalOpen, slowModalOpen: slowModalOpen, setSlowModalOpen: setSlowModalOpen, riseModalOpen: riseModalOpen, setRiseModalOpen: setRiseModalOpen, dangerModalOpen: dangerModalOpen, setDangerModalOpen: setDangerModalOpen, paletteOpen: paletteOpen, setPaletteOpen: setPaletteOpen, onToast: toast.push })] }));
+    return (_jsxs(AppShell, { sidebarOpen: mobileNavOpen, onSidebarOpenChange: setMobileNavOpen, header: _jsx(AppShellHeader, { visibility: 'mobile', sidebarOpen: mobileNavOpen, onSidebarOpenChange: setMobileNavOpen, actions: _jsx(UiExampleHeaderActions, { compact: true, locale: locale, onLocaleChange: onLocaleChange }), children: _jsx(UiExampleHeaderTitle, { locale: locale }) }), sidebar: _jsx(UiExampleSidebar, { onNavigate: () => setMobileNavOpen(false) }), children: [_jsxs("div", { className: 'oui-ui-workspace', children: [_jsx("div", { className: 'oui-ui-workspace-main', children: _jsxs(AppShellContent, { children: [_jsx(ExampleThemePlayground, { activePresetId: activePresetId, theme: theme, locale: locale, onPresetChange: onThemePresetChange, onThemeOverridesChange: onThemeOverridesChange }), _jsx(FoundationsSection, { onOpenCode: setCodeExample }), _jsx(TypographySection, { onOpenCode: setCodeExample }), _jsx(IconTextSection, { onOpenCode: setCodeExample }), _jsx(LayoutSection, { onOpenCode: setCodeExample }), _jsx(ActionsSection, { menuItems: menuItems, onOpenCode: setCodeExample, onOpenPalette: () => setPaletteOpen(true) }), _jsx(FieldsSection, { stepperValue: stepperValue, onStepperValueChange: setStepperValue, dateValue: dateValue, onDateValueChange: setDateValue, dateRange: dateRange, onDateRangeChange: setDateRange, onOpenCode: setCodeExample }), _jsx(SelectionSection, { locale: locale, segment: segment, onSegmentChange: setSegment, selectValue: selectValue, onSelectValueChange: setSelectValue, selectNoChevronValue: selectNoChevronValue, onSelectNoChevronValueChange: setSelectNoChevronValue, selectPlainValue: selectPlainValue, onSelectPlainValueChange: setSelectPlainValue, comboValue: comboValue, onComboValueChange: setComboValue, entityValue: entityValue, onEntityValueChange: setEntityValue, paginatedValue: paginatedValue, onPaginatedValueChange: setPaginatedValue, ownerValues: ownerValues, onOwnerValuesChange: setOwnerValues, radioValue: radioValue, onRadioValueChange: setRadioValue, tabValue: tabValue, onTabValueChange: setTabValue, onOpenCode: setCodeExample, onToast: toast.push }), _jsx(StateCardSection, { onOpenCode: setCodeExample }), _jsx(BadgeSection, { onOpenCode: setCodeExample }), _jsx(DataSection, { onOpenCode: setCodeExample }), _jsx(OverlaysSection, { setModalOpen: setModalOpen, setBlurModalOpen: setBlurModalOpen, setFastModalOpen: setFastModalOpen, setRiseModalOpen: setRiseModalOpen, setSlowModalOpen: setSlowModalOpen, setDangerModalOpen: setDangerModalOpen, onOpenCode: setCodeExample }), _jsx(ApplicationSection, { onOpenCode: setCodeExample })] }) }), _jsx(UiExampleThemeRail, { activePresetId: activePresetId, locale: locale, onThemePresetChange: onThemePresetChange })] }), _jsx(CodePreviewModal, { example: codeExample, onClose: () => setCodeExample(null) }), _jsx(ExampleOverlays, { locale: locale, modalOpen: modalOpen, setModalOpen: setModalOpen, nestedOpen: nestedOpen, setNestedOpen: setNestedOpen, blurModalOpen: blurModalOpen, setBlurModalOpen: setBlurModalOpen, blurNestedOpen: blurNestedOpen, setBlurNestedOpen: setBlurNestedOpen, blurFinalOpen: blurFinalOpen, setBlurFinalOpen: setBlurFinalOpen, fastModalOpen: fastModalOpen, setFastModalOpen: setFastModalOpen, slowModalOpen: slowModalOpen, setSlowModalOpen: setSlowModalOpen, riseModalOpen: riseModalOpen, setRiseModalOpen: setRiseModalOpen, dangerModalOpen: dangerModalOpen, setDangerModalOpen: setDangerModalOpen, paletteOpen: paletteOpen, setPaletteOpen: setPaletteOpen, onToast: toast.push })] }));
 }
 function UiExampleThemeRail({ activePresetId, locale, onThemePresetChange, }) {
     const presets = useMemo(() => {
@@ -277,34 +279,61 @@ function UiExampleSidebar({ onNavigate }) {
         setActiveSectionValue(id);
         lockScrollNavigationTarget(id);
         window.history.replaceState(null, '', `#${id}`);
-        scrollUiExampleSection(id);
+        scrollUiExampleSection(id, 'smooth');
         onNavigate();
     }, [lockScrollNavigationTarget, onNavigate, setActiveSectionValue]);
     const sidebarNavGroups = useMemo(() => navGroups.map((group) => ({
-        ...group,
+        key: group.key,
         items: group.items.map((item) => ({
             key: item.id,
             label: item.label,
+            icon: uiExampleNavIcon(item.id),
             active: activeSection === item.id,
             onSelect: () => navigateToSection(item.id),
         })),
     })), [activeSection, navigateToSection]);
-    return (_jsx("div", { className: 'oui-ui-sidebar-groups', children: sidebarNavGroups.map((group) => (_jsxs("div", { className: 'oui-ui-sidebar-group', children: [_jsx("div", { className: 'oui-ui-sidebar-group-label', children: group.label }), _jsx(AppShellNav, { className: 'oui-ui-sidebar-nav', items: group.items })] }, group.key))) }));
+    return (_jsx(AppSidebar, { className: 'oui-ui-main-sidebar', header: _jsx(UiExampleBrand, {}), itemH: 34, groups: sidebarNavGroups, footer: (_jsxs("button", { type: 'button', className: 'oui-ui-sidebar-footer-action', onClick: () => navigateToSection('app-shell-example'), children: [_jsx(LuSettings, { size: 15, "aria-hidden": true }), _jsx("span", { children: "Application components" })] })) }));
 }
-function UiExampleTopBar({ locale, onLocaleChange, }) {
+function UiExampleHeaderTitle({ locale }) {
     const title = locale === 'ru'
         ? 'Единый язык компонентов для всех модулей.'
         : 'One component language for every module.';
     const subtitle = locale === 'ru'
         ? 'Одна тема, предсказуемый интерфейс.'
         : 'One theme, predictable interface.';
-    return (_jsxs("header", { className: 'oui-ui-topbar', children: [_jsxs("div", { className: 'oui-ui-topbar-slogan', children: [_jsx("strong", { children: title }), _jsx("span", { children: subtitle })] }), _jsx(UiExampleHeaderActions, { locale: locale, onLocaleChange: onLocaleChange })] }));
+    return (_jsxs("div", { className: 'oui-ui-header-title', children: [_jsx("strong", { children: title }), _jsx("span", { children: subtitle })] }));
+}
+function uiExampleNavIcon(id) {
+    const size = 16;
+    if (id === 'theme')
+        return _jsx(LuSettings, { size: size });
+    if (id === 'foundations')
+        return _jsx(LuLayoutDashboard, { size: size });
+    if (id === 'buttons-example')
+        return _jsx(LuMousePointerClick, { size: size });
+    if (id === 'text-fields-example')
+        return _jsx(LuFileText, { size: size });
+    if (id === 'selects-example')
+        return _jsx(LuCheck, { size: size });
+    if (id === 'data-table-example')
+        return _jsx(LuClipboardList, { size: size });
+    if (id === 'toast-example')
+        return _jsx(LuBell, { size: size });
+    if (id === 'app-shell-example')
+        return _jsx(LuPanelTop, { size: size });
+    if (id === 'app-sidebar-example')
+        return _jsx(LuLayoutDashboard, { size: size });
+    if (id === 'special-modal-example')
+        return _jsx(LuBox, { size: size });
+    if (id === 'date-range-example')
+        return _jsx(LuCalendar, { size: size });
+    return null;
 }
 function UiExampleBrand({ compact = false }) {
     return (_jsxs("div", { className: 'oui-ui-brand', "data-compact": compact ? 'true' : undefined, children: [_jsx("span", { className: 'oui-ui-brand-mark', "aria-hidden": 'true', children: _jsx("img", { className: 'oui-ui-brand-logo', src: ORCESTR_LOGO_SRC, alt: '' }) }), _jsx("span", { className: 'oui-ui-brand-text', children: _jsx("strong", { children: "Orcestr UI" }) })] }));
 }
 function UiExampleHeaderActions({ compact = false, locale, onLocaleChange, }) {
-    return (_jsxs("div", { className: 'oui-ui-topbar-actions', "data-compact": compact ? 'true' : undefined, children: [_jsxs("span", { className: 'oui-ui-language-switch', "aria-label": 'UI example language', children: [_jsx("span", { className: 'oui-ui-language-label', children: locale === 'ru' ? 'Язык' : 'Language' }), ['ru', 'en'].map((item) => (_jsx("button", { type: 'button', className: 'oui-ui-language-option', "data-active": locale === item ? 'true' : undefined, "aria-pressed": locale === item, onClick: () => onLocaleChange(item), children: item.toUpperCase() }, item)))] }), _jsxs("a", { className: 'oui-ui-topbar-link', href: 'https://github.com/Artasov/orcestr', target: '_blank', rel: 'noreferrer', children: [_jsx(LuExternalLink, { size: 14, "aria-hidden": true }), _jsx("span", { children: "GitHub" })] })] }));
+    return (_jsxs("div", { className: 'oui-ui-header-actions', "data-compact": compact ? 'true' : undefined, children: [_jsxs("span", { className: 'oui-ui-language-switch', "aria-label": 'UI example language', children: [_jsx("span", { className: 'oui-ui-language-label', children: locale === 'ru' ? 'Язык' : 'Language' }), ['ru', 'en'].map((item) => (_jsx("button", { type: 'button', className: 'oui-ui-language-option', "data-active": locale === item ? 'true' : undefined, "aria-pressed": locale === item, onClick: () => onLocaleChange(item), children: item.toUpperCase() }, item)))] }), _jsxs("a", { className: 'oui-ui-header-link', href: 'https://github.com/Artasov/orcestr', target: '_blank', rel: 'noreferrer', children: [_jsx(LuExternalLink, { size: 14, "aria-hidden": true }), _jsx("span", { children: "GitHub" })] })] }));
 }
 export function UiExamplePage({ locale: controlledLocale, defaultLocale = 'ru', onLocaleChange, } = {}) {
     const firstPreset = getThemePlaygroundPreset('orcestr-dark');

package/dist/example/codeSamples.d.ts

@@ -13,9 +13,13 @@ export declare const codeSamples: {
     highlights: string;
     scrollArea: string;
     systemRadius: string;
+    surfaces: string;
     buttons: string;
     iconButtons: string;
+    iconTextButton: string;
+    contextMenu: string;
     textFields: string;
+    inlineEdit: string;
     groupedFields: string;
     numberAndDateFields: string;
     dateRangeFields: string;
@@ -25,6 +29,9 @@ export declare const codeSamples: {
     overlays: string;
     toast: string;
     overlaySettings: string;
+    tablePagination: string;
+    appSidebar: string;
+    specialModal: string;
     data: string;
 };
 //# sourceMappingURL=codeSamples.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"codeSamples.d.ts","sourceRoot":"","sources":["../../src/example/codeSamples.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;CA88Bc,CAAC"}
+{"version":3,"file":"codeSamples.d.ts","sourceRoot":"","sources":["../../src/example/codeSamples.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+zCc,CAAC"}