@orcestr/ui 0.0.3 → 0.1.1

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 { LayoutSection, TypographySection } from './ExampleBasicsSections';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { LuBell, LuCheck, LuExternalLink, LuLanguages, LuRefreshCw, LuTrash2, } from 'react-icons/lu';
+import { AppShell, AppShellContent, AppShellHeader, AppSidebar, IconButton, Menu, OrcestrUiProvider, ScrollArea, useOrcestrTheme, useToast, } from '..';
+import { LayoutSection, TextSection } 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';
@@ -21,6 +22,18 @@ const UI_EXAMPLE_SCROLL_LEAD = 50;
 const UI_EXAMPLE_ACTIVE_PROBE_OFFSET = UI_EXAMPLE_SCROLL_LEAD + 220;
 const UI_EXAMPLE_CLICK_TARGET_TOP_TOLERANCE = 180;
 const UI_EXAMPLE_SCROLL_LOCK_TIMEOUT_MS = 1600;
+const MemoFoundationsSection = memo(FoundationsSection);
+const MemoTextSection = memo(TextSection);
+const MemoIconTextSection = memo(IconTextSection);
+const MemoLayoutSection = memo(LayoutSection);
+const MemoActionsSection = memo(ActionsSection);
+const MemoFieldsSection = memo(FieldsSection);
+const MemoSelectionSection = memo(SelectionSection);
+const MemoStateCardSection = memo(StateCardSection);
+const MemoBadgeSection = memo(BadgeSection);
+const MemoDataSection = memo(DataSection);
+const MemoOverlaysSection = memo(OverlaysSection);
+const MemoApplicationSection = memo(ApplicationSection);
 function scrollUiExampleSection(id, behavior = 'auto') {
     const node = document.getElementById(id);
     const scrollRoot = document.querySelector('.oui-app-shell-content-scroll .oui-scroll-area-viewport');
@@ -56,6 +69,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');
@@ -77,6 +91,7 @@ function UiExampleContent({ activePresetId, onThemePresetChange, onThemeOverride
         from: '2026-06-01',
         to: '2026-06-26',
     });
+    const openPalette = useCallback(() => setPaletteOpen(true), []);
     useEffect(() => {
         document.documentElement.classList.add('oui-ui-document-lock');
         document.body.classList.add('oui-ui-document-lock');
@@ -171,7 +186,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, { sidebarOpen: mobileNavOpen, onSidebarOpenChange: setMobileNavOpen, navigationVisibility: 'mobile', actions: _jsx(UiExampleHeaderActions, { compact: true, locale: locale, onLocaleChange: onLocaleChange }) }), 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(MemoFoundationsSection, { onOpenCode: setCodeExample }), _jsx(MemoTextSection, { onOpenCode: setCodeExample }), _jsx(MemoIconTextSection, { onOpenCode: setCodeExample }), _jsx(MemoLayoutSection, { onOpenCode: setCodeExample }), _jsx(MemoActionsSection, { menuItems: menuItems, onOpenCode: setCodeExample, onOpenPalette: openPalette }), _jsx(MemoFieldsSection, { stepperValue: stepperValue, onStepperValueChange: setStepperValue, dateValue: dateValue, onDateValueChange: setDateValue, dateRange: dateRange, onDateRangeChange: setDateRange, onOpenCode: setCodeExample }), _jsx(MemoSelectionSection, { 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(MemoStateCardSection, { onOpenCode: setCodeExample }), _jsx(MemoBadgeSection, { onOpenCode: setCodeExample }), _jsx(MemoDataSection, { onOpenCode: setCodeExample }), _jsx(MemoOverlaysSection, { setModalOpen: setModalOpen, setBlurModalOpen: setBlurModalOpen, setFastModalOpen: setFastModalOpen, setRiseModalOpen: setRiseModalOpen, setSlowModalOpen: setSlowModalOpen, setDangerModalOpen: setDangerModalOpen, onOpenCode: setCodeExample }), _jsx(MemoApplicationSection, { 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,11 +292,11 @@ 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,
@@ -289,22 +304,27 @@ function UiExampleSidebar({ onNavigate }) {
             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))) }));
-}
-function UiExampleTopBar({ locale, onLocaleChange, }) {
-    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 (_jsx(AppSidebar, { className: 'oui-ui-main-sidebar', header: _jsx(UiExampleBrand, {}), itemH: 34, groups: sidebarNavGroups }));
 }
 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" })] })] }));
+    const languageItems = useMemo(() => [
+        {
+            key: 'ru',
+            label: 'RU',
+            icon: locale === 'ru' ? _jsx(LuCheck, { size: 14 }) : undefined,
+            onSelect: () => onLocaleChange('ru'),
+        },
+        {
+            key: 'en',
+            label: 'EN',
+            icon: locale === 'en' ? _jsx(LuCheck, { size: 14 }) : undefined,
+            onSelect: () => onLocaleChange('en'),
+        },
+    ], [locale, onLocaleChange]);
+    return (_jsxs("div", { className: 'oui-ui-header-actions', "data-compact": compact ? 'true' : undefined, children: [_jsx(Menu, { items: languageItems, trigger: _jsx(IconButton, { className: 'oui-ui-language-button', size: 2, v: 'pad', icon: _jsx(LuLanguages, { size: 16 }), "aria-label": `Language: ${locale.toUpperCase()}` }) }), _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

@@ -3,7 +3,7 @@ export type CodeExample = {
     code: string;
 };
 export declare const codeSamples: {
-    typography: string;
+    text: string;
     skeleton: string;
     appShell: string;
     layoutFlex: string;
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAq6Cc,CAAC"}