@orcestr/ui 0.0.1

package/dist/example/UiExamplePage.js

@@ -0,0 +1,315 @@
+'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 { ActionsSection } from './ExampleActionsSection';
+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 { ExampleThemePlayground, getThemePlaygroundPreset, themePlaygroundPresets, themePresetLabel, themePresetPreviewStyle, } from './ExampleThemePlayground';
+import { CodePreviewModal } from './CodePreview';
+import { ExampleOverlays } from './ExampleOverlays';
+import {} from './codeSamples';
+import { navGroups, navItems } from './exampleData';
+const ORCESTR_LOGO_SRC = '/assets/orcestr/logo.png';
+const UI_EXAMPLE_SCROLL_LEAD = 50;
+function scrollUiExampleSection(id) {
+    const node = document.getElementById(id);
+    const scrollRoot = document.querySelector('.oui-app-shell-content-scroll .oui-scroll-area-viewport');
+    if (!node || !scrollRoot) {
+        node?.scrollIntoView({ block: 'start', behavior: 'smooth' });
+        return;
+    }
+    scrollRoot.scrollTo({
+        top: uiExampleSectionScrollTop(node, scrollRoot),
+        behavior: 'smooth',
+    });
+}
+function uiExampleSectionScrollTop(node, scrollRoot) {
+    const maxTop = scrollRoot
+        ? Math.max(0, scrollRoot.scrollHeight - scrollRoot.clientHeight)
+        : Number.POSITIVE_INFINITY;
+    return Math.min(maxTop, Math.max(0, node.offsetTop - UI_EXAMPLE_SCROLL_LEAD));
+}
+function UiExampleContent({ activePresetId, onThemePresetChange, onThemeOverridesChange, locale, onLocaleChange, }) {
+    const { theme } = useOrcestrTheme();
+    const toast = useToast();
+    const [segment, setSegment] = useState('active');
+    const [selectValue, setSelectValue] = useState('work');
+    const [selectNoChevronValue, setSelectNoChevronValue] = useState('ready');
+    const [selectPlainValue, setSelectPlainValue] = useState('blocked');
+    const [comboValue, setComboValue] = useState('ready');
+    const [entityValue, setEntityValue] = useState(null);
+    const [ownerValues, setOwnerValues] = useState(['anna', 'ops']);
+    const [radioValue, setRadioValue] = useState('manual');
+    const [tabValue, setTabValue] = useState('overview');
+    const [modalOpen, setModalOpen] = useState(false);
+    const [nestedOpen, setNestedOpen] = useState(false);
+    const [blurModalOpen, setBlurModalOpen] = useState(false);
+    const [blurNestedOpen, setBlurNestedOpen] = useState(false);
+    const [blurFinalOpen, setBlurFinalOpen] = useState(false);
+    const [fastModalOpen, setFastModalOpen] = useState(false);
+    const [slowModalOpen, setSlowModalOpen] = useState(false);
+    const [riseModalOpen, setRiseModalOpen] = useState(false);
+    const [dangerModalOpen, setDangerModalOpen] = useState(false);
+    const [paletteOpen, setPaletteOpen] = useState(false);
+    const [codeExample, setCodeExample] = useState(null);
+    const [mobileNavOpen, setMobileNavOpen] = useState(false);
+    const [stepperValue, setStepperValue] = useState(12);
+    const [dateValue, setDateValue] = useState('2026-06-26');
+    const [dateRange, setDateRange] = useState({
+        from: '2026-06-01',
+        to: '2026-06-26',
+    });
+    useEffect(() => {
+        document.documentElement.classList.add('oui-ui-document-lock');
+        document.body.classList.add('oui-ui-document-lock');
+        const hash = window.location.hash.replace('#', '');
+        let hashSettleTimer = null;
+        const hashFrame = hash
+            ? window.requestAnimationFrame(() => {
+                scrollUiExampleSection(hash);
+                hashSettleTimer = window.setTimeout(() => {
+                    scrollUiExampleSection(hash);
+                }, 450);
+            })
+            : null;
+        return () => {
+            if (hashFrame !== null)
+                window.cancelAnimationFrame(hashFrame);
+            if (hashSettleTimer !== null)
+                window.clearTimeout(hashSettleTimer);
+            document.documentElement.classList.remove('oui-ui-document-lock');
+            document.body.classList.remove('oui-ui-document-lock');
+        };
+    }, []);
+    const menuItems = useMemo(() => {
+        const copy = locale === 'ru'
+            ? {
+                copy: 'Скопировать ссылку',
+                notify: 'Уведомить команду',
+                notifyInfo: 'Подсказка внутри пункта меню',
+                syncing: 'Синхронизация остатков',
+                more: 'Еще действия',
+                duplicate: 'Дублировать',
+                duplicateToast: 'Дублировано',
+                archive: 'Архивировать',
+                archiveToast: 'Архивировано',
+                delete: 'Удалить',
+                deleteTitle: 'Удалить элемент?',
+                deleteMessage: 'Это действие нельзя отменить.',
+                deletedToast: 'Удалено',
+            }
+            : {
+                copy: 'Copy link',
+                notify: 'Notify team',
+                notifyInfo: 'Info tooltip inside a menu item',
+                syncing: 'Syncing status',
+                more: 'More actions',
+                duplicate: 'Duplicate',
+                duplicateToast: 'Duplicated',
+                archive: 'Archive',
+                archiveToast: 'Archived',
+                delete: 'Delete',
+                deleteTitle: 'Delete item?',
+                deleteMessage: 'This action cannot be undone.',
+                deletedToast: 'Deleted',
+            };
+        return [
+            { key: 'copy', label: copy.copy, icon: _jsx(LuCheck, { size: 15 }) },
+            {
+                key: 'notify',
+                label: copy.notify,
+                icon: _jsx(LuBell, { size: 15 }),
+                info: copy.notifyInfo,
+            },
+            {
+                key: 'syncing',
+                label: copy.syncing,
+                icon: _jsx(LuRefreshCw, { size: 15 }),
+                loading: true,
+            },
+            {
+                key: 'more',
+                label: copy.more,
+                children: [
+                    {
+                        key: 'duplicate',
+                        label: copy.duplicate,
+                        onSelect: () => toast.push(copy.duplicateToast, 'success'),
+                    },
+                    {
+                        key: 'archive',
+                        label: copy.archive,
+                        onSelect: () => toast.push(copy.archiveToast, 'info'),
+                    },
+                ],
+            },
+            {
+                key: 'sep',
+                label: copy.delete,
+                icon: _jsx(LuTrash2, { size: 15 }),
+                tone: 'danger',
+                separatorBefore: true,
+                confirm: {
+                    title: copy.deleteTitle,
+                    message: copy.deleteMessage,
+                    confirmLabel: copy.delete,
+                    tone: 'danger',
+                },
+                onSelect: () => toast.push(copy.deletedToast, 'warning'),
+            },
+        ];
+    }, [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 })] }));
+}
+function UiExampleThemeRail({ activePresetId, locale, onThemePresetChange, }) {
+    const presets = useMemo(() => {
+        const dark = themePlaygroundPresets.filter((preset) => preset.group === 'dark');
+        const light = themePlaygroundPresets.filter((preset) => preset.group === 'light');
+        const next = [];
+        const maxLength = Math.max(dark.length, light.length);
+        for (let index = 0; index < maxLength; index += 1) {
+            if (dark[index])
+                next.push(dark[index]);
+            if (light[index])
+                next.push(light[index]);
+        }
+        return next;
+    }, []);
+    return (_jsxs("aside", { className: 'oui-ui-theme-rail', "aria-label": 'Theme presets', children: [_jsx("div", { className: 'oui-ui-theme-rail-title', children: "Themes" }), _jsx(ScrollArea, { className: 'oui-ui-theme-rail-scroll', highlights: true, highlightColor: 'var(--oui-ui-theme-rail-highlight-bg)', highlightTop: {
+                    start: 18,
+                    fadeDistance: 90,
+                    maxOpacity: 0.94,
+                }, highlightBottom: {
+                    start: 12,
+                    fadeDistance: 90,
+                    maxOpacity: 0.94,
+                }, children: _jsx("div", { className: 'oui-ui-theme-rail-list', children: presets.map((preset) => (_jsxs("button", { type: 'button', className: 'oui-ui-theme-rail-item', "data-active": activePresetId === preset.id ? 'true' : undefined, style: themePresetPreviewStyle(preset), onClick: () => onThemePresetChange(preset), children: [_jsxs("span", { className: 'oui-ui-theme-rail-preview', "aria-hidden": true, children: [_jsx("span", {}), _jsx("span", {})] }), _jsx("span", { className: 'oui-ui-theme-rail-name', children: themePresetLabel(preset, locale) })] }, preset.id))) }) })] }));
+}
+function UiExampleSidebar({ onNavigate }) {
+    const [activeSection, setActiveSection] = useState('theme');
+    const activeSectionRef = useRef('theme');
+    const scrollNavigationTargetRef = useRef(null);
+    const scrollNavigationReleaseTimerRef = useRef(null);
+    const setActiveSectionValue = useCallback((id) => {
+        activeSectionRef.current = id;
+        setActiveSection((current) => current === id ? current : id);
+    }, []);
+    const lockScrollNavigationTarget = useCallback((id) => {
+        scrollNavigationTargetRef.current = id;
+        if (scrollNavigationReleaseTimerRef.current !== null) {
+            window.clearTimeout(scrollNavigationReleaseTimerRef.current);
+        }
+        scrollNavigationReleaseTimerRef.current = window.setTimeout(() => {
+            if (scrollNavigationTargetRef.current === id)
+                scrollNavigationTargetRef.current = null;
+        }, 900);
+    }, []);
+    useEffect(() => {
+        const hash = window.location.hash.replace('#', '');
+        if (hash)
+            setActiveSectionValue(hash);
+        const ids = navItems.map((item) => item.id);
+        const nodes = ids
+            .map((id) => document.getElementById(id))
+            .filter((node) => Boolean(node));
+        const scrollRoot = document.querySelector('.oui-app-shell-content-scroll .oui-scroll-area-viewport');
+        if (nodes.length === 0 || !scrollRoot)
+            return undefined;
+        let frame = null;
+        const updateActiveSection = () => {
+            frame = null;
+            const lockedTarget = scrollNavigationTargetRef.current;
+            if (lockedTarget) {
+                const targetNode = document.getElementById(lockedTarget);
+                if (!targetNode) {
+                    scrollNavigationTargetRef.current = null;
+                    return;
+                }
+                const targetTop = uiExampleSectionScrollTop(targetNode, scrollRoot);
+                if (Math.abs(scrollRoot.scrollTop - targetTop) <= 2) {
+                    scrollNavigationTargetRef.current = null;
+                    setActiveSectionValue(lockedTarget);
+                }
+                return;
+            }
+            const bottomDistance = scrollRoot.scrollHeight
+                - scrollRoot.clientHeight
+                - scrollRoot.scrollTop;
+            const top = scrollRoot.scrollTop + 24;
+            const next = bottomDistance <= 2
+                ? nodes.at(-1)?.id
+                : nodes.filter((node) => node.offsetTop <= top).at(-1)?.id ?? nodes[0]?.id;
+            if (next && next !== activeSectionRef.current)
+                setActiveSectionValue(next);
+        };
+        const requestUpdateActiveSection = () => {
+            if (frame !== null)
+                return;
+            frame = window.requestAnimationFrame(updateActiveSection);
+        };
+        updateActiveSection();
+        scrollRoot.addEventListener('scroll', requestUpdateActiveSection, { passive: true });
+        return () => {
+            if (frame !== null)
+                window.cancelAnimationFrame(frame);
+            if (scrollNavigationReleaseTimerRef.current !== null) {
+                window.clearTimeout(scrollNavigationReleaseTimerRef.current);
+            }
+            scrollRoot.removeEventListener('scroll', requestUpdateActiveSection);
+        };
+    }, [setActiveSectionValue]);
+    const navigateToSection = useCallback((id) => {
+        setActiveSectionValue(id);
+        lockScrollNavigationTarget(id);
+        window.history.replaceState(null, '', `#${id}`);
+        scrollUiExampleSection(id);
+        onNavigate();
+    }, [lockScrollNavigationTarget, onNavigate, setActiveSectionValue]);
+    const sidebarNavGroups = useMemo(() => navGroups.map((group) => ({
+        ...group,
+        items: group.items.map((item) => ({
+            key: item.id,
+            label: item.label,
+            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))) }));
+}
+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 })] }));
+}
+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" })] })] }));
+}
+export function UiExamplePage() {
+    const firstPreset = getThemePlaygroundPreset('orcestr-dark');
+    const [activePresetId, setActivePresetId] = useState(firstPreset.id);
+    const [mode, setMode] = useState(firstPreset.mode);
+    const [surface, setSurface] = useState(firstPreset.surface);
+    const [locale, setLocale] = useState('ru');
+    const [themeOverrides, setThemeOverrides] = useState(firstPreset.overrides ?? {});
+    const handleThemePresetChange = useCallback((preset) => {
+        setActivePresetId(preset.id);
+        setMode(preset.mode);
+        setSurface(preset.surface);
+        setThemeOverrides(preset.overrides ?? {});
+    }, []);
+    return (_jsx(OrcestrUiProvider, { mode: mode, surface: surface, onModeChange: setMode, onSurfaceChange: setSurface, themeOverrides: themeOverrides, locale: locale, children: _jsx(UiExampleContent, { activePresetId: activePresetId, onThemePresetChange: handleThemePresetChange, onThemeOverridesChange: setThemeOverrides, locale: locale, onLocaleChange: setLocale }) }));
+}

