@orcestr/ui 0.1.0 → 0.2.0

package/dist/example/CodePreview.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useLayoutEffect, useRef, useState, } from 'react';
+import { useMemo, useState } from 'react';
 import { LuInfo, LuX } from 'react-icons/lu';
-import { Flex, IconButton, Modal, ScrollArea } from '..';
+import { CopyIconButton, Flex, IconButton, Modal, ScrollArea } from '..';
 import { cn } from '../utils/cn';
 import {} from './codeSamples';
 function highlightedCode(code) {
@@ -23,71 +23,36 @@ function highlightedCode(code) {
             return (_jsx("span", { className: className, children: part }, `${lineIndex}-${partIndex}`));
         });
         return [
-            _jsx("span", { className: 'oui-code-line', children: rendered.length > 0 ? rendered : ' ' }, `line-${lineIndex}`),
+            _jsx("span", { className: "oui-code-line", children: rendered.length > 0 ? rendered : ' ' }, `line-${lineIndex}`),
         ];
     });
 }
 export function CodeInfoButton({ title, code, onOpen, }) {
-    return (_jsx(IconButton, { className: 'oui-code-info-button', size: 1, v: 'pad', tone: 'info', icon: _jsx(LuInfo, { size: 14 }), "aria-label": `Show ${title} code`, onClick: () => onOpen({ title, code }) }));
+    return (_jsx(IconButton, { className: "oui-code-info-button", size: 1, v: "pad", tone: "info", icon: _jsx(LuInfo, { size: 14 }), "aria-label": `Show ${title} code`, onClick: () => onOpen({ title, code }) }));
 }
 export function ExampleTileHeader({ title, code, onOpen, }) {
-    return (_jsx(Flex, { className: 'oui-ui-tile-head', a: 's', g: 1, wrap: true, children: _jsx(CodeInfoButton, { title: title, code: code, onOpen: onOpen }) }));
+    return (_jsx(Flex, { className: "oui-ui-tile-head", a: "s", g: 1, wrap: true, children: _jsx(CodeInfoButton, { title: title, code: code, onOpen: onOpen }) }));
 }
 export function ExampleTile({ id, title, code, onOpen, className, children, }) {
-    return (_jsxs("div", { id: id, className: cn('oui-section oui-ui-tile', className), children: [_jsxs("div", { className: 'oui-ui-tile-body', children: [_jsx(ExampleTileHeader, { title: title, code: code, onOpen: onOpen }), children] }), _jsx(InlineCodeBlock, { code: code })] }));
+    return (_jsxs("div", { id: id, className: cn('oui-section oui-ui-tile', className), children: [_jsxs("div", { className: "oui-ui-tile-body", children: [_jsx(ExampleTileHeader, { title: title, code: code, onOpen: onOpen }), children] }), _jsx(InlineCodeBlock, { code: code })] }));
 }
 export function InlineCodeBlock({ code }) {
     const [expanded, setExpanded] = useState(false);
-    const [contentHeight, setContentHeight] = useState(0);
-    const contentRef = useRef(null);
-    const collapsedHeight = 180;
-    const collapsible = contentHeight > collapsedHeight;
-    const panelHeight = collapsible
-        ? expanded ? contentHeight + 38 : collapsedHeight
-        : contentHeight;
-    const measure = useCallback(() => {
-        const element = contentRef.current;
-        if (!element)
-            return;
-        const nextHeight = element.scrollHeight;
-        setContentHeight((current) => current === nextHeight ? current : nextHeight);
-    }, []);
-    useLayoutEffect(() => {
-        measure();
-    }, [code, measure]);
-    useLayoutEffect(() => {
-        const element = contentRef.current;
-        if (!element || typeof ResizeObserver === 'undefined')
-            return;
-        const observer = new ResizeObserver(() => measure());
-        observer.observe(element);
-        return () => observer.disconnect();
-    }, [measure]);
-    const handleWheelCapture = useCallback((event) => {
-        if (event.ctrlKey || event.shiftKey || Math.abs(event.deltaY) <= Math.abs(event.deltaX))
-            return;
-        const scrollRoot = document.querySelector('.oui-app-shell-content-scroll .oui-scroll-area-viewport');
-        if (!scrollRoot)
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        scrollRoot.scrollTop += normalizedWheelDeltaY(event);
-    }, []);
-    return (_jsxs("div", { className: 'oui-code-inline-panel', "data-expanded": expanded ? 'true' : 'false', "data-collapsible": collapsible ? 'true' : 'false', style: { height: panelHeight || undefined }, onWheelCapture: handleWheelCapture, children: [_jsx("div", { ref: contentRef, className: 'oui-code-inline-content', children: _jsx(CodeBlock, { code: code }) }), collapsible && !expanded ? _jsx("div", { className: 'oui-code-inline-fade', "aria-hidden": true }) : null, collapsible ? (_jsx("button", { type: 'button', className: 'oui-code-inline-toggle', "aria-expanded": expanded, onClick: () => setExpanded((current) => !current), children: expanded ? 'Hide code' : 'Show code' })) : null] }));
-}
-function normalizedWheelDeltaY(event) {
-    if (event.deltaMode === 1)
-        return event.deltaY * 16;
-    if (event.deltaMode === 2)
-        return event.deltaY * window.innerHeight;
-    return event.deltaY;
-}
-export function CodeBlock({ code }) {
-    return (_jsx(ScrollArea, { className: 'oui-code-preview-scroll', children: _jsx("pre", { className: 'oui-code-preview', children: _jsx("code", { children: highlightedCode(code) }) }) }));
+    const lineCount = code.split('\n').length;
+    const collapsible = lineCount > 9;
+    return (_jsxs("div", { className: "oui-code-inline-panel", "data-expanded": expanded ? 'true' : 'false', "data-collapsible": collapsible ? 'true' : 'false', style: { '--oui-code-lines': lineCount }, children: [_jsx("div", { className: "oui-code-inline-content", children: _jsx(CodeBlock, { code: code, mode: "inline" }) }), collapsible ? _jsx("div", { className: "oui-code-inline-fade", "aria-hidden": true }) : null, collapsible ? (_jsx("button", { type: "button", className: "oui-code-inline-toggle", "aria-expanded": expanded, onClick: () => setExpanded((current) => !current), children: expanded ? 'Hide code' : 'Show code' })) : null] }));
+}
+export function CodeBlock({ code, mode = 'scroll' }) {
+    const content = useMemo(() => highlightedCode(code), [code]);
+    const codeNode = (_jsx("pre", { className: "oui-code-preview", children: _jsx("code", { children: content }) }));
+    if (mode === 'inline') {
+        return (_jsxs("div", { className: "oui-code-preview-wrap", children: [_jsx(CopyIconButton, { className: "oui-code-preview-copy", text: code, label: "Copy code", successMessage: "Code copied", size: 1, v: "soft" }), _jsx(ScrollArea, { className: "oui-code-preview-scroll oui-code-preview-scroll-inline", scrollbars: "horizontal", children: codeNode })] }));
+    }
+    return (_jsxs("div", { className: "oui-code-preview-wrap", children: [_jsx(CopyIconButton, { className: "oui-code-preview-copy", text: code, label: "Copy code", successMessage: "Code copied", size: 1, v: "soft" }), _jsx(ScrollArea, { className: "oui-code-preview-scroll", children: codeNode })] }));
 }
 export function CodePreviewModal({ example, onClose, }) {
     return (_jsxs(Modal, { open: example !== null, onOpenChange: (open) => {
             if (!open)
                 onClose();
-        }, maxWidth: 760, children: [_jsxs(Modal.Header, { children: [_jsxs("div", { className: 'oui-modal-title-wrap', children: [_jsx("h2", { className: 'oui-modal-title', children: example?.title ?? 'Component code' }), _jsx("p", { className: 'oui-modal-description', children: "Import and usage example." })] }), _jsx(IconButton, { v: 'ghost', icon: _jsx(LuX, { size: 18 }), "aria-label": 'Close', onClick: onClose })] }), _jsx(Modal.Body, { children: example ? _jsx(CodeBlock, { code: example.code }) : null })] }));
+        }, maxWidth: 760, children: [_jsxs(Modal.Header, { children: [_jsxs("div", { className: "oui-modal-title-wrap", children: [_jsx("h2", { className: "oui-modal-title", children: example?.title ?? 'Component code' }), _jsx("p", { className: "oui-modal-description", children: "Import and usage example." })] }), _jsx(IconButton, { v: "ghost", icon: _jsx(LuX, { size: 18 }), "aria-label": "Close", onClick: onClose })] }), _jsx(Modal.Body, { children: example ? _jsx(CodeBlock, { code: example.code }) : null })] }));
 }

package/dist/example/ExampleActionsSection.d.ts

@@ -5,6 +5,6 @@ type ActionsSectionProps = {
     onOpenCode: (example: CodeExample) => void;
     onOpenPalette: () => void;
 };
-export declare function ActionsSection({ menuItems, onOpenCode, onOpenPalette, }: ActionsSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function ActionsSection({ menuItems, onOpenCode, onOpenPalette }: ActionsSectionProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ExampleActionsSection.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExampleActionsSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleActionsSection.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAUH,KAAK,QAAQ,EAChB,MAAM,IAAI,CAAC;AAEZ,OAAO,EAAc,KAAK,WAAW,EAAC,MAAM,eAAe,CAAC;AAG5D,KAAK,mBAAmB,GAAG;IACvB,SAAS,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACnC,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,aAAa,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC3B,SAAS,EACT,UAAU,EACV,aAAa,GAChB,EAAE,mBAAmB,2CA6KrB"}
+{"version":3,"file":"ExampleActionsSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleActionsSection.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAYH,KAAK,QAAQ,EAChB,MAAM,IAAI,CAAC;AAEZ,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAG9D,KAAK,mBAAmB,GAAG;IACvB,SAAS,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACnC,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,aAAa,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,aAAa,EAAE,EAAE,mBAAmB,2CA6V3F"}

package/dist/example/ExampleActionsSection.js

@@ -1,10 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { LuBell, LuCheck, LuCommand, LuCopy, LuDownload, LuEllipsis, LuExternalLink, LuInfo, LuMessageSquare, LuPackagePlus, LuRefreshCw, LuSearch, LuSettings, LuShield, LuTrash2, LuTriangleAlert, LuUpload, } from 'react-icons/lu';
-import { Button, ContextMenu, Flex, IconButton, IconTextButton, Menu, Spinner, Text, Tooltip, } from '..';
+import { Button, ContextMenu, CopyButton, CopyIconButton, Flex, IconButton, IconTextButton, Menu, Spinner, Text, Tooltip, } from '..';
 import { ExampleTile } from './CodePreview';
 import { codeSamples } from './codeSamples';
 import { UiExampleSection } from './UiExampleSection';
-export function ActionsSection({ menuItems, onOpenCode, onOpenPalette, }) {
-    return (_jsxs(_Fragment, { children: [_jsx(UiExampleSection, { id: 'buttons-example', title: 'Buttons', description: 'Button variants, tones, sizes, loading states and press animation.', children: _jsxs(ExampleTile, { title: 'Buttons', code: codeSamples.buttons, onOpen: onOpenCode, children: [_jsxs("div", { className: 'oui-ui-row', children: [_jsx(Button, { size: 3, children: "Solid" }), _jsx(Button, { size: 3, v: 'soft', children: "Soft" }), _jsx(Button, { size: 3, v: 'surface', children: "Surface" }), _jsx(Button, { size: 3, v: 'pad', children: "Pad" }), _jsx(Button, { size: 3, v: 'outline', children: "Outline" }), _jsx(Button, { size: 3, v: 'ghost', children: "Ghost" })] }), _jsxs("div", { className: 'oui-ui-row', children: [_jsx(Button, { size: 3, tone: 'success', leftIcon: _jsx(LuCheck, { size: 16 }), children: "Success" }), _jsx(Button, { size: 3, tone: 'warning', v: 'soft', leftIcon: _jsx(LuTriangleAlert, { size: 16 }), children: "Warning" }), _jsx(Button, { size: 3, tone: 'info', v: 'soft', leftIcon: _jsx(LuInfo, { size: 16 }), children: "Info" }), _jsx(Button, { size: 3, tone: 'danger', v: 'soft', leftIcon: _jsx(LuTrash2, { size: 16 }), children: "Delete" }), _jsx(Button, { size: 3, loading: true, children: "Loading" }), _jsx(Button, { size: 3, v: 'surface', loading: true, leftIcon: _jsx(LuCheck, { size: 16 }), children: "Save" }), _jsx(Button, { size: 3, tone: 'success', loading: true, leftIcon: _jsx(LuCheck, { size: 16 }), children: "Success" }), _jsx(Spinner, {})] }), _jsxs("div", { className: 'oui-ui-row', children: [_jsx(Button, { size: 1, v: 'surface', children: "Size 1" }), _jsx(Button, { size: 2, v: 'surface', children: "Size 2" }), _jsx(Button, { size: 3, v: 'surface', children: "Size 3" }), _jsx(Button, { size: 4, v: 'surface', children: "Size 4" })] }), _jsxs("div", { className: 'oui-ui-row', children: [_jsx(Button, { size: 1, children: "Solid 1" }), _jsx(Button, { size: 2, v: 'soft', children: "Soft 2" }), _jsx(Button, { size: 3, v: 'surface', children: "Surface 3" }), _jsx(Button, { size: 3, v: 'pad', children: "Pad 3" }), _jsx(Button, { size: 4, v: 'outline', children: "Outline 4" }), _jsx(Button, { size: 2, v: 'ghost', children: "Ghost 2" })] }), _jsxs("div", { className: 'oui-ui-row', children: [_jsx(Button, { v: 'surface', pressAnimation: 'translate', children: "Press translate" }), _jsx(Button, { v: 'surface', pressAnimation: 'scale', children: "Press scale" }), _jsx(Button, { v: 'surface', pressAnimation: 'soft', children: "Press soft" }), _jsx(Button, { v: 'surface', pressAnimation: 'none', children: "Press none" })] })] }) }), _jsx(UiExampleSection, { id: 'icon-text-buttons-example', title: 'Icon text buttons', description: 'Button and link-button behavior with library-owned icon spacing.', children: _jsx(ExampleTile, { title: 'IconTextButton', code: codeSamples.iconTextButton, onOpen: onOpenCode, children: _jsxs(Flex, { g: 2, a: 'c', wrap: true, children: [_jsx(IconTextButton, { icon: _jsx(LuPackagePlus, { size: 16 }), children: "Create PO" }), _jsx(IconTextButton, { v: 'soft', tone: 'info', icon: _jsx(LuCopy, { size: 16 }), children: "Duplicate" }), _jsx(IconTextButton, { href: '#icon-text-buttons-example', v: 'surface', icon: _jsx(LuExternalLink, { size: 16 }), children: "Link action" }), _jsx(IconTextButton, { v: 'outline', iconSide: 'end', icon: _jsx(LuExternalLink, { size: 16 }), children: "Open details" })] }) }) }), _jsx(UiExampleSection, { id: 'icon-buttons-example', title: 'Icon buttons', description: 'Icon-only actions, loading state, menu trigger and command entry.', children: _jsxs(ExampleTile, { title: 'Icon buttons', code: codeSamples.iconButtons, onOpen: onOpenCode, children: [_jsxs(Flex, { g: 2, a: 'c', wrap: true, children: [_jsx(IconButton, { v: 'solid', icon: _jsx(LuCheck, { size: 17 }), "aria-label": 'Solid icon' }), _jsx(IconButton, { v: 'soft', icon: _jsx(LuSearch, { size: 17 }), "aria-label": 'Search icon' }), _jsx(IconButton, { v: 'surface', icon: _jsx(LuUpload, { size: 17 }), "aria-label": 'Upload icon' }), _jsx(IconButton, { v: 'pad', icon: _jsx(LuShield, { size: 17 }), "aria-label": 'Security icon' }), _jsx(IconButton, { v: 'outline', icon: _jsx(LuInfo, { size: 17 }), "aria-label": 'Outline icon' }), _jsx(IconButton, { v: 'ghost', icon: _jsx(LuEllipsis, { size: 17 }), "aria-label": 'Ghost icon' })] }), _jsxs(Flex, { g: 2, a: 'c', wrap: true, children: [_jsx(IconButton, { size: 1, v: 'surface', icon: _jsx(LuSearch, { size: 13 }), "aria-label": 'Size 1 search' }), _jsx(IconButton, { size: 2, v: 'surface', icon: _jsx(LuDownload, { size: 15 }), "aria-label": 'Size 2 download' }), _jsx(IconButton, { size: 3, v: 'surface', icon: _jsx(LuRefreshCw, { size: 17 }), "aria-label": 'Size 3 refresh' }), _jsx(IconButton, { size: 4, v: 'surface', icon: _jsx(LuSettings, { size: 19 }), "aria-label": 'Size 4 settings' }), _jsx(IconButton, { size: 3, v: 'pad', round: false, r: 3, icon: _jsx(LuCommand, { size: 17 }), "aria-label": 'Square pad icon' }), _jsx(IconButton, { size: 3, v: 'outline', loading: true, icon: _jsx(LuRefreshCw, { size: 17 }), "aria-label": 'Loading icon' })] }), _jsxs(Flex, { g: 2, a: 'c', wrap: true, children: [_jsx(IconButton, { v: 'surface', icon: _jsx(LuBell, { size: 17 }), badge: 64, "aria-label": 'Notifications' }), _jsx(IconButton, { v: 'surface', icon: _jsx(LuMessageSquare, { size: 17 }), badge: 99, "aria-label": 'Unread chats' }), _jsx(IconButton, { v: 'pad', icon: _jsx(LuShield, { size: 17 }), badge: 3, badgeTone: 'warning', "aria-label": 'Security warnings' }), _jsx(IconButton, { v: 'ghost', icon: _jsx(LuDownload, { size: 17 }), badge: 'new', badgeTone: 'info', "aria-label": 'New export' })] }), _jsxs(Flex, { g: 2, a: 'c', wrap: true, children: [_jsx(IconButton, { size: 1, v: 'ghost', icon: _jsx(LuEllipsis, { size: 13 }), "aria-label": 'Ghost size 1' }), _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuEllipsis, { size: 15 }), "aria-label": 'Ghost size 2' }), _jsx(IconButton, { size: 3, v: 'ghost', icon: _jsx(LuEllipsis, { size: 17 }), "aria-label": 'Ghost size 3' }), _jsx(IconButton, { size: 4, v: 'ghost', icon: _jsx(LuEllipsis, { size: 19 }), "aria-label": 'Ghost size 4' })] }), _jsxs("div", { className: 'oui-ui-row', children: [_jsx(Tooltip, { content: 'Notifications', children: _jsx(IconButton, { v: 'surface', icon: _jsx(LuBell, { size: 17 }), badge: 8, "aria-label": 'Notifications' }) }), _jsx(IconButton, { v: 'surface', loading: true, icon: _jsx(LuRefreshCw, { size: 17 }), "aria-label": 'Loading action' }), _jsx(IconButton, { v: 'pad', icon: _jsx(LuSettings, { size: 17 }), "aria-label": 'Pad action' }), _jsx(Menu, { trigger: _jsx(IconButton, { v: 'surface', icon: _jsx(LuEllipsis, { size: 17 }), "aria-label": 'Actions' }), items: menuItems }), _jsx(Button, { v: 'surface', leftIcon: _jsx(LuCommand, { size: 16 }), onClick: onOpenPalette, children: "Commands" })] })] }) }), _jsx(UiExampleSection, { id: 'context-menu-example', title: 'Context menu', description: 'Right-click menu layer using shared action menu items.', children: _jsx(ExampleTile, { title: 'ContextMenu', code: codeSamples.contextMenu, onOpen: onOpenCode, children: _jsx(ContextMenu, { items: menuItems, children: _jsxs("div", { className: 'oui-ui-context-menu-demo', children: [_jsx(Text, { fs: '13px', fw: 760, children: "Right-click this row" }), _jsx(Text, { fs: '12px', tone: 'muted', children: "ContextMenu reuses Menu item sizing, tones and confirm actions." })] }) }) }) })] }));
+export function ActionsSection({ menuItems, onOpenCode, onOpenPalette }) {
+    return (_jsxs(_Fragment, { children: [_jsx(UiExampleSection, { id: "buttons-example", title: "Buttons", description: "Button variants, tones, sizes, loading states and press animation.", children: _jsxs(ExampleTile, { title: "Buttons", code: codeSamples.buttons, onOpen: onOpenCode, children: [_jsxs("div", { className: "oui-ui-row", children: [_jsx(Button, { size: 3, children: "Solid" }), _jsx(Button, { size: 3, v: "soft", children: "Soft" }), _jsx(Button, { size: 3, v: "surface", children: "Surface" }), _jsx(Button, { size: 3, v: "pad", children: "Pad" }), _jsx(Button, { size: 3, v: "outline", children: "Outline" }), _jsx(Button, { size: 3, v: "ghost", children: "Ghost" })] }), _jsxs("div", { className: "oui-ui-row", children: [_jsx(Button, { size: 3, tone: "success", leftIcon: _jsx(LuCheck, { size: 16 }), children: "Success" }), _jsx(Button, { size: 3, tone: "warning", v: "soft", leftIcon: _jsx(LuTriangleAlert, { size: 16 }), children: "Warning" }), _jsx(Button, { size: 3, tone: "info", v: "soft", leftIcon: _jsx(LuInfo, { size: 16 }), children: "Info" }), _jsx(Button, { size: 3, tone: "danger", v: "soft", leftIcon: _jsx(LuTrash2, { size: 16 }), children: "Delete" }), _jsx(Button, { size: 3, loading: true, children: "Loading" }), _jsx(Button, { size: 3, v: "surface", loading: true, leftIcon: _jsx(LuCheck, { size: 16 }), children: "Save" }), _jsx(Button, { size: 3, tone: "success", loading: true, leftIcon: _jsx(LuCheck, { size: 16 }), children: "Success" }), _jsx(Spinner, {})] }), _jsxs("div", { className: "oui-ui-row", children: [_jsx(Button, { size: 1, v: "surface", children: "Size 1" }), _jsx(Button, { size: 2, v: "surface", children: "Size 2" }), _jsx(Button, { size: 3, v: "surface", children: "Size 3" }), _jsx(Button, { size: 4, v: "surface", children: "Size 4" })] }), _jsxs("div", { className: "oui-ui-row", children: [_jsx(Button, { size: 1, children: "Solid 1" }), _jsx(Button, { size: 2, v: "soft", children: "Soft 2" }), _jsx(Button, { size: 3, v: "surface", children: "Surface 3" }), _jsx(Button, { size: 3, v: "pad", children: "Pad 3" }), _jsx(Button, { size: 4, v: "outline", children: "Outline 4" }), _jsx(Button, { size: 2, v: "ghost", children: "Ghost 2" })] }), _jsxs("div", { className: "oui-ui-row", children: [_jsx(Button, { v: "surface", pressAnimation: "translate", children: "Press translate" }), _jsx(Button, { v: "surface", pressAnimation: "scale", children: "Press scale" }), _jsx(Button, { v: "surface", pressAnimation: "soft", children: "Press soft" }), _jsx(Button, { v: "surface", pressAnimation: "none", children: "Press none" })] }), _jsxs("div", { className: "oui-ui-row", children: [_jsx(CopyButton, { text: "https://orcestr.dev/requests/PR-2026-0900", label: "Copy link", successMessage: "Link copied", v: "surface" }), _jsx(CopyIconButton, { text: "PR-2026-0900", label: "Copy request number", successMessage: "Request number copied", v: "surface" })] })] }) }), _jsx(UiExampleSection, { id: "icon-text-buttons-example", title: "Icon text buttons", description: "Button and link-button behavior with library-owned icon spacing.", children: _jsx(ExampleTile, { title: "IconTextButton", code: codeSamples.iconTextButton, onOpen: onOpenCode, children: _jsxs(Flex, { g: 2, a: "c", wrap: true, children: [_jsx(IconTextButton, { icon: _jsx(LuPackagePlus, { size: 16 }), children: "Create PO" }), _jsx(IconTextButton, { v: "soft", tone: "info", icon: _jsx(LuCopy, { size: 16 }), children: "Duplicate" }), _jsx(IconTextButton, { href: "#icon-text-buttons-example", v: "surface", icon: _jsx(LuExternalLink, { size: 16 }), children: "Link action" }), _jsx(IconTextButton, { v: "outline", iconSide: "end", icon: _jsx(LuExternalLink, { size: 16 }), children: "Open details" })] }) }) }), _jsx(UiExampleSection, { id: "icon-buttons-example", title: "Icon buttons", description: "Icon-only actions, loading state, menu trigger and command entry.", children: _jsxs(ExampleTile, { title: "Icon buttons", code: codeSamples.iconButtons, onOpen: onOpenCode, children: [_jsxs(Flex, { g: 2, a: "c", wrap: true, children: [_jsx(IconButton, { v: "solid", icon: _jsx(LuCheck, { size: 17 }), "aria-label": "Solid icon" }), _jsx(IconButton, { v: "soft", icon: _jsx(LuSearch, { size: 17 }), "aria-label": "Search icon" }), _jsx(IconButton, { v: "surface", icon: _jsx(LuUpload, { size: 17 }), "aria-label": "Upload icon" }), _jsx(IconButton, { v: "pad", icon: _jsx(LuShield, { size: 17 }), "aria-label": "Security icon" }), _jsx(IconButton, { v: "outline", icon: _jsx(LuInfo, { size: 17 }), "aria-label": "Outline icon" }), _jsx(IconButton, { v: "ghost", icon: _jsx(LuEllipsis, { size: 17 }), "aria-label": "Ghost icon" })] }), _jsxs(Flex, { g: 2, a: "c", wrap: true, children: [_jsx(IconButton, { size: 1, v: "surface", icon: _jsx(LuSearch, { size: 13 }), "aria-label": "Size 1 search" }), _jsx(IconButton, { size: 2, v: "surface", icon: _jsx(LuDownload, { size: 15 }), "aria-label": "Size 2 download" }), _jsx(IconButton, { size: 3, v: "surface", icon: _jsx(LuRefreshCw, { size: 17 }), "aria-label": "Size 3 refresh" }), _jsx(IconButton, { size: 4, v: "surface", icon: _jsx(LuSettings, { size: 19 }), "aria-label": "Size 4 settings" }), _jsx(IconButton, { size: 3, v: "pad", round: false, r: 3, icon: _jsx(LuCommand, { size: 17 }), "aria-label": "Square pad icon" }), _jsx(IconButton, { size: 3, v: "outline", loading: true, icon: _jsx(LuRefreshCw, { size: 17 }), "aria-label": "Loading icon" })] }), _jsxs(Flex, { g: 2, a: "c", wrap: true, children: [_jsx(IconButton, { v: "surface", icon: _jsx(LuBell, { size: 17 }), badge: 64, "aria-label": "Notifications" }), _jsx(IconButton, { v: "surface", icon: _jsx(LuMessageSquare, { size: 17 }), badge: 99, "aria-label": "Unread chats" }), _jsx(IconButton, { v: "pad", icon: _jsx(LuShield, { size: 17 }), badge: 3, badgeTone: "warning", "aria-label": "Security warnings" }), _jsx(IconButton, { v: "ghost", icon: _jsx(LuDownload, { size: 17 }), badge: "new", badgeTone: "info", "aria-label": "New export" })] }), _jsxs(Flex, { g: 2, a: "c", wrap: true, children: [_jsx(IconButton, { size: 1, v: "ghost", icon: _jsx(LuEllipsis, { size: 13 }), "aria-label": "Ghost size 1" }), _jsx(IconButton, { size: 2, v: "ghost", icon: _jsx(LuEllipsis, { size: 15 }), "aria-label": "Ghost size 2" }), _jsx(IconButton, { size: 3, v: "ghost", icon: _jsx(LuEllipsis, { size: 17 }), "aria-label": "Ghost size 3" }), _jsx(IconButton, { size: 4, v: "ghost", icon: _jsx(LuEllipsis, { size: 19 }), "aria-label": "Ghost size 4" })] }), _jsxs("div", { className: "oui-ui-row", children: [_jsx(Tooltip, { content: "Notifications", children: _jsx(IconButton, { v: "surface", icon: _jsx(LuBell, { size: 17 }), badge: 8, "aria-label": "Notifications" }) }), _jsx(IconButton, { v: "surface", loading: true, icon: _jsx(LuRefreshCw, { size: 17 }), "aria-label": "Loading action" }), _jsx(IconButton, { v: "pad", icon: _jsx(LuSettings, { size: 17 }), "aria-label": "Pad action" }), _jsx(Menu, { trigger: _jsx(IconButton, { v: "surface", icon: _jsx(LuEllipsis, { size: 17 }), "aria-label": "Actions" }), items: menuItems }), _jsx(Button, { v: "surface", leftIcon: _jsx(LuCommand, { size: 16 }), onClick: onOpenPalette, children: "Commands" })] })] }) }), _jsx(UiExampleSection, { id: "context-menu-example", title: "Context menu", description: "Right-click menu layer using shared action menu items.", children: _jsx(ExampleTile, { title: "ContextMenu", code: codeSamples.contextMenu, onOpen: onOpenCode, children: _jsx(ContextMenu, { items: menuItems, children: _jsxs("div", { className: "oui-ui-context-menu-demo", children: [_jsx(Text, { fs: "13px", fw: 760, children: "Right-click this row" }), _jsx(Text, { fs: "12px", tone: "muted", children: "ContextMenu reuses Menu item sizing, tones and confirm actions." })] }) }) }) })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ExampleApplicationSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleApplicationSection.tsx"],"names":[],"mappings":"AA2CA,OAAO,EAAc,KAAK,WAAW,EAAC,MAAM,eAAe,CAAC;AAG5D,KAAK,mBAAmB,GAAG;IACvB,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9C,CAAC;AAIF,wBAAgB,kBAAkB,CAAC,EAAC,UAAU,EAAC,EAAE,mBAAmB,2CAyOnE"}
+{"version":3,"file":"ExampleApplicationSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleApplicationSection.tsx"],"names":[],"mappings":"AAgDA,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAG9D,KAAK,mBAAmB,GAAG;IACvB,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9C,CAAC;AAIF,wBAAgB,kBAAkB,CAAC,EAAE,UAAU,EAAE,EAAE,mBAAmB,2CA4RrE"}

package/dist/example/ExampleApplicationSection.js

@@ -1,14 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
-import { LuArrowLeft, LuArrowLeftRight, LuBell, LuBox, LuBraces, LuCalendar, LuClipboardList, LuCog, LuEllipsis, LuFlaskConical, LuHeadphones, LuLanguages, LuLayoutDashboard, LuMessageSquare, LuSearch, LuSettings, LuShield, LuSun, LuTruck, } from 'react-icons/lu';
-import { AppShell, AppShellContent, AppShellHeader, AppSidebar, Badge, Button, Flex, IconButton, IconTextButton, PageTitleBlock, SpecialModal, Stack, Text, } from '..';
+import { LuArrowLeft, LuArrowLeftRight, LuBell, LuBox, LuBraces, LuCalendar, LuCheck, LuClipboardList, LuCog, LuEllipsis, LuFlaskConical, LuHeadphones, LuLanguages, LuLayoutDashboard, LuMessageSquare, LuSearch, LuSettings, LuShield, LuSun, LuTruck, } from 'react-icons/lu';
+import { AppShell, AppShellContent, AppShellHeader, AppSidebar, Badge, Button, Flex, IconButton, IconTextButton, Menu, PageTitleBlock, SpecialModal, Stack, Text, Tooltip, } from '..';
 import { ExampleTile } from './CodePreview';
 import { codeSamples } from './codeSamples';
 import { UiExampleSection } from './UiExampleSection';
 export function ApplicationSection({ onOpenCode }) {
     const [appShellOpen, setAppShellOpen] = useState(false);
     const [appShellPreviewMode, setAppShellPreviewMode] = useState('desktop');
+    const [appShellSidebarSide, setAppShellSidebarSide] = useState('left');
     const [specialModalOpen, setSpecialModalOpen] = useState(false);
     const [shellMobileOpen, setShellMobileOpen] = useState(false);
     const [shellActiveKey, setShellActiveKey] = useState('requests');
@@ -17,52 +18,119 @@ export function ApplicationSection({ onOpenCode }) {
         {
             key: 'demand',
             items: [
-                { key: 'overview', label: 'Overview', icon: _jsx(LuLayoutDashboard, { size: 17 }), active: shellActiveKey === 'overview' },
-                { key: 'requests', label: 'Requests', icon: _jsx(LuTruck, { size: 17 }), active: shellActiveKey === 'requests' },
-                { key: 'orders', label: 'Supplier orders', icon: _jsx(LuClipboardList, { size: 17 }), active: shellActiveKey === 'orders' },
+                {
+                    key: 'overview',
+                    label: 'Overview',
+                    icon: _jsx(LuLayoutDashboard, { size: 17 }),
+                    active: shellActiveKey === 'overview',
+                },
+                {
+                    key: 'requests',
+                    label: 'Requests',
+                    icon: _jsx(LuTruck, { size: 17 }),
+                    active: shellActiveKey === 'requests',
+                },
+                {
+                    key: 'orders',
+                    label: 'Supplier orders',
+                    icon: _jsx(LuClipboardList, { size: 17 }),
+                    active: shellActiveKey === 'orders',
+                },
             ],
         },
         {
-            key: 'operations',
+            key: 'inventory',
             items: [
-                { key: 'products', label: 'Products', icon: _jsx(LuBox, { size: 17 }), active: shellActiveKey === 'products' },
-                { key: 'calendar', label: 'Calendar', icon: _jsx(LuCalendar, { size: 17 }), active: shellActiveKey === 'calendar' },
+                {
+                    key: 'products',
+                    label: 'Products',
+                    icon: _jsx(LuBox, { size: 17 }),
+                    active: shellActiveKey === 'products',
+                },
+                {
+                    key: 'calendar',
+                    label: 'Calendar',
+                    icon: _jsx(LuCalendar, { size: 17 }),
+                    active: shellActiveKey === 'calendar',
+                },
             ],
         },
     ];
-    return (_jsxs(_Fragment, { children: [_jsxs(UiExampleSection, { id: 'app-shell-example', title: 'AppShell', description: 'Application shell primitives for module frames.', children: [_jsx(ExampleTile, { title: 'Fullscreen AppShell preview', code: codeSamples.appShell, onOpen: onOpenCode, children: _jsx(IconTextButton, { icon: _jsx(LuLayoutDashboard, { size: 16 }), onClick: () => setAppShellOpen(true), children: "Open AppShell preview" }) }), _jsxs(SpecialModal, { open: appShellOpen, onOpenChange: setAppShellOpen, size: 'full', scroll: 'body', density: 'compact', contentClassName: 'oui-ui-app-shell-modal', children: [_jsxs(SpecialModal.Header, { className: 'oui-ui-app-shell-modal-header', children: [_jsxs(Flex, { a: 'c', g: 2, minW: 0, children: [_jsx(Text, { fw: 760, children: "AppShell preview" }), _jsx(Badge, { tone: 'primary', children: appShellPreviewMode === 'desktop' ? 'Desktop' : 'Phone' })] }), _jsxs(Flex, { a: 'c', g: 1, children: [_jsx(Button, { className: 'oui-ui-app-shell-mode-toggle', size: 2, v: 'surface', onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsxs(UiExampleSection, { id: "app-shell-example", title: "AppShell", description: "Application shell primitives for module frames.", children: [_jsx(ExampleTile, { title: "Fullscreen AppShell preview", code: codeSamples.appShell, onOpen: onOpenCode, children: _jsx(IconTextButton, { icon: _jsx(LuLayoutDashboard, { size: 16 }), onClick: () => setAppShellOpen(true), children: "Open AppShell preview" }) }), _jsxs(SpecialModal, { open: appShellOpen, onOpenChange: setAppShellOpen, size: "full", scroll: "body", density: "compact", contentClassName: "oui-ui-app-shell-modal", children: [_jsxs(SpecialModal.Header, { className: "oui-ui-app-shell-modal-header", children: [_jsx(Flex, { a: "c", g: 2, minW: 0, children: _jsx(Text, { fw: 760, children: "AppShell preview" }) }), _jsxs(Flex, { a: "c", g: 1, children: [_jsx(Button, { className: "oui-ui-app-shell-mode-toggle", size: 2, v: "surface", onClick: () => {
                                                     setShellMobileOpen(false);
                                                     setAppShellPreviewMode((mode) => mode === 'desktop' ? 'phone' : 'desktop');
-                                                }, children: appShellPreviewMode === 'desktop'
-                                                    ? 'Phone view'
-                                                    : 'Desktop view' }), _jsx(SpecialModal.Close, {})] })] }), _jsx(SpecialModal.Body, { className: 'oui-ui-app-shell-modal-body', children: _jsx("div", { className: 'oui-ui-app-shell-preview-stage', "data-mode": appShellPreviewMode, children: _jsx(DemoAppShellPreview, { mode: appShellPreviewMode, mobileOpen: shellMobileOpen, onMobileOpenChange: setShellMobileOpen, groups: shellGroups, onNavigate: (item) => setShellActiveKey(item.key) }) }) })] })] }), _jsx(UiExampleSection, { id: 'app-sidebar-example', title: 'AppSidebar', description: 'Deliveries-style sidebar with active indicator and footer actions.', children: _jsx(ExampleTile, { title: 'AppSidebar', code: codeSamples.appSidebar, onOpen: onOpenCode, children: _jsx("div", { className: 'oui-ui-app-sidebar-demo', children: _jsx(AppSidebar, { header: (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'oui-app-sidebar-brand', children: [_jsx("span", { className: 'oui-app-sidebar-logo', children: _jsx("span", { className: 'oui-ui-demo-logo', children: "O" }) }), _jsx("span", { className: 'oui-app-sidebar-title', children: "Deliveries" })] }), _jsx("div", { className: 'oui-app-sidebar-actions', children: _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuEllipsis, { size: 16 }), "aria-label": 'Sidebar actions' }) })] })), itemH: 38, onNavigate: (item) => setSidebarActiveKey(item.key), groups: [
+                                                }, children: appShellPreviewMode === 'desktop' ? 'Phone view' : 'Desktop view' }), _jsx(SpecialModal.Close, {})] })] }), _jsx(SpecialModal.Body, { className: "oui-ui-app-shell-modal-body", children: _jsx("div", { className: "oui-ui-app-shell-preview-stage", "data-mode": appShellPreviewMode, children: _jsx(DemoAppShellPreview, { mode: appShellPreviewMode, mobileOpen: shellMobileOpen, onMobileOpenChange: setShellMobileOpen, sidebarSide: appShellSidebarSide, onToggleSidebarSide: () => setAppShellSidebarSide((side) => side === 'left' ? 'right' : 'left'), groups: shellGroups, onNavigate: (item) => setShellActiveKey(item.key) }) }) })] })] }), _jsx(UiExampleSection, { id: "app-sidebar-example", title: "AppSidebar", description: "Deliveries-style sidebar with active indicator and footer actions.", children: _jsx(ExampleTile, { title: "AppSidebar", code: codeSamples.appSidebar, onOpen: onOpenCode, children: _jsx("div", { className: "oui-ui-app-sidebar-demo", children: _jsx(AppSidebar, { header: _jsxs(_Fragment, { children: [_jsxs("div", { className: "oui-app-sidebar-brand", children: [_jsx("span", { className: "oui-app-sidebar-logo", children: _jsx("span", { className: "oui-ui-demo-logo", children: "O" }) }), _jsx("span", { className: "oui-app-sidebar-title", children: "Deliveries" })] }), _jsx("div", { className: "oui-app-sidebar-actions", children: _jsx(IconButton, { size: 2, v: "ghost", icon: _jsx(LuEllipsis, { size: 16 }), "aria-label": "Sidebar actions" }) })] }), itemH: 38, onNavigate: (item) => setSidebarActiveKey(item.key), groups: [
                                 {
                                     key: 'main',
                                     items: [
-                                        { key: 'overview', label: 'Overview', icon: _jsx(LuLayoutDashboard, { size: 17 }), active: sidebarActiveKey === 'overview' },
-                                        { key: 'requests', label: 'Requests', icon: _jsx(LuTruck, { size: 17 }), active: sidebarActiveKey === 'requests' },
-                                        { key: 'orders', label: 'Supplier orders', icon: _jsx(LuClipboardList, { size: 17 }), active: sidebarActiveKey === 'orders' },
+                                        {
+                                            key: 'overview',
+                                            label: 'Overview',
+                                            icon: _jsx(LuLayoutDashboard, { size: 17 }),
+                                            active: sidebarActiveKey === 'overview',
+                                        },
+                                        {
+                                            key: 'requests',
+                                            label: 'Requests',
+                                            icon: _jsx(LuTruck, { size: 17 }),
+                                            active: sidebarActiveKey === 'requests',
+                                        },
+                                        {
+                                            key: 'orders',
+                                            label: 'Supplier orders',
+                                            icon: _jsx(LuClipboardList, { size: 17 }),
+                                            active: sidebarActiveKey === 'orders',
+                                        },
                                     ],
                                 },
                                 {
                                     key: 'inventory',
                                     items: [
-                                        { key: 'products', label: 'Products', icon: _jsx(LuBox, { size: 17 }), active: sidebarActiveKey === 'products' },
-                                        { key: 'calendar', label: 'Calendar', icon: _jsx(LuCalendar, { size: 17 }), disabled: true },
+                                        {
+                                            key: 'products',
+                                            label: 'Products',
+                                            icon: _jsx(LuBox, { size: 17 }),
+                                            active: sidebarActiveKey === 'products',
+                                        },
+                                        {
+                                            key: 'calendar',
+                                            label: 'Calendar',
+                                            icon: _jsx(LuCalendar, { size: 17 }),
+                                            disabled: true,
+                                        },
                                     ],
                                 },
-                            ], footer: (_jsxs(Flex, { col: true, g: 2, children: [_jsxs(Flex, { g: 1, a: 'c', children: [_jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuBell, { size: 15 }), badge: 64, "aria-label": 'Notifications' }), _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuSettings, { size: 15 }), "aria-label": 'Settings' }), _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuCog, { size: 15 }), "aria-label": 'Developer tools' })] }), _jsx(Text, { fs: '12px', tone: 'muted', children: "Admin workspace" })] })) }) }) }) }), _jsxs(UiExampleSection, { id: 'special-modal-example', title: 'SpecialModal', description: 'Large entity modal shell for rich operational dialogs.', children: [_jsx(ExampleTile, { title: 'SpecialModal', code: codeSamples.specialModal, onOpen: onOpenCode, children: _jsx(Button, { onClick: () => setSpecialModalOpen(true), children: "Open special modal" }) }), _jsxs(SpecialModal, { open: specialModalOpen, onOpenChange: setSpecialModalOpen, size: 'lg', scroll: 'body', children: [_jsx(SpecialModal.Header, { title: 'Request PR-2026-0900', meta: (_jsxs(Flex, { g: 2, a: 'c', wrap: true, children: [_jsx(Badge, { tone: 'success', children: "Closed" }), _jsx(Badge, { tone: 'neutral', children: "RUB" })] })), actions: _jsx(SpecialModal.Close, {}) }), _jsx(SpecialModal.Body, { children: _jsxs(Stack, { g: 3, children: [_jsxs(Flex, { g: 4, wrap: true, children: [_jsxs(Stack, { g: 0, w: 'min(100%, 220px)', children: [_jsx(Text, { fs: '12px', tone: 'muted', children: "Supplier" }), _jsx(Text, { fw: 760, children: "Northwind Trading LLC" })] }), _jsxs(Stack, { g: 0, w: 'min(100%, 180px)', children: [_jsx(Text, { fs: '12px', tone: 'muted', children: "Plan arrival" }), _jsx(Text, { fw: 760, children: "25.06.2026" })] })] }), _jsx(TableLikePreview, {})] }) }), _jsx(SpecialModal.Footer, { children: _jsxs(Flex, { g: 2, j: 'e', w: '100%', children: [_jsx(Button, { v: 'surface', onClick: () => setSpecialModalOpen(false), children: "Close" }), _jsx(Button, { children: "Save" })] }) })] })] })] }));
+                            ], footer: _jsxs(Flex, { col: true, g: 2, children: [_jsxs(Flex, { g: 1, a: "c", children: [_jsx(IconButton, { size: 2, v: "ghost", icon: _jsx(LuBell, { size: 15 }), badge: 64, "aria-label": "Notifications" }), _jsx(IconButton, { size: 2, v: "ghost", icon: _jsx(LuSettings, { size: 15 }), "aria-label": "Settings" }), _jsx(IconButton, { size: 2, v: "ghost", icon: _jsx(LuCog, { size: 15 }), "aria-label": "Developer tools" })] }), _jsx(Text, { fs: "12px", tone: "muted", children: "Admin workspace" })] }) }) }) }) }), _jsxs(UiExampleSection, { id: "special-modal-example", title: "SpecialModal", description: "Large entity modal shell for rich operational dialogs.", children: [_jsx(ExampleTile, { title: "SpecialModal", code: codeSamples.specialModal, onOpen: onOpenCode, children: _jsx(Button, { onClick: () => setSpecialModalOpen(true), children: "Open special modal" }) }), _jsxs(SpecialModal, { open: specialModalOpen, onOpenChange: setSpecialModalOpen, size: "lg", scroll: "body", children: [_jsx(SpecialModal.Header, { title: "Request PR-2026-0900", meta: _jsxs(Flex, { g: 2, a: "c", wrap: true, children: [_jsx(Badge, { tone: "success", children: "Closed" }), _jsx(Badge, { tone: "neutral", children: "RUB" })] }), actions: _jsx(SpecialModal.Close, {}) }), _jsx(SpecialModal.Body, { children: _jsxs(Stack, { g: 3, children: [_jsxs(Flex, { g: 4, wrap: true, children: [_jsxs(Stack, { g: 0, w: "min(100%, 220px)", children: [_jsx(Text, { fs: "12px", tone: "muted", children: "Supplier" }), _jsx(Text, { fw: 760, children: "Northwind Trading LLC" })] }), _jsxs(Stack, { g: 0, w: "min(100%, 180px)", children: [_jsx(Text, { fs: "12px", tone: "muted", children: "Plan arrival" }), _jsx(Text, { fw: 760, children: "25.06.2026" })] })] }), _jsx(TableLikePreview, {})] }) }), _jsx(SpecialModal.Footer, { children: _jsxs(Flex, { g: 2, j: "e", w: "100%", children: [_jsx(Button, { v: "surface", onClick: () => setSpecialModalOpen(false), children: "Close" }), _jsx(Button, { children: "Save" })] }) })] })] })] }));
 }