package/dist/example/UiExampleSection.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export declare function UiExampleSection({ id, title, description, children, }: {
+    id: string;
+    title: string;
+    description?: string;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=UiExampleSection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UiExampleSection.d.ts","sourceRoot":"","sources":["../../src/example/UiExampleSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAIrC,wBAAgB,gBAAgB,CAAC,EAC7B,EAAE,EACF,KAAK,EACL,WAAW,EACX,QAAQ,GACX,EAAE;IACC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;CACvB,2CAcA"}

package/dist/example/UiExampleSection.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Section } from '../components/Section/Section';
+export function UiExampleSection({ id, title, description, children, }) {
+    return (_jsxs(Section, { id: id, className: 'oui-ui-section', children: [_jsx("div", { className: 'oui-ui-section-head', children: _jsxs("div", { children: [_jsx("h2", { className: 'oui-ui-section-title', children: title }), description ? (_jsx("p", { className: 'oui-ui-description', children: description })) : null] }) }), children] }));
+}

package/dist/example/codeSamples.d.ts

@@ -0,0 +1,30 @@
+export type CodeExample = {
+    title: string;
+    code: string;
+};
+export declare const codeSamples: {
+    typography: string;
+    skeleton: string;
+    appShell: string;
+    layoutFlex: string;
+    layoutStack: string;
+    layoutCollapse: string;
+    layoutGrid: string;
+    highlights: string;
+    scrollArea: string;
+    systemRadius: string;
+    buttons: string;
+    iconButtons: string;
+    textFields: string;
+    groupedFields: string;
+    numberAndDateFields: string;
+    dateRangeFields: string;
+    selection: string;
+    selectionGroup: string;
+    tabs: string;
+    overlays: string;
+    toast: string;
+    overlaySettings: string;
+    data: string;
+};
+//# sourceMappingURL=codeSamples.d.ts.map

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

@@ -0,0 +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"}