-function DemoAppShellPreview({ mode, mobileOpen, onMobileOpenChange, groups, onNavigate, }) {
+function DemoAppShellPreview({ mode, mobileOpen, onMobileOpenChange, sidebarSide, onToggleSidebarSide, groups, onNavigate, }) {
     const isPhone = mode === 'phone';
-    return (_jsx(AppShell, { className: 'oui-ui-app-shell-preview', sidebarMode: isPhone ? 'mobile' : 'desktop', sidebarWidth: 300, maxWidth: '100%', contentInset: 0, sidebarOpen: mobileOpen, onSidebarOpenChange: onMobileOpenChange, header: (_jsx(AppShellHeader, { visibility: 'always', sidebarOpen: mobileOpen, onSidebarOpenChange: isPhone ? onMobileOpenChange : undefined, actions: _jsx(DemoHeaderActions, {}), children: _jsxs(Flex, { className: 'oui-ui-app-shell-header-main', a: 'c', g: 2, children: [!isPhone ? (_jsxs(_Fragment, { children: [_jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuArrowLeft, { size: 17 }), "aria-label": 'Back' }), _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuArrowLeftRight, { size: 17 }), "aria-label": 'Move sidebar' })] })) : null, _jsx(Text, { fw: 760, children: "Deliveries" })] }) })), sidebar: (_jsx(AppSidebar, { header: (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'oui-app-sidebar-brand', children: [_jsx("span", { className: 'oui-app-sidebar-logo', children: _jsx("span", { className: 'oui-ui-demo-logo', children: "O" }) }), _jsx("span", { className: 'oui-app-sidebar-title', children: "Deliveries" })] }), _jsx("div", { className: 'oui-app-sidebar-actions', children: _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuEllipsis, { size: 16 }), "aria-label": 'Sidebar actions' }) })] })), itemH: 38, onNavigate: onNavigate, groups: groups, footer: _jsx(DemoSidebarFooter, {}) })), children: _jsxs(AppShellContent, { scroll: false, children: [_jsx(PageTitleBlock, { title: 'Requests', caption: 'Module workspace with responsive header and AppSidebar navigation.', badge: 'shell', action: (_jsx(IconButton, { size: 2, v: 'pad', icon: _jsx(LuEllipsis, { size: 16 }), "aria-label": 'More actions' })) }), _jsx(TableLikePreview, {})] }) }));
+    const isRight = sidebarSide === 'right';
+    return (_jsx(AppShell, { className: "oui-ui-app-shell-preview", sidebarMode: isPhone ? 'mobile' : 'desktop', sidebarSide: sidebarSide, sidebarWidth: 300, maxWidth: "100%", contentInset: 0, sidebarOpen: mobileOpen, desktopSidebarOpen: true, onSidebarOpenChange: onMobileOpenChange, header: _jsx(AppShellHeader, { visibility: "always", sidebarOpen: mobileOpen, onSidebarOpenChange: onMobileOpenChange, navigationVisibility: "mobile", actions: _jsx(DemoHeaderActions, {}) }), sidebar: _jsx(AppSidebar, { side: sidebarSide, header: _jsxs(_Fragment, { children: [_jsx(DemoShellBrand, {}), _jsxs("div", { className: "oui-app-sidebar-actions", children: [_jsx(Tooltip, { content: "Back", children: _jsx(IconButton, { size: 2, v: "ghost", icon: _jsx(LuArrowLeft, { size: 17 }), "aria-label": "Back" }) }), _jsx(Tooltip, { content: isRight ? 'Move sidebar left' : 'Move sidebar right', children: _jsx(IconButton, { size: 2, v: "ghost", icon: _jsx(LuArrowLeftRight, { size: 17 }), "aria-label": isRight ? 'Move sidebar left' : 'Move sidebar right', onClick: onToggleSidebarSide }) }), _jsx(IconButton, { size: 2, v: "ghost", icon: _jsx(LuEllipsis, { size: 16 }), "aria-label": "Sidebar actions" })] })] }), itemH: 38, onNavigate: onNavigate, groups: groups, footer: _jsx(DemoSidebarFooter, {}) }), children: _jsxs(AppShellContent, { scroll: false, children: [_jsx(PageTitleBlock, { title: "Requests", caption: "Module workspace with responsive header and AppSidebar navigation.", action: _jsx(IconButton, { size: 2, v: "pad", icon: _jsx(LuEllipsis, { size: 16 }), "aria-label": "More actions" }) }), _jsx(TableLikePreview, {})] }) }));
+}
+function DemoShellBrand() {
+    return (_jsxs("div", { className: "oui-app-sidebar-brand", children: [_jsx("span", { className: "oui-app-sidebar-logo", children: _jsx("span", { className: "oui-ui-demo-logo", children: "O" }) }), _jsx("span", { className: "oui-app-sidebar-title", children: "Deliveries" })] }));
 }
 function DemoHeaderActions() {
-    return (_jsxs(Flex, { className: 'oui-ui-app-shell-header-actions-demo', a: 'c', g: 1, children: [_jsx(IconTextButton, { className: 'oui-ui-app-shell-quick-jump', size: 2, v: 'soft', tone: 'neutral', icon: _jsx(LuSearch, { size: 14 }), children: "Quick jump" }), _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuBell, { size: 18 }), badge: 64, "aria-label": 'Notifications' }), _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuMessageSquare, { size: 18 }), badge: 99, "aria-label": 'Messages' }), _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuLanguages, { size: 18 }), "aria-label": 'Language' }), _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuSun, { size: 18 }), "aria-label": 'Theme' }), _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuShield, { size: 18 }), "aria-label": 'Admin' })] }));
+    const [locale, setLocale] = useState('en');
+    const languageItems = [
+        {
+            key: 'ru',
+            label: 'RU',
+            icon: locale === 'ru' ? _jsx(LuCheck, { size: 14 }) : undefined,
+            onSelect: () => setLocale('ru'),
+        },
+        {
+            key: 'en',
+            label: 'EN',
+            icon: locale === 'en' ? _jsx(LuCheck, { size: 14 }) : undefined,
+            onSelect: () => setLocale('en'),
+        },
+    ];
+    return (_jsxs(Flex, { className: "oui-ui-app-shell-header-actions-demo", a: "c", g: 1, children: [_jsx(IconTextButton, { className: "oui-ui-app-shell-quick-jump", size: 2, v: "soft", tone: "neutral", icon: _jsx(LuSearch, { size: 14 }), children: "Quick jump" }), _jsx(IconButton, { size: 2, v: "ghost", icon: _jsx(LuBell, { size: 18 }), badge: 64, "aria-label": "Notifications" }), _jsx(IconButton, { size: 2, v: "ghost", icon: _jsx(LuMessageSquare, { size: 18 }), badge: 99, "aria-label": "Messages" }), _jsx(Menu, { align: "end", items: languageItems, trigger: _jsx(IconButton, { size: 2, v: "ghost", icon: _jsx(LuLanguages, { size: 18 }), "aria-label": `Language: ${locale.toUpperCase()}` }) }), _jsx(IconButton, { size: 2, v: "ghost", icon: _jsx(LuSun, { size: 18 }), "aria-label": "Theme" }), _jsx(IconButton, { size: 2, v: "ghost", icon: _jsx(LuShield, { size: 18 }), "aria-label": "Admin" })] }));
 }
 function DemoSidebarFooter() {
-    return (_jsxs(Flex, { col: true, g: 2, children: [_jsxs(Flex, { g: 1, a: 'c', children: [_jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuHeadphones, { size: 15 }), "aria-label": 'Support' }), _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuBell, { size: 15 }), badge: 64, "aria-label": 'Notifications' }), _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuSettings, { size: 15 }), "aria-label": 'Settings' }), _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuFlaskConical, { size: 15 }), "aria-label": 'Demo data' }), _jsx(IconButton, { size: 2, v: 'ghost', icon: _jsx(LuBraces, { size: 15 }), "aria-label": 'API' })] }), _jsx(Text, { fs: '12px', tone: 'muted', children: "Admin workspace" })] }));
+    return (_jsxs(Flex, { col: true, g: 2, children: [_jsxs(Flex, { g: 1, a: "c", children: [_jsx(IconButton, { size: 2, v: "ghost", icon: _jsx(LuHeadphones, { size: 15 }), "aria-label": "Support" }), _jsx(IconButton, { size: 2, v: "ghost", icon: _jsx(LuBell, { size: 15 }), badge: 64, "aria-label": "Notifications" }), _jsx(IconButton, { size: 2, v: "ghost", icon: _jsx(LuSettings, { size: 15 }), "aria-label": "Settings" }), _jsx(IconButton, { size: 2, v: "ghost", icon: _jsx(LuFlaskConical, { size: 15 }), "aria-label": "Demo data" }), _jsx(IconButton, { size: 2, v: "ghost", icon: _jsx(LuBraces, { size: 15 }), "aria-label": "API" })] }), _jsx(Text, { fs: "12px", tone: "muted", children: "Admin workspace" })] }));
 }
 function TableLikePreview() {
-    return (_jsxs("div", { className: 'oui-ui-application-table-preview', children: [['Brand', 'Name', 'Article', 'Qty', 'Price'].map((item) => (_jsx(Text, { fs: '12px', fw: 760, children: item }, item))), ['Stalex', 'Lathe machine', 'LATHE-8191', '22', '1250'].map((item) => (_jsx(Text, { fs: '13px', children: item }, item)))] }));
+    return (_jsxs("div", { className: "oui-ui-application-table-preview", children: [['Brand', 'Name', 'Article', 'Qty', 'Price'].map((item) => (_jsx(Text, { fs: "12px", fw: 760, children: item }, item))), ['Stalex', 'Lathe machine', 'LATHE-8191', '22', '1250'].map((item) => (_jsx(Text, { fs: "13px", children: item }, item)))] }));
 }

package/dist/example/ExampleBasicsSections.d.ts

@@ -2,7 +2,7 @@ import { type CodeExample } from './codeSamples';
 type ExampleSectionProps = {
     onOpenCode: (example: CodeExample) => void;
 };
-export declare function TypographySection({ onOpenCode }: ExampleSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextSection({ onOpenCode }: ExampleSectionProps): import("react/jsx-runtime").JSX.Element;
 export declare function LayoutSection({ onOpenCode }: ExampleSectionProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ExampleBasicsSections.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExampleBasicsSections.d.ts","sourceRoot":"","sources":["../../src/example/ExampleBasicsSections.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAc,KAAK,WAAW,EAAC,MAAM,eAAe,CAAC;AAG5D,KAAK,mBAAmB,GAAG;IACvB,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAAC,UAAU,EAAC,EAAE,mBAAmB,2CAwElE;AAED,wBAAgB,aAAa,CAAC,EAAC,UAAU,EAAC,EAAE,mBAAmB,2CAyV9D"}
+{"version":3,"file":"ExampleBasicsSections.d.ts","sourceRoot":"","sources":["../../src/example/ExampleBasicsSections.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAG9D,KAAK,mBAAmB,GAAG;IACvB,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAAE,UAAU,EAAE,EAAE,mBAAmB,2CA8E9D;AAED,wBAAgB,aAAa,CAAC,EAAE,UAAU,EAAE,EAAE,mBAAmB,2CAgXhE"}

package/dist/example/ExampleBasicsSections.js

@@ -5,16 +5,30 @@ import { Alert, Badge, Box, Button, Card, Collapse, Flex, Grid, ScrollArea, Sect
 import { ExampleTile } from './CodePreview';
 import { codeSamples } from './codeSamples';
 import { UiExampleSection } from './UiExampleSection';
-export function TypographySection({ onOpenCode }) {
-    return (_jsxs(_Fragment, { children: [_jsx(UiExampleSection, { id: 'typography', title: 'Typography', description: 'Text and shared system props.', children: _jsx(ExampleTile, { title: 'Typography', code: codeSamples.typography, onOpen: onOpenCode, children: _jsxs(Stack, { g: 3, children: [_jsxs(Stack, { g: 1, children: [_jsx(Text, { as: 'h1', fs: '28px', fw: 780, lh: 1.1, children: "Operations review" }), _jsx(Text, { as: 'h2', fs: '20px', fw: 720, lh: 1.2, children: "Review window and status" }), _jsx(Text, { tone: 'muted', fs: '13px', lh: 1.5, children: "Compact operational text with muted metadata and predictable line height." })] }), _jsxs(Stack, { g: 1, children: [_jsx(Text, { fs: '15px', fw: 700, children: "Body strong text" }), _jsx(Text, { fs: '14px', lh: 1.55, children: "Body regular text for dense forms and tables." }), _jsx(Text, { fs: '12px', tone: 'muted', lh: 1.4, children: "Caption text, helper text and quiet labels." })] }), _jsxs(Flex, { g: 2, wrap: true, children: [_jsx(Text, { tone: 'primary', fw: 700, children: "Primary" }), _jsx(Text, { tone: 'success', fw: 700, children: "Success" }), _jsx(Text, { tone: 'warning', fw: 700, children: "Warning" }), _jsx(Text, { tone: 'danger', fw: 700, children: "Danger" }), _jsx(Text, { tone: 'info', fw: 700, children: "Info" })] }), _jsx(Box, { w: '100%', p: 2, r: 3, style: { background: 'var(--oui-gray-a3)' }, children: _jsx(Text, { display: 'block', truncate: true, children: "This is a long single line value that truncates cleanly inside a constrained row." }) }), _jsxs(Flex, { g: 2, wrap: true, children: [_jsx(Badge, { children: "Neutral" }), _jsx(Badge, { tone: 'primary', children: "Primary" }), _jsx(Badge, { tone: 'success', children: "Success" }), _jsx(Badge, { tone: 'warning', children: "Warning" }), _jsx(Badge, { tone: 'danger', children: "Danger" }), _jsx(Badge, { tone: 'info', children: "Info" })] })] }) }) }), _jsx(UiExampleSection, { id: 'skeleton-example', title: 'Skeleton', description: 'Loading placeholder primitives.', children: _jsx(ExampleTile, { title: 'Skeleton', code: codeSamples.skeleton, onOpen: onOpenCode, children: _jsxs(Stack, { g: 2, children: [_jsx(Skeleton, { h: 16, w: '80%' }), _jsx(Skeleton, { h: 16, w: '64%' }), _jsx(Skeleton, { h: 36 })] }) }) })] }));
+export function TextSection({ onOpenCode }) {
+    return (_jsxs(_Fragment, { children: [_jsx(UiExampleSection, { id: "text", title: "Text", description: "Text and shared system props.", children: _jsx(ExampleTile, { title: "Text", code: codeSamples.text, onOpen: onOpenCode, children: _jsxs(Stack, { g: 3, children: [_jsxs(Stack, { g: 1, children: [_jsx(Text, { as: "h1", fs: "28px", fw: 780, lh: 1.1, children: "Operations review" }), _jsx(Text, { as: "h2", fs: "20px", fw: 720, lh: 1.2, children: "Review window and status" }), _jsx(Text, { tone: "muted", fs: "13px", lh: 1.5, children: "Compact operational text with muted metadata and predictable line height." })] }), _jsxs(Stack, { g: 1, children: [_jsx(Text, { fs: "15px", fw: 700, children: "Body strong text" }), _jsx(Text, { fs: "14px", lh: 1.55, children: "Body regular text for dense forms and tables." }), _jsx(Text, { fs: "12px", tone: "muted", lh: 1.4, children: "Caption text, helper text and quiet labels." })] }), _jsxs(Flex, { g: 2, wrap: true, children: [_jsx(Text, { tone: "primary", fw: 700, children: "Primary" }), _jsx(Text, { tone: "success", fw: 700, children: "Success" }), _jsx(Text, { tone: "warning", fw: 700, children: "Warning" }), _jsx(Text, { tone: "danger", fw: 700, children: "Danger" }), _jsx(Text, { tone: "info", fw: 700, children: "Info" })] }), _jsx(Box, { w: "100%", p: 2, r: 3, style: { background: 'var(--oui-pad-bg)' }, children: _jsx(Text, { display: "block", truncate: true, children: "This is a long single line value that truncates cleanly inside a constrained row." }) }), _jsxs(Flex, { g: 2, wrap: true, children: [_jsx(Badge, { children: "Neutral" }), _jsx(Badge, { tone: "primary", children: "Primary" }), _jsx(Badge, { tone: "success", children: "Success" }), _jsx(Badge, { tone: "warning", children: "Warning" }), _jsx(Badge, { tone: "danger", children: "Danger" }), _jsx(Badge, { tone: "info", children: "Info" })] })] }) }) }), _jsx(UiExampleSection, { id: "skeleton-example", title: "Skeleton", description: "Loading placeholder primitives.", children: _jsx(ExampleTile, { title: "Skeleton", code: codeSamples.skeleton, onOpen: onOpenCode, children: _jsxs(Stack, { g: 2, children: [_jsx(Skeleton, { h: 16, w: "80%" }), _jsx(Skeleton, { h: 16, w: "64%" }), _jsx(Skeleton, { h: 36 })] }) }) })] }));
 }
 export function LayoutSection({ onOpenCode }) {
     const [detailsOpen, setDetailsOpen] = useState(true);
-    return (_jsxs(_Fragment, { children: [_jsx(UiExampleSection, { id: 'flex-example', title: 'Flex', description: 'Row and column alignment primitive.', children: _jsx(ExampleTile, { title: 'Flex', code: codeSamples.layoutFlex, onOpen: onOpenCode, children: _jsxs(Flex, { col: true, g: 3, children: [_jsxs(Flex, { row: true, g: 2, a: 'c', j: 'sb', wrap: true, children: [_jsxs(Flex, { row: true, g: 2, a: 'c', wrap: true, children: [_jsx(Badge, { tone: 'primary', children: "status" }), _jsx(Text, { fw: 700, children: "Task TASK-2048" })] }), _jsxs(Flex, { row: true, g: 1, a: 'c', children: [_jsx(Button, { size: 1, v: 'surface', children: "Cancel" }), _jsx(Button, { size: 1, children: "Apply" })] })] }), _jsx(Flex, { row: true, g: 2, wrap: true, children: ['Intake', 'Review', 'Complete'].map((item, index) => (_jsxs(Flex, { col: true, g: 1, p: 2, r: 3, flex: '1 1 150px', style: { background: 'var(--oui-gray-a3)' }, children: [_jsxs(Text, { fs: '12px', tone: 'muted', children: ["Step ", index + 1] }), _jsx(Text, { fw: 700, children: item })] }, item))) })] }) }) }), _jsx(UiExampleSection, { id: 'stack-example', title: 'Stack', description: 'Vertical spacing primitive.', children: _jsx(ExampleTile, { title: 'Stack', code: codeSamples.layoutStack, onOpen: onOpenCode, children: _jsx(Stack, { g: 2, children: [
-                            ['Created', 'Draft created from intake'],
-                            ['Reserved', 'Capacity is reserved for review'],
-                            ['Scheduled', 'Review window is confirmed'],
-                        ].map(([title, description]) => (_jsxs(Flex, { row: true, g: 2, p: 2, r: 3, a: 's', style: { background: 'var(--oui-gray-a3)' }, children: [_jsx(Box, { size: 8, r: 7, mt: 1, style: { background: 'var(--oui-primary-base)' } }), _jsxs(Stack, { g: 0, children: [_jsx(Text, { fs: '13px', fw: 700, children: title }), _jsx(Text, { fs: '12px', tone: 'muted', lh: 1.45, children: description })] })] }, title))) }) }) }), _jsx(UiExampleSection, { id: 'collapse-example', title: 'Collapse', description: 'Expandable content primitive.', children: _jsx(ExampleTile, { title: 'Collapse', code: codeSamples.layoutCollapse, onOpen: onOpenCode, children: _jsxs(Stack, { g: 2, children: [_jsxs(Flex, { row: true, g: 2, a: 'c', j: 'sb', children: [_jsx(Text, { fw: 700, children: "Item details" }), _jsx(Button, { size: 1, v: 'surface', onClick: () => setDetailsOpen((open) => !open), children: detailsOpen ? 'Hide' : 'Show' })] }), _jsx(Collapse, { open: detailsOpen, children: _jsxs(Stack, { g: 2, p: 2, r: 3, style: { background: 'var(--oui-gray-a3)' }, children: [_jsxs(Flex, { row: true, g: 2, j: 'sb', children: [_jsx(Text, { tone: 'muted', children: "Owner" }), _jsx(Text, { fw: 700, children: "Core team" })] }), _jsxs(Flex, { row: true, g: 2, j: 'sb', children: [_jsx(Text, { tone: 'muted', children: "Window" }), _jsx(Text, { fw: 700, children: "09:00 - 12:00" })] }), _jsxs(Flex, { row: true, g: 2, j: 'sb', children: [_jsx(Text, { tone: 'muted', children: "Priority" }), _jsx(Badge, { tone: 'warning', children: "High" })] })] }) })] }) }) }), _jsx(UiExampleSection, { id: 'surfaces-example', title: 'Surfaces', description: 'Card, Section, Separator and Alert primitives.', children: _jsx(ExampleTile, { title: 'Surfaces', code: codeSamples.surfaces, onOpen: onOpenCode, children: _jsxs(Section, { g: 3, children: [_jsxs(Grid, { columns: 'repeat(auto-fit, minmax(min(100%, 180px), 1fr))', g: 2, children: [_jsx(Card, { v: 'surface', interactive: true, children: _jsxs(Stack, { g: 1, children: [_jsx(Text, { fw: 760, children: "Surface card" }), _jsx(Text, { fs: '12px', tone: 'muted', children: "Default operational surface." })] }) }), _jsx(Card, { v: 'soft', children: _jsxs(Stack, { g: 1, children: [_jsx(Text, { fw: 760, children: "Soft card" }), _jsx(Text, { fs: '12px', tone: 'muted', children: "Quiet grouped content." })] }) }), _jsx(Card, { v: 'classic', children: _jsxs(Stack, { g: 1, children: [_jsx(Text, { fw: 760, children: "Classic card" }), _jsx(Text, { fs: '12px', tone: 'muted', children: "More explicit border and background." })] }) })] }), _jsx(Separator, {}), _jsx(Alert, { title: 'Inventory sync delayed', action: _jsx(Button, { size: 1, v: 'surface', children: "Retry" }), children: "Check this status before creating the next shipment." })] }) }) }), _jsx(UiExampleSection, { id: 'grid-example', title: 'Grid', description: 'Grid layout primitive.', children: _jsx(ExampleTile, { title: 'Grid', code: codeSamples.layoutGrid, onOpen: onOpenCode, children: _jsx(Grid, { columns: 'repeat(3, minmax(0, 1fr))', g: 2, children: ['A', 'B', 'C', 'D', 'E', 'F'].map((item) => (_jsx(Box, { p: 2, r: 3, ta: 'center', style: { background: 'var(--oui-gray-a3)' }, children: _jsx(Text, { fs: '13px', fw: 700, children: item }) }, item))) }) }) }), _jsx(UiExampleSection, { id: 'highlight-primitives-example', title: 'Highlight primitives', description: 'Standalone edge mask primitives.', children: _jsx(ExampleTile, { title: 'Highlight primitives', code: codeSamples.highlights, onOpen: onOpenCode, children: _jsxs("div", { className: 'oui-highlight-demo-surface', style: { background: 'var(--oui-section-nested-solid-bg)' }, children: [_jsx(TopHighlight, { h: 32, color: 'var(--oui-section-nested-solid-bg)', position: 'absolute' }), _jsx(Text, { fs: '13px', fw: 700, children: "Top and bottom highlights" }), _jsx(Text, { fs: '12px', tone: 'muted', children: "One surface shows both edge masks at the same time." }), _jsx(BottomHighlight, { h: 32, color: 'var(--oui-section-nested-solid-bg)', position: 'absolute' })] }) }) }), _jsx(UiExampleSection, { id: 'scroll-area-example', title: 'ScrollArea', description: 'Themed scroll container with optional edge highlights.', children: _jsx(ExampleTile, { title: 'ScrollArea', code: codeSamples.scrollArea, onOpen: onOpenCode, children: _jsxs(Stack, { g: 2, children: [_jsx(ScrollArea, { h: 116, pr: 1, children: _jsx(Stack, { g: 1, children: Array.from({ length: 10 }, (_, index) => (_jsx(Box, { p: 2, r: 3, style: { background: 'var(--oui-gray-a3)' }, children: _jsxs(Text, { fs: '13px', children: ["Scroll row ", index + 1] }) }, index))) }) }), _jsx(ScrollArea, { h: 112, pr: 1, highlights: true, highlightColor: 'var(--oui-section-nested-solid-bg)', highlightTop: { h: 28, mode: 'static', maxOpacity: 0.96 }, highlightBottom: { h: 28, mode: 'static', maxOpacity: 0.96 }, children: _jsx(Stack, { g: 1, children: Array.from({ length: 8 }, (_, index) => (_jsx(Box, { p: 2, r: 3, style: { background: 'var(--oui-gray-a3)' }, children: _jsxs(Text, { fs: '13px', children: ["Both edges row ", index + 1] }) }, index))) }) }), _jsx(ScrollArea, { h: 176, pr: 1, highlights: true, highlightColor: 'var(--oui-section-nested-solid-bg)', highlightTop: {
+    return (_jsxs(_Fragment, { children: [_jsx(UiExampleSection, { id: "flex-example", title: "Flex", description: "Row and column alignment primitive.", children: _jsx(ExampleTile, { title: "Flex", code: codeSamples.layoutFlex, onOpen: onOpenCode, children: _jsxs(Flex, { col: true, g: 3, children: [_jsxs(Flex, { row: true, g: 2, a: "c", j: "sb", wrap: true, children: [_jsxs(Flex, { row: true, g: 2, a: "c", wrap: true, children: [_jsx(Badge, { tone: "primary", children: "status" }), _jsx(Text, { fw: 700, children: "Task TASK-2048" })] }), _jsxs(Flex, { row: true, g: 1, a: "c", children: [_jsx(Button, { size: 1, v: "surface", children: "Cancel" }), _jsx(Button, { size: 1, children: "Apply" })] })] }), _jsx(Flex, { row: true, g: 2, wrap: true, children: ['Intake', 'Review', 'Complete'].map((item, index) => (_jsxs(Flex, { col: true, g: 1, p: 2, r: 3, flex: "1 1 150px", style: { background: 'var(--oui-pad-bg)' }, children: [_jsxs(Text, { fs: "12px", tone: "muted", children: ["Step ", index + 1] }), _jsx(Text, { fw: 700, children: item })] }, item))) })] }) }) }), _jsx(UiExampleSection, { id: "stack-example", title: "Stack", description: "Vertical spacing primitive.", children: _jsx(ExampleTile, { title: "Stack", code: codeSamples.layoutStack, onOpen: onOpenCode, children: _jsx(Stack, { g: 2, children: [
+                            [
+                                '/gallery/cyberpunk-rain.webp',
+                                'Created',
+                                'Draft created from intake',
+                            ],
+                            [
+                                '/gallery/hollywood-star.webp',
+                                'Reserved',
+                                'Capacity is reserved for review',
+                            ],
+                            ['/gallery/ice-cave.webp', 'Scheduled', 'Review window is confirmed'],
+                        ].map(([image, title, description]) => (_jsxs(Flex, { row: true, g: 2, a: "c", w: "min(100%, 360px)", p: "8px 10px", r: 2, style: { background: 'var(--oui-pad-bg)' }, children: [_jsx("img", { src: image, alt: "", style: {
+                                        width: 34,
+                                        height: 34,
+                                        flex: '0 0 34px',
+                                        borderRadius: 999,
+                                        objectFit: 'cover',
+                                    } }), _jsxs(Stack, { g: 0, children: [_jsx(Text, { fs: "13px", fw: 700, children: title }), _jsx(Text, { fs: "12px", tone: "muted", lh: 1.45, children: description })] })] }, title))) }) }) }), _jsx(UiExampleSection, { id: "collapse-example", title: "Collapse", description: "Expandable content primitive.", children: _jsx(ExampleTile, { title: "Collapse", code: codeSamples.layoutCollapse, onOpen: onOpenCode, children: _jsxs(Stack, { g: 2, children: [_jsxs(Flex, { row: true, g: 2, a: "c", j: "sb", children: [_jsx(Text, { fw: 700, children: "Item details" }), _jsx(Button, { size: 1, v: "surface", onClick: () => setDetailsOpen((open) => !open), children: detailsOpen ? 'Hide' : 'Show' })] }), _jsx(Collapse, { open: detailsOpen, children: _jsxs(Stack, { g: 2, p: 2, r: 3, style: { background: 'var(--oui-pad-bg)' }, children: [_jsxs(Flex, { row: true, g: 2, j: "sb", children: [_jsx(Text, { tone: "muted", children: "Owner" }), _jsx(Text, { fw: 700, children: "Core team" })] }), _jsxs(Flex, { row: true, g: 2, j: "sb", children: [_jsx(Text, { tone: "muted", children: "Window" }), _jsx(Text, { fw: 700, children: "09:00 - 12:00" })] }), _jsxs(Flex, { row: true, g: 2, j: "sb", children: [_jsx(Text, { tone: "muted", children: "Priority" }), _jsx(Badge, { tone: "warning", children: "High" })] })] }) })] }) }) }), _jsx(UiExampleSection, { id: "surfaces-example", title: "Surfaces", description: "Card, Section, Separator and Alert primitives.", children: _jsx(ExampleTile, { title: "Surfaces", code: codeSamples.surfaces, onOpen: onOpenCode, children: _jsxs(Section, { g: 3, children: [_jsxs(Grid, { columns: "repeat(auto-fit, minmax(min(100%, 180px), 1fr))", g: 2, children: [_jsx(Card, { v: "surface", interactive: true, children: _jsxs(Stack, { g: 1, children: [_jsx(Text, { fw: 760, children: "Surface card" }), _jsx(Text, { fs: "12px", tone: "muted", children: "Default operational surface." })] }) }), _jsx(Card, { v: "soft", children: _jsxs(Stack, { g: 1, children: [_jsx(Text, { fw: 760, children: "Soft card" }), _jsx(Text, { fs: "12px", tone: "muted", children: "Quiet grouped content." })] }) }), _jsx(Card, { v: "classic", children: _jsxs(Stack, { g: 1, children: [_jsx(Text, { fw: 760, children: "Classic card" }), _jsx(Text, { fs: "12px", tone: "muted", children: "More explicit border and background." })] }) })] }), _jsx(Separator, {}), _jsx(Alert, { title: "Inventory sync delayed", action: _jsx(Button, { size: 1, v: "surface", children: "Retry" }), children: "Check this status before creating the next shipment." })] }) }) }), _jsx(UiExampleSection, { id: "grid-example", title: "Grid", description: "Grid layout primitive.", children: _jsx(ExampleTile, { title: "Grid", code: codeSamples.layoutGrid, onOpen: onOpenCode, children: _jsx(Grid, { columns: "repeat(3, minmax(0, 1fr))", g: 2, children: ['A', 'B', 'C', 'D', 'E', 'F'].map((item) => (_jsx(Box, { p: 2, r: 3, ta: "center", style: { background: 'var(--oui-pad-bg)' }, children: _jsx(Text, { fs: "13px", fw: 700, children: item }) }, item))) }) }) }), _jsx(UiExampleSection, { id: "highlight-primitives-example", title: "Highlight primitives", description: "Standalone edge mask primitives.", children: _jsx(ExampleTile, { title: "Highlight primitives", code: codeSamples.highlights, onOpen: onOpenCode, children: _jsxs("div", { className: "oui-highlight-demo-surface", style: { background: 'var(--oui-section-nested-solid-bg)' }, children: [_jsx(TopHighlight, { h: 32, color: "var(--oui-section-nested-solid-bg)", position: "absolute" }), _jsx(Text, { fs: "13px", fw: 700, children: "Top and bottom highlights" }), _jsx(Text, { fs: "12px", tone: "muted", children: "One surface shows both edge masks at the same time." }), _jsx(BottomHighlight, { h: 32, color: "var(--oui-section-nested-solid-bg)", position: "absolute" })] }) }) }), _jsx(UiExampleSection, { id: "scroll-area-example", title: "ScrollArea", description: "Themed scroll container with optional edge highlights.", children: _jsx(ExampleTile, { title: "ScrollArea", code: codeSamples.scrollArea, onOpen: onOpenCode, children: _jsxs(Stack, { g: 2, children: [_jsx(ScrollArea, { h: 116, pr: 1, children: _jsx(Stack, { g: 1, children: Array.from({ length: 10 }, (_, index) => (_jsx(Box, { p: 2, r: 3, style: { background: 'var(--oui-pad-bg)' }, children: _jsxs(Text, { fs: "13px", children: ["Scroll row ", index + 1] }) }, index))) }) }), _jsx(ScrollArea, { h: 112, pr: 1, highlights: true, highlightColor: "var(--oui-section-nested-solid-bg)", highlightTop: { h: 28, mode: 'static', maxOpacity: 0.96 }, highlightBottom: { h: 28, mode: 'static', maxOpacity: 0.96 }, children: _jsx(Stack, { g: 1, children: Array.from({ length: 8 }, (_, index) => (_jsx(Box, { p: 2, r: 3, style: { background: 'var(--oui-pad-bg)' }, children: _jsxs(Text, { fs: "13px", children: ["Both edges row ", index + 1] }) }, index))) }) }), _jsx(ScrollArea, { h: 176, pr: 1, highlights: true, highlightColor: "var(--oui-section-nested-solid-bg)", highlightTop: {
                                     h: 42,
                                     mode: 'scroll',
                                     start: 50,
@@ -35,5 +49,5 @@ export function LayoutSection({ onOpenCode }) {
                                         ['Delivered', 'The gradient uses the solid surface color.'],
                                         ['Checked', 'Content remains readable under the fade.'],
                                         ['Archived', 'The bottom edge disappears at the end.'],
-                                    ].map(([title, description], index) => (_jsxs(Flex, { row: true, g: 2, p: 2, r: 3, a: 'c', style: { background: 'var(--oui-gray-a3)' }, children: [_jsx(Badge, { tone: index < 3 ? 'primary' : 'info', children: index + 1 }), _jsxs(Stack, { g: 0, children: [_jsx(Text, { fs: '13px', fw: 700, children: title }), _jsx(Text, { fs: '12px', tone: 'muted', children: description })] })] }, title))) }) })] }) }) }), _jsx(UiExampleSection, { id: 'system-radius-example', title: 'System radius', description: 'Radius system prop scale.', children: _jsxs(ExampleTile, { title: 'System radius', code: codeSamples.systemRadius, onOpen: onOpenCode, children: [_jsx(Flex, { g: 2, a: 'c', wrap: true, children: [0, 2, 4, 6, 7].map((radius) => (_jsx(Box, { size: 32, r: radius, display: 'flex', a: 'c', j: 'c', style: { background: 'var(--oui-gray-a3)' }, children: _jsx(Text, { fs: '12px', fw: 700, children: radius }) }, radius))) }), _jsx(Button, { mt: 2, v: 'pad', r: 7, children: "Button r=7" })] }) })] }));
+                                    ].map(([title, description], index) => (_jsxs(Flex, { row: true, g: 2, p: 2, r: 3, a: "c", style: { background: 'var(--oui-pad-bg)' }, children: [_jsx(Badge, { tone: index < 3 ? 'primary' : 'info', children: index + 1 }), _jsxs(Stack, { g: 0, children: [_jsx(Text, { fs: "13px", fw: 700, children: title }), _jsx(Text, { fs: "12px", tone: "muted", children: description })] })] }, title))) }) })] }) }) }), _jsx(UiExampleSection, { id: "system-radius-example", title: "System radius", description: "Radius system prop scale.", children: _jsxs(ExampleTile, { title: "System radius", code: codeSamples.systemRadius, onOpen: onOpenCode, children: [_jsx(Flex, { g: 2, a: "c", wrap: true, children: [0, 2, 4, 6, 7].map((radius) => (_jsx(Box, { size: 32, r: radius, display: "flex", a: "c", j: "c", style: { background: 'var(--oui-pad-bg)' }, children: _jsx(Text, { fs: "12px", fw: 700, children: radius }) }, radius))) }), _jsx(Button, { mt: 2, v: "pad", r: 7, children: "Button r=7" })] }) })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ExampleDataSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleDataSection.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAc,KAAK,WAAW,EAAC,MAAM,eAAe,CAAC;AAG5D,KAAK,gBAAgB,GAAG;IACpB,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9C,CAAC;AA2DF,wBAAgB,WAAW,CAAC,EAAC,UAAU,EAAC,EAAE,gBAAgB,2CA0KzD"}
+{"version":3,"file":"ExampleDataSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleDataSection.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAG9D,KAAK,gBAAgB,GAAG;IACpB,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9C,CAAC;AA2DF,wBAAgB,WAAW,CAAC,EAAE,UAAU,EAAE,EAAE,gBAAgB,2CAwK3D"}

package/dist/example/ExampleDataSection.js

@@ -64,11 +64,11 @@ export function DataSection({ onOpenCode }) {
     const [columnWidths, setColumnWidths] = useState({});
     const [page, setPage] = useState(2);
     const filteredRows = useMemo(() => sortRows(rows.filter((row) => rowMatches(row, query)), sort), [query, sort]);
-    return (_jsxs(_Fragment, { children: [_jsx(UiExampleSection, { id: 'data-table-example', title: 'DataTable', description: 'Reusable DataTable without CRUD or page-level entity logic.', children: _jsx(ExampleTile, { className: 'oui-ui-table-tile', title: 'DataTable', code: codeSamples.data, onOpen: onOpenCode, children: _jsxs("div", { className: 'oui-ui-table-demo', children: [_jsx(DataTable, { toolbar: (_jsxs(_Fragment, { children: [_jsx(TextField, { value: query, placeholder: 'Filter rows', clearable: true, onChange: (event) => setQuery(event.target.value), onClear: () => setQuery('') }), _jsx(Button, { size: 3, v: 'surface', onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(UiExampleSection, { id: "data-table-example", title: "DataTable", description: "Reusable DataTable without CRUD or page-level entity logic.", children: _jsx(ExampleTile, { className: "oui-ui-table-tile", title: "DataTable", code: codeSamples.data, onOpen: onOpenCode, children: _jsxs("div", { className: "oui-ui-table-demo", children: [_jsx(DataTable, { toolbar: _jsxs(_Fragment, { children: [_jsx(TextField, { value: query, placeholder: "Filter rows", clearable: true, onChange: (event) => setQuery(event.target.value), onClear: () => setQuery('') }), _jsx(Button, { size: 3, v: "surface", onClick: () => {
                                                 setVisibleColumnKeys(defaultVisibleColumnKeys);
                                                 setColumnOrder(defaultColumnOrder);
                                                 setColumnWidths({});
-                                            }, children: "Reset" })] })), rowKey: (row) => row.name, rows: filteredRows, columns: columns, sort: sort, onSortChange: (nextSort) => setSort(Array.isArray(nextSort) ? nextSort[0] ?? null : nextSort), selectable: true, selectedRowKeys: selectedRowKeys, onSelectedRowKeysChange: setSelectedRowKeys, total: rows.length, emptyText: 'No rows match the filter.', columnSettings: {
+                                            }, children: "Reset" })] }), rowKey: (row) => row.name, rows: filteredRows, columns: columns, sort: sort, onSortChange: (nextSort) => setSort(Array.isArray(nextSort) ? (nextSort[0] ?? null) : nextSort), selectable: true, selectedRowKeys: selectedRowKeys, onSelectedRowKeysChange: setSelectedRowKeys, total: rows.length, emptyText: "No rows match the filter.", columnSettings: {
                                     columns,
                                     visibleColumnKeys,
                                     onVisibleColumnKeysChange: setVisibleColumnKeys,
@@ -93,9 +93,9 @@ export function DataSection({ onOpenCode }) {
                                         tone: 'danger',
                                         onSelect: () => undefined,
                                     },
-                                ] }), _jsx("div", { className: 'oui-ui-table-variants', children: _jsxs("div", { className: 'oui-ui-table-variant', children: [_jsx(Text, { fs: '13px', fw: 760, children: "Plain table" }), _jsx(DataTable, { rowKey: (row) => row.name, rows: rows.slice(0, 4), columns: columns, sort: sort, onSortChange: (nextSort) => setSort(Array.isArray(nextSort)
-                                                ? nextSort[0] ?? null
-                                                : nextSort), total: rows.length, emptyText: 'No rows.' })] }) })] }) }) }), _jsx(UiExampleSection, { id: 'table-primitives-example', title: 'Table and pagination', description: 'Low-level Table primitive and page navigation.', children: _jsx(ExampleTile, { title: 'Table and pagination', code: codeSamples.tablePagination, onOpen: onOpenCode, children: _jsxs(Stack, { g: 3, children: [_jsxs(Table, { v: 'surface', w: '100%', children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.ColumnHeaderCell, { children: "Document" }), _jsx(Table.ColumnHeaderCell, { children: "Status" }), _jsx(Table.ColumnHeaderCell, { align: 'right', children: "Qty" })] }) }), _jsx(Table.Body, { children: rows.slice(0, 3).map((row) => (_jsxs(Table.Row, { children: [_jsx(Table.RowHeaderCell, { children: row.name }), _jsx(Table.Cell, { children: _jsx(Badge, { tone: statusTone(row.status), children: row.status }) }), _jsx(Table.Cell, { align: 'right', children: row.quantity })] }, row.name))) })] }), _jsxs(Flex, { j: 'sb', a: 'c', wrap: true, g: 2, children: [_jsx(Text, { fs: '13px', tone: 'muted', children: "Showing 25 items per page" }), _jsx(Pagination, { page: page, pageCount: 4, onPageChange: setPage })] })] }) }) })] }));
+                                ] }), _jsx("div", { className: "oui-ui-table-variants", children: _jsxs("div", { className: "oui-ui-table-variant", children: [_jsx(Text, { fs: "13px", fw: 760, children: "Plain table" }), _jsx(DataTable, { rowKey: (row) => row.name, rows: rows.slice(0, 4), columns: columns, sort: sort, onSortChange: (nextSort) => setSort(Array.isArray(nextSort)
+                                                ? (nextSort[0] ?? null)
+                                                : nextSort), total: rows.length, emptyText: "No rows." })] }) })] }) }) }), _jsx(UiExampleSection, { id: "table-primitives-example", title: "Table and pagination", description: "Low-level Table primitive and page navigation.", children: _jsx(ExampleTile, { title: "Table and pagination", code: codeSamples.tablePagination, onOpen: onOpenCode, children: _jsxs(Stack, { g: 3, children: [_jsxs(Table, { v: "surface", w: "100%", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.ColumnHeaderCell, { children: "Document" }), _jsx(Table.ColumnHeaderCell, { children: "Status" }), _jsx(Table.ColumnHeaderCell, { align: "right", children: "Qty" })] }) }), _jsx(Table.Body, { children: rows.slice(0, 3).map((row) => (_jsxs(Table.Row, { children: [_jsx(Table.RowHeaderCell, { children: row.name }), _jsx(Table.Cell, { children: _jsx(Badge, { tone: statusTone(row.status), children: row.status }) }), _jsx(Table.Cell, { align: "right", children: row.quantity })] }, row.name))) })] }), _jsxs(Flex, { j: "sb", a: "c", wrap: true, g: 2, children: [_jsx(Text, { fs: "13px", tone: "muted", children: "Showing 25 items per page" }), _jsx(Pagination, { page: page, pageCount: 4, onPageChange: setPage })] })] }) }) })] }));
 }
 function sortRows(rows, sort) {
     if (!sort)

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

@@ -1 +1 @@
-{"version":3,"file":"ExampleFieldsSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleFieldsSection.tsx"],"names":[],"mappings":"AA4BA,OAAO,EAAc,KAAK,WAAW,EAAC,MAAM,eAAe,CAAC;AAG5D,KAAK,cAAc,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,SAAS,EAAE,cAAc,CAAC;IAC1B,iBAAiB,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACnD,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9C,CAAC;AAqBF,wBAAgB,aAAa,CAAC,EAC1B,YAAY,EACZ,oBAAoB,EACpB,SAAS,EACT,iBAAiB,EACjB,SAAS,EACT,iBAAiB,EACjB,UAAU,GACb,EAAE,kBAAkB,2CA4SpB"}
+{"version":3,"file":"ExampleFieldsSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleFieldsSection.tsx"],"names":[],"mappings":"AA4BA,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAG9D,KAAK,cAAc,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,SAAS,EAAE,cAAc,CAAC;IAC1B,iBAAiB,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACnD,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9C,CAAC;AAqBF,wBAAgB,aAAa,CAAC,EAC1B,YAAY,EACZ,oBAAoB,EACpB,SAAS,EACT,iBAAiB,EACjB,SAAS,EACT,iBAAiB,EACjB,UAAU,GACb,EAAE,kBAAkB,2CA4RpB"}